前言

本文主要講解HTML5中新增了哪些內容。

語義化標簽

HTML5新增了語義化標簽這個特性，再語義化標簽沒有出現前，我們是用原始DIV來進行布局，這樣雖然能實現想要的布局，但同時當我們沒有CSS樣式時，布局就會失效，但如果使用語義化標簽，則能保證標簽大的整體布局不會因為CSS發生大的變化，能夠保證基本的結構。

常用語義化標簽

• header：頭部標簽
• nav：導航欄
• section：具體某個區域
• aside：側邊欄
• time:日期
• footer：頁面底部標簽

優點

• 使得代碼整體結構清晰，便于二次開發與高效處理代碼。
• 好的語義結構，便于被python腳本高效獲取想要的信息

新增input屬性

H5新增了input的type屬性值，讓開發者省去了很多校驗和對比的時間。比如：time、email、url等。

新增type屬性值內容

• type=color，顏色選擇器，可以選擇顏色。
• type=email，限制用戶輸入類型為email格式
• type=number，限制用戶輸入類型為number格式
• type=time，限制用戶輸入類型為時間
• type=date，限制用戶輸入類型為日期
• type=tel，限制用戶輸入類型為電話號
• type=search，搜索
• type=week，限制用戶輸入類型為周

其他新增input屬性

• required：加上該輸入框值則為必填
• mulitupe：多選文件提交
• placeholder:提示文本

video（視頻）與audio（音頻）標簽

新增了視頻和音頻標簽，用于視頻或者音頻的顯示。
video屬性：

• autoplay：視頻準備完成自動播放，谷歌瀏覽器需加入muted屬性才能生效
• controls：展示播放器控件
• width與height：寬高，又名像素
• loop：循環播放
• src：url地址
• muted：靜音播放

而音頻常用屬性為上述屬性中的autoplay、controls、loop和src。