什么是 HTML5

HTML的發(fā)展歷程如下：

產(chǎn)生于1990年

1997年 HTML4 出現(xiàn)，成為互聯(lián)網(wǎng)開(kāi)發(fā)的標(biāo)準(zhǔn)

2008年，HTML5正式出現(xiàn)，2002年趨于穩(wěn)定

HTML在發(fā)展過(guò)程中，HTML4.01 版本維持了長(zhǎng)達(dá)十年的時(shí)間，之后 HTML5 標(biāo)準(zhǔn)才出現(xiàn)，它被認(rèn)為是下一代互聯(lián)網(wǎng)標(biāo)準(zhǔn)。我們今天 Web 開(kāi)發(fā)關(guān)于 HTML 內(nèi)容相關(guān)的，絕大部分都是基于 HTML5 標(biāo)準(zhǔn)來(lái)進(jìn)行開(kāi)發(fā)的。

引言

最近，csdn也是迎來(lái)了第二波“原力計(jì)劃”，與其在家無(wú)所事事，不如多多學(xué)習(xí)來(lái)充實(shí)自己，眼看大三下就要為實(shí)習(xí)做準(zhǔn)備了，該為自己的未來(lái)提前做好準(zhǔn)備和籌劃了。個(gè)人偏向前端開(kāi)發(fā)，于是今后的博客內(nèi)容幾乎都是關(guān)于前端方面的東西了，如果小伙伴們也對(duì)前端感興趣的話，不妨互相關(guān)注一波，可以在評(píng)論區(qū)交流交流。

本文主要介紹相比于HTML4來(lái)說(shuō)，HTML5有了哪些新的特性了呢，又廢除了哪些元素和屬性呢？

新增的元素和廢除的元素

新增的結(jié)構(gòu)元素

seciton、article、aside、header、hgroup、footer、nav、figure

新增的其它元素

video、audio、embed、mark、progress、meter、time、ruby、rt、rp、wbr、canvas、command、details、datalist、datagrid、keygen、output、source、menu

新增的input元素的類型

email、url、number、range、Data Pickers

廢除的元素

能使用CSS替代的元素： basefont、big、center、font、s、tt、u等

不再使用frame框架

只有部分瀏覽器支持的元素

其它被廢除的元素

新增的屬性和廢除的屬性

新增的屬性

表單相關(guān)的屬性

鏈接相關(guān)的屬性

其它屬性

廢除的屬性

友情提示：以上提及到的屬性和元素均會(huì)在下面進(jìn)行說(shuō)明和介紹。

HTML5“新”特性

這里給新打上引號(hào)是因?yàn)?#xff0c;說(shuō)它新但是也確實(shí)不新了，畢竟也出現(xiàn)十多年了，而且現(xiàn)在大部分的特性API都已經(jīng)被開(kāi)發(fā)使用的差不多了。但是說(shuō)它不新吧也不太對(duì)，因?yàn)?HTML5 里面很多 API 都是特性場(chǎng)景特定功能，如果只是一般開(kāi)發(fā)簡(jiǎn)單的前端頁(yè)面，那么大部分是不會(huì)用到的，所以很多人也不怎么了解。因此，在這里就根據(jù)實(shí)際代碼來(lái)基本了解一下，避免被某些專項(xiàng)開(kāi)發(fā)問(wèn)住，至少不至于一點(diǎn)也不知道～

語(yǔ)義化標(biāo)簽

這個(gè)不需要多用語(yǔ)言文字說(shuō)明，我們來(lái)簡(jiǎn)單實(shí)現(xiàn)一下如下圖所示的布局代碼。

第一種：原始標(biāo)簽布局

HeaderNav

Article

Section

Aside

Footer

第二種：語(yǔ)義化標(biāo)簽布局

Header

Nav

Article

Section

Aside

Footer

看完上面兩種寫(xiě)法相信大部分人還是會(huì)經(jīng)常使用第一種吧。兩種寫(xiě)法孰優(yōu)孰劣其實(shí)很難斷定，因?yàn)閱螁螐男阅苌蟻?lái)說(shuō)可能并沒(méi)有太多區(qū)別，而第一種又比較習(xí)慣，寫(xiě)起來(lái)比較快，但是語(yǔ)義化標(biāo)簽具有如下優(yōu)點(diǎn)：

比所有布局全部采用 div 標(biāo)簽閱讀起來(lái)更清晰

利于 SEO，方便搜索引擎識(shí)別頁(yè)面結(jié)構(gòu) - 這也是非常重要的

方便設(shè)備解析，比如盲人閱讀，語(yǔ)義化標(biāo)簽比 div 標(biāo)簽要好很多

