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

What are the HTML5 standard specifications? in view of this problem, this article introduces the corresponding analysis and solutions in detail, hoping to help more partners who want to solve this problem to find a more simple and feasible way.

1.1 document structure document type

To add a standard mode declaration to the first line of each html page, you must use the

Language attribute

You must set the lang attribute for the html root element to set the correct language for the document. This will help the speech synthesis tool to determine the pronunciation it should use, and the translation tool to determine the rules to be followed in its translation.

Distinguish between browsers

Refer to the following way of writing

The advantages of writing like this:

You can use class as a global condition to distinguish and adjust lower versions of IE browsers, which is obviously better than using CSS Hack

The blocking problem of high-version IE files caused by IE6 conditional comments can be avoided. the solution of the original text is to add a blank conditional comment in front of it, but it is obvious that the originally useless blank conditional comment has become meaningful.

It can still be verified by HTML

It uses the same class as the feature detection library such as Modernizr, which is more versatile.

No-js tags need to be used in conjunction with class libraries such as Modernizr

Viewport

Viewport must be added so that the pages we have developed can be displayed uniformly and amicably on devices of different sizes.

Compatibility attribute

IE supports specific tags to determine which version of IE should be used to draw the current page. Unless there is a strong special need, set it to edge mode to inform IE to adopt the latest mode it supports

Character coding

All tags should be set to utf-8, which should be specified in both the HTTP header and the document header

Document description

In order for search engines to find your page better, you must write keywords and description

Page title

Each page must be given a meaningful title.

HTML5 standardizationtype attribute: omit

Omit type in stylesheets and scripts, unless you are not using css or javascript. In html5, the default values are text/css and text/javascript

Agreement part

Omit the http: https: protocol section in the URL address that points to pictures or other media files, stylesheets, and scripts, unless it is known that the corresponding file is not compatible with both protocols

Separation of concerns

Separate the structure (markup), expression style (style) and behavior action (script) to minimize the correlation between them, which is beneficial to maintenance.

The css file must be brought in and placed in head

The js file must be introduced and placed at the bottom of the body # case: use lowercase only all code should be lowercase, including element names, attributes, attribute values (except for the contents of text or CDATA), selectors, css attributes, attribute values (except strings)

Home

Color: # E5E5E5X color: # e5e5e5; indent

Use 4 spaces per indent instead of Tab

.example {color: blue;} Fantastic Great tree structure

A separate line is created for each block-level element and indented before each child element to improve readability

Header 1 header 2 line 1 line 2 reduces nesting

Reduce nesting and unnecessary tags as much as possible. If the structure can meet the context requirements, there is no need for redundant structures.

Testtesttesttest tag nesting rules

1. Block level elements address, blockquote, center, dir, div, dl, dt, dd, fieldset, form, h2~h7, hr, isindex, menu, noframes, noscript, ol, p, pre, table, ul

two。 Embedded elements a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, font, I, img, input, kbd, label, Q, s, samp, select, small, span, strike, strong, sub, sup, textarea, tt, u, var

Nesting rule

1. Block elements can contain inline elements or some block elements, but inline elements cannot contain block elements, it can only contain other inline elements:

-- right-- wrong.

two。 Block-level elements cannot be placed in the

Inside:

-- wrong

-- wrong

3. There are several special block-level elements that can only contain embedded elements and can no longer contain block-level elements. these special tags are:

H2 、 h3 、 h4 、 h5 、 h6 、 h7 、 p 、 dt

4. Block-level elements juxtaposed with block-level elements, embedded elements juxtaposed with embedded elements:

-- right-right-wrong 1.2 Code Specification comments

A single-line comment with a space in front of it

Multiline comments, with a separate line at the beginning and end of the comment, indented 4 spaces, do not use Tab

This is a comment

HTML validity verification

Use valid html tags and check with tools such as W3C html validator

DemoThis is a demo.DemoThis is a demo. Semantic nature

Reasonable use of tags according to their semantics, such as using footer elements to define footers and section elements to define chapters in a document, is very important for code execution efficiency and readability.

Journey

One day you finally knew what you had to do, and began.

Journey

One day you finally knew what you had to do, and began.

When adding HTML5 data-* custom attributes, you need to remove the prefix data-*,- and make it lowercase. The following Click Here character entity references

For good readability, do not use entity references, except for the following situations:

The character is not on the keyboard

Characters with special meanings in HTML, such as:, &

Space

Common HTML character entities (entities are recommended):

Character name entity name entity number "double quotation mark" 'apostrophe & apos; (not supported by IE) & # 39 position & and sign & & > closing angle bracket (greater than sign) > >

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.