一.Html5 的優(yōu)點(diǎn)
1.提高可用性,改進(jìn)用戶體驗(yàn)呕童。
2.添加新標(biāo)簽,有助于開發(fā)人員定義重要的內(nèi)容。
3.更多的多媒體元素(視頻影音)哈街。
4.很好的替代flash和siverlight
5.對搜索引擎更加友好。Seo優(yōu)化拒迅。
6.可移植性比較好骚秦,將被大量應(yīng)用于應(yīng)用程序和游戲。
二.HTML5的兼容性
chrome? firefox? IE9以上
--需要查詢w3c的標(biāo)準(zhǔn)來確定
三.HTML5新增的格式標(biāo)簽
Header 頭部
nav 導(dǎo)航
footer頁腳
main(ie 不支持)主體部分
aside 側(cè)邊欄
section 帶標(biāo)題的段
article文章 貼子 等
details (open 屬性 打開)配合 --summary
summary? 解釋說明璧微。 chrome safari 支持 新版本火狐支持作箍。基本不用前硫。
dialog? (open 屬性)定義一個對話框 脫離文檔流
--只有chrome? safari支持
四.html5新增的文本標(biāo)簽
A:? bdi? 允許改變文本方向(bdo)? ? 各大瀏覽器都不支持胞得。
B: mark? 高亮顯示∫俚纾可以改變背景顏色來改變高亮的顏色
C:? meter 定義度量
屬性:
high? low(警戒值)
max min (最大最小值)
value (當(dāng)前值)
optimum(當(dāng)值大于high說明越高越好阶剑,小于low,越小越好)ie不認(rèn)識? ? ?大小可以,別的樣式改不了危号。
D:? progress? 進(jìn)度
和meter差不多牧愁。語義性。一個是固定的度數(shù)外莲。一個是進(jìn)度完成了多少猪半。? IE認(rèn)識
E: time? 定義一個時間??? 國慶節(jié)
F: wbr? 截?cái)鄦卧~? ?一行可以顯示時不換行.
G: ruby? 注音??? 犇ben??? 骉biao
五.新增的圖像標(biāo)簽
1. figure
2. canvas
六. 列表標(biāo)簽
定義對話? 解釋說明
dl
dt
dd
七.音視頻標(biāo)簽
視頻? video
屬性
src
controls
width
height
loop
muted
autoplay
poster
preload? 流媒體
音頻? audio
src
controls
width
height
loop
muted
autoplay
資源
八. html5新增的表單元素
1. type="email"
2. type="url"? ?需要使用http://? 協(xié)議和域名
3. type="number"
屬性
min 最小值
max 最大值
step 步數(shù)
4. type="range"
屬性
min 最小值
max 最大值
step 步數(shù)
5. type="search"? 類似于text
webkit內(nèi)核results屬性
6. type="tel"? 電話號碼
pc端? 類似于text
移動端? 調(diào)用數(shù)字鍵盤
7. type="color" 調(diào)用顏色
IE最高版本支持
8. type="date"? ?獲取日期(年月日)??? 只有webkit支持
9. type="month"? 獲取年 月
10. type="week"? 獲取年 周
11. type="time"? 獲取時 分
12. type="datetime"? ?獲取utc時間? 暫時不支持
13. type="datetime-local"? 獲取本地時間? 年月日 時分
九.新增的表單控件
pattern? 正則驗(yàn)證 內(nèi)容為空的時候不驗(yàn)證 和required配合
multiple 可以選擇多個文件。type=”file” 時
placeholder? 提示文字,和value不同
autocomplete? 自動完成? ? 可以設(shè)置值為? on/off
autofocus? ? ? ?自動獲取焦點(diǎn)? 只能給一個input獲取焦點(diǎn)
required? ? ? ? ? ?不為空
十. 新增的form屬性
autocomplete? 自動完成
off? | on
novalidate? ? 表單不驗(yàn)證