A, h5 new structural tags (meaningful div)
Head 1.header defined pages
The navigation section of the page is defined 2.nav
3.section define an area of the page
4.footer defined bottom of the page
5.article custom page article
6.aside defines the page's sidebar
7.hgroup the title of the page combined
8.figure will combine elements of a web page
9.figcaption add a caption to figure combination
10.dialog similar conversation box
eg:
<dialog open></dialog>
Note: Session box is turned off by default, you need to add open properties
Two, h5 add another tag
1. Define the text with the symbol
Syntax: <Mark> text with marks </ mark>
2. Define a scalar measurement within a known range or
语法:<meter value="10" min="0" max="100"></meter>
3. Identify the progress of the task or process
语法:<progress value="10" min="0" max="100"></progress>
Extended:
a) canvas or the canvas rendered image
b) embed defined external plug or interactive content, such as flash
c) main content body portion defined
Three, h5 audio and video
1. Audio
grammar:
<audio controls autoplay loop>
<source src="1.mp3" type="audio/mp3"/>
<source src="2.ogg" type="audio/ogg"/>
<source src="3.wav" type="audio/wav"/>
您的浏览器版本太低,请升级浏览器!
</audio>
Note:
a) controls the audio control bar was added
B) Set the audio autoplay AutoPlay (high version shielding autoplay autoplay)
c) loop loop
Note: Audio Supported audio formats: mp3, wav, ogg
2. Video
grammar:
<video controls autoplay loop width="数值" height="数值" poster="图片路径">
<source src="1.mp4" type="video/mp4"/>
<source src="2.ogg" type="video/ogg"/>
<source src="3.webm" type="video/webm"/>
您的浏览器版本太低,请升级浏览器!
</video>
Note:
a) width and height define the width and height of the video area
b) poster to load a picture in front of video playback
c) controls, autoplay, loop with the audio attributes of these
Note: video Supported video formats: mp4 (MPEG4), ogg, webm
Four, h5 new form type property
1.type=“email”
Limit mailbox user input type (i.e., input should contain @ sign, and before and after can not be empty @)
2.type=“url”
Restrict the user to enter a URL that input should contain "http:", and later can not be empty
3.type=“number”
Limit the user input to a digital type
eg: <input type="number" value="1" min="1" max="30" step="2"/>
Note: value setting default values, min minimum set, max maximum value set, step of setting each increment decrement values, default 1
4.type=“range”
Produce a slider form
eg: <input type="range" value="10" min="0" max="100"/>
5.type=“color”
Generating a color selection panel
6.type=“date”
Produce a panel to select a date
7.type=“time”
Generating a selection time of the panel
8.type=“month”
Generating a date selection panel
9.type=“week”
Select a date is the first few weeks of the year
10.type=“search”
Produce a sense search form
Five new h5 form a new property
1.required restrict user input is required and can not be empty
eg: <input type="text" required/>
2.placeholder = "Default message" to input the input box to add a default message
EG: <the INPUT of the type = "text" placeholder = "Please enter your user name" />
After 3.autofocus page loads the cursor to an input block autofocus
eg:<input type="text" autofocus/>
4.pattern = "regular expression" Enter the content to match the specified regular expression
eg: <input type="text" pattern="^[a-zA-Z0-9]{6,16}$"/>
5.min maximum number setting max to the minimum increment decrement step provided
6.list datalist designated as a drop-down list Tips
eg:
<input type="search" list="data"/>
<datalist id="data">
<option>a</option>
...
</datalist>
Extended: autocomplete = "on | off" auto-complete, Show History
eg:
<input type="text" autocomplete="off" name="username"/>
<form autocomplete="on|off"></form>
7. cancel form validation of h5
grammar:<form novalidate></form>