Community Learn Tools Library Leisure
search
English
Home > Web Front-end > H5 Tutorial > A brief overview of the new and abolished tags in html5_html5 tutorial skills

A brief overview of the new and abolished tags in html5_html5 tutorial skills

WBOY
Release： 2016-05-16 15:49:45
Original
1486 people have browsed it

New structure tag

section element
represents a content block in the page, such as a chapter, header, footer or other part of the page. It can be used in combination with h1, h2... and other elements to represent the document structure. Example:
…
in HTML5;
…
in HTML4.
article element
represents a piece of independent content on the page that is not related to the context. For example, an article.
aside element
represents auxiliary information related to the content of the article element in addition to the content of the article element.
header element
represents the title of a content block in the page or the entire page.
hgroup element
means to group the titles of the entire page or a content block in the page.
footer element
represents a footer for an entire page or a content block within a page. Typically, it will include the creator's name, the date it was created, and the creator's contact information.
nav element
represents the navigation link part of the page.
figure element
represents an independent piece of flow content, generally representing an independent unit in the main flow content of the document. Use the figcaption element to add a caption to a group of figure elements. For example:

Copy the code
The code is as follows:


PRC

The People's Republic of China was born in 1949



Often written in HTML4

prc


The People's Republic of China was born in 1949




Added other elements
video element
define video. Like movie clips or other video streams. Example:
Written in HTML4:



audio element
defines audio. Such as music or other audio streams. Example:
Writing in HTML4:

Copy code
The code is as follows:

embed element
is used to embed content (including various media). The format can be Midi, Wav, AIFF, AU, MP3, flash, etc. Example:
Code example in HTML4
mark element
is mainly used to visually present to the user the text that needs to be highlighted or highlighted. Search keywords are highlighted in typical application search results.
HTML5;HTML4 .
progress element
represents a running process. You can use the progress element to display the process of time-consuming functions in JavaScript. Waiting..., please wait. .
time element
represents date or time, or both at the same time.
ruby element
defines ruby ​​comments (Chinese phonetic or character).
Use with the and tags. The ruby ​​element consists of one or more characters (requiring an explanation/pronunciation) and an rt element that provides that information, as well as an optional rp element that defines what is displayed when the browser does not support the "ruby" element.

Copy code
The code is as follows:


汉< ;rt>(ㄏㄢˋ)


rt element
defines the interpretation or pronunciation of a character (Chinese phonetic phonetic or character).
rp element
is used in ruby ​​comments to define content displayed by browsers that do not support ruby ​​elements.
wbr element
represents soft line break. The difference from the br element: the br element indicates that a line break must be made here; wbr indicates that when the browser window or the parent element is wide (when there is no need for a line break), the line will not be broken, but when the width is not enough, the line will be automatically wrapped here.
canvas element
defines graphics, such as charts and other images. The element is just a graphics container (canvas), and you must use scripts to draw graphics.

Copy code
The code is as follows:



command element— —It seems to have no effect. Is there any problem with support?
represents a command button, such as a radio button, check box or button.

The command element is only visible if it is inside the menu element. Otherwise this element will not be displayed, but it can be used to specify keyboard shortcuts. .

Copy code
The code is as follows:


< command onclick="alert('Hello World')">
Click Me!


details tag Currently, only Chrome supports the details tag
, which is used to describe details of a document or a certain part of a document.
Can be used with the summary tag, which can define a title for details. The title is visible, and when the user clicks on the title, the details are displayed. summary should be the first child element of details.

datalist tag
defines a list of options. Use this element in conjunction with an input element to define the possible values ​​of the input. The datalist and its options are not displayed, it is just a list of valid input values. Use the list attribute of the input element to bind the datalist.

Copy code
The code is as follows:





datagrid tag How to use?
Define a list of optional data. The datagrid is displayed as a tree list.
If you set the multiple attribute to true, you can select more than one item in the list.

keygen tag How to use? The
tag specifies the key pair generator field to be used in the form.

When the form is submitted, the private key is stored locally and the public key is sent to the server.

Copy code
The code is as follows:


Username:
Encryption:
< input type="submit" />


output tag
defines different types of output, such as script output.

Copy code
The code is as follows:





source tag The
tag defines media resources for media elements (such as