HTML5新增標簽、表單新增類型與屬性
1html5新增標簽
1.1html5基本常識
1.1 html5支持浏覽器
IE9+，Firefox，Opera，Safari，Chrome。
1.2html5特點
增加了新特性，語義特性，本地儲存特性，設備兼容特性，連接特性，網頁多媒體特性，三維、圖形及特效特性，性能與集成特性，CSS3特性。
1.3DTD文檔
1 html:5，聲明文檔類型為html5；
2 html:4t，聲明文檔類型為html4.01過渡時期；
3 html:4s，聲明文檔類型為html4嚴格時期；
4 html:xt，聲明文檔類型為xhtml1.0過渡時期；
5 html:xt，聲明文檔類型為xhtml1.0嚴格時期。
1.2html5新增標簽
之所以增加新標簽，為了增強語義化，所以即使語義化後，新標簽的最外層還需要id名，內層需要類名。
1.2.1header標簽
1 header定義文檔的頁眉，通常是一些引導和導航信息。通常header標簽至少包含但不局限於一個標題標記h1-h6；也不僅僅局限於寫在網頁頭部，也可以用在網頁內部。
2 hgroup標簽對標題進行組合；存在多個標題時用hgroup包裹，表示同時描述同一個標題，也可包含表格內容、標識、導航條、搜索表單等。
3 header標簽不能放在footer，address或另一個header標簽元素內部。
1.2.2nav標簽
Nav作為頁面導航的鏈接組，語義更加精確，對屏幕閱讀器等設備支持更好。
1.2.3main標簽
在一個文檔中，不能出現一個以上main元素，同時main也不能是article,aside,footer,header,nav的後代。
1.2.4article標簽
文章，獨立的內容塊，可獨立於頁面其他內容使用。
<main>
<article>
<header></header>
<p></p>
<article></article>
</article>
</main>
Article可以嵌套，一般來說，article會有header部分，有時也會有footer。
1.2.5section標簽
章節、區塊，定義文檔的節，如章節、頭部、底部或文檔其他區域，它表示一段專題性內容，通常由內容和標題組成。
1.2.6aside標簽
側邊欄，用來裝載非正文的內容，與頁面內的主要內容是分開的，可以被刪除而不影響網頁內容。例如廣告、成組的鏈接。
1.2.7footer標簽
眉腳，一般包含作者信息，文檔版權信息，使用條款鏈接，聯系信息等。
1.2.8figure標簽
對圖像、文字進行組合；figcaption是figure的子元素，用來對figure的內容進行說明。
<figure>
<imgsrc=”” />
<figcaption>對上面圖片的描述</figcaption>
</figure>
1.2.9time標簽
用來表示時間或日期，屬性datetime，只會在控制台顯示。
1.2.10details標簽
僅Chrome和Safari支持。細節，默認細節不顯示；Summary摘要，總結，給details定義標題；open屬性規定內容是否顯示<detailsopen=”open”>
<details>
<summary>蒹葭</summary>
<p>蒹葭蒼蒼…….</p>
<details>
1.2.11mark標簽
定義帶記號的文本，在需要突出顯示文本時使用mark標簽。
1.2.12progres標簽
<progressmax=”60” value=”30”></progress>
1.2.13meter標簽
<meter min=”” max=”” low=”” high=””optimum=””></meter>
度量尺，除了ie都支持該標簽。其中min為最小值，max為最大值，low為較低值，high為較高值；optimum為定義最佳值，低於low值時，則意味著值越低越好。
1.2.14ruby注釋標簽
<ruby>標記定義、注釋、商標。
<rt>標記定義時對ruby的注釋內容
<ruby>淼<rt>miao</rt></ruby>
2表單新增標簽
2.1datalist數據列表
與input配合使用，實現擁有輸入功能的下拉列表。
<inputtype=”text” list=”fruits”>
<datalist id=”fruits”>
<optionvalue=”蘋果”>apple</option>
………..
</datalist>
2.2output輸出
標記定義一些輸出類型，計算表單結果。
3表單新增輸入類型
3.1color
<input type=”color” />拾色器
3.2email
<input type=”email” />郵箱，驗證規則：只識別英文和@。
3.3number
<input type=”number” />只能輸入數字
3.4tel
<input type=”tel” />電話
3.5url
<input type=”url” />會在提交時對url字段集進行驗證，只識別全程http://baidu.com
3.6search
<input type=”search” />搜索框
3.7range
<input type=”range” min=”20” max=”100”value=”30” step=”” />特性范圍內數值選擇器，其中step是指每移動一次的步數
3.8date
<input type=”date/month/week” /> 年月 日 / 年月/ 年 周
3.9time
<input type=”time” />時間，時與分
3.10datetime-local
<input type=”datetime-local” />當地時間，年月 日 時 分 秒
4表單新增屬性
4.1placeholder
<input type=”text” placeholder=”請輸入” /> 輸入框內灰色提示詞
4.2自動獲取焦點
<input type=”text” autofocus />打開頁面時，首先跳到這個文本框
4.3multiple
Type=file，可以選擇多個文件上傳。
4.4required
<inputtype=”text” placeholder=”請輸入” required />提交文檔時，這個文本框必須輸入內容，否則無法提交。
4.5pattern
添加正則表達式，輸入驗證碼。