1. 音頻標簽<audio>
<audio src = “./music/Alone.mp3” controls autoplay loop = “3” ></audio>
controls :在頁面中顯示音樂播放控件 autoplay :頁面加載自動播放
loop :設置循環播放次數
·瀏覽器音樂格式兼容 瀏覽器默認按順序查找兼容格式
<audio controls>
<source src = “./music/Alone.mp3”>
<source src = “./music/Alone.wav”>
<source src = “./music/Alone.ogg”>
瀏覽器不支持HTML5音頻播放 （頁面提示）
</audio>
2. 視頻標簽<video>
<video src = “./video/movie.mp4” controls autoplay>
controls :在頁面中顯示視頻播放控件 autoplay :頁面加載自動播放
<video>標簽類似<img>可以設置寬高位置等屬性
·瀏覽器視頻格式兼容 瀏覽器默認按順序查找兼容格式
<video controls>
<source src = “./video/movie.mp4”>
<source src = “./video/movie.ogg”>
瀏覽器不支持HTML5視頻播放 （頁面提示）
</video>
3. 表單構造標簽<input>
① (<label>的for屬性與<input>的id相關聯，點擊label中的email:可以使input獲取焦點)
<label for = “demo”>
email: <input type = “email” id = “demo”>
</label>
這樣可使獲取焦點的范圍擴大，在移動端觸屏具有便利優勢。
② <input>標簽構造表單基本類型歸納
| |
<input type="email"> |
輸入郵箱格式 |
| tel |
<input type="tel"> |
輸入手機號碼格式 |
| url |
<input type="url"> |
輸入url格式 |
| number |
<input type="number"> |
輸入數字格式 |
| search |
<input type="search"> |
搜索框（體現語義化） |
| range |
<input type="range"> |
自由拖動滑塊 |
| color |
<input type="color"> |
拾色器 |
| time |
<input type="time"> |
|
| date |
<input type="date"> |
|
| datetime |
<input type="datetime"> |
|
| month |
<input type="month"> |
|
| week |
<input type="week"> |
|
| reset |
<input type="reset" value="重置"> |
重置form表單中輸入的內容 |
其中color,month,week等標簽都具備兼容性問題，尤其以color突出。
③ <input>標簽，基本表單屬性歸納
| placeholder |
<input type="text" placeholder="請輸入用戶名"> |
占位符 |
| autofocus |
<input type="text" autofocus> |
自動獲得焦點 |
| multiple |
<input type="file" multiple> |
多文件上傳 |
| autocomplete |
<input type="text" autocomplete="off"> |
自動完成 |
| form |
<input type="text" form="某表單ID"> |
與其他<form>表單關聯，一同提交 |
| novalidate |
<form novalidate></form> |
關閉驗證 |
| required |
<input type="text" required> |
必填項 |
| pattern |
<input type="text" pattern="\d"> |
自定義驗證,可定義正則驗證 |
直接在input標簽中添加屬性如：<input required placeholder="請輸入用戶名">
④ <input>標簽，list屬性使用
<input list = “index”>
<datalist id = “index”>
<option value = “php”></option>
<option value = “python”></option>
<option value = “photoshop”></option>
<option value = “java”></option>
</datalist>
4. 表單list關聯標簽<datalist>：數據列表
<label for = “program”>
課程：<input list = “index” id = “program”>
</label>
<datalist id = “index”>
<option value = “php”></option>
<option value = “python”></option>
<option value = “photoshop”></option>
<option value = “java”></option>
</datalist>
5. 生成加密字符串標簽<keygen>
生成提交給服務器的加密處理的內容。
6. 輸出結果標簽<output> 語義化作用
與<input>輸入相對，使用方法類似一個<span>標簽，在頁面上展現一個字符串。
7. 度量器標簽<meter>
<label for = “”>
度量器：<meter min=”0” max=”100”low=”60”high=”80”value=”50”></meter>
</label>
8. 一個基本表單（<form>,<fieldset>,<legend>,<label>,<input>）
<form> （創建一個表單，便於統一提交所有填寫內容，以form為單位提交內容，
可與input的form屬性關聯）
<fieldset> （將表單元素進行分組，默認創建一個邊框）
<legend>這是一個表單</legend> （為fieldset標簽定義標題）
<label for = “”> （使用for關聯一個input）
email: <input type = “email” >
</label>
<label for = “”> （使用for關聯一個input）
tel: <input type = “tel” >
</label>
</fieldset>
</form>