HTML5新特性
2021-02-21 分類： 網(wǎng)站建設
HTML5是萬維網(wǎng)的核心語言、標準通用標記語言下的一個應用超文本標記語言（HTML）的第五次重大修改，為了順應整個互聯(lián)網(wǎng)時代變遷，使得人們能夠以更好的方式去進行網(wǎng)頁結構搭建，HTML5應運而生。HTML5新增了如下幾個方面你的特性：
一、語義特性（Class：Semantic）
HTML5賦予網(wǎng)頁更好的意義和結構。更加豐富的標簽將隨著對RDFa的，微數(shù)據(jù)與微格式等方面的支持，構建對程序、對用戶都更有價值的數(shù)據(jù)驅動的Web。
HTML結構語義化，是最近幾年才提出來的，以前的html結構，都是一堆沒有語義的冷冰冰的標簽。最泛濫的就是div+css，以前的頁面，一打開就是一堆div+css，為了改變這種這種狀況，開發(fā)者們和官方提出了讓HTML結構語義化的概念，并且w3c也在HTML5給出了幾個新的語義化的標簽。
語義化之后文檔會有什么效果呢？就是你寫的HTML結構，是用相對應的有一定語義的英文字母（標簽）表示的，標記的，因為HTML本身就是標記語言。不僅對自己來說，容易閱讀，書寫。別人看你的代碼和結構也容易理解，甚至對一些不是做網(wǎng)頁開發(fā)的人來說，也容易閱讀。。
怎么知道自己的頁面結構是否語義化，那就要看HTML布局結構，在去掉CSS樣式表之后，是否，依然能很好的呈現(xiàn)內容的代碼結構。也就是說，去掉CSS的裝飾之后，整個HTML的結構閱讀起來依舊主次分明，能夠看清其整體的架構模塊。這也就是，語義化之后我們想要HTML文檔達到的效果。
其實語義化，也無非就是自己在使用標簽的時候在合適的場景下選取合適的標簽，比如h1~h5系列標簽，在HTML中就是就是用來定義標題；而p標簽，大部分情況下用以處理文字段落，table表格則適合做信息表格,等等。
我們對整個HTML結構進行語義化的規(guī)范操作有如下幾個好處：
1，這樣有利于SEO：和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息：爬蟲依賴于標簽來確定上下文和各個關鍵字的權重；
2，方便其他設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以有意義的方式來渲染網(wǎng)頁；
3，便于團隊開發(fā)和維護，語義化更具可讀性，遵循W3C標準的團隊都遵循這個標準，可以減少差異化。
HTML5中新增的語義化標簽進一步加強了我們針對整個HTML結構進行語義化跟進的可操作性，使得我們網(wǎng)頁布局的可閱讀性更高。
常見的HTML5語義化標簽及其使用場景如下：
定義頁面獨立的內容區(qū)域。
定義頁面的側邊欄內容。
定義命令按鈕，比如單選按鈕、復選框或按鈕
用于描述文檔或文檔某個部分的細節(jié)
定義對話框，比如提示框
標簽包含 details 元素的標題
規(guī)定獨立的流內容（圖像、圖表、照片、代碼等等）。
定義
定義 section 或 document 的頁腳。
定義了文檔的頭部區(qū)域
定義帶有記號的文本。
定義度量衡。僅用于已知大和最小值的度量。
定義導航鏈接的部分。
定義任何類型的任務的進度。
定義文檔中的節(jié)（section、區(qū)段）。
定義日期或時間。
二、本地存儲特性（Class: OFFLINE & STORAGE）
基于HTML5開發(fā)的網(wǎng)頁APP擁有更短的啟動時間，更快的聯(lián)網(wǎng)速度，這些全得益于HTML5 APP Cache，以及本地存儲功能。
早些時候,本地存儲使用的是 cookie。但是Web 存儲需要更加的安全與快速，這些數(shù)據(jù)不會被保存在服務器上，但是這些數(shù)據(jù)只用于用戶請求網(wǎng)站數(shù)據(jù)上，它也可以存儲大量的數(shù)據(jù)，而不影響網(wǎng)站的性能。數(shù)據(jù)以 鍵/值 對存在, web網(wǎng)頁的數(shù)據(jù)只允許該網(wǎng)頁訪問使用。
客戶端存儲數(shù)據(jù)的兩個對象為：
localStorage - 用于長久保存整個網(wǎng)站的數(shù)據(jù)，保存的數(shù)據(jù)沒有過期時間，直到手動去除。
sessionStorage - 用于臨時保存同一窗口(或標簽頁)的數(shù)據(jù)，在關閉窗口或標簽頁之后將會刪除這些數(shù)據(jù)。
不管是 localStorage，還是 sessionStorage，可使用的API都相同，常用的有如下幾個（以localStorage為例）：
保存數(shù)據(jù)：localStorage.setItem(key,value);
讀取數(shù)據(jù)：localStorage.getItem(key);
刪除單個數(shù)據(jù)：localStorage.removeItem(key);
刪除所有數(shù)據(jù)：localStorage.clear();
得到某個索引的key：localStorage.key(index);
三、連接特性（Class: CONNECTIVITY）
更有效的連接工作效率，使得基于頁面的實時聊天，更快速的網(wǎng)頁游戲體驗，更優(yōu)化的在線交流得到了實現(xiàn)。HTML5擁有更有效的服務器推送技術，Server-Sent Event和WebSockets就是其中的兩個特性，這兩個特性能夠幫助我們實現(xiàn)服務器將數(shù)據(jù)“推送”到客戶端的功能。
WebSocket 是 HTML5 開始提供的一種在單個 TCP 連接上進行全雙工通訊的協(xié)議。
WebSocket 使得客戶端和服務器之間的數(shù)據(jù)交換變得更加簡單，允許服務端主動向客戶端推送數(shù)據(jù)。在 WebSocket API 中，瀏覽器和服務器只需要完成一次握手，兩者之間就直接可以創(chuàng)建持久性的連接，并進行雙向數(shù)據(jù)傳輸。
在 WebSocket API 中，瀏覽器和服務器只需要做一個握手的動作，然后，瀏覽器和服務器之間就形成了一條快速通道。兩者之間就直接可以數(shù)據(jù)互相傳送。
現(xiàn)在，很多網(wǎng)站為了實現(xiàn)推送技術，所用的技術都是 Ajax 輪詢。輪詢是在特定的的時間間隔（如每1秒），由瀏覽器對服務器發(fā)出HTTP請求，然后由服務器返回最新的數(shù)據(jù)給客戶端的瀏覽器。這種傳統(tǒng)的模式帶來很明顯的缺點，即瀏覽器需要不斷的向服務器發(fā)出請求，然而HTTP請求可能包含較長的頭部，其中真正有效的數(shù)據(jù)可能只是很小的一部分，顯然這樣會浪費很多的帶寬等資源。
HTML5 定義的 WebSocket 協(xié)議，能更好的節(jié)省服務器資源和帶寬，并且能夠更實時地進行通訊。
我們使用WebSocket 與Ajax的長輪詢做對比，從而感受WebSocket 的優(yōu)勢所在，其對比圖如下：
四、網(wǎng)頁多媒體特性(Class: MULTIMEDIA)
支持網(wǎng)頁端的Audio、Video等多媒體功能， 與網(wǎng)站自帶的APPS，攝像頭，影音功能相得益彰。
video元素，在HTML5中專門用來播放網(wǎng)絡上的視頻或者電影。
audio元素，在HTML5中專門用來播放網(wǎng)絡上的音頻。
使用video和audio元素進行播放時就不在需要使用其他的插件了，只要我們的瀏覽器支持HTML5就可以。
瀏覽器的支持：
Safari3以上、Firefox4以上、0pera10以上、chrome3.0以上版本都對audio元素和video元素支持！
1，基本使用方法
audio元素只需要給他指定一個src屬性：
對于不支持的瀏覽器我們可以在這對元素之間加入提示語句來代替
video元素要設定好長寬和src屬性就可以了：
同樣對于不支持video的瀏覽器可以在中間加入替換文字：
source元素指定多個播放格式與編碼：
source元素可以為同一個媒體數(shù)據(jù)指定多個播放格式與編碼方式，以確保瀏覽器可以從中選擇一種自己支持的播放格式進行播放。選擇順序自上而下，直到選擇到所支持的格式為止。
使用方法：
各種設備對編碼格式的支持情況：
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屬性：在這個屬性里面指定媒體數(shù)據(jù)的URL地址。
controls屬性：指定是否為視頻或者音頻數(shù)據(jù)添加瀏覽器自帶的播放控制條，控制條中有播放按鈕、暫停等按鈕。
width和height屬性（video獨有）：指定視頻的寬度與高度。
autoplay屬性：這個屬性指定是否當我們網(wǎng)頁加載完成之后就開始自動播放。
preload屬性：這個屬性指定是否對數(shù)據(jù)進行預加載，如果是的話，瀏覽器會將視頻數(shù)據(jù)或者音頻數(shù)據(jù)進行緩沖，這樣做可以加快播放的速度。
preload屬性的三個值：
none 表示不進行預加載。
metadata 表示只預加載媒體的元數(shù)據(jù)。
auto(默認值) 表示預加載全部的視頻或者音頻。
2，使用Javascript提供的方法操作多媒體。
Javascript為我們提供了豐富的方法，用以靈活控制多媒體文件，這樣我們就可以根據(jù)實際的項目需求，定義自己的多媒體播放器。
其中controls屬性經(jīng)過設定，會在界面中顯示一個瀏覽器自帶的控制條。如果對于UI沒有要求的需求，其內置控制器已經(jīng)可以滿足大部分的需求。隱藏控制條并模擬：那么實現(xiàn)一個自定義功能的播放器關鍵就在于，我們不使用原生的控制器，將其隱藏掉之后，在下方同樣的位置通過HTML、CSS來模擬所需樣式，同時通過js來調用video標簽所暴露給我們的接口函數(shù)及屬性，以及檢測用戶的操作行為來同步的模擬UI與視頻播放數(shù)據(jù)的相應變化。
幾個核心函數(shù)及屬性的用法：
myVid=document.getElementById("video1");//控制視頻開關
myVid.play() // 觸發(fā)媒體文件的播放
myVid.pause() //觸發(fā)媒體文件的暫停
myVid.currentTime=5; //返回或設定當前視頻播放位置
myVid.duration // 返回視頻總長度
myVid.volume //控制音量大小
myVid.muted //控制多媒體是否靜音
五、三維、圖形及特效特性（Class: 3D, Graphics & Effects）
基于SVG、Canvas、WebGL及CSS3的3D功能，用戶會驚嘆于在瀏覽器中，所呈現(xiàn)的驚人視覺效果。
使用
隨著大數(shù)據(jù)等領域的發(fā)展及應用，canvas繪圖在數(shù)據(jù)可視化方面扮演了重要的角色，可以讓我們靈活地通過各種形式展示數(shù)據(jù)，提高數(shù)據(jù)的可讀性，增強產品的數(shù)據(jù)能力。
下圖展示了canvas在數(shù)據(jù)可視化方面的應用效果：
綜上，HTML5新功能的出現(xiàn)，使得前端在很多新的應用領域發(fā)揮出了更加強大的能力，也讓很多已有項目在表現(xiàn)形式上有了更好的選擇。私信【前端】領取web前端開發(fā)/html5學習視頻。
網(wǎng)站標題：HTML5新特性
標題來源：http://m.2m8n56k.cn/news/102127.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供服務器托管、微信公眾號、網(wǎng)站收錄、網(wǎng)站策劃、營銷型網(wǎng)站建設、App開發(fā)
聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)
猜你還喜歡下面的內容
- 香港服務器與國內服務器有哪些區(qū)別 2021-02-21
- 魚兒離不開水：如何通過整合營銷來實現(xiàn)優(yōu)化成效驚人？ 2021-02-21
- 社交電商的冰火兩重天 2021-02-21
- 在響應式網(wǎng)頁設計中需要注意的地方是什么？ 2021-02-21
- 終于把服務器負載均衡和客戶端負載均衡講清楚了 2021-02-21
- 手機上網(wǎng)修改DNS服務器，告別小廣告騷擾 2021-02-21
- 中國跨境電商的市場現(xiàn)狀和發(fā)展前景分析 2021-02-21
- 掌握小程序推廣策略，讓你的小程序商城強勢吸粉 2021-02-21
- 如何搶注域名？搶注域名要注意哪些事項？ 2021-02-21
- Linux系統(tǒng)為什么要吃掉我的“內存”？ 2021-02-21
- 為什么網(wǎng)站需要SSL證書 2021-02-21
- SEO分享：關于SEO的十大問題和解決辦法 2021-02-21
- 6G技術是什么？ 2021-02-21
- 域名的重要性，好域名創(chuàng)造品牌價值 2021-02-21
- 做好微信營銷并不難，就看你怎么運營 2021-02-21
- 10 種 JavaScript 最常見的錯誤 2021-02-21
- 如何開一家自己的網(wǎng)店？ 2021-02-21
- 社交電商成趨勢的必然性：用AI重新定義人性 2021-02-21
- 建站小白看過來：須知建站初期注意的禁忌 2021-02-21