Consider our process of developing a page :
1. Design the structure of the page - HTML: This process is to build the structure of the web page using various HTML elements.
2. Design the appearance of the page - CSS: This process is to use CSS to improve the appearance of the web page.
3. Design the behavior of the page - Javascript: This process is to assign 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 about the complex canvas and svg elements. The following chapters will summarize other elements added by HTML5.

Structural elements
HTML5 adds new structural elements, such as header, footer, navigation nav, content article, section, etc. The meaning is as shown below:

In addition to this structural element of the entire page, HTML5 also adds block-level semantic elements, such as the auxiliary element aside, the image element figure, the detailed description element details, etc. In addition to better displaying the layout meaning of the page, these elements are no different from ordinary divs. You still need to rely on CSS to display these elements. Here is a simple example:

Copy the code

The code is as follows:

< ;html>

Dxy Blog

< ;h1>dxy1982 Blog

Article 1

< ;p>Introduction

Article 2

Introduction

Although These elements are relatively simple to use, but there are still a few points to note :
1. Do not use section as a substitute for div
Section is not a style container. The section element represents a semantic part of the content that helps build a document summary. It should contain a header. It usually exists as part of article (of course article can also be a part of it). If you're looking for an element to use as a page container or need additional style containers, stick with divs.
2. Only use header and hgroup when needed
It is meaningless to write tags that do not need to be written. The usage scenarios of header and hgroup are usually as follows:
• The header element represents a set of introductory or navigational auxiliary text, which is often used as the head of a section.
• When the header has multiple layers of structure, such as sub-headers, subtitles, various logos, etc., use hgroup to combine h1-h6 elements as the header of the section.
If there are only a few header elements in the header or hgroup here, why not remove these two useless tags, for example:

Copy code

The code is as follows:

My best blog post

-->

Modify directly to:

Copy code

The code is as follows:

My best blog post

The same thing:

Copy code

Code As follows:

My best blog post

　
p>by Rich Clark

Change directly to:

Copy code

The code is as follows:

My best blog post

by Rich Clark< ;/p>

3. Do not abuse the nav
nav element to represent blocks in the page that link to other pages or other parts of this page; include navigation links block.
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. To give a specific example, there are often many links in the footer, such as terms of service, home page, copyright statement page, etc. The footer element itself is sufficient to handle these situations. Although the nav element can also be used here, we usually think it is unnecessary.
4. Don’t abuse figure
Figure should be “some flowing content, sometimes with its own title description. It is generally referenced as an independent unit in the document flow.” This is the most important thing about figure. Best applicable scenario - it can be moved from the main content page to the sidebar without affecting the document flow. Figures should only be referenced within the document, or surrounded by section elements.
If the figure is purely for presentation (such as a logo), it is not referenced elsewhere in the document, and there is no need to move the position, then absolutely do not use figure.
5. Do not use unnecessary type attributes
In HTML5, script and style elements no longer require type attributes. Of course, there is nothing wrong with writing it, but from a best practice perspective, there is no need to write it.

Audio element
The audio element is used to identify sound content, such as music or any other audio stream. The formats supported by this element are shown in the following table:

	IE 9	Firefox 3.5	Opera 10.5	Chrome 3.0	Safari 3.0
Ogg Vorbis		√	√	√
MP3	√			√	√
Wav		√	√		√

The

audio tag has some attributes used to control the content, when and how to play the audio. These attributes are: src (file name), preload (loaded when the page is loaded), controls (display control) , loop (loop) and autoplay (automatic play). In the example below, the audio will play as soon as the page loads. It will continue to play, and the controls provided will allow the user to stop or restart the audio:

Copy code

The code is as follows:

If the browser does not support the element, the text information of the element is displayed.
If the autoplay element is set, the preload attribute is automatically ignored. If preload="auto" is set, the audio will be loaded after the page is loaded. The
audio element allows specifying multiple source elements to be compatible with browser issues. The source element can link different audio files. The browser will use the first recognized format:

Copy the code

The code is as follows:

Video Element The video element allows you to play video clips or stream visual media. The formats supported by this element are shown in the following table: It has all the attributes of the audio element, plus: muted (mute), poster (waiting for pictures), width and height. Needless to say the last two meanings. The poster attribute (specifying an absolute or relative URL) allows you to find an image to use when the video is loading or when the video is not loading at all; muted means mute.

Video also supports using source elements to solve compatibility issues. Look at a small example:

Copy the code
The code is as follows:

If you want not to play the sound of the video, just set muted="muted".
In addition, the video element also provides some methods, properties and events to support controlling the playback process during DOM operations. For example, call the play, pause, load and other methods of the element. There are also attributes such as volume and playback time that can be read or set directly. In addition, there are start play, pause, end events, etc. that can be used. Look at the example below:

Copy the code
The code is as follows:

< button onclick="makeNormal()">Normal

actually needed here Pay attention to a new way of writing: In the above example, we write the audio element like this:

Copy the code
The code is as follows :

In fact, many Boolean attributes such as controls, autoplay, and loop have been introduced in HTML5. You can write these attributes like the above, but The recommended writing method is as follows:

Copy the code
The code is as follows:

< ;audio src="MyFirstMusic.ogg" controls autoplay loop>
Your browser does not support the audio element.

Because when the browser encounters these attributes, it means that these attributes are turned on. In other words, if you write these attributes and forcibly set them to false, the effect will still be the same. is true, so it is generally recommended to only write the attribute name.
This writing problem also exists in forms. Many new attributes of form and input are Boolean attributes, and the recommended writing method should be used.
Elements indicating measurements
Not every browser supports the following elements, but basically the effect can be seen on Chrome.
Progress bar element
Use this element to display the download progress bar. It has only two attributes: value and max. It is very simple. Both Chrome and FireFox support it.

Copy code
The code is as follows:

Download progress:
33%

Measure element
Use this element to display an indication icon of a given value in the standard range class. Values in different ranges will display different colors. Some websites use this tool to display the user's current experience value. When the browser does not support this element, the text in the middle of the element will be displayed directly. Currently Chrome already supports it.

Copy code
The code is as follows:

Your score is:
B .
< /p>

Run it and you will see a yellow scroll bar-like thing; if you change the value to 50, you will find that the color of the indicator bar is programmed red.
That’s it for the introduction of the newly added elements. For more element descriptions, please see the complete Tag list in W3C.

Practical reference:
W3C tutorial: http://www.w3schools.com/html5/default.asp
HTML5 Official guidance: http://dev.w3.org/html5/html-author/
A pretty good guidance website: http://html5doctor.com/
HTML5 Chinese tutorial: http://www.html5china.com/
A good front-end blog: http://www.pjhome.net/default.asp?cateID= 1

HTML5 HTML element extension (Part 1) - Overview of newly added elements and usage_html5 tutorial skills

Article 1

Article 2

My best blog post