HTML5 new Properties

Source: Internet
Author: User


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

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.