HTML5新特性新標籤新屬性看這一篇就夠了

部分資料參考百度百科

HTML歷史上有如下版本：
①HTML 1.0：在1993年6月作爲互聯網工程工作小組(IETF)工作草案發布。
②HTML 2.0：1995年1 1月作爲RFC 1866發佈，於2000年6月發佈之後被宣佈已經過時。
③HTML 3.2：1997年1月14日，W3C推薦標準。
④HTML 4.0：1997年12月18日，W3C推薦標準。
⑤HTML 4.01（微小改進）：1999年12月24日，W3C推薦標準。
⑥HTML 5：HTML5是公認的下一代Web語言，極大地提升了Web在富媒體、富內容和富應用等方面的能力，被喻爲終將改變移動互聯網的重要推手。

HTML5的新特性：

新標籤：

<header>定義頭部，頁眉</header>
<nav>定義導航欄</nav>
<footer>定義底部，頁腳</footer>
<article>定義文章</article>
<section>文章中的小節，小區塊</section>
<aside>側邊，文章外部分</aside>

<datalist>:定義選項列表

<input type="text" value="輸入語言" list="lan"/>
<datalist id="lan">
<option>java</option>
<option>c</option>
<option>c++</option>
</datalist>

注意需要鏈接輸入框和datalist，用id鏈接，input 後屬性list="#id"
演示效果：


且具有默認提示效果。

<fieldset>可將表單內的相關元素分組，打包:

<fieldset>
	<legend>用戶登錄</legend>
	用戶名：<input type="text" />
	密碼：<input type="text" />
</fieldset>

新增input type 屬性值：

email ：

<fieldset>
	<legend>html5 new input type</legend>
	<form action="">
	郵箱<input type="email" /><br/>
	<input type="submit" />
	</form>
</fieldset>

Email屬性包含基本判斷，提交時會判斷@符號。

tel：

輸入手機號碼格式，pc端無特殊，移動端顯示數字鍵盤

number：

只能輸入顯示數字格式，其他格式無法顯示。

url：

仍然包括基礎判斷。

<fieldset>
	<legend>html5 new input type</legend>
	<form action="">
	網址<input type="url" /><br/>
	<input type="submit" />
	</form>
</fieldset>

search搜索框：

增加刪除功能

range滑塊：

與時間相關的屬性值time，date，datetime，month,week：

    <input type="time" ><br/>
	<input type="date" ><br/>
	<input type="datetime" ><br/>
	<input type="month" ><br/>
	<input type="week" ><br/>

附帶選擇功能。

placeholder佔位符/autofocus自動獲取焦點：

當輸入時，文字消失

<fieldset>
	<legend>html5 new input type</legend>
	<form action="">
	郵箱<input type="email" placeholder="輸入郵箱" autofocus="autofocus"/><br/>
	
	</form>
</fieldset>

multiple上傳：

<fieldset>
	<legend>html5 new input type</legend>
	<form action="">
	上傳<input type="file" multiple/>
	</form>
</fieldset>

可進行多選上傳，效果如下：

autocomplete自動補全：

<form action="">
	姓名：<input type="text" autocomplete="on" name="username"/>
	<input type="submit">
	</form>

首先觸發的前提是提交過數據，故必須要有一個輸入框和一個提交按鈕，且數據有自己的name值，如上爲username。

required必填項：

存在一定兼容性問題，火狐瀏覽器正常顯示，Google不存在效果，但可以取到不同的值

accesskey規定激活：

使某一元素獲得焦點的快捷鍵，採用alt+規定字母。

<form action="">
	姓名：<input type="text" autocomplete="on" name="username" accesskey="s"/><br>
	<input type="submit">
	
</form>

設置s爲快捷鍵，當alt+s時，會自動獲得焦點。