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

This article focuses on "what are the HTML specifications", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn what are the HTML specifications.

HTML specification indentation

Unify two space indents

Naming convention

Class should be named after function or content, not in form of expression

The letters of class and id words are lowercase, and when multiple words are formed, they are separated by an underscore.

Use a unique id as the Javascript hook while avoiding creating a class without style information

DOCTYPE statement

The DOCTYPE declaration must be added to the HTML file, and the document declaration of HTML5 must be used uniformly:

Meta tag

Uniform use of "UTF-8" coding

SEO optimization

Give priority to the latest version of IE and Chrome

Add viewports to mobile Devic

Disable automatic recognition of numbers that may be in phone format on the page

The team agreed to:

Pc side:

Mobile:

Label

Html tags fall into the following categories:

Self-closing label (self-closing), no need to close. For example: area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track, wbr, etc.)

Closed label (closing tag), need to be closed. For example: textarea, title, h, div, span, etc.

The team agreed to:

All elements with start and end tags must be marked with a start and end tag, and some elements that allow omission of the start tag or bundle tag must also be written.

Self-closing label do not add the end tag

The name of the custom tag must contain a dash (-), and are all correct names, and are incorrect. This limitation allows HTML parsers to distinguish between standard elements and custom elements

Custom tags must be marked with a start label and a closing label

Minimize the number of labels

Element attribute

Element attribute values use double quotation mark syntax

Recommended: web front-end development live tutorials Q-q-u-n: 767273102, with free development tools, zero basics, advanced video tutorials, hope beginners take fewer detours

Copy the code

Not recommended:

Code nesting

Block elements can contain inline elements or some block elements, but inline elements cannot contain block elements. They can only contain other inline elements.

Headings and paragraphs cannot contain blocks, such as H2, h3, h4, h5, h6, h7, p, dt

Block and inline cannot be juxtaposed, block-level elements and block-level elements are juxtaposed, embedded elements and embedded elements are juxtaposed.

Some tags are fixed nesting rules, such as ul containing li, ol containing li, dl containing dt and dd, and so on.

Flexible use of pseudo classes

Don't let non-content information contaminate your HTML and disrupt the HTML structure. You can use pseudo class elements such as: before,: after, etc.

Recommended:

HTML code

See the square next to me?

CSS Code:

/ * We use a: before pseudo element to solve the design problem of placing a colored square in front of the text content * / .text-box:before {content:'; display: inline-block; width: 1rem; height: 1rem; background-color: red;}

Not recommended:

HTML Code:

See the square next to me?

CSS Code:

.text-box > .square {display: inline-block; width: 1Reme; height: 1Reme; background-color: red;} Special symbols must use escape symbols to describe escape characters

Space & and & "quotation marks" pure number input box

Use type= "tel" instead of type= "number"

Type attribute

There is no need to specify type properties for CSS and JS, which are included by default in HTML5.

Recommended:

Not recommended:

Annotation specification

Single-line comment

Generally used for simple descriptions, such as some state descriptions, attribute descriptions, etc.

There is a space character before and after the comment content, and the comment is on top of the code to be commented, with a separate line

Recommended: web front-end development live tutorials Q-q-u-n: 767273102, with free development tools, zero basics, advanced video tutorials, hope beginners take fewer detours

...

Not recommended:

......

Module comment

One space character before and after the comment content

``indicates the start of the module

``indicates the end of the module, with one line apart between the module and the module

Module comments internally nested module comments, ``

Recommended:

......... Semantics

HTML without CSS is a semantic system, not a UI system.

Usually, every tag has a semantic meaning.

Semantic HTML structure is helpful to machine (search engine) understanding, on the other hand, when many people cooperate, it can quickly understand the developer's intention.

It is recommended to use more semantic tags in the page, rather than using div as the whole page.

Common tag semantics: label semantics

Paragraph headings (h2~h7) unordered list ordered list tag navigation, use the main content of the page only for important link groups in the document, and a page can only be used once. In the case of a web application, it surrounds the content outside its main functional definition, which defines sections (section, sections) in the document independently of the rest of the document. Such as chapters, headers, footers, or other parts of the document. Define content other than what it is in. For example, sidebar, a group of links to articles, advertisements, friendship links, and related product list headers usually include website logos, main navigation, site-wide links and search box footers. Only when the parent is body, the footer of the whole page provides independent streaming content (images, charts, photos, codes, etc.) (there is 40px or so by default) so far. I believe you have a deeper understanding of "what are the HTML specifications?" You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.