A brief overview of newly added and abolished html5 labels

Comments: In HTML5, while adding and abolishing many labels, many labels are also added and abolished, such as the newly added structure label: section element/video element. If you are interested, you can find out, I hope the knowledge points in this article will help you.

New Structure tag

Section Element
A content block in a page, such as a chapter, header, footer, or other part of the page. And h1, h2 ...... And other elements are used together to represent the document structure. Example: <section> ...... </Section>; <div>…… In HTML4 ...... </Div>.
Article Element
Indicates an independent content on the page that is irrelevant to the context. For example, an article.
Aside Elements
Auxiliary information related to the content of the article element outside the content of the article element.
Header element
Indicates the title of a content block or a real page in the page.
Hgroup Element
Indicates that a page or a content Block Title.
Footer Element
Indicates the footer of a content block on the entire page or page. Generally, it includes the Creator's name, creation date, and contact information of the Creator.
Nav Element
The navigation link of the page.
Figure Element
It indicates an independent stream content. Generally, it indicates an independent unit in the content of the main stream of the document. Use the figcaption element to add titles to the figure element group. For example:

The Code is as follows:
<Figure>
<Figcaption> PRC </figcaption>
<P> The People's Republic of China was born 1949 </p>
</Figure>
HTML4
<Dl>
<H1> prc <P> The People's Republic of China was born 1949 </p>
</Dl>

Other new elements
Video Element
Define a video. Such as movie clips or other video streams. Example: <video src = "movie.ogg" controls = "controls"> video element </video>
Written in HTML4:
<Object type = "video/ogg" data = "move. ogv">
<Param name = "src" value = "movie. ogv">
</Object>
Audio Element
Define audio. Such as music or other audio streams. Example: <audio src = "someaudio.wav"> audio element </audio>
Written in html4:

The Code is as follows:
<Object tyle = "application/ogg" data = "someaudio.wav">
<Param name = "src" value = "someaudio.wav">
</Object>

Embed element
Used to embed content (including various media ). The format can be Midi, Wav, AIFF, AU, MP3, and flash. Example: <embed src = "flash.swf"/>
Sample Code in HTML4 <object data = "flash.swf" type = "application/x-shockwave-flash"> <object>
Mark Element
It is mainly used to visually display the text to be highlighted or highlighted. The keyword search is highlighted in the search result of a typical application.
HTML5 <mark> </mark>; HTML4 <span> </span>.
Progress Element
Indicates a running process. You can use the progress element to display the time-consuming functions in JavaScript. Waiting ...... , Please wait. <Progress> </progress>.
Time Element
The date or time.
Ruby Elements
Define ruby annotations (Chinese phonetic symbols or characters ).
Used with the <ruby> and <rt> labels. The ruby element consists of one or more characters (one explanation/pronunciation required) and an rt element that provides the information. It also includes optional rp elements, defines the content displayed when the browser does not support the "ruby" element.

The Code is as follows:
<Ruby>
Latency <rt> <rp> (</rp> latency ratio <rp>) </rp> </rt>
</Ruby>

