1 文檔類型設定
- document
- HTML:
- XHTML:
- HTML5
2 字符設定
-
<meta http-equiv="charset" content="utf-8">：HTML與XHTML中建議這樣去寫 -
<meta charset="utf-8">：HTML5的標籤中建議這樣去寫
3 常用新標籤
- header：定義文檔的頁眉
- nav：定義導航鏈接的部分
- footer：定義文檔或節的頁腳
- article：標籤規定獨立的自包含內容
- section：定義文檔中的節（section、區段）
- aside：定義其所處內容之外的內容
4 常用新屬性
| 屬性**** | 用法**** | 含義**** |
|---|---|---|
| placeholder**** | 佔位符提供可描述輸入字段預期值的提示信息 | |
| autofocus**** | 規定當頁面加載時 input 元素應該自動獲得焦點 | |
| multiple**** | 多文件上傳 | |
| autocomplete**** | 規定表單是否應該啓用自動完成功能 | |
| required**** | 必填項 | |
| accesskey**** | 規定激活（使元素獲得焦點）元素的快捷鍵 |
5 新增的type屬性值
| 類型**** | 使用示例**** | 含義**** |
|---|---|---|
| email**** | 輸入郵箱格式 | |
| tel**** | 輸入手機號碼格式 | |
| url**** | 輸入url格式 | |
| number**** | 輸入數字格式 | |
| search**** | 搜索框（體現語義化） | |
| range**** | 自由拖動滑塊 | |
| time**** | ||
| date**** | ||
| datetime**** | ||
| month**** | ||
| week**** |
6 綜合案例
<form action="">
<fieldset>
<legend>學生檔案</legend>
<label for="userName">姓名:</label>
<input type="text" name="userName" id="userName" placeholder="請輸入用戶名"> <br>
<label for="userPhone">手機號碼:</label>
<input type="tel" name="userPhone" id="userPhone" pattern="^1\d{10}$"><br>
<label for="email">郵箱地址:</label>
<input type="email" required name="email" id="email"><br>
<label for="collage">所屬學院:</label>
<input type="text" name="collage" id="collage" list="cList" placeholder="請選擇"><br>
<datalist id="cList">
<option value="前端與移動開發學院"></option>
<option value="java學院"></option>
<option value="c++學院"></option>
</datalist><br>
<label for="score">入學成績:</label>
<input type="number" max="100" min="0" value="0" id="score"><br>
<label for="level">基礎水平:</label>
<meter id="level" max="100" min="0" low="59" high="90"></meter><br>
<label for="inTime">入學日期:</label>
<input type="date" id="inTime" name="inTime"><br>
<label for="leaveTime">畢業日期:</label>
<input type="date" id="leaveTime" name="leaveTime"><br>
<input type="submit">
</fieldset>
</form>
7 多媒體標籤
-
embed：標籤定義嵌入的內容 -
audio：播放音頻 -
video：播放視頻
7.1 多媒體 embed
embed可以用來插入各種多媒體，格式可以是 Midi、Wav、AIFF、AU、MP3等等。url爲音頻或視頻文件及其路徑，可以是相對路徑或絕對路徑。
因爲兼容性問題，我們這裏只講解 插入網絡視頻， 後面H5會講解 audio 和video 視頻多媒體。
<embed src="http://player.youku.com/player.php/sid/XMTI4MzM2MDIwOA==/v.swf" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>
優酷，土豆，愛奇藝，騰訊、樂視等等
- 先上傳
- 在分享
7.2 多媒體 audio
HTML5通過<audio>標籤來解決音頻播放的問題。
使用相當簡單，如下圖所示
並且可以通過附加屬性可以更友好控制音頻的播放，如：
- autoplay 自動播放
- controls 是否顯不默認播放控件
- loop 循環播放
由於版權等原因，不同的瀏覽器可支持播放的格式是不一樣的，如下圖供參考
多瀏覽器支持的方案，如下圖
7.3 多媒體 video
HTML5通過<video>標籤來解決音頻播放的問題。
同音頻播放一樣，<video>使用也相當簡單，如下圖
同樣，通過附加屬性可以更友好的控制視頻的播放
- autoplay 自動播放
- controls 是否顯示默認播放控件
- loop 循環播放
- width 設置播放窗口寬度
- height 設置播放窗口的高度
由於版權等原因，不同的瀏覽器可支持播放的格式是不一樣的，如下圖供參考
多瀏覽器支持的方案，如下圖
