Home > Article > Web Front-end > A brief analysis of HTML5 page layout for mobile devices _html5 tutorial skills

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

WBOYOriginal: 2016-05-16 15:46:111320browse

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:

2.footer

3.nav

Privacy Information

;
　　　

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.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：What are the new features of HTML5_html5 tutorial skillsNext article：What are the new features of HTML5_html5 tutorial skills

See more

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

HTML5 layout learning

Related articles