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