HTML5新特性(xing)
時間：2019-02-28 來源：華清遠見(jian)
HTML5是萬維網的(de)(de)核心(xin)語言、標準通(tong)用標記(ji)語言下的(de)(de)一個(ge)應用超(chao)文本標記(ji)語言（HTML）的(de)(de)第(di)五(wu)次(ci)重大(da)修改，為了順應整個(ge)互聯網時代變遷，使得人們(men)能夠以更好的(de)(de)方式去進行網頁結構搭建，HTML5應運而生。HTML5新增了如下幾個(ge)方面你的(de)(de)特性：
一、語(yu)義特性（Class：Semantic）
HTML5賦予(yu)網頁更好的(de)(de)意義和結構。更加豐富的(de)(de)標(biao)簽(qian)將隨著對RDFa的(de)(de)，微(wei)數據與微(wei)格式等(deng)方面的(de)(de)支持，構建對程序、對用戶都更有(you)價值(zhi)的(de)(de)數據驅動(dong)的(de)(de)Web。
HTML結構(gou)語義化，是(shi)最近幾年(nian)才提(ti)出來的，以前(qian)的html結構(gou)，都是(shi)一堆沒有語義的冷冰(bing)冰(bing)的標(biao)簽。最泛(fan)濫(lan)的就是(shi)div+css，以前(qian)的頁面(mian)，一打(da)開就是(shi)一堆div+css，為了改變(bian)這種(zhong)這種(zhong)狀況，開發者們和(he)官方(fang)提(ti)出了讓HTML結構(gou)語義化的概念，并且(qie)w3c也(ye)在(zai)HTML5給出了幾個新的語義化的標(biao)簽。
語義化之后文檔會(hui)有(you)什么(me)效果呢？就是你(ni)寫的(de)HTML結構，是用(yong)相對(dui)應的(de)有(you)一定語義的(de)英文字(zi)母（標簽）表(biao)示的(de)，標記的(de)，因為HTML本身就是標記語言。不(bu)僅對(dui)自己(ji)來(lai)(lai)說，容(rong)(rong)易(yi)閱讀(du)，書寫。別人看(kan)你(ni)的(de)代碼和(he)結構也容(rong)(rong)易(yi)理(li)解，甚至對(dui)一些(xie)不(bu)是做網頁開發的(de)人來(lai)(lai)說，也容(rong)(rong)易(yi)閱讀(du)。。
怎么(me)知道自己的(de)頁面結構(gou)是(shi)否語(yu)義(yi)化(hua)，那(nei)就要看(kan)HTML布局結構(gou)，在去掉CSS樣式表之后(hou)，是(shi)否，依然能(neng)很(hen)好的(de)呈現(xian)內容的(de)代碼結構(gou)。也就是(shi)說，去掉CSS的(de)裝飾之后(hou)，整(zheng)個HTML的(de)結構(gou)閱讀起來依舊主次分明，能(neng)夠看(kan)清其整(zheng)體的(de)架構(gou)模(mo)塊。這(zhe)也就是(shi)，語(yu)義(yi)化(hua)之后(hou)我們(men)想(xiang)要HTML文(wen)檔達到的(de)效果。
其實語義化，也(ye)無(wu)非就是(shi)自己(ji)在使用標(biao)(biao)簽(qian)的時(shi)候在合適的場景下選取合適的標(biao)(biao)簽(qian)，比如(ru)h1~h5系列標(biao)(biao)簽(qian)，在HTML中就是(shi)就是(shi)用來(lai)定義標(biao)(biao)題；而(er)p標(biao)(biao)簽(qian)，大部分(fen)情況下用以處理(li)文字段落，table表格則適合做信息表格,等等。
我們對整個HTML結構進行(xing)語義(yi)化的規范操作有如下幾個好處：
1，這樣有利(li)于SEO：和搜索引擎建(jian)立(li)良好溝(gou)通，有助于爬蟲(chong)抓取更多(duo)的有效信息：爬蟲(chong)依賴(lai)于標(biao)簽來(lai)確定(ding)上下文和各個關鍵字的權重；
2，方(fang)便其(qi)他(ta)設(she)備(bei)(bei)解析(xi)（如(ru)屏幕(mu)閱讀(du)器(qi)、盲人閱讀(du)器(qi)、移動設(she)備(bei)(bei)）以有意義(yi)的方(fang)式來渲染(ran)網(wang)頁；
3，便于團隊(dui)開發(fa)和維(wei)護，語(yu)義(yi)化更具可(ke)讀性，遵循W3C標(biao)準(zhun)的團隊(dui)都遵循這(zhe)個標(biao)準(zhun)，可(ke)以(yi)減少差異(yi)化。
HTML5中新增的(de)語義(yi)化標簽進一步加強了我(wo)們(men)針對整個HTML結構進行語義(yi)化跟進的(de)可操作性，使得我(wo)們(men)網頁布局的(de)可閱讀性更(geng)高。
常(chang)見的HTML5語義化標(biao)簽及(ji)其使用(yong)場景(jing)如下(xia)：
<article> 定義頁面獨立的內容(rong)區(qu)域。
<aside> 定(ding)義頁面的側邊欄內容。
<command> 定義命令(ling)按(an)鈕，比如單選按(an)鈕、復選框或按(an)鈕
<details> 用(yong)于(yu)描述(shu)文檔(dang)或文檔(dang)某個(ge)部分的細節(jie)
<dialog> 定義對話框，比如提示框
<summary> 標簽包含 details 元素的(de)標題
<figure> 規(gui)定(ding)獨(du)立的(de)流內容（圖(tu)(tu)像、圖(tu)(tu)表、照片、代碼等等）。
<figcaption> 定義 <figure> 元素的(de)標題
<footer> 定義 section 或 document 的頁腳。
<header> 定義了(le)文檔的(de)頭部區域
<mark> 定義帶有記號的文本(ben)。
<meter> 定(ding)義度(du)量(liang)衡。僅用于已知最(zui)大(da)和最(zui)小值的度(du)量(liang)。
<nav> 定義導(dao)航鏈(lian)接的部分。
<progress> 定義任何類型的(de)任務的(de)進度。
<section> 定義(yi)文(wen)檔中的節（section、區段）。
<time> 定義日期或時間。
二、本地存儲特性（Class: OFFLINE & STORAGE）
基于HTML5開發的網頁APP擁有更短的啟動時間，更快的聯網速度，這些全(quan)得益于HTML5 APP Cache，以及(ji)本地存儲(chu)功能。
早些(xie)時(shi)候(hou),本地(di)存(cun)(cun)(cun)儲使用(yong)的(de)(de)是(shi)(shi) cookie。但(dan)是(shi)(shi)Web 存(cun)(cun)(cun)儲需要更加的(de)(de)安(an)全與快速，這些(xie)數(shu)(shu)據(ju)不會被保存(cun)(cun)(cun)在服務器上，但(dan)是(shi)(shi)這些(xie)數(shu)(shu)據(ju)只(zhi)用(yong)于用(yong)戶請求網(wang)站(zhan)數(shu)(shu)據(ju)上，它(ta)也(ye)可以(yi)存(cun)(cun)(cun)儲大量的(de)(de)數(shu)(shu)據(ju)，而不影響(xiang)網(wang)站(zhan)的(de)(de)性(xing)能。數(shu)(shu)據(ju)以(yi) 鍵/值 對存(cun)(cun)(cun)在, web網(wang)頁的(de)(de)數(shu)(shu)據(ju)只(zhi)允(yun)許該網(wang)頁訪(fang)問使用(yong)。
客戶端存儲數據的兩個(ge)對象為：
localStorage - 用于長久保(bao)存整個網站的數據，保(bao)存的數據沒有過(guo)期時(shi)間(jian)，直到手動(dong)去(qu)除。
sessionStorage - 用于(yu)臨時保存同一窗(chuang)口(或標簽頁)的數據，在(zai)關閉(bi)窗(chuang)口或標簽頁之后將會刪除這些數據。
不管是(shi) localStorage，還是(shi) sessionStorage，可(ke)使用(yong)的(de)API都(dou)相同，常用(yong)的(de)有(you)如下幾個（以localStorage為例(li)）：
保存數據：localStorage.setItem(key,value);
讀取數(shu)據：localStorage.getItem(key);
刪除(chu)單個數據：localStorage.removeItem(key);
刪除所(suo)有(you)數據：localStorage.clear();
得到某個索引的key：localStorage.key(index);
三、連接特(te)性（Class: CONNECTIVITY）
更有(you)效(xiao)的(de)(de)(de)連接工(gong)作(zuo)效(xiao)率，使(shi)得基于頁面(mian)的(de)(de)(de)實(shi)時聊天，更快速的(de)(de)(de)網(wang)頁游戲體驗(yan)，更優化(hua)的(de)(de)(de)在線交流得到(dao)了(le)實(shi)現。HTML5擁(yong)有(you)更有(you)效(xiao)的(de)(de)(de)服(fu)務器推送技術，Server-Sent Event和WebSockets就是其中的(de)(de)(de)兩個特性(xing)，這兩個特性(xing)能夠幫(bang)助我(wo)們實(shi)現服(fu)務器將數據“推送”到(dao)客戶(hu)端的(de)(de)(de)功能。
WebSocket 是 HTML5 開始提供的一種在單(dan)個 TCP 連接(jie)上進行全雙工通訊的協議。
WebSocket 使(shi)得客戶(hu)(hu)端和服(fu)務(wu)器之(zhi)間的(de)數(shu)據(ju)(ju)交換變(bian)得更加簡單，允許服(fu)務(wu)端主(zhu)動向(xiang)客戶(hu)(hu)端推送數(shu)據(ju)(ju)。在 WebSocket API 中，瀏覽器和服(fu)務(wu)器只需(xu)要完成一次握(wo)手，兩者(zhe)之(zhi)間就直(zhi)接可(ke)以創建持久性的(de)連(lian)接，并進行雙向(xiang)數(shu)據(ju)(ju)傳輸(shu)。
在(zai) WebSocket API 中，瀏(liu)覽器(qi)和(he)服務器(qi)只(zhi)需要做一個握(wo)手(shou)的動作，然后，瀏(liu)覽器(qi)和(he)服務器(qi)之間就(jiu)形成了一條快速通道(dao)。兩者之間就(jiu)直(zhi)接可以數據互(hu)相(xiang)傳送。
現(xian)在，很(hen)多網(wang)站為了實現(xian)推送(song)技(ji)術，所用的(de)(de)(de)技(ji)術都(dou)是 Ajax 輪(lun)詢。輪(lun)詢是在特(te)定(ding)的(de)(de)(de)的(de)(de)(de)時間間隔（如每1秒(miao)），由瀏覽(lan)器(qi)(qi)對服務器(qi)(qi)發出HTTP請(qing)求，然(ran)(ran)后(hou)由服務器(qi)(qi)返回最新的(de)(de)(de)數(shu)據(ju)給客戶端的(de)(de)(de)瀏覽(lan)器(qi)(qi)。這種(zhong)傳統的(de)(de)(de)模式(shi)帶(dai)來很(hen)明顯的(de)(de)(de)缺點(dian)，即瀏覽(lan)器(qi)(qi)需要(yao)不斷的(de)(de)(de)向服務器(qi)(qi)發出請(qing)求，然(ran)(ran)而HTTP請(qing)求可能包(bao)含較(jiao)長(chang)的(de)(de)(de)頭部(bu)，其中真正有效的(de)(de)(de)數(shu)據(ju)可能只是很(hen)小的(de)(de)(de)一部(bu)分，顯然(ran)(ran)這樣會浪費很(hen)多的(de)(de)(de)帶(dai)寬等資(zi)源。
HTML5 定義的 WebSocket 協(xie)議，能更(geng)好的節省服務器資源和帶(dai)寬，并且能夠更(geng)實時地進行通(tong)訊。
我們(men)使(shi)用(yong)WebSocket 與Ajax的長(chang)輪詢做(zuo)對(dui)比，從而(er)感受WebSocket 的優勢所(suo)在(zai)，其(qi)對(dui)比圖如下：
四、網頁多媒體特性(Class: MULTIMEDIA)
支持網(wang)(wang)頁端的Audio、Video等多媒體功能， 與網(wang)(wang)站自帶的APPS，攝像頭，影音功能相(xiang)得益彰。
video元素，在HTML5中專門用來播(bo)放網絡上的視(shi)頻或者電影(ying)。
audio元素，在HTML5中專門用來(lai)播放(fang)網絡(luo)上的音(yin)頻(pin)。
使用video和(he)audio元(yuan)素(su)進行(xing)播放時(shi)就(jiu)不在需(xu)要使用其他的插件了，只要我們(men)的瀏覽器支持HTML5就(jiu)可以(yi)。
瀏覽器的支持(chi)：
Safari3以(yi)上、Firefox4以(yi)上、0pera10以(yi)上、chrome3.0以(yi)上版本(ben)都對audio元(yuan)素(su)和video元(yuan)素(su)支持(chi)！
1，基本(ben)使用方法
audio元素只需要給他指定一個src屬性(xing)：
<audio src="MP3.mp3" controls="controls"></audio>
對于不(bu)支持的(de)瀏覽器我們(men)可以在(zai)這對元素之(zhi)間加(jia)入(ru)提示語句來代替
<audio src="MP3.mp3" controls="controls">您的瀏覽器(qi)不支持(chi)Audio元素</audio>
video元素要設(she)定好長寬和src屬性就可以了：
<video width="750" height="400" src="time.mp4"></video>
同樣對于不支持video的瀏(liu)覽器可(ke)以在中間加入替換文字：
<video width="750" height="400" src="time.mp4">您的(de)瀏覽器不支持(chi)video元素</video>
source元素(su)指定(ding)多個(ge)播(bo)放格式與(yu)編碼(ma)：
source元素可以(yi)為同一個媒(mei)體數據指定多個播(bo)放(fang)格(ge)式與編(bian)碼(ma)方式，以(yi)確保瀏覽器(qi)可以(yi)從中選擇一種(zhong)自(zi)己支(zhi)持(chi)的(de)播(bo)放(fang)格(ge)式進行播(bo)放(fang)。選擇順(shun)序自(zi)上而下，直到(dao)選擇到(dao)所支(zhi)持(chi)的(de)格(ge)式為止。
使用方法：
<video>
<source src="video.m4v" type="video/mp4" />
<source src="video.webm" type="video/webm" />
<source src="video.ogv" type="video/ogg" />
<source src="video.mp4" />
</video>
各(ge)種設(she)備對編碼格式(shi)的支持情況：
webm(.webm)格式的視(shi)頻 火狐4.0+、chrome6.0+、opera10.6+
mp4(.m4v)格式的(de)視頻 IE9.0+ 、Safari3.1+ 、iso5.0 、Android4.0+
ogg(.ogv)格式的視頻 火狐3.5+、chrome3.0+、opera10.5+
mp4(.mp4)格式的視頻 IE9.0+ 、Safari3.1+ 、iso3.0 、Android2.3+
2、viedo與(yu)audio的(de)常用屬性
audio元素和video元素的常用屬性
src屬(shu)(shu)性：在這個屬(shu)(shu)性里面指定(ding)媒體數據的URL地址(zhi)。
controls屬性：指定(ding)是否為視頻(pin)或者音(yin)頻(pin)數據(ju)添加瀏覽器(qi)自帶(dai)的(de)播放控制(zhi)條(tiao)，控制(zhi)條(tiao)中有播放按鈕、暫停等按鈕。
width和height屬性（video獨有）：指定(ding)視頻的寬度與高(gao)度。
autoplay屬性：這個屬性指定是否(fou)當我們網頁(ye)加載完成(cheng)之后就開(kai)始自(zi)動播放。
preload屬(shu)性(xing)：這個屬(shu)性(xing)指(zhi)定(ding)是否對數(shu)據進行(xing)預加(jia)載，如(ru)果是的話，瀏覽器會將視頻數(shu)據或者音(yin)頻數(shu)據進行(xing)緩沖，這樣做可以加(jia)快播(bo)放的速度。
preload屬性(xing)的三(san)個值：
none 表示(shi)不(bu)進(jin)行預加載。
metadata 表(biao)示只預加載媒體(ti)的元數(shu)據(ju)。
auto(默認值) 表示(shi)預加載全部的(de)視頻(pin)或者音頻(pin)。
2，使用(yong)Javascript提供的(de)方法操作多媒體。
Javascript為我們(men)提供了豐(feng)富的方(fang)法，用以靈活控制多媒(mei)體文件，這樣我們(men)就可以根(gen)據實(shi)際的項(xiang)目(mu)需(xu)求，定義自己的多媒(mei)體播放器。
其中controls屬性經過設定，會在界面中顯示一個瀏覽器自帶的控制條。如果對于UI沒有要求的需求，其內置控制器已經可以滿足大部分的需求。隱藏控制條并模擬：那么實現一個自定義功能的播放器關鍵就在于，我們不使用原生的控制器，將其隱藏掉之后，在下方同樣的位置通過HTML、CSS來模擬所需樣式，同時通過js來調用video標簽所暴露給我們的接口函數及屬性，以及檢測用戶的操作行為來同步的模擬UI與視頻播放數據的相應變化。 幾(ji)個(ge)核心函(han)數及屬性的用法：
myVid=document.getElementById("video1");//控制(zhi)視頻(pin)開關
myVid.play() // 觸發媒(mei)體文(wen)件的播(bo)放(fang)
myVid.pause() //觸發(fa)媒體(ti)文件的暫停
myVid.currentTime=5; //返回(hui)或(huo)設定當前視(shi)頻播放位(wei)置
myVid.duration // 返回視(shi)頻總長(chang)度(du)
myVid.volume //控(kong)制(zhi)音量大(da)小
myVid.muted //控制多媒體是否(fou)靜音
五、三維、圖形及特(te)效特(te)性（Class: 3D, Graphics & Effects）
基(ji)于SVG、Canvas、WebGL及CSS3的(de)3D功(gong)能，用戶會驚嘆于在瀏覽器中，所(suo)呈現的(de)驚人視覺效果(guo)。
<canvas>是一個可(ke)以使(shi)用腳(jiao)本(通常(chang)為JavaScript)來繪制(zhi)圖(tu)(tu)(tu)形的 HTML 元素.例(li)如,它可(ke)以用于(yu)繪制(zhi)圖(tu)(tu)(tu)表、制(zhi)作圖(tu)(tu)(tu)片構圖(tu)(tu)(tu)或者制(zhi)作簡單(dan)的(以及不那么簡單(dan)的)動(dong)畫(hua). 右邊(bian)的圖(tu)(tu)(tu)片展示了一些 <canvas> 的實現示例(li)。
使(shi)用 <canvas> 元(yuan)素(su)(su)不(bu)是非常(chang)難但你需(xu)要一些基本的(de)(de)HTML和JavaScript知識。一些過(guo)時的(de)(de)瀏(liu)(liu)覽器不(bu)支持<canvas> 元(yuan)素(su)(su)，但是所有的(de)(de)新(xin)版本主流瀏(liu)(liu)覽器都支持它。Canvas 的(de)(de)默認大小為300像素(su)(su)×150像素(su)(su)（寬×高(gao)，像素(su)(su)的(de)(de)單位(wei)是px）。但是，可以使(shi)用HTML的(de)(de)高(gao)度和寬度屬(shu)性來自定義Canvas 的(de)(de)尺寸。為了在 Canvas 上(shang)繪制圖形，我們使(shi)用一個JavaScript上(shang)下文對象，它能動(dong)態創(chuang)建(jian)圖像（ creates graphics on the fly）
隨著(zhu)大(da)數據等(deng)領域的(de)發展及應用，canvas繪(hui)圖(tu)在(zai)數據可視(shi)化方面(mian)扮演了(le)重(zhong)要的(de)角色，可以讓我們靈活地通(tong)過各(ge)種(zhong)形式展示(shi)數據，提高數據的(de)可讀性，增(zeng)強產品(pin)的(de)數據能力。
下圖展示(shi)了canvas在數據可視(shi)化方面的(de)應用效(xiao)果(guo)：
綜上，HTML5新(xin)功能的出(chu)現，使得前(qian)端(duan)在(zai)很多新(xin)的應用領域發揮(hui)出(chu)了更(geng)加強大的能力，也讓很多已有(you)項目在(zai)表(biao)現形式上有(you)了更(geng)好的選擇。
