Home >Web Front-end >HTML Tutorial >Front-end specification 1-HTML specification_html/css_WEB-ITnose
HTML specification
1 Code style (refer to 1,)
Use Tab characters (four spaces Length)
When there are too many hierarchical relationships, try to write it in one line, but ensure that each line of code should not be too long
Example, the code should not be too long
Example , try to write it in one line
2 Naming (see 1,)
class must be lowercase, use - between words, not _( Underline) to connect
Try to be as semantic as possible (prioritize English and English abbreviations, followed by pinyin, and then use component positioning and other methods (such as con-left))
Example
The id must be unique for this page
The same page should avoid naming the same name and id (IE confusion), see 1
Explanation: IE6 Compatibility issues
3 tags (refer to 1,)
On the premise of ensuring semantics and style, reduce the number of tags as much as possible
tag The name must be lowercase (e.g.
)Closing tag
Start another discussion, link:
The use of tags must comply with tag embedding Set of rules
Start another discussion, link:
HTML tags follow tag semantics
Start another discussion, link:
Tags Use it as concisely as possible, reduce unnecessary tags, reduce levels, flatten
4 attribute names
Must use lowercase letters
Attribute values must use double quotes instead of single quotes, refer to 1,
It is recommended to use xxx- as the prefix for custom attributes, and data- is recommended, refer to 1
Order (see 1 , ctrl F: Attribute order)
using ’ s ’ using ’s ’ using ’s ’ s through using ’ through ’s ’ through through through ‐ to ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ 1 src, for,type,href
title,alt
aria-*,role
Boolean attribute
Boolean attribute (attribute value == attribute), it is recommended not to add Attribute value
The presence of the Boolean attribute in an element represents the value true, and its absence represents the value false.
Example:
5head internal tag (see 1 common)
Use
Use IE Edge mode, refer to 1 (but this attribute is not used now, so keep it temporarily)
It is recommended to set Conducive to language Tool translation pronunciation
The character encoding must be the first in the
tag;> title must be used as a direct child element of head and immediately after the charset declaration.
You must specify rel="stylesheet" when introducing CSS, parameter 1
There is no need to specify the type attribute when introducing CSS and JS (because the specified value is the default value)
Place the JS script at the bottom of the page or use asynchronous loading
There is no need to specify the type when introducing CSS and JavaScript.
When using favicon, the browser requests favicon.ico in the root directory of the Web Server by default. One of the following methods must be used
1. Place the favicon.ico file in the root directory of the Web Server
2. Use link to specify the favicon.
🎜>
Use spaces at both ends of the comment, and use a backslash "close" to end the comment.Example
🎜> Avoid adding unnecessary title attributes and add alt attributes to important images
There are also objections to these two, so let’s start another discussion, link:
Add weidth and height attributes , to avoid page jitter
The meaning here should be that the image size changes affect the page layout when the image is not loaded and after the image is loaded
The image downloaded by the user needs to use the img tag instead of background Background image Use sprite image
Form
Control title (
1. Place the control Place it inside label. (Recommended)
2. The for attribute of label points to the id of the control.
Example:
Button
You must specify the type attribute value when using the button element (submit and cancel buttons) Important tags to improve accessibility The code should come first (for example, submit before reset), use style control
When developing pages for mobile devices, specify the type attribute of the input box according to the content type.
When using JavaScript for form submission, the native submission function should work properly if conditions permit.
Multimedia
Audio: MP3, WAV, Ogg
Video: MP4, WebM, Ogg
Prioritize audio and video The tag defines audio and video, and indicates the tag description that the browser does not support in the object tag.
Try not to play automatically.
Template