Comments: HTML5 adds new structural elements, such as header, footer, navigation nav, content article, section, and so on. In addition to the structural elements of the entire page, html5 has also added block-level semantic elements. If you are interested, you may find them helpful.
Consider the process of developing a page:
1. design the Page Structure-HTML: This process uses various HTML elements to build the structure of the webpage.
2. design the appearance of the page-CSS: This process uses CSS to improve the appearance of the page.
3. Design page behavior-Javascript: this process is to grant certain behaviors to the elements of the web page.
In addition to CSS, HTML5 has been expanded to varying degrees in the other two aspects. This series is focused on the first aspect. Previously, we have learned complex canvas and svg elements. The following sections will summarize other HTML5 elements.
Structural Elements
HTML5 adds new structural elements, such as header, footer, navigation nav, content article, and section. The description is as follows:
In addition to the structural elements of the entire page, html5 also adds block-level semantic elements, such as the auxiliary element aside, Image Element figure, and detailed description element details. In addition to better display the layout meaning of the page, these elements are no different from ordinary divs and still need to be displayed by CSS. Here is a simple example:
The Code is as follows:
<Html>
<Head>
<Title> Dxy blog </title>
</Head>
<Body>
<Header>
<H1> <a href = "http://www.cnblogs.com/dxy1982/%22%3Edxy1982 blog </a> </Header>
<Section>
<Article>
<H2> <a href = "http://www.cnblogs.com/dxy1982/"> Article 1 </a> <P> introduction </p>
</Article>
<Article>
<H2> <a href = "http://www.cnblogs.com/dxy1982/"> Article 2 </a> <P> introduction </p>
</Article>
<Nav>
<A href = "http://www.cnblogs.com/dxy1982/"> blog </a>
</Nav>
</Section>
<Nav>
<Ul>
<Li> <Ul>
<Li> <a href = "http://www.cnblogs.com/dxy1982/"> Policy </a> </li>
<Li> <a href = "http://www.cnblogs.com/dxy1982/"> List </a> </li>
</Ul> </li>
<Li> <Ul>
<Li> <a href = '/blog/2007/04/'> February </a> </li>
<Li> <a href = '/blog/2007/03/'> February </a> </li>
</Ul>
</Li>
</Ul>
</Nav>
<Footer>
<P> Copyright 2012 dxy1982 </p>
</Footer>
</Body>
</Html>
Although these elements are relatively simple to use, pay attention to the following points::
1. Do not use section as a substitute for div
Section is not a style container. The section element represents the semantic part of the content used to help build the document summary. It should contain a header. It is usually the most article part (of course, article can also be used as its part ). If you want to find an element used as a page container or an extra style container, continue to use div.
2. Use the header and hgroup only when necessary.
Writing tags that do not need to be written is meaningless. The Use Cases of header and hgroup are usually as follows:
• The header element represents a set of introductory or navigation-oriented secondary texts and is often used as the section header.
• When the header has a multi-layered structure, such as a sub-head, sub-title, and various logo text, use hgroup to combine the h1-h6 elements as the section header.
If the header or hgroup has only a few header elements, remove the two chicken ribs labels. For example:
The Code is as follows:
<Article>
<Header>
<H1> My best blog post </Header>
<! -- Article content -->
</Article>
Directly change:
The Code is as follows:
<Article>
<H1> My best blog post <! -- Article content -->
</Article>
The same principle:
The Code is as follows:
<Header>
<Hgroup>
<H1> My best blog post </Hgroup>
<P> by Rich Clark </p>
</Header>
Directly change:
The Code is as follows:
<Header>
<H1> My best blog post <P> by Rich Clark </p>
</Header>
3. Do not abuse nav
The nav element indicates the blocks on the page that are linked to other pages or other parts of the page. The blocks contain navigation links.
But not all links on the page need to be placed in the nav element-this element is intended to be used as the main navigation block. For example, there are often many links in footer, such as the terms of service, home page, and copyright notice page. The footer element itself is sufficient to cope with these situations. Although the nav element can also be used here, it is generally considered unnecessary.
4. Do not abuse figure
Figure should be "Some flowing content, sometimes containing its own title description. It is generally referenced as an independent unit in the Document Stream ." This is exactly the best scenario for figure-it can be moved from the main content page to the sidebar without affecting the Document Stream. Figure should only be referenced in the document or surrounded by section elements.
If you only want to present the image (such as the logo), do not reference it elsewhere in the document, and do not need to move the position, then do not use figure.
5. Do not use unnecessary type attributes.
In HTML5, the type attribute is no longer required for script and style elements. Of course, there is no problem in writing, but from the perspective of best practices, there is no need to write.
Audio Element
The audio element is used to identify the sound content, such as music or any other audio streams. The supported formats of this element are shown in the following table:
| IE 9 | Firefox 3.5 | Opera 10.5 | Google Chrome 3.0 | Safari 3.0 | |
|---|---|---|---|---|---|
| Ogg Vorbis | √ | √ | √ | ||
| MP3 | √ | √ | √ | ||
| Wav | √ | √ | √ |
The audio tag has attributes used to control the audio content, time, and playback. These attributes are src (file name) and preload (loaded during page loading), controls, loop, and autoplay ). In the following example, a video is played continuously when the page is loaded with audio. The provided control allows the user to stop or start playing the audio again:
The Code is as follows:
<Audio src = "myfirancusic.ogg" controls = "controls" autoplay = "autoplay" loop = "loop">
Your browser does not support the audio element.
</Audio>
If the browser does not support this element, the text of the element is displayed.
If the autoplay element is set, the preload attribute is automatically ignored. If preload = "auto" is set, the page is loaded and the audio is loaded.
The audio element allows multiple source elements to be compatible with browsers. The source element can be used to link different audio files. The browser uses the first recognizable format:
The Code is as follows:
<Audio>
<Source src = "song.ogg" type = "audio/ogg">
<Source src = "song.wma" type = "audio/x-ms-wma">
<Source src = "song.mp3" type = "audio/mpeg">
Your browser does not support the audio element.
</Audio>
Video Element
The video element allows you to play video clips or streaming visual media. The supported formats of this element are shown in the following table:
| Format | IE | Firefox | Opera | Chrome | Safari |
|---|---|---|---|---|---|
| Ogg | No | 3.5 + | 10.5 + | 5.0 + | No |
| MPEG 4 | 9.0 + | No | No | 5.0 + | 3.0 + |
| WebM | No | 4.0 + | 10.6 + | 6.0 + | No |
It has all the attributes of the audio element, plus: muted, poster, width, and height. Not to mention the last two meanings. When the video is being loaded or the video is not loaded at all, the poster attribute (specifying an absolute or relative URL) allows you to find an image to handle first; muted indicates mute.
Video also supports the use of the source element to solve compatibility issues. Let's look at a small example:
The Code is as follows:
<Video width = "320" height = "240" controls = "controls" poster = "/images/screen.gif">
<Source src = "movie.mp4" type = "video/mp4"/>
<Source src = "movie.ogg" type = "video/ogg"/>
Your browser does not support video elements.
</Video>
If you do not want to play the video sound, set muted = "muted.
In addition, the video element provides methods, attributes, and events to control the playback process in DOM operations. For example, you can call the play, pause, and load methods of an element. You can also directly read or set attributes such as volume and playback time. In addition, events such as start playback, pause, and end can be used. See the following example:
The Code is as follows:
<! DOCTYPE html>
<Html>
<Body>
<Div style = "text-align: center">
<Button onclick = "playPause ()"> Play/Pause </button>
<Button onclick = "makeBig ()"> Big </button>
<Button onclick = "makeSmall ()"> Small </button>
<Button onclick = "makeNormal ()"> Normal </button>
<Video id = "video1" width = "420">
<Source src = "mov_bbb.mp4" type = "video/mp4"/>
<Source src = "mov_bbb.ogg" type = "video/ogg"/>
Your browser does not support video elements.
</Video>
</Div>
<Script type = "text/javascript">
Var myVideo = document. getElementById ("video1 ");
Function playPause ()
{
If (myVideo. paused)
MyVideo. play ();
Else
MyVideo. pause ();
}
Function makeBig ()
{
MyVideo. width = 560;
}
Function makeSmall ()
{
MyVideo. width = 320;
}
Function makeNormal ()
{
MyVideo. width = 420;
}
</Script>
</Body>
</Html>
Here, we need to pay attention to a new method: In the above example, we write audio elements like this:
The Code is as follows:
<Audio src = "myfirancusic.ogg" controls = "controls" autoplay = "autoplay" loop = "loop">
Your browser does not support the audio element.
</Audio>
In fact, many Boolean attributes such as controls, autoplay, and loop are introduced in html5. You can write these attributes as above, but the recommended method is as follows:
The Code is as follows:
<Audio src = "myfirsponusic.ogg" controls autoplay loop>
Your browser does not support the audio element.
</Audio>
Because the browser has these attributes, it indicates that these attributes are enabled. That is to say, if you write these attributes and forcibly set them to false, the effect is equivalent to true. Therefore, we recommend that you write only the attribute name.
This writing problem also exists in form. Many new attributes of form and input are Boolean attributes and should be recommended.
Indicates the measurement element.
The following elements are not supported by every browser, but they can be seen in Chrome.
Progress bar element
This element is used to display the download progress bar. There are only two attributes: value and max, which are very simple. Both Chrome and FireFox are supported.
The Code is as follows:
<P> download progress:
<Progress value = "1534602" max = "4603807"> 33% </progress>
</P>
Measurement Element
This element can be used to display the indicator icons of a given value in the standard range class. values in different ranges are displayed in different colors. Some websites use this to show the user's current experience. When the browser does not support this element, the text in the middle of the element is displayed directly. Currently, Chrome is supported.
The Code is as follows:
<P> your score is:
<Meter value = "88.7" min = "0" max = "100" low = "65" high = "96" optimum = "100"> B + </meter>.
</P>
Run it and you will see something yellow like a scroll bar. If you change the value to 50, you will find that the color of the indicator bar is red.
There are so many newly added elements. For more element descriptions, see the complete Tag list in W3C.
Practical reference:
W3C Tutorial: http://www.w3schools.com/html5/default.asp
HTML5 official guide: http://dev.w3.org/html5/html-author/
Pretty good guidance site: http://html5doctor.com/
HTML5 Tutorial: http://www.html5china.com/
A good front-end blog: http://www.pjhome.net/default.asp? CateID = 1
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
