Shulou(Shulou.com)06/02 Report--

This article mainly introduces "what are the knowledge points of the HTML specification". In the daily operation, I believe that many people have doubts about the knowledge points of the HTML specification. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the questions of "what are the knowledge points of the HTML specification?" Next, please follow the editor to study!

HTML specification

1 preface

As a hypertext markup language to describe the structure of web pages, HTML has been widely used. The goal of this document is to make the HTML code style consistent in internal development, making the project easier to understand and maintain.

2 code style

2.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. However, taking into account the particularity of HTML, do not make mandatory requirements.

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

[forced] 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] forbids the creation of class without style information for hook scripts.

Explanation:

Class is not allowed to be used only for JavaScript to select certain elements, and class should have clear semantics and styles. Otherwise, it will easily lead to the flooding of css class.

Using id and attribute selection as hook is a better way.

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

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

Explanation:

Exceptions can be made in scenarios where the size of the code is very strict. For example: the delivery system used by third-party pages.

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.

For detailed label nesting rules, see the Elements definition section in HTML DTD.

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

Explanation:

Here are the common tag semantics

P-paragraph

H _ 2 ~ 2, h _ 3, h _ 4, h _ 5, h _ 6, h _ 7-level title

Strong,em-emphasize

Ins-insert

Del-Delet

Abbr-acronym

Code-Code identification

Cite-quote the title of the source work

Q-citation

Blockquote-A paragraph or a 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:

2.4 Properties

[mandatory] property names must be in lowercase letters.

Example:

.

[mandatory] attribute values must be enclosed in double quotation marks (excluding iView, element and other component libraries).

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:

3 General purpose

3.1 DOCTYPE

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

Example:

[recommended] enable IE Edge 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:

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

3.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:

[recommended] for Web applications designed only for modern browsers in a mobile environment, if the URL protocol part that references external resources is the same as the page, it is recommended to omit the protocol prefix.

Explanation:

Use protocol-relative URL to introduce CSS, and under IE7/8, two requests will be made. Whether or not to use protocol-relative URL should take full account of the environment in which the page is targeted.

Example:

4 head

4.1 title

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

[mandatory] title must be a direct child of head, immediately following the charset 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.2 favicon

[mandatory] ensure that favicon is accessible.

Explanation:

When favicon is not specified, most browsers request favicon.ico under the root directory of Web Server. In order to ensure that favicon is accessible and avoid 404, one of the following two methods must be followed:

Place the favicon.ico file in the Web Server root directory.

Use link to specify favicon.

Example:

4.3 viewport

[suggestion] if the page is mobile-friendly, you need to specify the viewport of the page.

Explanation:

Viewport meta tag can set the width of the visual area and the initial zoom size to avoid abnormal page display on mobile devices.

For example, if you want iOS device-friendly when the page width is less than 980px, you should set the width value of viewport to suit your page width. At the same time, because the resolution of different mobile devices is different, you should use the device-width and device-height variables when setting up.

In addition, in order to make viewport work properly, the page content style layout design should also be adjusted accordingly, such as avoiding absolute positioning and so on. For more information about viewport, see the introduction to Safari Web Content Guide.

5 Pictures

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

Explanation:

The value of src is empty, which will cause some browsers to reload the current page. Refer to: developer.yahoo.com/performance …

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

6 form

6.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:

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

6.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:

7. Multimedia

[suggestion] when using audio and video tags to play audio and video in modern browsers, you should pay attention to the format.

Explanation:

Audio should be covered as much as possible in the following format:

MP3

WAV

Ogg

The video should be covered in the following format as far as possible:

MP4

WebM

Ogg

[recommended] audio and video tags are preferred in browsers that support HTML5 to define audio and video elements.

[recommended] support for multiple browsers by degenerating to plug-ins.

Example:

[recommended] enable automatic playback of audio and video only when necessary.

[recommended] provide a description inside the object tag indicating that the browser does not support the tag.

Example:

DO NOT SUPPORT THIS TAG

8 HTML in the template

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

Example:

{if $display = = true} {foreach $item_list as $item} {$item.name} {/ foreach} {if $display = = true} {foreach $item_list as $item} {$item.name} {/ foreach} {/ if}

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

Example:

{$item.type_name} {$item.type_name}

[suggestion] when cycling the template data to construct a table, if a fixed number of output per row is required, it is recommended to group the data first, and then loop the output.

Example:

{foreach $item_list as $item_group} {foreach $item_group as $item} {$item.name} {/ foreach} {foreach $item_list as $item} {$item.name} {if $item@iteration is div by 5} {/ foreach} at this point, the study of "what are the knowledge points of HTML specification" is over. I hope I can solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.