Analysis on HTML5 page layout of mobile devices and html5 page layout

Analysis on HTML5 page layout of mobile devices and html5 page layout
This article introduces the html5 page layout of mobile devices. If you are interested in the disk article, learn it together.

Based on the features of mobile devices (mobile phones and tablets), we will introduce the semantic tag elements added to HTML5 and the knowledge and examples of Web page layout in mobile Web browsers.
Among the new elements added to the HTML5 standard, header footer nav aside article section hgroup is used for common page structures.
This element is briefly introduced below:
1. header
Header> A page combination of Element Definition documents. Usually, some guidance and navigation information is displayed. A tag usually contains the header information of secti-on, such as h1 ~ H6 or hgroup.

The Code is as follows:
<Header>
<H1> HTML5 layout learning <P> hard work and hard work </p>
</Header>

It is consistent with the following code:

The Code is as follows:
<Div class = "header">
<H1> HTML5 layout learning <P> hard work and hard work </p>
</Div>

2. footer
<Footer> the end of an element definition document or chapter contains the basic information of some chapters, such as the author information, related links, and copyright information. Multiple headers and footers can be used on a page, or some other elements can be inserted, such as div ul.

The Code is as follows:
<Footer>
<P> Privacy Information </p>
<P> about us </p>
</Footer>

3. nav
<Nav> elements are used to define build navigation and display navigation links. They are used to place the main navigation links of the current page.

The Code is as follows:
<Footer>
<Nav>
<Ul>
<Li> Privacy Information </li>
<Li> copyright information </li>
<Li> about us </li>
<Li> Contact Us </li>
</Ul>
</Nav>
</Footer>

4. aside
<Aside> elements are used to define the area of a page. They are used to indicate the main content related to the page and load non-body content, such as the advertisement bar and sidebar.
5. article
<Article> An element indicates a document. A page is used to display an independent article, such as a website news or a blog article.
　　
The Code is as follows:
<Article>
<Header>
<H1> New HTML5 elements <P> new article elements </p>
<Footer>
<Ul>
<Li> Article tag 1 </li>
<Li> Article tag 2 </li>
</Ul>
</Footer>
</Header>
</Article>

6. section
<Section> the section in the first element article, such as chapter, header, and footer.
　　
The Code is as follows:
<Article>
<Section>
<H1> <P> </p>
</Section>
<Section>
<H1> <P> </p>
</Section>
</Article>

7. hgroup
<Hgroup> it is defined as a combination of title elements of a webpage or segment ~ H6 label nodes are grouped.
　　
The Code is as follows:
<Header>
<Hgroup>
<H1> <H2> </Hgroup>
</Header>

In fact, in addition to the semantic tags we introduced, more tags with different semantics are defined in the HTML5 standard.
* Audio: defines the audio content.
* Canvas: defines the canvas function.
* Command: defines a command button.
* Datalist: defines a drop-down list.
* Details: defines the details of an element.
* Dialog: defines a dialog box.
* Keygen: defines a claimed key value in the form.
* Mark: defines tagged text.
* Output: defines some output types.
* Progress: defines the task process.
* Source: defines media resources.
* Video: defines the content of a video.
Although many new elements are added to the HTML5 standard, there are not many opportunities to use them in mobile Web applications.
Although tags such as audio and video can be used in mobile Web applications, due to performance, compatibility, page rendering, and other reasons, they cannot be well applied to smartphones and tablet Web browsers.