A brief analysis of HTML5 page layout for mobile devices _html5 tutorial skills

We combine the characteristics of mobile devices (mobile phones and tablets) to introduce the new semantic tag elements in HTML5, as well as the knowledge and examples of Web page layout under mobile Web browsers.
Among the new elements added by the HTML5 standard, those used for common page structures include header footer footer nav aside article section hgroup.
The following is a brief introduction to this element:
1.header
header> element defines the page combination of the document, usually some guidance and navigation information, and the tag usually contains section-on Header information, such as h1~h6 or hgroup, etc.

Copy code

The code is as follows:

　h1>HTML5 layout learning
　

Study hard

is consistent with the following code:

Copy the code

The code is as follows:

　

HTML5 layout learning

　

Study hard

2.footer

element defines the end of the document or chapter and contains some basic information about the chapter, such as author information, related links and copyright information. You can use multiple headers and footers on a page, and you can also insert some other elements, such as div ul, etc. < p>Privacy information

　

About us

3.nav

element is used to define the built navigation, display navigation links, and is used to put some main navigation links of the current page. < nav>

　

　　
Privacy Information

;
　　　
Contact us

　　

　

4.aside

element is used to define an area of ​​a page, used to represent the main content related to the page, and used to load non-text main content, such as advertising columns , sidebar, etc. 5.article

The

element represents a document or page, and is used to display an independent piece of article content, such as a website news, a blog article, etc.
　

Copy code

The code is as follows:

header>　　　　< ;li>Article Tag 1
　　　　

Article Tag2

　　　 🎜 >　

6.section

　 The section in the first element of the

element, such as chapters, headers, and footers.

　

Copy code
The code is as follows:

　　

　　　

🎜> 　　

　　　

🎜>


7.hgroup

　

is defined as a combination of title elements of a web page or section, usually using multi-level h1~h6 tag nodes for grouping.
　

Copy code

The code is as follows: hgroup>
　　　

🎜 >

In fact, in addition to the semantic tags we introduced, more tags with different semantics are defined in the HTML5 standard. * audio: Define audio content. * canvas: Define canvas function.

* command: Define a command button.

* datalist: Define a drop-down list.

* details: Define the detailed content of an element.
* dialog: Define a dialog box.
* keygen: Define a claimed key value in the form.
* mark: Define marked text.
* output: Define some output types.
* progress: Define the process of the task.
* source: Define media resources.
* video: Define a video content.

Although many new elements have been added to the HTML5 standard, there are not many opportunities to actually use them in mobile web applications. Although tags such as audio and video can be practiced in mobile web applications, due to their performance, compatibility, and page rendering, they cannot be well applied to web browsers on smartphones and tablets.