HTML5 總結- 語義化，多媒體標籤，input表單

近日複習了HTML5的內容，今日來總結一下吧 ! 不足之處多多指正

1、HTML5

HTML5主要學習瞭如下幾部份內容：

• 什麼是 HTML5
• H5 新增語義化標籤
• H5 新增多媒體標籤
• H5 新增 input 表單、表單屬性

一、什麼是 HTML5

1.1 定義

萬維網的核心語言、標準通用標記語言下的一個應用超文本標記語言（HTML）的第五次重大修改。用於取代HTML4與XHTML的新一代標準版本，因此叫HTML5。
廣義的HTML5 是 HTML5自己 + CSS3 + JavaScript

1.2 XHTML 可擴展超文本標記語言

XHTML是一種加強了的HTML，它的可擴展性和靈活性將適應將來網絡應用更多的需求 。

1.3 HTML5的設計目的

是爲了在移動設備上支持多媒體。增長了新特性：語義特性，本地存儲特性，設備兼容特性，鏈接特性，網頁多媒體特性，三維、圖形及特效特性，性能與集成特性，CSS3特性。
廢棄一些元素和屬性好比 font 、center 等..
HTML5在移動端開發以及遊戲開發中有廣闊的前景。

HTML5 MDN 介紹： https://developer.mozilla.org...

二、語義化標籤

經常使用的有：

• <header>：頭部標籤
• <nav>：導航標籤
• <article>：內容標籤
• <section>：塊級標籤
• <aside>：側邊欄標籤
• <footer>：尾部標籤

注意

1. 這種語義化標準主要針對搜索引擎的
2. 這些新標籤頁面中可使用屢次的
3. 在IE9中，須要把這些元素轉換爲塊級元素
4. 其實，咱們移動端更喜歡使用這些標籤
5. HTML5 還增長了不少其餘標籤，若有須要能夠去w3c等網站學習

三、多媒體標籤

3.1 < audio >音頻標籤

HTML5 在不使用插件的狀況下也能夠原生的支持音頻格式文件的播放，固然支持格式是有限的。
3.1.1 音頻格式
<audio> 元素支持三種音頻格式：ogg,mp3,wav,具體以下：

3.1.2 語法

<audio src="文件地址" controls="controls"></audio>

< audio controls="controls" >
<source src="happy.mp3" type="audio/mpeg" >
<source src="happy.ogg" type="audio/ogg" >
您的瀏覽器暫不支持audio標籤。
</ audio>

3.1.3 <audio> 音頻標籤常見屬性

屬性	值	描述
autoplay	autoplay	音頻加載完畢後自動播放
controls	controls	顯示控件
loop	loop	循環播放
preload	preload	預加載，並預備播放，若是使用「autoplay」，則忽略改屬性
src	url	路徑

3.2 < video >音頻標籤

3.2.1 音頻格式

<video> 元素支持三種音頻格式：ogg,mp4,webM,具體以下：

3.2.2 語法

<video src="文件地址" controls="controls"></video>

//兼容代碼
< video controls="controls" width="300">
<source src="move.ogg" type="video/ogg" >
<source src="move.mp4" type="video/mp4" >
您的瀏覽器暫不支持video標籤。播放視頻
</ video >

3.2.3 <video> 音頻標籤常見屬性

屬性	值	描述
autoplay	autoplay	音頻加載完畢後自動播放
controls	controls	顯示控件
loop	loop	循環播放
preload	auto(預先加載) none(不加載)	規定是否預加載，若是使用「autoplay」，則忽略改屬性
src	url	路徑
width	pixel（像素）	播放器寬度
height	pixel（像素）	播放器g高度
poster	Imgurl	加載等待的畫面圖片
muted	muted	靜音播放

3.3 總結

• 音頻標籤和視頻標籤使用基本一致
• 瀏覽器支持狀況不一樣
• 谷歌瀏覽器把音頻和視頻自動播放禁止了
• 咱們能夠給視頻標籤添加 muted 屬性能夠自定播放視頻，音頻不能夠
• 視頻標籤是重點，咱們常常設置自動播放，不使用controls控件，循環和設置大小屬性

四、input表單、表單屬性

表單類型及說明：

屬性值	說明
type="email"	限制用戶輸入必須爲Email類型
type="url"	限制用戶輸入必須爲URL類型
type="date"	限制用戶輸入必須爲日期類型
type="time"	限制用戶輸入必須爲時間類型
type="month"	限制用戶輸入必須爲月類型
type="week"	限制用戶輸入必須爲周類型
type="number"	限制用戶輸入必須爲數字類型
type="tel"	手機號碼
type="search"	搜索框
type="color"	生成一個顏色選擇表單

表單屬性及說明：

屬性	值	說明
required	required	表示變淡內容不能爲空，必填
placeholder	提示文本	表單的提示信息，存在默認值將不顯示
autofocus	autofocus	自動聚焦，頁面加載完畢後自動聚焦到指定表單
utocomplete	off/on	當用戶在字段開始鍵入時，瀏覽器基於遷鍵入過的值，應該顯示出在字段中填寫的選項。 默認已經打開，，如 autocomplete="on" 關閉autocomplete="off" 須要放在表單內同時加上name屬性 同時成功提交
multiple	multiple	能夠多選文件提交