Shulou(Shulou.com)05/31 Report--

This article introduces the relevant knowledge of "HTML coding specification case analysis". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

HTML coding specification

The goal of this document is to keep the style of HTML code consistent, easy to understand and maintain, if you don't have this habit, please choose your IDE and stop using a "text editor".

1 code style

1.1 indentation and line wrapping

[force] use 4 spaces as an indentation level, 2 spaces or tab characters are not allowed.

Example:

First second

[recommended] each line must not exceed 120 characters.

Explanation:

Long code is not easy to read and maintain. But considering the particularity of HTML, without rigid requirements, sublime, phpstorm, wenstorm and so on all have ruler function.

1.2 naming

[mandatory] class must have all-letter lowercase words separated by -.

[mandatory] class must represent the content or function of the corresponding module or part and must not be named after style information.

Example:

The element id must ensure that the page is unique.

Explanation:

On the same page, different elements contain the same id, which does not conform to the attribute meaning of id. And when using document.getElementById, it may cause problems that are difficult to trace.

[suggestion] id recommends that words be lowercase and separated by -. The style must be consistent with the project.

[recommended] the naming of id and class should be as short as possible on the premise of avoiding conflicts and describing clearly.

Example:

[force] on the same page, avoid using the same name and id.

Explanation:

IE browsers confuse the id and name attributes of elements, and document.getElementById may get unexpected elements. So you need to be very careful when naming the id and name attributes of an element.

A good practice is to use different naming methods for id and name.

Example:

/ / IE6 will display INPUTalert (document.getElementById ('foo') .tagName)

1.3 label

[mandatory] the signature must be in lowercase letters.

Example:

Hello StyleGuide!

Hello StyleGuide!

[force] for labels that do not require self-closing, self-closing is not allowed.

Explanation:

Common self-closing tags are input, br, img, hr and so on.

Example:

[force] closed tags that are allowed to be omitted in HTML5 are not allowed to be omitted.

Example:

First second first second

[mandatory] the use of tags must comply with the rules of label nesting.

Explanation:

For example, div must not be placed in p, and tbody must be placed in table.

Example:

[recommended] the use of HTML tags should follow the semantics of the tags.

Explanation:

Here are the common tag semantics

P-paragraph h2, del, h3, 4, 5, 5, and 5, strong,em-level heading strong,em-emphasize ins-insert del-delete abbr-abbreviation code-code identification cite-title Q-quote source work Q-quote blockquote-one paragraph or long quote ul-unordered list ol-ordered list dl,dt,dd-definition list

Example:

Esprima serves as an important building block for some JavaScript language tools.

Esprima serves as an important building block for some JavaScript language tools.

[recommended] tables should not be used for layout when CSS can achieve the same requirements.

Explanation:

Semantic correctness should be maintained as far as possible when compatibility permits. Exceptions are allowed for scenarios that have strict requirements for grid alignment and stretching, such as multi-column complex forms.

[suggestion] the use of labels should be as concise as possible to reduce unnecessary labels.

Example:

1.4 Properties

[mandatory] property names must be in lowercase letters.

Example:

.

[mandatory] attribute values must be enclosed in double quotes.

Explanation:

Single quotation marks are not allowed, and quotation marks are not allowed.

Example:

[recommended] attributes of Boolean type, it is recommended not to add attribute values.

Example:

[recommended] Custom attributes are recommended to be prefixed with xxx-, and data- is recommended.

Explanation:

Using prefixes helps to distinguish between custom attributes and those defined by the standard.

Example:

2 general purpose

2.1 DOCTYPE

[force] use HTML5's doctype to enable standard mode. Uppercase DOCTYPE is recommended.

Example:

[recommended] enable IE Edge and Chrome Frame mode.

Example:

[recommended] set the correct lang attribute on the html tag.

Explanation:

Help to improve the accessibility of the page, such as: let the speech synthesis tool determine the pronunciation it should use, make the translation tool determine its translation language, and so on.

Example:

[recommended] Open the webkit kernel of the dual-core browser for rendering.

Explanation:

See the browser kernel control Meta tag description document.

Example:

[recommended] enable DNS prefetching of the browser.

Explanation:

Reduce the number of DNS requests and prefetch DNS.

Example:

2.2 Encoding

[mandatory] the page must be in a simplified form that explicitly specifies the character encoding. The meta that specifies the character encoding must be the first direct child element of the head.

