Tell you what html5 is more than ordinary html ?, More html5html

Tell you what html5 is more than ordinary html ?, More html5html

1. More semantic tags (developers can be more elegant and browsers can better understand)
Why does a search engine retrieve titles instead of "Introduction "? This is because the structure is different. However, the naming conventions of each class in the structure are different and cannot be standardized. Therefore, it is better to create new labels.
In some earlier browsers, h5 labels are incompatible and are considered div, which does not affect our functions. You can also add a new line of code document in the script. createElement ("header"), but how many labels are used, the number of lines of document to be written. createElement (""), so there is a third-party plug-in html5shiv. js
Usage:
<! -- [If lt IE 9]>
<Script type = "text/javascript" src = "http://www.ijquery.cn/js/html5shiv.js"> </script>
<! [Endif] -->
Note: The Html5.js file called on the page must be added to the Header element of the page, because IE browser must know this element before parsing the element, so this js file cannot be called at the bottom of the page.
2. Application tag
DataList
SS
Attribute
3. Link Description
What is the link between the link and the current document?
<A href = "01-sementic-tags.html" rel = "pre"> </a>
<A href = "02-application-tags.html" rel = "next"> </a>
Rel also appears elsewhere,
<Link rel = "stylesheet" href = "css.css">
Link itself does not request files, But rel = "stylesheet" will request files
Iv. Structure Data mark
<Div itemscope itemtype = "www.baidu.com">
<Div itemprop = ""> owner </div>
<Div itemprop = "puppy"> puppy 1 </div>
<Div itemprop = "puppy"> puppy 2 </div>
</Div>
5. ARIA: accessibility-rich Internet applications
<Label for = "myinput"> enter your name </label>
<Input type = "text" id = "myinput">
Why must we use label?
It is for search engine understanding
6. Custom Attributes
That is, attributes such as data-*. They are not functional, just to save strong related data of dom nodes.
<Ul id = "list"> </ul>
<Div id = "info"> </div>
<Script>
Var data = {
01 :{
Name: "James ",
Age: 18
},
02 :{
Name: "Li Si ",
Age: 19
},
03 :{
Name: "Wang Wu ",
Age: 20
}
};
For (var X in data ){
Var item = data [X];
Var oli = document. createElement ("li ");
Var olist = document. getElementById ("list ");
Oli. appendChild (document. createTextNode (item. name ));
Olist. appendChild (oli );
Oli. setAttribute ("data-name", item. name );
Oli. setAttribute ("data-age", item. age );
Oli. addEventListener ("click", function (){
Var name = this. getAttribute ("data-name ");
Var age = this. getAttribute ("data-age ");
Alert (age + name)
})
}
</Script>
The above Code uses the setattribue method to define custom attributes, and then getattribute is used to obtain custom attributes. Js has a new api for custom attributes, that is, dataset ['string']. Using this api can replace the getAttribute method:
Oli. addEventListener ("click", function (){
Console. log (this. dataset ["name"]);
})
7. Smart forms: new form types
<Input type = "date">
<Input type = "color">
<Input type = "range">
But try not to use it on the pc. the user experience is poor and the style cannot be customized. It is mainly applicable to mobile terminals.
Virtual Keyboard adaptation
<Input type = "text" name = "txt_text" id = "txt_text">
<Input type = "number" name = "txt_number" id = "txt_number">
<Input type = "email" name = "txt_email" id = "txt_email">
<Input type = "tel" name = "txt_tel" id = "txt_tel">
<Input type = "url" name = "txt_url" id = "txt_url">
The above code is useless on the pc end. It is mainly used on mobile terminals to call different keyboards based on different input types.
Although the input type = "email" seems to be able to verify the form, it is too weak. It only verifies whether there is @. If you really want to verify it, you still need to write the regular expression yourself.
8. webpage multimedia and audio
<Audio src = "A Moment of Reflection.mp3 .mp3" controls = "controls"> </audio>
However, the default player is too ugly. We generally write a button ourselves and then add an event for the button:
<Script>
Var btn = document. getElementById ("btn ");
Var btn1 = document. getElementById ("btn1 ");
Var audio = document. getElementsByTagName ("audio") [0];
Btn. addEventListener ("click", function (){
Audio. play ();
})
Btn1.addEventListener ("click", function (argument ){
Audio. pause ();
})
</Script>
9. Video
<Video src = "A Moment of Reflection.mp4" controls = "controls"> </video>
However, we generally do not use this method because videos are copyrighted. Some browsers only support one or two videos. We generally use source:
<Video controls = "controls">
<Source src = "itxm.net.web.mp4">
<Source src = "itxm.net.web.ogg">
<P> your browser does not support </p>
</Video>
There is also a plug-in that can help us with compatibility. It is a group of http://html5media.info/and ie7can be compatible with each other.
The following are multimedia attributes;
Export image_1b2cut34s130mfufars1a6m6va9.png-66.1kB] [1]
10. Subtitles
Disadvantage: the compatibility is not very good, and no one is using it now
2d and 3d canvas
Advantages: small size, high quality, good effect, and high controllability.