HTML5 Development Code

1, general specification-use HTML5 structure tag for page layout, pay attention to the semantics of the structure, and pay attention to the hierarchical structure of the page outline. Use css3.0 to style the design.

A. Web page outline query URL http://gsnedders.html5.org/outliner/

B.HTML5 Outline algorithm concepts and how to add Web page outline generated plugins in a browser

Http://www.20ju.com/content/V165998.htm

2, HTML5 document structure specification--HTML5 as a new label language standard, do not need to explicitly declare the mine type and version number.

A. Simplified doctype can be directly written as "! DOCTYPE HTML "

B. No need to write the type of XML, that is directly written in the "HTML" "/html"

C. When using HTML5 for page layout, the page structure should follow the following structure template:

* Note: The above structure template, keywords, and description must be written, the rest can be censored according to the requirements of the page.

Another, if mobile development, can add another meta-meta-tag, indicating full-screen display.

When you disable page scaling, add the following attribute to the META tag above:

Minimum-scale=1,maxinum-scale=1,user-scalable=no

3, HTML5 title--HTML5 page is no longer the HN in the page title of the series and weight, but the header, section, article and other block elements of the nesting level as a series, each block can have their own H1 and label group.

A. Header label-when the header element acts as a direct child of the body, the title is used as the first-level title of the page, and the page as a book, the title of the book. Only a direct head tag can be set in the body, and headings in the head tag in other section blocks will act as level two or level three headings based on the number of nested layers.

B. If there is no title in a block, do not use the section element and instead use div for layout.

C. You can allow no caption when using aside or NAV.

Example:

The page outline generated above is:

1. Love Go Web/travel guide

1.1. Travel Recommendations

1.2. This is my travel guide

1.2.1. the meaning of travel

1.2.2. the process of travel

4, the writing specification--HTML5 is not case-sensitive, but in the Love Go Web page layout, the uniform use of lower case. HTML5 part of the new features, so that the label can not write end tags, such as li,dt,dd,p, but in the Love Go web surface development, you need to use the end tag.

5, the standard for the page-the page originates from its own head and the bottom of the skin, so in the development of the page only need to construct the middle main content area.

A. Head layout:

hotel room Type list page when the header part is extracted out of the common.

B. Bottom layout:

The bottom layout uses the footer element uniformly, and the direct footer element of the body is not used when developing the page, given the customized menu at the bottom.

C. middle section:

6. Page CSS Layout

A. Adding meta-meta tags to the head

B. For the width of the structure element, use a percentage of units, such as the left aside width is set to 30%, the right article width is set to 70%;

C. The writing of the font, initially set the body's font-size to 62.5%, let all the elements inherit the setting, so that 1em = 10px. Finally, use 1em (10px) or 1.2em (12px) when you need to use font-size.

D. Try not to use too many background images, if you use a background image, when the width or height of the image is full of the width or height of the element, you need to add attributes to the element: Background-size:contain; Let the background image change according to the size of the element;

e Apply an additional label to the image when you use it directly in the page, set the width of the label with a percentage, and set the width of the included picture to 100%;

F.margin, padding, border, Box-shadow and other elements can use PX units;

G. Use @media screen and (MAX-WIDTH:XXPX) {selector{}} to create an overloaded style that is over the hour of the display. If the screen is less than 320px, the title becomes smaller or other. It is not recommended to use link @media to reload another style.

The design needs to be elaborated, the following is the suggestion:

A. Use less gradients-the current new gradient attribute in CSS3, but the support of each browser is not high in the form of private properties, is not recommended for non-personal sites. If you use a gradient, the mobile screen size is too small, the front-end work will be based on the size of the screen to make a corresponding style, you need to reload the different gradient pictures.

B. Design, according to the main mobile size, or according to the user object used mobile device screen size to determine the size of the design of the page width, the front-end in the layout of the use of the percentage, the font in a certain size range of the screen does not change, and if the size of the mainstream screen to determine dimensions, will not appear when the development Phenomenon.

7. Mobile JS Frame--Using zepto.js

HTML5 Development Code