Explanation:

See if HTML5 Charset can be used.

Example:

. .

[recommended] UTF-8 encoding without BOM is used for HTML files.

Explanation:

UTF-8 coding has a wider range of adaptability. BOM may cause unnecessary interference when using programs or tools to process files.

2.3 introduction of CSS and JavaScript

[mandatory] rel= "stylesheet" must be specified when introducing CSS.

Example:

[recommended] it is not necessary to specify the type attribute when introducing CSS and JavaScript.

Explanation:

Text/css and text/javascript are the default values for type.

[recommended] presentation definitions are placed in the external CSS, and behavior definitions are placed in the external JavaScript.

Explanation:

Structure-style-behavior code separation is beneficial to improve the readability and maintainability of the code.

[suggestion] introduce all the CSS resources needed for the page in head.

Explanation:

During page rendering, the new CSS may cause the style of the element to be recalculated and drawn, and the page to flicker.

[recommended] JavaScript should be placed at the end of the page or loaded asynchronously.

Explanation:

Placing script in the middle of the page will block the rendering of the page. For performance reasons, follow this recommendation if it is not necessary.

Example:

[mandatory] the URL protocol part that references static resources is the same as the page. It is recommended to omit the protocol prefix.

Example:

3 Head

3.1 title

[mandatory] the page must contain a title tag declaration title.

[mandatory] title must be a direct child of head, immediately after the declaration.

Explanation:

If the title contains characters other than ascii, the browser needs to know the character encoding type before it can be decoded, otherwise it may lead to garbled code.

Example:

Page title

4 Pictures

[force] the src value of img is prohibited from being empty. Delayed loading of images also needs to add the default src.

Explanation:

If the value of src is empty, it will cause some browsers to reload the current page. Refer to:

Https://developer.yahoo.com/performance/rules.html#emptysrc

[recommended] avoid adding unnecessary title attributes to img.

Explanation:

The extra title affects the image viewing experience and increases the page size.

[recommended] add alt attributes to important images.

Explanation:

It can improve the user experience when the picture fails to load.

[recommended] add width and height attributes to avoid page jitter.

[recommended] img tags are used for images with download requirements, and CSS background images are used for images without download requirements.

Explanation:

Product logo, user avatars, user-generated pictures and other pictures with potential download needs are implemented in the form of img, which can be easily downloaded by users.

Images without download requirements, such as icon, background, pictures used by the code, etc., should be implemented with css background images as far as possible.

5 form

5.1 Control title

[force] controls with text titles must be associated with their titles using label tags.

Explanation:

There are two ways:

Place the control inside the label.

The for property of label points to the id of the control.

The first is recommended to reduce unnecessary id. If the DOM structure does not allow direct nesting, the second should be used.

Example:

I have confirmed the above terms and conditions of user name:

5.2 Button

[mandatory] the value of the type attribute must be specified when using the button element.

Explanation:

The default type of the button element is submit, and if it is placed in the form element, clicking will cause the form to be submitted. In order to display and distinguish its function, it is easy to understand that the type attribute must be given.

Example:

Submit cancellation

[recommended] try not to use the name attribute of button class elements.

Explanation:

Due to browser compatibility issues, using the name property of buttons can cause a lot of problems that are hard to find. Please refer to this article for details.

5.3 accessibility (A11Y)

[recommendation] the buttons responsible for the main functions should be placed first in DOM.

Explanation:

The buttons responsible for the main functions should be relatively front to improve accessibility. If float: right is specified in the CSS, it may cause the main button on the visual front and the back of the main button in the DOM.

Example:

.submission. Button-group {float: right;} cancel submission. Cancel button {float: right;} cancel submission

[recommended] when using JavaScript for form submission, the native submission function should be made to work properly if conditions permit.

Explanation:

When the browser JS runs incorrectly or closes JS, the submit function will not work. If the action property of the form element and the name property of the form control are correctly specified, the submission can continue.

Example:

[recommended] when developing pages for mobile devices, specify the type property of the input box according to the content type.

Explanation:

If you specify the input box type according to the content type, you can get a friendly input experience.

Example:

6 HTML in the template

[recommended] the indentation of template code gives priority to the indentation rules of HTML code.

Example:

{name} {$item.name}

[suggestion] the basic principle of template code is to ensure the correctness of HTML single tag syntax.

Example:

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.