HTML5 標(biāo)簽還有很多個(gè)，具體解釋釋義大家可以去查看，對(duì)應(yīng)地址：HTML5標(biāo)簽。

表單功能增強(qiáng)

HTML5 對(duì)表單功能進(jìn)行了增強(qiáng)，input 標(biāo)簽可以輸入各種類型從而渲染相應(yīng)的表單內(nèi)容。具體如下所示：

郵箱標(biāo)簽:

數(shù)字標(biāo)簽:

滑動(dòng)條標(biāo)簽:

搜索框標(biāo)簽:

日期框:

星期框:

月份框:

顏色框:

網(wǎng)址框:

可以看到，都是 input 標(biāo)簽，但是渲染出來(lái)的是不同類型的頁(yè)面元素。除此之外，HTML5 對(duì) form 表單還進(jìn)行了內(nèi)置屬性的增強(qiáng)。比如通用屬性 placeholder、autofocus，再比如如果是 number 類型，則可以設(shè)置 min 和 max 屬性，如果是 password 類型，則可以設(shè)置 minLength 和 maxLength 屬性。

更多相關(guān)屬性，請(qǐng)查閱HTML5 表單

音頻/視頻

音頻/視頻是 HTML5 提供的關(guān)鍵 API，因?yàn)樵?HTML5 之前，瀏覽器支持音視頻方案都是通過(guò) Flash 來(lái)實(shí)現(xiàn)的，相信很多人都知道，遠(yuǎn)古的頁(yè)面確實(shí)嵌套著很多 Flash 插件。HTML5 的音頻視頻方案具體有如下優(yōu)點(diǎn)：

瀏覽器原生支持

本網(wǎng)頁(yè)不支持媒體標(biāo)簽

上面代碼，就直接嵌入了一段音頻在網(wǎng)頁(yè)上，并且增加了控制器，非常便捷。視頻選項(xiàng)也一樣，只不過(guò)換成了標(biāo)簽。

可以設(shè)置多類型音視頻，兼容性良好

本網(wǎng)頁(yè)不支持媒體標(biāo)簽

媒體標(biāo)簽內(nèi)部，還可以通過(guò)標(biāo)簽來(lái)進(jìn)行多種類型的兼容，比如低版本 IE 不支持 mp3 文件，那么我們就可以通過(guò)上面的代碼來(lái)進(jìn)行低版本瀏覽器的兼容，點(diǎn)擊播放按鈕，瀏覽器就會(huì)從上至下解析，直到解析成功，如果不成功，則顯示不支持媒體標(biāo)簽，如下圖所示：

可以看到，第一個(gè)播放的是 mp3 文件，第二個(gè)播放的是 ogg 文件。

畫(huà)布 — Canvas 關(guān)于 Canvas 這里不想多說(shuō)，因?yàn)檫@個(gè)地方太專業(yè)了，如果只是問(wèn)你知不知道那么你一定知道，但是不經(jīng)常使用繪圖 API 的話也講不太清楚細(xì)節(jié)，因此留給讀者自行去搜相關(guān)資料。

本地存儲(chǔ) HTML5 的本地存儲(chǔ)新增了一些，比如 Storage 和 manifest 離線緩存。之前前端本地存儲(chǔ)都是通過(guò) cookie 來(lái)進(jìn)行的。

Storage 分為 LocalStorage 和 SessionStorage，具體的相信大家都很清楚，也經(jīng)常被問(wèn)到，所以就不多做解釋了。真的爛大街了，我再寫(xiě)也是浪費(fèi)彼此時(shí)間。

Cache Manifest

應(yīng)用程序緩存為應(yīng)用帶來(lái)三個(gè)優(yōu)勢(shì)：

離線瀏覽 - 用戶可在應(yīng)用離線時(shí)使用它們

速度 - 已緩存資源加載得更快

減少服務(wù)器負(fù)載 —— 瀏覽器將只從服務(wù)器下載更新過(guò)或更改過(guò)的資源。

下面簡(jiǎn)單來(lái)設(shè)置一下，如下圖所示，在有網(wǎng)絡(luò)的時(shí)候加載一個(gè)圖片鏈接，然后將網(wǎng)絡(luò)設(shè)置成離線，該鏈接就不可訪問(wèn)了。

設(shè)置一下離線緩存，新建manifest.appcache，這里的后綴名是官方建議的。具體可以查看此處HTML5 應(yīng)用緩存，然后寫(xiě)入如下內(nèi)容：

CACHE MANIFEST

