一熙兔、HTML5 新增的語義化標簽
以前布局住涉，我們基本用 div 來做。div 對于搜索引擎來說秆吵，是沒有語義的五慈。
<header>：頭部標簽
<nav>：導航標簽
<article>：內(nèi)容標簽
<section>：定義文檔某個區(qū)域
<aside>：側邊欄標簽
-
<footer>：尾部標簽
HTML5語義化標簽
注意：
? 這種語義化標準主要是針對搜索引擎的
? 這些新標簽頁面中可以使用多次
? 在 IE9 中毙芜，需要把這些元素轉換為塊級元素
? 其實，我們移動端更喜歡使用這些標簽
二腋粥、HTML5 新增的多媒體標簽
新增的多媒體標簽主要包含兩個：音頻：<audio>、視頻：<video>
使用它們可以很方便的在頁面中嵌入音頻和視頻闹瞧，而不再去使用 flash 和其他瀏覽器插件展辞。
HTML5 在不使用插件的情況下，也可以原生的支持視頻格式文件的播放罗珍，當然覆旱，支持的格式是有限的蘸朋。
當前 <video> 元素支持三種視頻格式藕坯，盡量使用 mp4格式噪沙。
語法：
<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 >
視頻<video>常見屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 視頻就緒自動播放（Chrome需要添加muted來解決自動播放問題） |
| controls | controls | 向用戶顯示播放控件 |
| width | pixels（像素） | 設置播放器寬度 |
| height | pixels（像素） | 設置播放器高度 |
| loop | loop | 播放完是否繼續(xù)播放該視頻，循環(huán)播放 |
| preload | auto（預先加載視頻）none（不應加載視頻） | 規(guī)定是否預加載視頻（如果有了autoplay霹购，就忽略該屬性） |
| src | url | 視頻url地址 |
| poster | imgurl | 加載等待的畫面圖片 |
| muted | muted | 靜音播放 |
HTML5 在不使用插件的情況下齐疙，也可以原生的支持音頻格式文件的播放旭咽，當然，支持的格式是有限的穷绵。
當前 <audio> 元素支持三種音頻格式，盡量使用 mp3格式勾缭。
語法：
<audio src="文件地址" controls="controls"></audio>
< audio controls="controls" >
<source src="happy.mp3" type="audio/mpeg" >
<source src="happy.ogg" type="audio/ogg" >
您的瀏覽器暫不支持 <audio> 標簽
</ audio>
音頻<audio>常見屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 音頻就緒自動播放（Chrome禁止音頻自動播放） |
| controls | controls | 向用戶顯示播放控件 |
| loop | loop | 播放完是否繼續(xù)播放該音頻目养，循環(huán)播放 |
| src | url | 音頻url地址 |
多媒體標簽總結
? 音頻標簽和視頻標簽使用方式基本一致
? 瀏覽器支持情況不同
? 谷歌瀏覽器把音頻和視頻自動播放禁止了
? 我們可以給視頻標簽添加 muted 屬性來靜音播放視頻，音頻不可以（可以通過JavaScript解決）
? 視頻標簽是重點幻梯，我們經(jīng)常設置自動播放，循環(huán)和設置大小屬性碘梢，不使用 controls 控件
三、HTML5 新增的 input 類型
| 屬性 | 描述 |
|---|---|
| type="email" | 限制用戶輸入必須為Email類型 |
| type="url" | 限制用戶輸入必須為URL類型 |
| type="date" | 限制用戶輸入必須為日期類型 |
| type="time" | 限制用戶輸入必須為時間類型 |
| type="month" | 限制用戶輸入必須為月類型 |
| type="week" | 限制用戶輸入必須為周類型 |
| type="number" | 限制用戶輸入必須為數(shù)字類型 |
| type="tel" | 手機號碼 |
| type="search" | 搜索框 |
| type="color" | 生成一個顏色選擇表單 |
四菲嘴、HTML5 新增的表單屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| required | required | 表單擁有該屬性表示其內(nèi)容不能為空汰翠，必填 |
| placeholder | 提示文本 | 表單的提示信息复唤，存在默認值將不顯示 |
| autofocus | autofocus | 自動聚焦屬性烛卧，頁面加載完成自動聚焦到指定表單 |
| autocomplete | off/on | 當用戶在字段開始鍵入時，瀏覽器基于之前鍵入過的值呈宇，應該顯示出在字段中填寫的選項。默認已經(jīng)打開局雄，如autocomplete="on"甥啄，關閉autocomplete="off"需要放在表單內(nèi)蜈漓，同時加上name屬性宫盔，同時成功提交 |
| multiple | multiple | 可以多選文件提交 |
可以通過以下設置方式修改placeholder里面的字體顏色：
input::placeholder {
color: skyblue;
}
