-
國家級
全民數字素養與技能培訓基地 -
河南省
第一批產教融合型企業建設培育單位 -
鄭州市
數字技能人才（碼農）培養評價聯盟
HTML5并不僅僅是作為HTML標記語言的一個最新版本,更重要的是它制定了web應用開發的一系列標準, 成為第一個將web作為應用程序開發平臺的HTML語言。
HTML5定義了一系列的新元素, 如新語義標簽, 智能表單, 多媒體標簽, 可以幫助開發者創建互聯網應用, 同時有令人眼花的css3, 還提供了一些JavaScript的API(應用程序接口), 列如: 地理定位 重力感應, 硬件訪問, 可以在瀏覽器內實現類似于原生應用, 制作webAPP, 甚至結合Canvas可開發一些網頁板的小游戲啊。
H5其實只是一個泛稱, 是由HTML5+CSS3+JavaScript等技術結合而成的一個應用開發平臺。
1.HTML5的兼容性
新增的部分有兼容性的問題, 并不是所有的html5都是IE9兼容的, 有一些屬性是需要IE10或者更高級的瀏覽器才能兼容, 所以, html5更多應用在移動端的方面, 因為移動端搭載的瀏覽器比較高級。
2.HTML5的骨架
代碼示例:
<!DOCTYPE html> <html> <head> <meta charset=”UTF-8″> <title>Title</title> <style> </style> </head> <body> </body> </html>
HTML5骨架是沒有兼容的問題的。
反問：如果在xt的文檔DTD里面書寫h5的內容，會帶來兼容問題么？
答：跟你用什么文檔DTD沒有關系 主要跟瀏覽器有關系。
3.HTML5新增的標簽
新增的6大結構標簽：
（1）header 網站頭部 （2）nav 導航欄（3）section 類似于div （4）aside 文件側欄（5）article 文章/文本內容（6）footer 網站腳部
作用：跟div一模一樣 ，就是增加了語義性更加利于seo優化。
由于html5新增的標簽有兼容問題，所以我們需要做兼容！怎么實現？
（1）利用document.creatElement()去創建html5的新標簽，同時設置成塊元素
<!–[if lt IE 9]>
<script type=”text/javascript”>
var e = “abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video”.split(‘, ‘);
var i= e.length;
while (i–){
document.createElement(e[i])
}
</script>
<![endif]–>
（1）借助于第三方的JS框架 =>html5shiv.min.js （推薦）配合IE的hack實現最佳兼容。
<!–[if lt IE 9]>
<script src=”js/html5shiv.min.js”></script>
<![endif]–>
注明：還有一些新增的用到的不多，所以了解即可，上述六個結構標簽是最為常用的。
4.HTML5新增的智能表彰
以前學過 type =text ，submit ，reset，radio。。。。
type=”email” 限制用戶輸入必須為Email類型
type=”url” 限制用戶輸入必須為URL類型
type=”date” 自動生成一個日期控件
type=”number” 限制用戶輸入必須為數字類型
type=”range” 產生一個進度條的表單
type=”search” 產生一個搜索意義的表單
type=”color” 生成一個顏色選擇表單
總結：智能表單的兼容比較大，在移動端用的較多，移動端會自動調取手機本身的控件（不同手機之間會略有不同，但如果需要高度自定義，就需要用JS去寫了）。
