Talk about the new elements and other features of HTML5

Source: Internet
Author: User

I believe that everyone began to learn the web when you see HTML5 naturally think of HTML, even if you have not learned HTML, as if heard of millet 2s is naturally also familiar with millet 3 red rice. Whether it is technology or products are standing on the shoulders of the predecessors developed, and so if familiar with HTML, for HTML5 learning is equivalent to the HTML in this container to continue to throw new things in, hahaha, as if more nonsense.

At present, the web has quietly attracted HTML5 era, the following revealed HTML5 success behind the veil.

1. First, what happened to the HTML5 grammar?!

1.1 Content types (ancestors unchanged)

Extension:. html or HTM

File type: text/html

Simplification of the 1.2DOCTYPE declaration

From the cumbersome statement: <! DOCTYPE HTML PUBLIC "-//W3C/DTD XHTML 1.0 transitional//en" "HTTP://www.w3.org/TR/xhtmll/DTD/xhtnll-transitional.dtd" >

After knocking, I am dizzy, don't be afraid later HTML5 won't let you faint, now declare only need this:

<! DOCTYPE html>

More importantly, HTML5 can also add the system identifier when using the tool

<! DOCTYPE html SYSTEM "" >

1.3 Specifying encoded characters

Can not only use the original specified way <meta http-equiv= "Content-type" content= "Text/html;charset=utf-8"/>

You can also use the simplified version of <meta charset= "UTF-8"/>

2. HTML-compatible processing

2.1 Tags that can be omitted

---not allowed to write the end tag,</> form can not be written in <></> (Br can also <br>)

Such elements have an area base br Col command embed hr img input keygen link meta-param source Track WBR

---can omit the end tag: Li DT dd p TR optgroup option Colgroup thead tbody tfoot tr TD th-----Suggestions do not omit, the syntax is correct, but will affect the effect of the text.

---are omitted: HTML head body colgroup tbody

(Colgroup in the above two appear, I also puzzling)

2.2 Has a Boolean property---True and false problem here is not the code, you can refer to the Spring Thunder "Html+css+javascript"

3. New elements

Web design of the hierarchy, before all with <div>, set the id attribute to specify the function, now directly with the attribute value as an element, set its function, the reason is very simple, since all can reach the destination, then why to choose Detours.

For example

header--Display header information

Article---Define standalone content, often used in user reviews or blog entries

<Div><P>When time goes by in your memory ...</P></Div><articlestyle= "border:1px solid blue;">    <P>We wake up slowly.</P>    </article>

Section---sections, such as sections of articles, headers, footers, and so on, a new cite property is added to the tag, referring to the URL of the resource

Nav---navigation links that can have multiple Nav in one HTML

<nav>        <ahref="#">Home</a>        <ahref="#">Image</a>        <ahref="#">Video</a>        </nav>

Hgroup---Applies to multi-title documents, the title is combined, you can understand hgroup quite a container containing a positive subtitle

Footer---eyebrow feet, bottom of page, footer elements inside the address element

4. New block-level semantic elements

Aside defines content outside the content, but is related to nearby content (comments, references, hints)

Figure defines the media content

Dialog define a dialog box or window with an open property that interacts with the user

5. In-line semantic elements

Mark element tag, equivalent to a highlighter marking text on paper

Time element defines the duration (24-hour), date

Meter elements define weights and measures

The process element defines the progress in the run

6. Other new elements

Video, audio, source, embed, canvas, BDI, Command, DataList, details, keygen, output, RP, RT, Ruby, track, summary

For the time being here, the first Bo deficiency is welcome to smash Bricks ~

Talk about the new elements and other features of HTML5

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.