什么是 HTML5

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

產(chǎn)生于1990年

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

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

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

引言

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

本文主要介紹相比于HTML4來說，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)的屬性

其它屬性

廢除的屬性

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

HTML5“新”特性

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

語義化標(biāo)簽

這個不需要多用語言文字說明，我們來簡單實(shí)現(xiàn)一下如下圖所示的布局代碼。

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

HeaderNav

Article

Section

Aside

Footer

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

Header

Nav

Article

Section

Aside

Footer

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

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

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

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

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

表單功能增強(qiáng)

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

郵箱標(biāo)簽:

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

滑動條標(biāo)簽:

搜索框標(biāo)簽:

日期框:

星期框:

月份框:

顏色框:

網(wǎng)址框:

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

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

音頻/視頻

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

瀏覽器原生支持

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

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

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

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

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

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

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

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

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

Cache Manifest

應(yīng)用程序緩存為應(yīng)用帶來三個優(yōu)勢：

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

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

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

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

設(shè)置一下離線緩存，新建manifest.appcache，這里的后綴名是官方建議的。具體可以查看此處HTML5 應(yīng)用緩存，然后寫入如下內(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

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

Web Worker

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

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

// 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();

}

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

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

地理定位 HTML5 還提供了地理定位功能，這個就是個封裝 API，所以沒什么可說的。

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

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

可編輯內(nèi)容

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

如下圖所示：

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

跨域

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

總結(jié)

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

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

總結(jié)

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

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