Rt Element
Defines the interpretation or pronunciation of a character (Chinese phonetic alphabet or character.
Rp Element
Used in ruby annotations to define the content displayed by browsers that do not support ruby elements.
Wbr Element
Soft line feed. Difference from the br element: the br element indicates that a line break must be entered here; the wbr indicates that the browser window or the parent element is at the foot width (no line change is required), without line feed, when the width is not enough, take the initiative to wrap the line here.
Canvas Element
Define images, such as tables and other images. <Canvas> elements are only graphical containers (canvases) and must be drawn using scripts.

The Code is as follows:
<Canvas id = "myCanvas"> </canvas> <script type = "text/javascript">
Var canvas = document. getElementById ('mycanvas ');
Var ctx = canvas. getContext ('2d ');
Ctx. fillStyle = '# FF0000 ';
Ctx. fillRect (80,100 );
</Script>

Command element-- It seems that there is no effect. Is there a problem with support?
A command button, such as a single-choice button, check box, or button.

The command element is visible only when it is in the menu element. Otherwise, this element is not displayed, but you can use it to specify the keyboard shortcut ..

The Code is as follows:
<Menu>
<Command onclick = "alert ('Hello World')">
Click Me! </Command>
</Menu>

Details tagCurrently, only Chrome supports the details tag.
Describes the details of a document or a part of the document.
It can be used with the summary label, and the summary can define the title for the details. The title is visible. When you click the title, the details is displayed. Summary should be the first child element of details.

DatalistTag
Define a list of options. Use this element with the input element to define the possible input values. Datalist and its options are not displayed. It is only a list of valid input values. Use the list attribute of the input element to bind datalist.

The Code is as follows:
<Input id = "myCar" list = "cars"/>
<Datalist id = "cars">
<Option value = "BMW">
<Option value = "Ford">
<Option value = "Volvo">
</Datalist>

Datagrid labelHow to use it?
Defines 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 project in the list.

Keygen tagHow to use it?
The tag specifies the key pair Generator Field Used for the form.

When a form is submitted, the private key is stored locally and the Public Key is sent to the server.

The Code is as follows:
<Form action = "demo_keygen.asp" method = "get">
Username: <input type = "text" name = "usr_name"/>
Encryption: <keygen name = "security"/>
<Input type = "submit"/>
</Form>

Output tag
Define different types of outputs, such as the output of scripts.

The Code is as follows:
<Form action = "form_action.asp" method = "get" name = "sumform">
<Output name = "sum"> </output>
</Form>

Source tag
Tags define media resources for media elements (such as <video> and <audio>.
Menu label
Define the menu list. This label is used when you want to list form controls. Note the difference with nav. menu is specifically used for form controls.

The Code is as follows:
<Menu>
<Li> <input type = "checkbox"/> Red </li>
<Li> <input type = "checkbox"/> blue </li>
</Menu>

Add input tagEmail
Email url is required
You must enter the url address number.
The value range must be entered.
You must enter a value in a certain range: Date Pickers (Date selector)
There are multiple new input types available for Date and Time Selection:
Date: Select day, month, and year
Month-select month and year
Week-select week and year
Time-Select time (hours and minutes)
Datetime-select the time, day, month, and year (UTC time)
Datetime-local-Select time, day, month, year (local time) search
Used to search for domains. The domains are displayed as common text domains. Color

Abolished Element

1. elements that can be replaced by css
Basefont, big, center, font, s, strike, tt, u. These elements are purely for the image display service. HTML5 advocates that the image display function be centrally edited in css.

2. frame is no longer used.

Frameset, frame, and noframes. HTML5 does not support the frame framework. It only supports the iframe framework, or uses the webpage-compliant form created by the server to delete the preceding three tags.

3. Only some elements supported by browsers

Applet, bgsound, blink, marquee, and other labels.

4. Other abolished Elements

Abolished rb and replaced by Shuyong ruby.

Use abbr instead of acronym.

Use ul instead of dir.

Dissembling isindex by combining form with input

Abolish listing and use pre-substitution

Abolish xmp using code substitution

Abolish nextid and use guids

Use the text/plian (unformatted body) MIME type instead of plaintex.

========================================================== ==============================

Looking at so many new tags and elements, I wonder if HTML5 is coming? With overwhelming information and tutorials, HTML5, CSS3, and various browser vendors announced their support for html5, I feel that the html5 era has come. So can I use it safely in my project? Not yet. Although IE9 already claims to support html5, IE8 does not. There are still a large number of people sitting in front of the four masters in, using the xp system, with IE8 crawling on the Internet, and some old brothers and sisters, buy a new machine, click it to remove genuine win7, and change it to version d xp. Although Html5shiv is available now, IE8 can only support several new HTML tags. I can choose what new technologies to use, but cannot require users of your products to install any browsers. As a matter of fact, it is not necessary to develop new technologies. It is good to be suitable. Now I want to use asp. the features written by net2 are as powerful as those written by Grandpa Deng. Just like Grandpa Deng's "cat theory", it works.