https://dss0.bdstatic.com/6Ox1bjeh1BF3odCf/it/u=3097378621,1517430839&fm=74&app=80&f=JPEG&size=f121,90?sec=1880279984&t=7dcb802bd45e50b25868fc4d1302ffdc

里面對(duì)應(yīng)的內(nèi)容就是我們希望緩存的圖片線上地址，然后我們?cè)谟芯W(wǎng)的時(shí)候訪問(wèn)一下，再關(guān)閉網(wǎng)絡(luò)，刷新頁(yè)面就會(huì)發(fā)現(xiàn)圖片可以正常展示，并且從圖中可以看出，加載的圖片就變成了從 cache 里獲取。

Web Worker

我們都知道，HTMl 代碼的執(zhí)行順序是從上而下，單線程執(zhí)行，所以當(dāng)瀏覽器執(zhí)行到某個(gè) js 腳本的時(shí)候，頁(yè)面的狀態(tài)是不可被響應(yīng)的，也就是會(huì)阻塞。而 Web Worker 是運(yùn)行在后臺(tái)的 JavaScript，它獨(dú)立于其他腳本，不會(huì)影響頁(yè)面的性能。也就是說(shuō)，類似于多線程，給 Worker 的腳本代碼開(kāi)了另一個(gè)線程來(lái)執(zhí)行，一般來(lái)說(shuō)配合 HTML5 的 postMessage 來(lái)進(jìn)行與主頁(yè)面的交流。

Web Worker 看起來(lái)非常簡(jiǎn)單，但是實(shí)際使用非常高深，用得好可以提升應(yīng)用性能，用得不好則很多余。我實(shí)際上沒(méi)怎么用過(guò)，所以這里就簡(jiǎn)單介紹一下。

// worker.js

var i=0;

function timedCount() {

i = i + 1;

postMessage(i);

setTimeout("timedCount()", 500);

}

timedCount();

// webworker.html

var w;

function startWorker() {

if (typeof (Worker) !== "undefined") {

if (typeof (w) == "undefined") {

w = new Worker("webworker.js");

}

w.onmessage = function (event) {

document.getElementById("result").innerHTML = event.data;

};

}

else {

document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Workers...";

}

}

function stopWorker() {

w.terminate();

}

具體效果如上圖所示，這里需要注意的是，本地文件是無(wú)法訪問(wèn)到 worker.js 的，如果想要使用，需要起一個(gè)小服務(wù)才行。

其他內(nèi)容 除了上面幾個(gè)大塊知識(shí)點(diǎn)，HTML5 還有幾個(gè)其他 API，這些知識(shí)點(diǎn)在某些方面非常的有用，所以在這里也就簡(jiǎn)單說(shuō)明一下。

地理定位 HTML5 還提供了地理定位功能，這個(gè)就是個(gè)封裝 API，所以沒(méi)什么可說(shuō)的。

var x=document.getElementById("demo");

function getLocation()

{

if (navigator.geolocation)

{

navigator.geolocation.getCurrentPosition(showPosition);

}

else{x.innerHTML="Geolocation is not supported by this browser.";}

}

function showPosition(position)

{

x.innerHTML="Latitude: " + position.coords.latitude +

"

Longitude: " + position.coords.longitude;

}

datalist

這個(gè)屬性也是非常好用的，只不過(guò)我們經(jīng)常使用別人已經(jīng)封裝好的 UI 組件，所以就沒(méi)怎么用過(guò)，此標(biāo)簽就是 HTML5 封裝的 Select API。

可編輯內(nèi)容

這個(gè)屬性牛逼的不行，也是所有主流瀏覽器都支持的，并且它被廣泛的應(yīng)用，比如很多網(wǎng)頁(yè)編輯器，內(nèi)容切換編輯狀態(tài)等等，都可以通過(guò)這個(gè)屬性來(lái)實(shí)現(xiàn)。

如下圖所示：

div 標(biāo)簽變成了可編輯的狀態(tài)，此屬性被很多頁(yè)面編輯器所應(yīng)用。非常好用，值得大家二次開(kāi)發(fā)~

跨域

此處知識(shí)點(diǎn)也就是 postMessage 和 WebSocket 兩個(gè)，應(yīng)該是比較重要的部分，后續(xù)再寫(xiě)吧，有點(diǎn)累了…

總結(jié)

以上就是你不得不知的HTML “新”特性了，后續(xù)內(nèi)容都會(huì)與前端有關(guān)，持續(xù)更新中，各位伙伴，一起來(lái)學(xué)習(xí)前端吧！

學(xué)如逆水行舟，不進(jìn)則退

總結(jié)

以上是生活随笔為你收集整理的html5储存类型特点,避免踩雷！你不得不知的 HTML5 “新”特性的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。