Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home > Web Front-end > HTML Tutorial > Coding specifications for html and css

Coding specifications for html and css

WBOY
Release： 2016-08-30 09:21:06
Original
1157 people have browsed it

HTML and CSS coding specification content

1. HTML specification

2. CSS specifications

3. Notes:

4. Commonly used naming rules

5. CSS style sheet file naming

6. File naming rules

1. HTML specification:

1. Code specifications

  • Add the standards mode declaration to the first line of the page
  • Code indentation: Set four spaces with the tab key (usually set the corresponding space size in the lower right corner of the software)
  • Except for DOC and 'UTF-8' at the beginning or special circumstances in the head, which can be capitalized, everything else is lowercase, and CSS classes are all lowercase
  • It is recommended to specify the lang attribute for the html root element to set the correct language for the document lang="zh-CN"
  • Different doctypes will trigger different rendering modes in different browsers 
<code class="hljs xml"><span class="hljs-doctype"><!DOCTYPE html>
<span class="hljs-tag"><<span class="hljs-title">html <span class="hljs-attribute">lang=<span class="hljs-value">"zh-CN">
  <span class="hljs-tag"><<span class="hljs-title">head>
      <span class="hljs-tag"><<span class="hljs-title">meta <span class="hljs-attribute">charset=<span class="hljs-value">"UTF-8">
      <span class="hljs-tag"><<span class="hljs-title">meta <span class="hljs-attribute">http-equiv=<span class="hljs-value">"X-UA-Compatible" <span class="hljs-attribute">content=<span class="hljs-value">"IE=Edge">
  <span class="hljs-tag"></<span class="hljs-title">head>
  ....
<span class="hljs-tag"></<span class="hljs-title">html>
</span></span></span></span></span></span></span></code>
Copy after login
  • Don’t use @import
    • Compared with the tag, the @import command is much slower, which not only increases the number of additional requests, but also causes unpredictable problems. Alternatives include the following:
      • Use multiple elements
      • Compile multiple CSS files into one file through a CSS preprocessor like Sass or Less
      • CSS file merging function provided through Rails, Jekyll or other systems
<code class="hljs xml"><span class="hljs-comment"><!-- Use link elements -->
<span class="hljs-tag"><<span class="hljs-title">link <span class="hljs-attribute">rel=<span class="hljs-value">"stylesheet" <span class="hljs-attribute">href=<span class="hljs-value">"core.css">

<span class="hljs-comment"><!-- Avoid @imports -->
<span class="hljs-tag"><<span class="hljs-title">style><span class="css">
  <span class="hljs-at_rule">@<span class="hljs-keyword">import <span class="hljs-function">url(<span class="hljs-string">"more.css");
<span class="hljs-tag"></<span class="hljs-title">style>
</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>
Copy after login

Introduce CSS and JavaScript files
  • According to the HTML5 specification, there is usually no need to specify type when introducing CSS and JS, because text/css and text/javascript are their default values ​​respectively
<code class="hljs xml"><span class="hljs-comment"><!-- External CSS -->
<span class="hljs-tag"><<span class="hljs-title">link <span class="hljs-attribute">rel=<span class="hljs-value">"stylesheet" <span class="hljs-attribute">href=<span class="hljs-value">"code-guide.css">

<span class="hljs-comment"><!-- In-document CSS -->
<span class="hljs-tag"><<span class="hljs-title">style><span class="css">
 <span class="hljs-comment">/* ... */
<span class="hljs-tag"></<span class="hljs-title">style>

<span class="hljs-comment"><!-- JavaScript -->
<span class="hljs-tag"><<span class="hljs-title">script <span class="hljs-attribute">src=<span class="hljs-value">"code-guide.js"><span class="undefined"><span class="hljs-tag"></<span class="hljs-title">script>
</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>
Copy after login

2. Comments


  • Note: Do not leave a space after the --. If you leave a space, add spaces to all other comments (to facilitate subsequent program development). In other words, the comments must be unified globally

eg:


For writing standards, it is best to have a beginning and an end for every comment required to reduce subsequent trouble and mistake. Don't wrap the line. The same goes for CSS and JS comments.



is a writing standard. It is best to have a beginning and an end for every comment required to reduce subsequent troubles. and errors. Don't wrap the line. The same goes for CSS and JS comments.