Relive HTML5 's new tags and abolished tags

Source: Internet
Author: User
Tags local time

HTML5 has been popular for some time, for the use of labels, according to specifications, which should use, which should not be used, you have mastered it. Today I'll give you a detailed list of the following:

New structure Label section element

Represents a chunk of content in a page, such as a chapter, header, footer, or other part of a page. Can and H1, H2 ... Such elements are used to represent the document structure. Example: HTML5 in <section>......</section>;html4 <div> ......</div>.

Article elements

Represents a piece of independent content in the page that is not relevant to the context. such as an article.

Aside elements

Represents the secondary information that is related to the content of the article element outside the content of the article element.

Header element

Represents the title of a content block or a page in a page.

Hgroup elements

Represents a combination of the title of a chunk of content in a page or page.

Footer elements

A footnote that represents a chunk of content in an entire page or page. In general, he will include the creator's name, date of creation, and the author's contact information.

Nav element

Represents the part of a navigation link in a page.

Figure element

Represents a separate stream content that typically represents a separate unit in the content of the document body flow. Use the Figcaption element to add a caption to the group of figure elements. For example:

    1. <figure>       
    2. <figcaption>prc</figcaption>&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;
    3. <p>the people "s republic  Of china was born in 1949</p>       
    4. </figure>
    1. <dl>
    2. PRC
    3. <p> thepeople ' s Republic of China were born in 1949</p>
    4. </dl>
Additional elements of the video element

Define the video. Like movie clips or other video streams. Example: <video src= "Movie.ogg" controls= "controls" >video elements </video>,html4 The wording:

    1. <object Type="Video/ogg" data="MOVE.OGV"> /c7>
    2. <param name ="src" value="MOVIE.OGV">
    3. </object>
Audio element

The

defines the audio. such as music or other audio streams. Example: <audio src = "someaudio.wav" >audio elements </audio>      
html4 notation:  

    1. <object Tyle="Application/ogg" data="Someaudio.wav">
    2. <param name ="src" value= "someaudio.wav"> /c25>
    3. </object>
Embed elements

Used to embed content (including various media). The format can be midi, Wav, AIFF, AU, Mp3,flash and so on. Example: <embed src= "flash.swf"/>
HTML4 code sample <object data= "flash.swf" type= "Application/x-shockwave-flash" ><object>

Mark Element

It is primarily used to visually present to the user which text to highlight or highlight. The search keywords are highlighted in the typical application's results.
html5<mark></mark>; HTML4 <span></span>.

Progress elements

Represents a running process that can use the progress element to display the process of a time-consuming function in JavaScript. Wait ... please wait a moment. <progress></progress>.

Time element

Represents a date or time, and can also be both.

Ruby elements

Defines a ruby annotation (Chinese phonetic notation or character).
Used in conjunction with <ruby> and <rt> tags. A RUBY element consists of one or more characters (requiring an explanation/pronunciation) and an RT element that provides that information, and an optional RP element that defines what is displayed when the browser does not support the "Ruby" element.
<ruby>
Han <rt><rp> (</rp>ㄏㄢˋ<rp>) </rp></rt>
</ruby>

RT Element

Defines the interpretation or pronunciation of characters (Chinese phonetic symbols or characters).

RP Element

Used in Ruby annotations to define what is displayed by browsers that do not support ruby elements.

WBR elements

Represents a soft line break. Differences from BR elements: The BR element indicates that a line must be wrapped here, wbr means that the browser window or parent element is full-width (no need to change lines), does not wrap, and is active here when the width is not enough.

Canvas elements

Define graphs, tables, and other images. The <canvas> element is just a graphics container (canvas), and you must use a script to draw the graphic.

  1. <canvas id="MyCanvas"></canvas><script type="Text/javascript" >
  2. var canvas=document.       getElementById(' MyCanvas ');
  3. var ctx=Canvas.       GetContext(' 2d ');
  4. CTX.       FillStyle="#FF0000";
  5. CTX.       FillRect(0,0,N,+);
  6. </script>
Command Element

Seems to have no effect. Is there a problem with support?
Represents a command button, such as a radio button, a check box, or a button.

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

    1. <menu>
    2. <command onclick="alert(' Hello World ')">
    3. Click me! </command>
    4. </menu>
Details tab

Only Chrome supports the Details tab at this time
A detail used to describe a part of a document or document.
Can be used with summary tags, summary can define headings 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 label

Defines a list of options. Use this element in conjunction with the INPUT element to define the possible values for input. DataList and its options are not displayed, it is just a valid list of input values. Use the INPUT element's List property to bind the DataList.

  1. <input id="MyCar" list="Cars" />
  2. <datalist id="Cars">
  3. <option value="BMW">
  4. <option value="Ford">
  5. <option value="Volvo">
  6. </datalist>
DataGrid label

Defines a list of optional data. The DataGrid is displayed as a tree list.
If you set the Multiple property to True, you can select more than one item in the list.

Keygen label

The label specifies the key pair generator field used for the form.

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

  1. <form Action="demo_keygen.asp" method="Get">
  2. Username: <input type="text" name="Usr_name" /> /c23>
  3. Encryption: <keygen name="Security" />
  4. <input Type="Submit" />
  5. </form>
Output label

Defines different types of output, such as the output of a script.

    1. <form Action="form_action.asp" method="Get" name="Sumform" >
    2. <output Name="sum"></output>
    3. </form>
SOURCE Label

Tags define media resources for media elements such as <video> and <audio>.

Menu Label

Defines a menu list. Use this label when you want to list the form controls. Note the difference from NAV, where menu is used exclusively for form controls.

  1. <menu>
  2. <article><input type="checkbox" />Red</article>
  3. <article><input type="checkbox" />Blue</article>
  4. </menu>
Add input Tag

Email
Email must be entered

Url
You must enter a URL address

Number
Value must be entered

Range
Values must be entered in a certain range

Date pickers (day selector)
There are several new input types that can be selected for the date and time:
Date-Select day, month, year
Month-Select months, years
Week-Select minute
Time-Select the Times (hours and minutes)
DateTime-Select time, day, month, year (UTC time)
Datetime-local-Select time, day, month, year (local time)

Search
For the search domain, the field is displayed as a regular text field.

Color

Abolished label

1. Elements that can be replaced with CSS
Basefont, big, center, font, S, Strike, TT, U. These elements are purely for the screen display service, HTML5 in the promotion of the display features in the CSS unified editing.

2, no longer use frame frame.

Frameset, frame, noframes. Frame frames are not supported in HTML5, only the IFRAME framework is supported, or the above three tags are removed with a page-by-page format created by the server side.

3. Only some elements supported by the browser

Applets, Bgsound, Blink, Marquee and other tags.

4. Other elements that have been abolished

Abolish RB, Tree Yong Ruby instead.

Repeal acronym use ABBR substitution.

Revoke DIR using UL instead.

Repeal Isindex use form and input in a way that replaces

Repeal listing using the pre override

Revoke XMP Using code substitution

Abolition of NextID using GUIDs

Repeal Plaintex uses the "Text/plian" (unformatted body) MIME type substitution.

Reprinted from: http://www.aspnetjia.com/Cont-68.html

Relive HTML5 's new tags and abolished tags

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.