On the second HTML5: new elements and abolished elements

Source: Internet
Author: User
Tags local time

New structure elements:

Section element

The section element defines a section in a document or application, such as a chapter, header, footer, or other part of the document. It can be used in conjunction with the H1,H2,H3,H4,H5,H6 element to mark the document structure.

code example in HTML5:<section>...</section>

code example in HTML4:<div>...</div>

Article elements

The article element represents a separate piece of content in a document, such as an article in a blog or an article in a newspaper.

HTML5 code example in :<article>...</article>

code example in HTML4 : <div class= "article" >...</div>

Header element

The header element represents the title of a content block or an entire page in a page. Code in HTML5

Example:

HTML4 code example in :<div>...</div>

Nav element

The Nav element represents the part of the navigation link.

code example in HTML5 : <nav>...</nav>

HTML4 code example in :<ul>...</ul>

Footer elements

The footer element represents a footnote to an entire page or a chunk of content in a page. In general, it contains the creator's name, the date the document was authored, and the creator contact information.

HTML5 code example in :<footer>...</footer>

HTML4 code example in :<div>...</div>

————————————————————————————————————————————————————————

New block-level semantic elements:

Aside elements

The aside element represents content related to the content of the article element outside the content of the article element.

HTML5 code example in :<aside>...</aside>

HTML4 code example in :<div>...</div>

Figure element

The figure element represents a separate stream content, which generally represents a separate unit in the content of the document body flow. Use the <figcaption> element to add a group of figure elements

Add title.

Code examples in HTML5:

<  figure  >  <  figcaption  >  prc< Span class= "KWRD" ></ figcaption  >  <  p  >  The people ' s Republic of China is born in 1949 ... </ p  >  </ figure  >  

Code examples in HTML4:

< DL > < H1 > PRC</H1><p>The People ' s Republic of China were Born in 1949 ... </ P > </ DL >

Dialog elements

Dialog tags define conversations, such as conversations. Note: each sentence in the conversation must belong to the section defined by the <dt> tag.

Code examples in HTML5:

<Dialog><DT>Teacher</DT><DD>Is it equal to?</DD><DT>Students</DT><DD>4</DD><DT>Teacher</DT><DD>That's correct!</DD></Dialog>

————————————————————————————————————————————————————————

New Inline semantic elements:

Mark Element

The mark element is used primarily to visually present to users the text that needs to be highlighted or highlighted. A more typical application of the mark element is in the search results to the user

Highlight search keywords.

HTML5 code example in :<mark>...</mark>

HTML4 code example in :<span>...</span>

Time element

Time elements represent dates or times, and they can also represent both.

code example in HTML5 : <time>...</time>

HTML4 code example in :<span>...</span>

Meter elements

The meter element represents weights and measures. Measures that are used only for the known maximum and minimum values. You must define the scope of the measure, either in the text of the element or in the Min/max property.

Yi.

code example in HTML5 : <meter>...</meter>

Progress elements

The progress element represents a running process. You can use the progress element to display the process of time-consuming functions in JavaScript.

HTML5 code example in :<progress>...</progress>

————————————————————————————————————————————————————————

New multimedia and interactivity elements:

Video element &audio element

Video is used to insert videos, audio is used to insert sounds, of course, with this:

< Video src = "Xx.wmv" > Your browser does not support video tags </video>

If not supported, the text in the tag will be displayed

Details element

The details element represents the detail information that the user requests and can get . It can be used in conjunction with the summary element. The summary element provides a caption or legend. Title is available

See, when the user clicks on the title, the details are displayed. The summary element should be the first child element of the details element.

Code examples in HTML5:

< Details >< Summary > HTML 5</summary>This document teaches you everything all the learn about HTML 5. </ Details > <!--practice proves useless ... -

DataGrid element

The DataGrid element represents a list of optional data, used in conjunction with the INPUT element, to create a drop-down list of input values.

HTML5 code example in :<datagrid>...</datagrid>

menu element

The menu element represents a list of menus. Use this label when you want to list the form controls.

Code examples in HTML5:

<  menu  >  <  li  ><  input  type  = "checkbox"  />  Red</ li  >  <  li  ><  input  type  = "checkbox"  />  blue</ li  >  </ menu  >  

u Note : the menu element in HTML4 is not recommended for use.

Command Element

The command element represents a CommandButton, such as a radio button, a check box, or a button.

Code examples in HTML5:

Øcommand elements

The command element represents a CommandButton, such as a radio button, a check box, or a

Button.

code example in HTML5 : Command Onclick=cut () "label=" Cut >

————————————————————————————————————————————————————————

New input type:

The Email--email type is used for input fields that should contain e-mail addresses.

The Url--url type is used for input fields that should contain URL addresses.

The Number--number type is used for input fields that should contain numeric values.

The Range--range type is used for input fields that should contain a certain range of numeric values.

Date Pickers (data inspector)

The Search--search type is used to search for domains, such as site search or Google search. The search field appears as a regular text field.

————————————————————————————————————————————————————————

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)

————————————————————————————————————————————————————————

Elements to be abolished:

1. Elements that can be replaced with CSS

For Basefont, big, center, font, S, Strike, TT, u these elements, because their functions are purely for the screen display services, and in the HTML5 to mention

It is recommended that the display feature be uniformly edited in a CSS stylesheet, so these elements are abolished and replaced by the way you edit the CSS style sheet.

·2. No longer use frame frame

For frameset elements, frame elements, and nofranes elements, because the frame frame has a negative impact on the page, the frame frame is no longer supported in HTML5, only the IFRAME framework is supported, or a composite page composed of multiple pages created by the server side, At the same time, the above three elements are abolished.

·3. Only elements supported by some browsers

For applets, Bgsound, Blink, Marguee, and so on, because only some browsers support these elements, they are abolished in HTML5. Where the applet element can be substituted by the EMBED element, the BGSOUND element can be substituted by the audio element, and marquee can be overridden by JavaScript programming.

On the second HTML5: new elements and abolished elements

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.