HTML5新特性總結0804

語義化標籤

用最恰當的HTML元素標記的內容。

優勢：

1. 提高可訪問性
2. SEO
3. 結構清晰，利於維護

通用容器:

1. div 塊級通用容器
2. span 短語內容無語義容器

<title></title>：簡短、描述性、惟一（提高搜索引擎排名）。

搜索引擎會將title做爲判斷頁面主要內容的指標，有效的title應該包含幾個與頁面內容密切相關的關鍵字，建議將title核心內容放在前60個字符中。

<hn></hn>：h1~h6分級標題，用於建立頁面信息的層級關係。

對於搜索引擎而言，若是標題與搜索詞匹配，這些標題就會被賦予很高的權重，尤爲是h1

<header></header>：頁眉一般包括網站標誌、主導航、全站連接以及搜索框。

也適合對頁面內部一組介紹性或導航性內容進行標記。

<nav></nav>：標記導航，僅對文檔中重要的連接羣使用。

Html5規範不推薦對輔助性頁腳連接使用nav，除非頁腳再次顯示頂級全局導航、或者包含招聘信息等重要連接。

<main></main>：頁面主要內容，一個頁面只能使用一次。若是是web應用，則包圍其主要功能。

<article></article>：表示文檔、頁面、應用或一個獨立的容器。

article能夠嵌套article，只要裏面的article與外面的是部分與總體的關係。

<section></section>：具備類似主圖的一組內容，好比網站的主頁能夠分紅介紹、新聞條目、聯繫信息等條塊。

若是隻是爲了添加樣式，請用div

<aside></aside>：指定附註欄，包括引述、側欄、指向文章的一組連接、廣告、友情連接、相關產品列表等。

若是放在main內，應該與所在內容密切相關。

<footer></footer>：頁腳，只有當父級是body時，纔是整個頁面的頁腳。

<small></small>：指定細則，輸入免責聲明、註解、署名、版權。

只適用於短語，不要用來不標記「使用條款」，「隱私政策」等長的法律聲明。
不單純的樣式標籤（有意義的，對搜索引擎抓取有強調意義 strong > em > cite）

<strong></strong>：表示內容重要性。

<em></em>：標記內容着重點（大量用於提高段落文本語義）（斜體）

<cite></cite>：指明引用或者參考，如圖書的標題，歌曲、電影、等的名稱，演唱會、音樂會、規範、報紙、或法律文件等。（斜體）

<mark></mark>：突出顯示文本（黃色背景顏色），提醒讀者

<figure></figure>：建立圖（默認有40px左右margin）

<figcaption></figcaption>：figure的標題，必須是figure內嵌的第一個或者最後一個元素。

<blockquoto></blockquoto>：引述文本，默認新的一行顯示。

<time></time>：標記事件。datetime屬性遵循特定格式，若是忽略此屬性，文本內容必須是合法的日期或者時間格式。（再也不相關的時間用s標籤）

<abbr></abbr>：解釋縮寫詞。使用title屬性可提供全稱，只在第一次出現時使用就能夠了

<dfn></dfn>：定義術語元素，與定義必須緊挨着，能夠在描述列表dl元素中使用。

<address></address>：做者、相關人士或組織的聯繫信息（電子郵件地址、指向聯繫信息頁的連接）表示一個具體的地址，字體爲斜體，會自動換行

<del></del>：移除的內容。 <ins></ins>：添加的內容。

少有的既能夠包圍塊級，又能夠包圍短語內容的元素。

<code></code>：標記代碼。包含示例代碼或者文件名 （< < > >）

<pre></pre>：預格式化文本。保留文本固有的換行和空格。

<meter></meter>：表示分數的值或者已知範圍的測量結果。如投票結果。

例如：<meter value="0.2" title=」Miles「>20%completed</meter>

<progress></progress>：完成進度。可經過js動態更新value。

標籤新屬性

細說data dataset(IE11，火狐谷歌)

在HTML5中咱們可使用data-前綴設置咱們須要的自定義屬性，來進行一些數據的存放。經過dataset來獲取這些數據。這裏的data-前綴就被稱爲data屬性，其能夠經過腳本進行定義，也能夠應用CSS屬性選擇器進行樣式設置。數量不受限制，在控制和渲染數據的時候提供了很是強大的控制。

一個實例教你如何使用data dataset

例如咱們要在一個文字按鈕上存放相對應的id

下面是元素應用data屬性的一個例子：

