HTML（五）

HTML5新結構標籤

h5新增的主要語義化標籤以下：

一、header 頁面頭部、頁眉
二、nav 頁面導航
三、article 一篇文章
四、section 文章中的章節
五、aside 側邊欄
六、footer 頁面底部、頁腳

頁面使用標籤佈局示意圖：

PC端兼容h5的新標籤的方法，在頁面中引入如下js文件:

<script type="text/javascript" src="//cdn.bootcss.com/html5shiv/r29/html5.js"></script>

HTML5 新增表單控件

新增類型：網址 郵箱 日期 時間 星期 數量 範圍 電話 顏色 搜索

<label>網址:</label><input type="url" name="" required><br><br> 
<label>郵箱:</label><input type="email" name="" required><br><br> 
<label>日期:</label><input type="date" name=""><br><br> 
<label>時間:</label><input type="time" name=""><br><br> 
<label>星期:</label><input type="week" name=""><br><br> 
<label>數量:</label><input type="number" name=""> <br><br>
<label>範圍:</label><input type="range" name=""><br><br> 
<label>電話:</label><input type="tel" name=""><br><br> 
<label>顏色:</label><input type="color" name=""><br><br> 
<label>搜索:</label><input type="search" name=""><br><br>

新增經常使用表單控件屬性：
一、placeholder 設置文本框默認提示文字
二、autofocus 自動得到焦點
三、autocomplete 聯想關鍵詞

HTML5 音頻和視頻

html5增長了audio和video標籤，提供了在頁面上插入音頻和視頻的標準方法。

audio標籤 
支持格式：ogg、wav、mp3

對應屬性：
一、autoplay 自動播放
二、controls 顯示播放器
三、loop 循環播放
四、preload 預加載
五、muted 靜音

舉例：

<audio src="source/audio.mp3" autoplay controls loop preload></audio>

<!-- 或者用以下方式：  -->

<audio  autoplay controls loop preload>
    <source src="source/audio.mp3" type="">
    <source src="source/audio02.wav" type="">
</audio>

source標籤的做用是提供多個媒體文件地址，若是一個地址的文件不兼容，就使用下一個地址。

video標籤 
支持格式：ogg、mp四、webM

屬性：
一、width
二、height
三、Poster

可選第三方播放器：一、cyberplayer二、tencentPlayer三、youkuplayer