Usage rules: 1. The class attribute of the tag must use lowercase letters, use "-" to separate the words, and cannot be named with built-in styles; 2. The id attribute of the tag must remain unique on the page; 3 , Tag names must use lowercase letters; 4. The use of tags must comply with the nesting rules of tags; 5. The use of tags must follow the semantics of the tags.
The operating environment of this tutorial: Windows 10 system, HTML5 version, Dell G3 computer.
1. Naming rules
[Mandatory]class: all words must be in lowercase letters, words They are separated by - and must represent the content or function of the corresponding module or component. They must not be named after the built-in HTML style. The naming should have clear semantics.
[Mandatory]id: must remain unique in the page, and the naming should have clear semantics.
2. Tag
[Mandatory]The tag name in Html must use lowercase letters.
[Mandatory] The closing of the tag must comply with the regulations of HTML5.
[Mandatory] The use of tags must comply with the nesting rules of tags. For example: p must not be placed in p, and tbody must be placed in table.
[Recommendation] The use of tags must follow the semantics of the tags, for example:
p - Paragraph
h1,h2,h3,h4,h5,h6- Hierarchical title
strong,em - emphasize
ins - insert
del - delete
abbr - abbreviation
code - code identification
cite - The title of the work cited from the source
q - Quote
blockquote - One paragraph or long quotation
ul - Unordered list
ol - Ordered list
dl,dt,dd - Definition list
[Recommendation] Tables must not be used for layout when CSS can achieve the same requirement.
3. Attributes
[Mandatory] Attributes must use lowercase letters, and their attribute values must be surrounded by double quotes.
[Suggestion] Boolean type suggestions do not add attribute values. It is recommended that custom attributes be prefixed with xxx- and data-
4 is recommended. DOCTYPE
[Mandatory] Use doctype to enable standard mode. It is recommended to use uppercase DOCTYPE
5. Language encoding
[Suggestion] It helps to improve the accessibility of the page. The correct lang attribute must be set, for example:
[Mandatory] The page must specify the character encoding meta, and it must be the first direct child element of head, for example:
6. Introduction of CSS and JavaScript
[Mandatory] You must specify rel="stylesheet" when introducing css, and you must specify the type attribute when introducing css and javascript.
[Recommendation]Javascript code must be placed at the end of the page or loaded asynchronously.
7. Head content
[Mandatory] The Title tag must be set as a direct child element of the head and immediately following the charset statement.
[Mandatory] Favicon is guaranteed to be accessible, for example:
[Mandatory] The Viewport attribute must be specified.
8. Pictures
[Mandatory] Prohibit the src value of img from being empty, and the default src attribute value must also be added to lazy-loaded pictures.
[Recommendation] Add alt attribute value to important images.
[Recommendation]Add width and height attributes to avoid page jitter.
9. Control title
[Mandatory] A control with a text title must use the label tag to associate it with its title, for example:
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
