目錄
一、H5新增語意化標簽
二、新增多媒體標簽
2.1 audio音頻標簽
2.1.1音頻格式
2.1.2 代碼表示：
2.1.3屬性和屬性值
2.1.4 解決兼容性問題代碼
2.2video視頻標簽
2.2.1屬性
2.2.2解決兼容性問題
三、 H5新增input表單、表單屬性
3.1 type屬性
3.2 其他屬性
H5是對html的第五次重大修改
一、H5新增語意化標簽
<header>頭部標簽</header>
<nav>導航標簽</nav>
<article>內容標簽</article>
<section>塊級標簽</section>
<aside>側邊欄標簽</aside>
<footer>尾部標簽</footer>
- 這些標簽主要針對搜索引擎
- 他們可以在頁面中多次使用
- 在IE9中需要把這些元素轉換為塊級元素，例如：
header,
nav,
section{
display:block;
}- 移動端更傾向于使用這些標簽
二、新增多媒體標簽
2.1 audio音頻標簽
2.1.1音頻格式
當前，<audio>元素支持三種音頻格式:
-
Ogg Vorbis:不支持IE9，Safari3.0
-
MP3：不支持Firefox3.5，Opera10.5
-
Wav不支持IE9，Chrome3.0
2.1.2 代碼表示：
<audio src="" controls="controls">音頻檔案</audio>2.1.3屬性和屬性值
| 屬性 | 屬性值 | 功能 |
| control | controls | 向用戶顯示播放控制元件 |
| autoplay | autoplay | 自動播放 |
| loop | loop | 播放完是否繼續播放，回圈播放 |
<audio src="" controls="controls" autoplay="autoplay" loop="loop"></audio>2.1.4 解決兼容性問題代碼
<audio controls="controls" >
<source src="happy.mp3" type="audio/mpeg">
<source src="happy.ogg" type="audio/ogg">
當前瀏覽器不支持audio
</audio>2.2video視頻標簽
-
Ogg Vorbis:不支持IE，Safari
-
MP3：不支持Firefox，Opera
-
Wav不支持IE，Safari
代碼：
<video src="檔案地址" controls="controls" autoplay="autoplay"></video>2.2.1屬性
| 屬性 | 屬性值 | 功能 |
| controls | controls | 向用戶顯示播放控制元件 |
| autoplay | autoplay | 自動播放，（谷歌需要添加muted靜音屬性來解決自動播放問題 ） |
| loop | loop | 播放完是否繼續播放，回圈播放 |
| preload | auto|none | 規定是否預加載視頻如果有autoplay 就忽略該屬性 |
| poster | 圖片路徑 | 加載等待的畫面圖片，視頻為加載出來是先顯示該圖片 |
| muted | muted | 靜音播放 |
<video src="檔案地址" controls="controls" autoplay="autoplay" muted="muted"></video>
<video src="" poster="images/1.jpg">
</video>2.2.2解決兼容性問題
<video>
<source src="media/video.mp4" type="video/mp4"/>
<source src="media/video.ogg" type="video/ogg"/>
當前瀏覽器不支持video
</video>注意：視頻多數為MP4格式；經常設定自動播放，不使用controls控制元件，使用回圈和設定大小屬性
三、 H5新增input表單、表單屬性
3.1 type屬性
| 屬性值 | 說明 |
|---|---|
| type=“email” | 限制用戶輸入必須為Eamil型別 |
| type="url" | 限制用戶輸入必須為url型別 |
| type=“date” | 限制用戶輸入必須為日期型別 |
| type=“time” | 限制用戶輸入必須為時間型別 |
| type=“month” | 限制用戶輸入必須為月型別 |
| type=“week” | 限制用戶輸入必須為周型別 |
| type=“number” | 限制用戶輸入型別必須為數字型別 |
| type=“tel” | shoujihaoma |
| type=“search” | 搜索框 |
| type=“color” | 生成一個顏色選擇表單 |
代碼演示：
<form action="">
<ul>
<li>
郵箱地址：<input type="email"/>
</li>
<li>
網址：<input type="url"/>
</li>
<li>
<input type="submit"/>
</li>
<li>
數字：<input type="number"/>
</li>
<li>
日期：<input type="date"/>
</li>
<li>
時間：<input type="time"/>
</li>
<li>
手機號：<input type="tel"/>
</li>
<li>
顏色：<input type="color"/>
</li>
</ul>
</form>3.2 其他屬性
| 屬性 | 值 | 說明 |
|---|---|---|
| required | required | 表單擁有該屬性表示其內容不能為空，必填 |
| placeholder | 提示文本 | 表單的提示資訊，存在默認值將不顯示 |
| autofocus | autofocus | 自動聚焦屬性，頁面加載完成自動聚焦到指定表單 |
| autocomplete | off/on | 當用戶在欄位開始鍵入時，瀏覽器基于之前鍵入過得值，應該顯示出在欄位中填寫的選項，默認已經打開，如autocomplete=“on”,關閉autocomplete=“off”，需要放在表單內同時加上name屬性，同時成功提交 |
| multiple | multiple | 可以多選檔案提交 |
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/297160.html
標籤：其他
上一篇：Moment.js常見用法總結