(二)HTML5新增
HTML5的新增特性主要是針對以前的不足，增加了一些新的标簽、新的表單屬性和新的input類型等。
但這些新特性都有相容性問題，基本是IE9+以上版本的浏覽器才支援，如果不考慮相容性問題，可以大量使用這些新特性。
1、HTML5新增的語義化标簽
以前布局，我們基本用div來做，但div對于搜尋引擎來說，是沒有語義的。
常用新标簽：
| 标簽 | 語義 |
|---|---|
| 頭部标簽 |
| 導航标簽 |
| 内容标簽 |
| 定義文檔某個區域 |
| 側邊欄标簽 |
| 尾部标簽 |
注意：
- 這種語義化标準主要是針對搜尋引擎的
- 這些新标簽頁面中可以使用多次
- 在IE9中，這些标簽預設不是塊級元素，是以需要把這些元素轉換成塊級元素
- 移動端更喜歡使用這些标簽
2、HTML5新增的多媒體标簽
新增的多媒體标簽主要包含兩個：
音頻标簽：視訊标簽：<audio>
<video>
使用它們可以很友善的在頁面中嵌入音頻和視訊，而不再去使用flash和其他浏覽器插件。
HTML5在不使用插件的情況下，也可以原生的支援音頻和視訊格式檔案的播放，當然，支援的格式是有限的。
(1)音頻audio
目前audio元素支援三種音頻格式：
MP3 Wav Ogg
，但考慮相容性，盡量使用mp3格式
常見屬性：
| 屬性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 音頻在就緒後馬上播放 |
| controls | controls | 添加顯示控件，比如播放按鈕 |
| loop | loop | 音頻結束時重新開始播放 |
| src | url | 要播放的音頻的url |
但谷歌浏覽器把音頻和視訊的自動播放禁止了。
(2)視訊video
目前video元素支援三種視訊格式：
MP4 WebM Ogg
，但考慮相容性，盡量使用mp4格式
<video src="檔案位址" controls="controls"></video>
/*考慮相容性的寫法*/
<body>
<video width="320" height="240" controls>
<sourse src="movie.mp4" type="video/mp4">
<sourse src="movie.ogg" type="video/ogg">
您的浏覽器不支援 video 标簽。
</video>
</body>
視訊
<video>
常見屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 視訊就緒自動播放(谷歌浏覽器需要添加muted來解決自動播放問題) |
| controls | controls | 向使用者顯示播放控件 |
| width | pixels(像素) | 設定播放器寬度 |
| height | pixels | 設定播放器高度 |
| loop | loop | 播放完是否循環播放 |
| preload | auto(預先加載視訊) none(不應加載視訊) | 規定是否預加載(如果有了autoplay 就忽略該屬性) |
| src | url | 規定url位址 |
| poster | img url | 加載等待的畫面圖檔 |
| muted | muted | 靜音播放 |
3、HTML5新增的表單屬性
| 屬性 | 值 | 說明 |
|---|---|---|
| required | required | 表示該内容不能為空，必填 |
| placeholder | 提示文本 | 表單的提示資訊，存在預設值将不顯示 |
| autofocus | autofocus | 自動聚焦屬性，頁面加載完成自動聚焦到指定表單 |
| autocomplete | off/on | 當使用者在字段開始鍵入時，浏覽器基于之前鍵入過的值，應該顯示出在字段中填寫的選項；預設已經打開，如 |
| multiple | multiple | 可以多選檔案送出 |
<style>
input::placeholder { /*可以修改提示資訊的字型顔色*/
color: pink;
}
</style>
<form action="">
<input type="search" name="sear" id="" required="required" placeholder="提示資訊" autofocus="autofocus"
autocomplete="off">
<input type="file" name="" id="" multiple="multiple">
<input type="submit" value="送出">
</form>
4、HTML5新增的input類型
| 屬性值 | 說明 |
|---|---|
| type=“email” | 限制使用者輸入必須為Email類型 |
| type=“url” | url |
| type=“date” | date |
| type=“time” | time |
| type=“month” | month |
| type=“week” | week |
| type=“number” | number |
| type=“tel” | 手機号碼 |
| type=“search” | 搜尋框 |
| type=“color” | 生成一個顔色選擇表單 |
![門戶通專訪草根站長九天狼：做站貴在堅持[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)