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