<div id="food" data-drink="coffee" data-food="sushi" data-meal="lunch">¥20.12</div>
// 要想獲取某個屬性的值，能夠像下面這樣使用dataset對象：
var food = document.getElementById('food'); 
var typeOfDrink = food.dataset.drink;

classList(火狐谷歌最新，IE10以上)

• obj.classList.add() 添加class類
• obj.classList.remove() 移出class類
• obj.classList.contains() 判斷是否包含指定class類
• obj.classList.toggle() 切換class類
• obj.classList.length 獲取class類的個數

HTML5新表單

新的input類型

email

email 類型用於應該包含 e-mail 地址的輸入域。在提交表單時，會自動驗證 email 域的值。

E-mail: <input type="email" name="user_email" />

url

url 類型用於應該包含 URL 地址的輸入域。在提交表單時，會自動驗證 url 域的值。

Homepage: <input type="url" name="user_url" />

number

number 類型用於應該包含數值的輸入域。您還可以設定對所接受的數字的限定：

Points: <input type="number" name="points" min="1" max="10" />

range

range 類型用於應該包含必定範圍內數字值的輸入域。range 類型顯示爲滑動條。您還可以設定對所接受的數字的限定：

<input type="range" name="points" min="1" max="10" />

search

search 類型用於搜索域，好比站點搜索或 Google 搜索。search 域顯示爲常規的文本域。

新的form屬性

autocomplete

autocomplete 屬性規定 form 或 input 域應該擁有自動完成功能。
註釋：autocomplete 適用於 <form> 標籤，以及如下類型的 <input> 標籤：text, search, url, telephone, email, password, datepickers, range 以及 color。

<form action="demo_form.asp" method="get" autocomplete="on">
    E-mail: <input type="email" name="email" autocomplete="off" />
</form>

novalidate

novalidate 屬性規定在提交表單時不該該驗證 form 或 input 域。
註釋：novalidate 屬性適用於 <form> 以及如下類型的 <input> 標籤：text, search, url, telephone, email, password, date pickers, range 以及 color.

<form action="demo_form.asp" method="get" novalidate="true">
    E-mail: <input type="email" name="user_email" />
    <input type="submit" />
</form>

新的input屬性

autocomplete

autocomplete 屬性規定 form 或 input 域應該擁有自動完成功能。
註釋：autocomplete 適用於 <form> 標籤，以及如下類型的 <input> 標籤：text, search, url, telephone, email, password, datepickers, range 以及 color。

<form action="demo_form.asp" method="get" autocomplete="on">
    E-mail: <input type="email" name="email" autocomplete="off" />
</form>

autofocus

autofocus 屬性規定在頁面加載時，域自動地得到焦點。
註釋：autofocus 屬性適用於全部 <input> 標籤的類型。

User name: <input type="text" name="user_name"  autofocus="autofocus" />

form

form 屬性規定輸入域所屬的一個或多個表單。
註釋：form 屬性適用於全部 <input> 標籤的類型。
form 屬性必須引用所屬表單的 id：

<form action="demo_form.asp" method="get" id="user_form">
    First name:<input type="text" name="fname" />
    <input type="submit" />
</form>
Last name: <input type="text" name="lname" form="user_form" />

form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)

表單重寫屬性（form override attributes）容許您重寫 form 元素的某些屬性設定。
- 表單重寫屬性有：
    1. formaction - 重寫表單的 action 屬性
    2. formenctype - 重寫表單的 enctype 屬性
    3. formmethod - 重寫表單的 method 屬性
    4. formnovalidate - 重寫表單的 novalidate 屬性
    5. formtarget - 重寫表單的 target 屬性
註釋：表單重寫屬性適用於如下類型的 <input> 標籤：submit 和 image。

<form action="demo_form.asp" method="get" id="user_form">
E-mail: <input type="email" name="userid" /><br />
<input type="submit" value="Submit" />
<br />
<input type="submit" formaction="demo_admin.asp" value="Submit as admin" />
<br />
<input type="submit" formnovalidate="true" value="Submit without validation" />
<br />
</form>

height 和 width 屬性

height 和 width 屬性規定用於 image 類型的 input 標籤的圖像高度和寬度。
註釋：height 和 width 屬性只適用於 image 類型的 <input> 標籤。

<input type="image" src="img_submit.gif" width="99" height="99" />

list 屬性

list 屬性規定輸入域的 datalist。datalist 是輸入域的選項列表。
註釋：list 屬性適用於如下類型的 <input> 標籤：text, search, url, telephone, email, date pickers, number, range 以及 color。

