當(dāng)前位置:首頁 > 嵌入式培訓(xùn) > 嵌入式學(xué)習(xí) > 講師博文 > HTML5新特性
HTML5是萬維網(wǎng)的核心語言、標(biāo)準(zhǔn)通用標(biāo)記語言下的一個(gè)應(yīng)用超文本標(biāo)記語言(HTML)的第五次重大修改,為了順應(yīng)整個(gè)互聯(lián)網(wǎng)時(shí)代變遷,使得人們能夠以更好的方式去進(jìn)行網(wǎng)頁結(jié)構(gòu)搭建,HTML5應(yīng)運(yùn)而生。HTML5新增了如下幾個(gè)方面你的特性:
一、語義特性(Class:Semantic)
HTML5賦予網(wǎng)頁更好的意義和結(jié)構(gòu)。更加豐富的標(biāo)簽將隨著對(duì)RDFa的,微數(shù)據(jù)與微格式等方面的支持,構(gòu)建對(duì)程序、對(duì)用戶都更有價(jià)值的數(shù)據(jù)驅(qū)動(dòng)的Web。
HTML結(jié)構(gòu)語義化,是最近幾年才提出來的,以前的html結(jié)構(gòu),都是一堆沒有語義的冷冰冰的標(biāo)簽。最泛濫的就是div+css,以前的頁面,一打開就是一堆div+css,為了改變這種這種狀況,開發(fā)者們和官方提出了讓HTML結(jié)構(gòu)語義化的概念,并且w3c也在HTML5給出了幾個(gè)新的語義化的標(biāo)簽。
語義化之后文檔會(huì)有什么效果呢?就是你寫的HTML結(jié)構(gòu),是用相對(duì)應(yīng)的有一定語義的英文字母(標(biāo)簽)表示的,標(biāo)記的,因?yàn)镠TML本身就是標(biāo)記語言。不僅對(duì)自己來說,容易閱讀,書寫。別人看你的代碼和結(jié)構(gòu)也容易理解,甚至對(duì)一些不是做網(wǎng)頁開發(fā)的人來說,也容易閱讀。。
怎么知道自己的頁面結(jié)構(gòu)是否語義化,那就要看HTML布局結(jié)構(gòu),在去掉CSS樣式表之后,是否,依然能很好的呈現(xiàn)內(nèi)容的代碼結(jié)構(gòu)。也就是說,去掉CSS的裝飾之后,整個(gè)HTML的結(jié)構(gòu)閱讀起來依舊主次分明,能夠看清其整體的架構(gòu)模塊。這也就是,語義化之后我們想要HTML文檔達(dá)到的效果。
其實(shí)語義化,也無非就是自己在使用標(biāo)簽的時(shí)候在合適的場(chǎng)景下選取合適的標(biāo)簽,比如h1~h5系列標(biāo)簽,在HTML中就是就是用來定義標(biāo)題;而p標(biāo)簽,大部分情況下用以處理文字段落,table表格則適合做信息表格,等等。
我們對(duì)整個(gè)HTML結(jié)構(gòu)進(jìn)行語義化的規(guī)范操作有如下幾個(gè)好處:
1,這樣有利于SEO:和搜索引擎建立良好溝通,有助于爬蟲抓取更多的有效信息:爬蟲依賴于標(biāo)簽來確定上下文和各個(gè)關(guān)鍵字的權(quán)重;
2,方便其他設(shè)備解析(如屏幕閱讀器、盲人閱讀器、移動(dòng)設(shè)備)以有意義的方式來渲染網(wǎng)頁;
3,便于團(tuán)隊(duì)開發(fā)和維護(hù),語義化更具可讀性,遵循W3C標(biāo)準(zhǔn)的團(tuán)隊(duì)都遵循這個(gè)標(biāo)準(zhǔn),可以減少差異化。
HTML5中新增的語義化標(biāo)簽進(jìn)一步加強(qiáng)了我們針對(duì)整個(gè)HTML結(jié)構(gòu)進(jìn)行語義化跟進(jìn)的可操作性,使得我們網(wǎng)頁布局的可閱讀性更高。
常見的HTML5語義化標(biāo)簽及其使用場(chǎng)景如下:
<article> 定義頁面獨(dú)立的內(nèi)容區(qū)域。
<aside> 定義頁面的側(cè)邊欄內(nèi)容。
<command> 定義命令按鈕,比如單選按鈕、復(fù)選框或按鈕
<details> 用于描述文檔或文檔某個(gè)部分的細(xì)節(jié)
<dialog> 定義對(duì)話框,比如提示框
<summary> 標(biāo)簽包含 details 元素的標(biāo)題
<figure> 規(guī)定獨(dú)立的流內(nèi)容(圖像、圖表、照片、代碼等等)。
<figcaption> 定義 <figure> 元素的標(biāo)題
<footer> 定義 section 或 document 的頁腳。
<header> 定義了文檔的頭部區(qū)域
<mark> 定義帶有記號(hào)的文本。
<meter> 定義度量衡。僅用于已知最大和最小值的度量。
<nav> 定義導(dǎo)航鏈接的部分。
<progress> 定義任何類型的任務(wù)的進(jìn)度。
<section> 定義文檔中的節(jié)(section、區(qū)段)。
<time> 定義日期或時(shí)間。
二、本地存儲(chǔ)特性(Class: OFFLINE & STORAGE)
基于HTML5開發(fā)的網(wǎng)頁APP擁有更短的啟動(dòng)時(shí)間,更快的聯(lián)網(wǎng)速度,這些全得益于HTML5 APP Cache,以及本地存儲(chǔ)功能。
早些時(shí)候,本地存儲(chǔ)使用的是 cookie。但是Web 存儲(chǔ)需要更加的安全與快速,這些數(shù)據(jù)不會(huì)被保存在服務(wù)器上,但是這些數(shù)據(jù)只用于用戶請(qǐng)求網(wǎng)站數(shù)據(jù)上,它也可以存儲(chǔ)大量的數(shù)據(jù),而不影響網(wǎng)站的性能。數(shù)據(jù)以 鍵/值 對(duì)存在, web網(wǎng)頁的數(shù)據(jù)只允許該網(wǎng)頁訪問使用。
客戶端存儲(chǔ)數(shù)據(jù)的兩個(gè)對(duì)象為:
localStorage - 用于長久保存整個(gè)網(wǎng)站的數(shù)據(jù),保存的數(shù)據(jù)沒有過期時(shí)間,直到手動(dòng)去除。
sessionStorage - 用于臨時(shí)保存同一窗口(或標(biāo)簽頁)的數(shù)據(jù),在關(guān)閉窗口或標(biāo)簽頁之后將會(huì)刪除這些數(shù)據(jù)。
不管是 localStorage,還是 sessionStorage,可使用的API都相同,常用的有如下幾個(gè)(以localStorage為例):
保存數(shù)據(jù):localStorage.setItem(key,value);
讀取數(shù)據(jù):localStorage.getItem(key);
刪除單個(gè)數(shù)據(jù):localStorage.removeItem(key);
刪除所有數(shù)據(jù):localStorage.clear();
得到某個(gè)索引的key:localStorage.key(index);
三、連接特性(Class: CONNECTIVITY)
更有效的連接工作效率,使得基于頁面的實(shí)時(shí)聊天,更快速的網(wǎng)頁游戲體驗(yàn),更優(yōu)化的在線交流得到了實(shí)現(xiàn)。HTML5擁有更有效的服務(wù)器推送技術(shù),Server-Sent Event和WebSockets就是其中的兩個(gè)特性,這兩個(gè)特性能夠幫助我們實(shí)現(xiàn)服務(wù)器將數(shù)據(jù)“推送”到客戶端的功能。
WebSocket 是 HTML5 開始提供的一種在單個(gè) TCP 連接上進(jìn)行全雙工通訊的協(xié)議。
WebSocket 使得客戶端和服務(wù)器之間的數(shù)據(jù)交換變得更加簡單,允許服務(wù)端主動(dòng)向客戶端推送數(shù)據(jù)。在 WebSocket API 中,瀏覽器和服務(wù)器只需要完成一次握手,兩者之間就直接可以創(chuàng)建持久性的連接,并進(jìn)行雙向數(shù)據(jù)傳輸。
在 WebSocket API 中,瀏覽器和服務(wù)器只需要做一個(gè)握手的動(dòng)作,然后,瀏覽器和服務(wù)器之間就形成了一條快速通道。兩者之間就直接可以數(shù)據(jù)互相傳送。
現(xiàn)在,很多網(wǎng)站為了實(shí)現(xiàn)推送技術(shù),所用的技術(shù)都是 Ajax 輪詢。輪詢是在特定的的時(shí)間間隔(如每1秒),由瀏覽器對(duì)服務(wù)器發(fā)出HTTP請(qǐng)求,然后由服務(wù)器返回最新的數(shù)據(jù)給客戶端的瀏覽器。這種傳統(tǒng)的模式帶來很明顯的缺點(diǎn),即瀏覽器需要不斷的向服務(wù)器發(fā)出請(qǐng)求,然而HTTP請(qǐng)求可能包含較長的頭部,其中真正有效的數(shù)據(jù)可能只是很小的一部分,顯然這樣會(huì)浪費(fèi)很多的帶寬等資源。
HTML5 定義的 WebSocket 協(xié)議,能更好的節(jié)省服務(wù)器資源和帶寬,并且能夠更實(shí)時(shí)地進(jìn)行通訊。
我們使用WebSocket 與Ajax的長輪詢做對(duì)比,從而感受WebSocket 的優(yōu)勢(shì)所在,其對(duì)比圖如下:
四、網(wǎng)頁多媒體特性(Class: MULTIMEDIA)
支持網(wǎng)頁端的Audio、Video等多媒體功能, 與網(wǎng)站自帶的APPS,攝像頭,影音功能相得益彰。
video元素,在HTML5中專門用來播放網(wǎng)絡(luò)上的視頻或者電影。
audio元素,在HTML5中專門用來播放網(wǎng)絡(luò)上的音頻。
使用video和audio元素進(jìn)行播放時(shí)就不在需要使用其他的插件了,只要我們的瀏覽器支持HTML5就可以。
瀏覽器的支持:
Safari3以上、Firefox4以上、0pera10以上、chrome3.0以上版本都對(duì)audio元素和video元素支持!
1,基本使用方法
audio元素只需要給他指定一個(gè)src屬性:
<audio src="MP3.mp3" controls="controls"></audio>
對(duì)于不支持的瀏覽器我們可以在這對(duì)元素之間加入提示語句來代替
<audio src="MP3.mp3" controls="controls">您的瀏覽器不支持Audio元素</audio>
video元素要設(shè)定好長寬和src屬性就可以了:
<video width="750" height="400" src="time.mp4"></video>
同樣對(duì)于不支持video的瀏覽器可以在中間加入替換文字:
<video width="750" height="400" src="time.mp4">您的瀏覽器不支持video元素</video>
source元素指定多個(gè)播放格式與編碼:
source元素可以為同一個(gè)媒體數(shù)據(jù)指定多個(gè)播放格式與編碼方式,以確保瀏覽器可以從中選擇一種自己支持的播放格式進(jìn)行播放。選擇順序自上而下,直到選擇到所支持的格式為止。
使用方法:
<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>
各種設(shè)備對(duì)編碼格式的支持情況:
webm(.webm)格式的視頻 火狐4.0+、chrome6.0+、opera10.6+
mp4(.m4v)格式的視頻 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與audio的常用屬性
audio元素和video元素的常用屬性
src屬性:在這個(gè)屬性里面指定媒體數(shù)據(jù)的URL地址。
controls屬性:指定是否為視頻或者音頻數(shù)據(jù)添加瀏覽器自帶的播放控制條,控制條中有播放按鈕、暫停等按鈕。
width和height屬性(video獨(dú)有):指定視頻的寬度與高度。
autoplay屬性:這個(gè)屬性指定是否當(dāng)我們網(wǎng)頁加載完成之后就開始自動(dòng)播放。
preload屬性:這個(gè)屬性指定是否對(duì)數(shù)據(jù)進(jìn)行預(yù)加載,如果是的話,瀏覽器會(huì)將視頻數(shù)據(jù)或者音頻數(shù)據(jù)進(jìn)行緩沖,這樣做可以加快播放的速度。
preload屬性的三個(gè)值:
none 表示不進(jìn)行預(yù)加載。
metadata 表示只預(yù)加載媒體的元數(shù)據(jù)。
auto(默認(rèn)值) 表示預(yù)加載全部的視頻或者音頻。
2,使用Javascript提供的方法操作多媒體。
Javascript為我們提供了豐富的方法,用以靈活控制多媒體文件,這樣我們就可以根據(jù)實(shí)際的項(xiàng)目需求,定義自己的多媒體播放器。
其中controls屬性經(jīng)過設(shè)定,會(huì)在界面中顯示一個(gè)瀏覽器自帶的控制條。如果對(duì)于UI沒有要求的需求,其內(nèi)置控制器已經(jīng)可以滿足大部分的需求。隱藏控制條并模擬:那么實(shí)現(xiàn)一個(gè)自定義功能的播放器關(guān)鍵就在于,我們不使用原生的控制器,將其隱藏掉之后,在下方同樣的位置通過HTML、CSS來模擬所需樣式,同時(shí)通過js來調(diào)用video標(biāo)簽所暴露給我們的接口函數(shù)及屬性,以及檢測(cè)用戶的操作行為來同步的模擬UI與視頻播放數(shù)據(jù)的相應(yīng)變化。 幾個(gè)核心函數(shù)及屬性的用法:
myVid=document.getElementById("video1");//控制視頻開關(guān)
myVid.play() // 觸發(fā)媒體文件的播放
myVid.pause() //觸發(fā)媒體文件的暫停
myVid.currentTime=5; //返回或設(shè)定當(dāng)前視頻播放位置
myVid.duration // 返回視頻總長度
myVid.volume //控制音量大小
myVid.muted //控制多媒體是否靜音
五、三維、圖形及特效特性(Class: 3D, Graphics & Effects)
基于SVG、Canvas、WebGL及CSS3的3D功能,用戶會(huì)驚嘆于在瀏覽器中,所呈現(xiàn)的驚人視覺效果。
<canvas>是一個(gè)可以使用腳本(通常為JavaScript)來繪制圖形的 HTML 元素.例如,它可以用于繪制圖表、制作圖片構(gòu)圖或者制作簡單的(以及不那么簡單的)動(dòng)畫. 右邊的圖片展示了一些 <canvas> 的實(shí)現(xiàn)示例。
使用 <canvas> 元素不是非常難但你需要一些基本的HTML和JavaScript知識(shí)。一些過時(shí)的瀏覽器不支持<canvas> 元素,但是所有的新版本主流瀏覽器都支持它。Canvas 的默認(rèn)大小為300像素×150像素(寬×高,像素的單位是px)。但是,可以使用HTML的高度和寬度屬性來自定義Canvas 的尺寸。為了在 Canvas 上繪制圖形,我們使用一個(gè)JavaScript上下文對(duì)象,它能動(dòng)態(tài)創(chuàng)建圖像( creates graphics on the fly)
隨著大數(shù)據(jù)等領(lǐng)域的發(fā)展及應(yīng)用,canvas繪圖在數(shù)據(jù)可視化方面扮演了重要的角色,可以讓我們靈活地通過各種形式展示數(shù)據(jù),提高數(shù)據(jù)的可讀性,增強(qiáng)產(chǎn)品的數(shù)據(jù)能力。
下圖展示了canvas在數(shù)據(jù)可視化方面的應(yīng)用效果:
綜上,HTML5新功能的出現(xiàn),使得前端在很多新的應(yīng)用領(lǐng)域發(fā)揮出了更加強(qiáng)大的能力,也讓很多已有項(xiàng)目在表現(xiàn)形式上有了更好的選擇。