HTML5 new common elements

HTML5 statement is:

it no longer like the previous version of the DTD as a reference in the statement. DTD (document type definition) define the legal building blocks of an XML document, it uses a series of legal elements to define the structure of the document. In HTML, DTD specifies the rules markup language, so that the browser can properly render content. And HTML5 is not based on SGML, so no reference DTD.

Document structure elements

<Article>: complete independence may be defined independently of the rest of the content block content.
<Header>: top of the page.
<Nav>: navigation (navigation side, the guide page, the guide bottom) tag.
<Hgroup>: defining a plurality of titles.
<Section>: content block cite attribute may be provided.
<Aside>: sidebar, page content and less defined correlation of content - if it is removed, the rest of the content is still very reasonable.
<Figure>: the representative of a document and related legend.
<Figcaption>: represents a legend description (title).
<Footer>: bottom of the page.
<Dialog>: Customize dialog box.

Embedded element

<Video> represents a piece of video and video files and subtitles, and provides a user interface to play video. Attributes are:
- src
- AutoPlay (control autoplay)
- loop (whether to re-play after the play)
- Controls (displaying a user interface)
- width
- height
<Audio> representative of a sound, or an audio stream. Text within the label will appear when the tag is not supported. Attributes are:
- src
- autoplay
- Loop (number of play, loop to -1)
- controls
- volume (volume)
<Source> Specifies the media source such as a media element <video> or <audio>. Properties have src \ type (MIME type specified resource).
<Track> Specifies the text track (subtitles) media elements such as <video> or <audio>. Attributes are:
- kind (data type)
- src
- srclang (language track text data)
- When the label when a list of available text tracks, text track title to use the browser, which is a user-readable title.
- Note: any two elements of a sub track of the media element can have the same kind, srclang, and a label attribute.
<Canvas> Representative bitmap area, real-time presentation graphics, such as graphs, game graphics, etc. on it by the script.
<Embed> represents an embedded external resource, such as an application or interactive content. Attributes are:
- width
- height
- src
- for selecting the type of the MIME type of plug-in instance.

Form elements

<Meter> on behalf of the slider. Display real-time status. Attributes are:
- value current value, if a given value between the minimum and maximum is not, its value equal to the value of its end closest.
- The minimum value min boundary values, the default is 0
- Max value maximum boundary values, the default is 1
- low low upper limit defined interval, when the value is in the low-min or high-max will exhibit different patterns.
- It defines the lower limit of the high high value interval.
- optimum optimal value
<Output> represents the calculated value.
- Other effects of the calculation results for ID tags can be multiple.
- form form (form dependent) associated with the current label. The value of this attribute must be the ID of the current form elements within the document. If the property is not specified, output label must be a form of offspring label. Usefulness of the property that allows the output label from the form tag, anywhere there is a web page in the document.
- name

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
    <input type="range" name="b" value="50" /> +
    <input type="number" name="a" value="10" /> =
    <output name="result"></output>
</form>

<Progress> represents the progress bar indicates that the task process, properties have max (the total task) \ value.
<Datalist> Input tag is defined as a drop-down list, with the option tag.

other

<Details> create a pendant, only when the state is switched to the expanded, it will display the information contained within.
<Summary> element is a child element details, which represents an overview or header.
<Mark> represents a piece of highlighted text that needs to be referenced.
<Ruby> represents a comment to be ruby marked text, such as Chinese characters and its alphabet.
<Rt> ruby Comment representation, such as Chinese pinyin.
<Rp> insert additional text on both sides of ruby annotation to provide friendly comments appear in the display does not support ruby annotations browser.

<ruby>夼<rp>(</rp><rt>kuang</rt><rp>)</rp></ruby>

By the way, html5 delete elements:

Pure performance: basefont \ big \ center \ font \ s \ strike \ tt \ u
Have a negative impact on the availability of: frame \ frameset \ noframes
Of confusion: acronym \ applet \ isindex \ dir

At the same time some elements of HTML5 also been redefined, they changed their language content but showed unchanged. Labels such as b, i label, still expressed as bold, italic, but represents the character that needs to be some attention, a section of the different nature of the text, such as technical terms, foreign phrases and so on.

HTML5 attribute changes

New type

email \ url \ tel \ number
Datepickers: date \ month \ week (iphone is not compatible) \ time \ datetime (UTC format, Andrews, i6 +, PC end is not compatible) \ datetime-local
For the PC: range (horizontal rod, on both sides of min and max) \ search (when × content appears on the right) \ Color (a color selection box)

Form Properties

autocomplete attribute: auto-complete function for labels, tags and the following types of input: text \ search \ url \ tel \ email \ password \ datepickers \ range \ color

<form autocomplete="on"> //on为打开，Off为关闭
</form>

The autofocus attribute: automatically obtains focus field, applied to all types of tags

<input autofocus="autofocus"/>

multiple attributes: select a plurality of predetermined values of the input fields for email \ file type of tag

<input type="file" multiple="multiple" />

placeholder property: providing a prompt describing the expected value of the input field for text \ search \ url \ tel \ email \ password type of tag

<input type="text" placeholder="please input your name!"/>

required attributes: provisions must be completed before submitting the entry field, and must be in accordance with the format corresponding domains, such as, email @ domain must have mail domain. Applies to text \ search \ url \ tel \ email \ password \ datepickers number \ checkbox \ radio \ file type of label

<input type="email" requried="required" />

Link Properties

sizes

<link rel="icon" href="icon.gif" type="image/gif" sizes="16*16" >
//网页头部标题的logo，可根据不同分辨率引用不同的sizes
//type为该图标的类型，说明该图标格式为gif

target

<base href="......" target="_blank" >

base label written in the head tag. target attribute controls all hyperlinks by default the entire page Open (originally _self), href specified pages all relative links reference URL;

Hyperlink properties
- media = "handheld" (expressed device is optimized, handheld for "handheld" equipment support, tv on the "TV" device support);
- hreflang = "zh" (Setting the language, zh Simplified Chinese express)
- rel = "external" (set a hyperlink references, external indicating that it is an external link)

Other properties

<Script> attributes
- defer: After loading the script does not execute (delayed execution), but then execution after the entire page has been loaded, ie only compatible
- async: the script is loaded asynchronously, executed immediately after loading the finished script, without waiting for the entire page to load completely to perform.

If async = "async": script execution rest of asynchronously page (when the page continues parsing, a script to be executed) with respect
If no async and defer = "defer": script executed when parsed page
if neither async nor defer: before the browser continues to parse the page, immediately read and execute the script

<Ol> properties
- start: start value set number of
- reversed: flashback arrangement reversed = "reversed"
<Html> properties: manifest

<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>

By setting the manifest attribute in the page or pages in the manifest file is added, you can cache this page, so we can offline access, and faster speed, because cached resources load faster. It can also reduce server load.
Once the file is cached, the browser will continue to display the cached version, even if modify the file on the server. In order to ensure the browser updates the cache needs to be updated manifest file.