Webpage: <input type="url" list="url_list" name="link" />
    <datalist id="url_list">
    <option label="W3Schools" value="http://www.w3school.com.cn" />
    <option label="Google" value="http://www.google.com" />
    <option label="Microsoft" value="http://www.microsoft.com" />
</datalist>

min、max 和 step 屬性

min、max 和 step 屬性用於爲包含數字或日期的 input 類型規定限定（約束）。
max 屬性規定輸入域所容許的最大值。
min 屬性規定輸入域所容許的最小值。
step 屬性爲輸入域規定合法的數字間隔（若是 step="3"，則合法的數是 -3,0,3,6 等）。
註釋：min、max 和 step 屬性適用於如下類型的 <input> 標籤：date pickers、number 以及 range。
下面的例子顯示一個數字域，該域接受介於 0 到 10 之間的值，且步進爲 3（即合法的值爲 0、三、6 和 9）：

Points: <input type="number" name="points" min="0" max="10" step="3" />

multiple 屬性

multiple 屬性規定輸入域中可選擇多個值。
註釋：multiple 屬性適用於如下類型的 <input> 標籤：email 和 file。

Select images: <input type="file" name="img" multiple="multiple" />

novalidate 屬性

novalidate 屬性規定在提交表單時不該該驗證 form 或 input 域。
註釋：novalidate 屬性適用於 <form> 以及如下類型的 <input> 標籤：text, search, url, telephone, email, password, date pickers, range 以及 color.

<form action="demo_form.asp" method="get" novalidate="true">
    E-mail: <input type="email" name="user_email" />
    <input type="submit" />
</form>

pattern 屬性

pattern 屬性規定用於驗證 input 域的模式（pattern）。
註釋：pattern 屬性適用於如下類型的 <input> 標籤：text, search, url, telephone, email 以及 password。
下面的例子顯示了一個只能包含三個字母的文本域（不含數字及特殊字符）：

Country code: <input type="text" name="country_code"
pattern="[A-z]{3}" title="Three letter country code" />

placeholder 屬性

placeholder 屬性提供一種提示（hint），描述輸入域所期待的值。
註釋：placeholder 屬性適用於如下類型的 <input> 標籤：text, search, url, telephone, email 以及 password。
提示（hint）會在輸入域爲空時顯示出現，會在輸入域得到焦點時消失：

<input type="search" name="user_search"  placeholder="Search W3School" />

required 屬性

required 屬性規定必須在提交以前填寫輸入域（不能爲空）。
註釋：required 屬性適用於如下類型的 <input> 標籤：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。

Name: <input type="text" name="usr_name" required="required" />

音頻(audio)和視頻(video)

支持的格式和寫法

音頻元素支持的3種格式：Ogg MP3 Wav

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  您的瀏覽器不支持 audio 元素。
</audio>

視頻元素支持三種視頻格式：MP四、WebM、Ogg。

<video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    您的瀏覽器不支持 video 標籤。
</video>

標籤屬性

• 音視頻：autoplay、controls、loop、muted、preload、src

• 視頻：autoplay、controls、loop、muted、width、height、poster、preload、src

方法

• load():從新加載音頻／視頻元素
• play()：開始播放音頻／視頻
• pause()：暫停當前播放的音頻／視頻

事件

• durationchange:當音頻/視頻的時長已更改時

• ended:當目前的播放列表已結束時

• pause:當音頻/視頻已暫停時

• play:當音頻/視頻已開始或再也不暫停時

• ratechange:當音頻/視頻的播放速度已更改時

• timeupdate:當目前的播放位置已更改時

• volumechange:當音量已更改時

事件屬性

• 只讀屬性

  • duration：返回當前的總時長
  • currentSrc：返回當前URL
  • ended：返回是否已結束
  • paused：返回是否已暫停

• 獲取並可修改的屬性：

  • autoplay：設置或返回是否自動播放
  • controls：設置或返回是否顯示控件（好比播放/暫停等）
  • loop：設置或返回是不是循環播放
  • muted：設置或返回是否靜音
  • currentTime：設置或返回當前播放位置（以秒計）
  • volume：設置或返回音量（規定音頻/視頻的當前音量。必須是介於 0.0 與 1.0 之間的數字。）
    1.0 是最高音量（默認）；0.5 是一半音量 （50%）； 0.0 是靜音；
  • playbackRate：設置或返回播放速度