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

<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></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

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

<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>

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.