The new HTML5 tags and attributes

I, on the DTD

HTML5 is not based on SGML, so no reference DTD (HTML 4.01 based on SGML)

Two, HTML5 tag structure

<header> tag defines a page or a region of the head portion
<nav> tag defined navigation links

<section> tag defines a region
<aside> tag defines the page content sidebar section

<article> tag defines an article
<hgroup> infos tag definition file in a block
<figure> tag defines a set of media content and a title thereof
<figcaption> tag defines the title figure elements.
<dialog> tag defines a box (box session) similar micro-letter

<footer> tag defines a page or a bottom area

Three, HTML5 multimedia label

Video (video)

compatibility:

safari support mp4, webm and does not support ogv
ie8 (included) do not support the video tag
ie9 support the video tag (but only support mp4)

<video src="..."
       autoplay="autoplay"
       controls="controls"
       loop="loop"
       width="500"
       height="500"
       poster="..."
       muted>

<!-- 其中loop设置循环 poster设置封面 muted静音 -->

Audio (Audio)

compatibility:

safari supports mp3 and wav, ogg not supported
JS the new Audia () to add one equivalent html <audio> </ audio> tag
chrome and opera does not automatically play interactive elements on a page can require
width / height attribute no effect, you must be used inside the style tag pattern to control it
In order to enhance the customer's experience level, you can add text between the start and end tags audio
<Source> element defines the standard for media media resources, can not be added to the <source> start tag, and <source> tag is a single tag, no closing tag.

<audio src="..."
       autoplay="autoplay"
       controls="controls"
       loop="loop"
       width="500"
       height="500">

Source : media elements (audio and video)

<video autoplay="autoplay"
       controls="controls"
       loop="loop"
       width="500"
       height="500">
    <source src="..." type="video/mp4"
</video>

embed : embed plugin (audio and video)

<embed src="..."
       type="audio/mp3"
       width="300" 
       height="300" />

Four, HTML5 Web application label

The MENU
<the MENU> list of commands ( currently not supported by all major browsers )
<MenuItem> the MENU command list tag (only FireFox8.0 + support)
<the Command> tag defines a command button on the MENU (only IE9 support)
Status label
<meter> tag status (status display in real time: pressure, temperature) C, O
<Progress> tag status (Task procedure: install, load) C, F, O
List tag
<datalist> tag defines input to a drop-down list, with F. Option, O
<Details> tag defines details of an element, mating summary C

Five, HTML5 other labels

<ruby> tag defines annotations or phonetic
<rp> to tell those who do not support the ruby element of the browser how to display
<rt> tag defines the content of the comment text for the ruby
<mark> tag is defined with the marked text (yellow selected)
<output> tag defines a number of types of output, with the result calculated form event oninput
<keygen> tag is defined in the form of a generated key (encrypted information transfer)
<time> tag defines a date / time, do not currently support all major browsers

Six, HTML5 to redefine label

(Displaying the same, but the meaning of the expression has been re-defined label)

<b> Representative inline text, usually bold, represents an important meaning is not transmitted
<i> Representative inline text, usually italicized, represents an important meaning is not transmitted
<dd> can be used in conjunction with the details and figure, defined contain text, dialog can also be used
<dt> may be used in conjunction with the details and figure, the details of the summary, dialog can also be used
Represents the end of the topic, rather than horizontal, although the same display
<menu> redefining the user interface menu, or command with the use menuitem
<small> represents the small print, such as printing or Legal Notes
<strong> represents the symbolic importance rather than emphasizing

Seven, HTML5 in the new type Input

email
url
number
range
Date picker：

DATE - Select the day, month, year

Month - Select the month, year

Week - Week and selected in

Time - select the time (hour and minute)

Datetime - Select the time, day, month, year (UTC time)

Local-datetime - select the time, date, month, year (local time)
search
color
tel

Eight, HTML5 Form Properties

AutoComplete : automatically for <form> tag, and the following types of <input> tag:
text, Search, URL, Telephone, In Email, password, datepickers, Range, Color.
Usage: <form autocomplete = "on" > </ form> or off individually using input
The autofocus : automatically obtains focus, for all <input> tag type
Usage: <input autofocus = "autofocus" />
Multiple : a plurality of selectable values for <input> of the type of email and file
usage: <input type = "file" multiple = "multiple" />
placeholder : suitable <input> of the type: text, search, url, telephone , email, password
required : provision can not be empty for the following types of <input> tags:
text, Search, url, Telephone, Email, password, DATE Pickers, Number The, the CheckBox, Radio, File
Usage: <input type = "text" required = "required" />

Nine, HTML5 Link Properties

size
<link rel=“icon” href=“icon.gif” type=“image/gif” size=“16x16”>
target
<base href=“http://localhost/” target=“_blank”>
Hyperlink
a: media = "" (expressed device is optimized, handhelp of "handheld" equipment support, tv for "TV);
A: hreflang =" zh "(Setting the language, set here the language is Chinese);
A: ref = "external" (set a reference to hyperlinks, where a hyperlink is an external link)

Ten, HTML5 other properties

the defer : After you load the script does not execute, but after the entire page has finished loading, etc. and then execute
<script defer src = "URL" > </ script>
the async : After loading a script executed immediately, without waiting for the entire page has loaded, belongs to asynchronous execution.
<script async src = "URL" > </ script>
Start - start value

Reversed - flashback arrangement

<ol start=“10” reversed>
    <li>Html</li>
    <li>Css</li>
    <li>JavaScript</li>
</ol>

= the manifest "cache.manifest" (defined in the application file page offline)
<= the manifest HTML "cache.manifest">