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 ( label)

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