Review the newly added and abolished tags of html5. review the new and abolished tags of html5.

Source: Internet
Author: User

Review the newly added and abolished tags of html5. review the new and abolished tags of html5.

HTML5 has been prevalent for a while. Do you know how to use tags according to standards, what should be used, and what should not be used. Today I will detail the following:

New Structure label section element

Indicates 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

The title of a content block in a real page or page.

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:

  1. <Figure>
  2. <Figcaption> PRC </figcaption>
  3. <P> The People's Republic of China was born 1949 </p>
  4. </Figure>
  1. <Dl>
  2. <H1> prc
  3. <P> The People's Republic of China was born 1949 </p>
  4. </Dl>
Other new video elements

Define a video. Such as movie clips or other video streams. Example: <video src = "movie.ogg" controls = "controls"> video element </video>, written in HTML4:

  1. <Object type = "video/ogg" data = "move. ogv">
  2. <Param name = "src" value = "movie. ogv">
  3. </Object>
Audio Element

Define audio. Such as music or other audio streams. Example: <audio src = "someaudio.wav"> audio element </audio>
Written in html4:

  1. <Object tyle = "application/ogg" data = "someaudio.wav">
  2. <Param name = "src" value = "someaudio.wav">
  3. </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.
<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.

  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 (80,100 );
  6. </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 keyboard shortcuts.

  1. <Menu>
  2. <Command onclick = "alert ('Hello World')">
  3. Click Me! </Command>
  4. </Menu>
Details tag

Currently, 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.

Datalist tag

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.

  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 attribute to true, you can select more than one project in the list.

Keygen tag

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.

  1. <Form action = "demo_keygen.asp" method = "get">
  2. Username: <input type = "text" name = "usr_name"/>
  3. Encryption: <keygen name = "security"/>
  4. <Input type = "submit"/>
  5. </Form>
Output tag

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

  1. <Form action = "form_action.asp" method = "get" name = "sumform">
  2. <Output name = "sum"> </output>
  3. </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.

  1. <Menu>
  2. <Article> <input type = "checkbox"/> Red </article>
  3. <Article> <input type = "checkbox"/> blue </article>
  4. </Menu>
Add input tag

Email
Email is required

Url
Url address required

Number
A value is required.

Range
You must enter a value in a certain range.

Date Pickers)
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, and year (local time)

Search
Used to search for domains. The domains are displayed as common text domains.

Color

Abolished tags

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.

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

Related Article

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.