a quick build doctype
Html:xt <tab>Over version
Html:4s <tab>Strict version
Different doctype.The syntax is different,Although the results of browser parsing are consistent
two common semantic tags
<p></p>
<a href= "" ></a>
non-semantic tags
<span></span>
<div></div>
Three new semantic tags
<nav></nav>
<main>
<article></article>
<aside></aside>
</main>
<footer></footer>
four new semantic tag compatibility issues
Color:hotpink
In the low version of IEJS can be used inCreate the label
and Diaplay:block;
Judging condition: If LTE IE 8//lte:less than equal
[If LTE IE 8]
<script type= "Text/javascript" >
</script>
[EndIf]
five new semantic tag compatibility jsPlugins
Six inputthe new typeProperties
<form>
<fieldset>
<legend> inputNew Properties </legend>
<label>color:
<input type= "Color" >
</label>
</fieldset>
</form>
Seven Form validation
InputLabel Nega RequiredA non-null prompt will be made
Content filtering by setting regular pattern= "[0-9]{11}"//Phone number.
OninvalidAdding a FORM element validation validation failure calls
<script>
document.getElementById ("Btntel"). Oninvalid=function () {
if (this.value== "") {
This.setcustomvalidity ("Please enter the content: ")
}else{
This.setcustomvalidity ("Thank you:")
}
};
</script>
Eight input new properties
Placeholder Default prompt information
AUTOFOCUS specifies the cursor focus for an element
autocompleted The text box prompts for historical input information must have the name attribute must be submitted once before a prompt is available
The form association specifies that content other than the form form can also be obtained through the ID
Multiple file can add multiple files nine label to Media label
1, Video
<video src= "f:\ movie \ Movie \ Accompany Anthony through the long years _bd.mp4" poster= "1.jpg" Controls loop width= "200px" height= "200px" ></video >
Poster set video playback to start playback will disappear
Width Setting Video width
Height Set Video height
SRC Specifies the video path
Controls control bar
Loop Loop Playback
AutoPlay Auto Play
* :<source src= "accompany Anthony through the long years _bd.mp4" >
Source can specify multiple video files
2, Audio
<audio src= "" Controls AutoPlay loop>
<source src= "accompany Anthony through the long years _bd.mp4" >
<source src= "" >
</audio>
public properties for video and audio
SRC Specifies the video path
Controls control bar
Loop Loop Playback
AutoPlay Auto Play 10 get DOM element
Gets a single label document.queryselect (' input '). Style
Gets a number of qualifying elements obtained by an array
Queryselectorall.backgroundcolor= '; found the first found element, which returns the DOM object
11 Property Selector:
Document.queryselect (' Li[skill] '). style.backgroundcolor= ";
Document.queryselect ('. class '). Style.backgroundcolor= ';
Document.queryselect (' #id '). style.backgroundcolor= ';
12 Switching
Tag directly add data-path= "address" data-info= "content"
The script gets the Document.queryselector (". Imgbox"). style.background= "url (" +this.dataset[' path ']+ ");
document.dataset[' name ']
1 if there is more than one connector named after data-, remove-, use the hump to name
2 data-back letter cannot be capitalized, get undefined
13 progress bar
Progress value current Max current Max
<progress value= "></progress>"
<meter></meter> Custom progress bar two div external logo internal scaling 14 manipulation class div.classList.add (' Red ') Div.classList.remove () Div.classList.toggle () Div.classList.contains () judgment
15 New Torm tags
list= "Food" with the option property, you must set the value
Input is associated with an ID entry for list=datalist
<datalist>
<option value= "Lala" ></option>
<option value= "Lala" ></option>
<option value= "Lala" ></option>
</datalist>
<keygen keytype= "RSA" ></keygen>output acts like span, has no effect, is semantically strong, and can be used to display results
<output name= "" ></output>
<input type= "range" oninput= "" >
HTML5 new Properties