一張圖帶你看懂HTML 5的六大優勢

前最具人氣的前端開發技術框架是什么？移動至上時代的來臨促使越來越多的開發者利用HTML 5開發移動友好型網站。HTML 5的主要優勢一直在不斷演進，旨在提供足以與原生技術相匹配的功能。從雷軍這樣的互聯網精英人士到菜場股市大媽都深信一點：只要站在風口，豬也能夠飛起來，那么對于IT技能領域來講，2016年這只“豬”當之無愧屬于HTML5開發技術，HTML5從根本上改變了開發商開發web應用的方式，從桌面瀏覽器到移動應用，這種語言和標準都影響并將繼續影響各種操作平臺。憑借著面向開發者與最終用戶的強大及新鮮功能，HTML 5已經被世界各地網站所廣泛采用。HTML 5適用于所有現代桌面與移動瀏覽器，亦可用于移動Web應用的開發工作。

今天學院君帶你一圖流看懂HTML 5六大核心優勢。

1.跨平臺：

在多屏年代，開發者的痛苦指數非常高，人人都期盼HTML5能扮演救星。多套代碼、不同技術工種、業務邏輯同步，這是折磨人的過程。有點類似個人電腦早期世界，那個時候的每家電腦都有自己的操作系統和編程語言，開發者疲于做不同版本，其實DOS的盛行也很大程度是因為開發者實在沒精力給其他電腦寫程序。跨平臺技術在早期大多因為性能問題夭折，但中后期硬件能力增強后又會占據主流，因為跨平臺確實是剛需。你的現代流行瀏覽器都支持HTML5(Chrome，Firefox，Safari，IE9和Opera)，并且創建了HTML5 doctype這樣所有的瀏覽器，即使非常老非常令人厭惡瀏覽器像IE6都可以使用。但是因為老的瀏覽器能夠識別doctype并不意味它可以處理HTML5標簽和功能。幸運的是，HTML5已經使得開發更加簡單了，更多支持更多瀏覽器，這樣老的IE瀏覽器可以通過添加javascript代碼來使用新的元素。

2.視頻和音頻支持

忘了flash和其它第三方應用吧，讓你的視頻和音頻通過HTML5標簽和來訪問資源。正確播放媒體一直都是一個非常可怕的事情，原生開發方式對于文字和音視頻混排的多媒體內容處理相對麻煩，需要拆分開文字、圖片、音頻、視頻，解析對應的URL并分別用不同的方式處理。HTML5在這個方面完全不受限制，可以完全放在一起進行處理。設計師要知道，如果新聞類、微博類、社交類應用的信息呈現中實現文字與多媒體混排，而不用專門嵌入webview，將是一件多美好的事情，至少現在原生方式實現起來還有困難。在國外大型社區網站FACEBOOK、視頻分享網站YOUTUBE、谷歌和微軟等網站，都已經使用html5作為默認技術，它的優點就是省電，流暢和清晰，因為采用了統一的國際標準H.264，國內已經出現手機html5視頻網站。網內大火的bilibili也開始試水HTML 5播放器。

3. 游戲開發

沒錯，你可以使用HTML5的開發游戲。HTML5提供了一個非常偉大的，移動友好的方式去開發有趣互動的游戲。如果你開發Flash游戲，你就會喜歡上HTML5的游戲開發。手機頁游的3D化是大勢所趨，隨著硬件能力的提升、WebGL標準化的普以及手機頁游的逐漸成熟，大量開發者需要創作更加精彩的3D內容。白鷺研發的3D引擎，將助力手機頁游（HTML5游戲）產品形態從2D跨域到3D。可以預見，今年手機頁游將出現高品質的3D內容。隨著超級APP、瀏覽器等渠道流量的開放，以及HTML5游戲品質的提升，出現多款千萬月流水的爆款已經不是懸念。運氣不錯的話，有望出現1000萬利潤的產品。對，利潤，不是流水。

4.網頁應用開發

HTML5是web應用的未來，不要掉隊了!HTML5 Web Storage API可以看做是加強版的cookie，不受數據大小限制，有更好的彈性以及架構，可以將數據寫入到本機的ROM中，還可以在關閉瀏覽器后再次打開時恢復數據，以減少網絡流量。同時，這個功能算得上是另一個方向的后臺“操作記錄”，而不占用任何后臺資源，減輕設備硬件壓力，增加運行流暢性。在線app支持邊使用邊下載離線緩存，或者不下載離線緩存;而離線app必須是下載完離線緩存才能使用。形象點說，cookie就是存了電話和菜單，想吃什么要叫外賣，等多長時間才能吃到就得看交通情況了;離線緩存就是直接在冰箱里存了食物，想吃就能馬上吃到(當然，想吃最新的食物同樣可以打電話預定)。設計師要知道，什么時候讓用戶下載離線緩存(注意在線和離線app的區別)。

除此之外值得一提的還有WebVR，WebVR就是通過HTML5將虛擬現實場景嵌入到網頁，目前已受到谷歌、Facebook等巨頭的擁護。Web擴展了VR的使用范圍，很多生活化的內容納入了VR的創作之中，如實景旅游，新聞報道、虛擬購物等，其內容展示、交互都可以由HTML5引擎輕松創建出來。去年12月白鷺與暴風魔鏡，合作成立國內首個WebVR實驗室，也是希望用HTML5來打造低成本、快捷、低門檻的VR游戲、影音體驗。

5. 更好的互動

我們都喜歡更好的互動，我們都喜歡對于用戶有反饋的網站，用戶可以享受互動的過程。輸入，HTML5的畫圖標簽允許你做更多的互動和動畫，就像我們使用Flash達到的效果。

6.又見SEO

HTML5有著開放的數據交換：HTML是以page為單元開放代碼的，它無需專門開發SDK，只要不混淆，就能與其他應用交互數據。開發者可以讓手機搜索引擎很容易檢索到自己的數據，也更容易通過跨應用協作來滿足最終用戶需求。這意味著更容易推廣、更容易爆發：導流入口多：HTML5應用導流非常容易，超級App(如微信朋友圈)、搜索引擎、應用市場、瀏覽器，到處都是HTML5的流量入口。而原生App的流量入口只有應用市場。聰明的HTML5開發者當然會玩轉各種流量入口從而取得更強的優勢。流量大也是一個重要的點，前段時間微信朋友圈風靡一時《神經貓》，這個游戲如果放到Appstore，絕對沒有那么多流量，超級App帶來的流量，遠大于原生應用市場。假如微信允許游戲在桌面創建快捷方式、假如游戲后續升級解決持續娛樂問題，未來不可想象。還值得一提的是導流效率高，除了入口多、流量大，導流效率高也不可忽視，誰都知道：頁游和端游打同樣的廣告，廣告變用戶的轉化率，頁游遠遠高于端游。

吹了這么久的HTML 5，一個重要的問題浮現了：你說的我都懂，可是開發HTML 5也不容易啊！說到這里學院君必須給大家獻上今天的終極福利，那就是性能最優的HTML5,CSS和JavaScript移動、Web開發框架，Visual Studio開發人員開發跨平臺產品的首選工具——DevExtreme。

選擇DevExtreme的四大理由：

1.簡化移動應用開發

運用DevExtreme Complete Subscription創建高度響應式的移動應用。運用強大的HTML、CSS3和JavaScript交付實現一系列如本地應用程序的商業解決方案，不用學習各種語言或框架，你只需要懂得HTML和JavaScript，就可以開始進行你的跨平臺開發。

無論是iPad、iPhone、Android、Windows Phone還是Surface tablet，DevExtreme Complete Subscription可以交付實現。

支持Apache Cordova (PhoneGap)。這意味著用DevExtreme創建的每個移動app都可以在目標設備上運行，并且可以隨時提交到Apple App Store 或 Google Play Store。

2.完美的數據可視化

DevExtreme Complete Subscription為智能手機和平板電腦封裝了易于使用的HTML JavaScript應用程序，包含超過30種觸摸優化的本地UI小工具，可用于任何應用程序的單個頁面。主要包括以下數據可視化工具：

圖表和儀表：DevExtreme Complete Subscription包含高性能的線形圖、面積圖、柱狀圖和財務HTML5圖表工具。同時還有非常漂亮的圓形和線形HTML5儀表工具。

量程選擇器：HTML 5范圍和值的選擇器，帶有Google仿真圖表。

多功能小部件：一個完整的HTML5多功能小部件，你可以創建與目標平臺最匹配的工具。

自適應樣式：DevExtreme Complete Subscription應用特定設備的樣式到所有組件，讓其看起來有一個本地外觀，且開箱即用。

3.完美集成Visual Studio

DevExtreme Complete Subscription 已經為Visual Studio做了一系列的優化，熟悉VS的開發人員可以立即著手開始創建運行于iOS, Android和交互式Web下的apps。

運用Visual Studio的項目模板和向導幫助你馬上開始。完整集成的View Designer和代碼窗口可以構建理想的視圖，所有這一切都在Visual Studio中完成。

在Visual Studio內使用內置的設備模擬器，或者DXProxy和瀏覽器調試器調試你的移動應用。用DevExpress Courier App在PhoneGap環境下立即執行應用，交互一個本地的、可以立即上市的IOS和Android應用包，而不受平臺SDK或額外服務器的限制。

4.一種語言、一個代碼庫搞定任何app

一個SDK：DevExtreme Complete Subscription只需通過一個SDK就可以交付到所有常用的平臺上，真正的代碼重用和省心的項目管理。

MVVM：支持Knockout.js，意味著Model View（基于UI開發的ViewModel）將變得前所未有的簡單。

jQuery：開發者當前所掌握的東西全部都可以利用起來，不用擔心知識上的限制。

為了更美好的職業前景，為了升職加薪走上人生巔峰，還不投入慧都學院君的懷抱！

更多行業資訊，更新鮮的技術動態，盡在慧都學院。

TML 5 是最新的超文本標記語言 (HTML)，它是用于描述網頁內容和外觀的標準編程語言。如今，所有主要瀏覽器（Chrome、Safari、Firefox、Opera 和 IE）都提供 HTML5 支持，這使其成為當今使用的最新 HTML 技術。

下面列出了 HTML5 的一些驚人優勢：

1. 跨瀏覽器兼容性

HTML5 易于實現，并且可以與 CSS3 一起使用。今天所有的瀏覽器都支持 HTML5 標簽，甚至 IE6 也能理解標記 <!doctype html> 并且會正確地呈現頁面。

2. 新的 DOCTYPE 聲明：

關于 HTML 5 最重要的事實是 - HTML5 易于實現并且可以與 CSS3 一起使用

HTML5 的 DOCTYPE 聲明非常簡單：

<! DOCTYPE html>

是的，只有“DOCTYPE”和“html”這兩個詞，不再有長行充滿臟標簽的不可讀代碼。

3. 帶來可用性和用戶體驗的改進

可用性和用戶體驗與網站或應用程序的設計程度有關。我們都想要更好的動態網站和美觀的應用程序與用戶交互并允許用戶享受功能、內容等，而不僅僅是看它。HTML5 對 Web 具有多項技術增強和改進功能，并且使用 HTML5 代碼，Web 開發人員可以輕松設計更好的應用程序和動態網站，從而帶來更好的用戶體驗和可用性。

4. 替代 Flash 和 Silver light

HTML5超越Flash和Silver light而領先只是因為播放Flash文件和Silver light需要安裝Adobe Flash最新版本或Silver light插件，還需要注意設備和操作系統的兼容性. HTML 5 并非如此。因此，HTML5 如今在公司中變得越來越流行，因為它提供了大量的屬性和功能，可幫助 Web 開發人員以最少的工作量構建漂亮的網站和應用程序。

5. 大量用于移動應用和游戲

HTML5 在移動應用程序和游戲開發中的適應性隨著 HTML5 Web 應用程序工具在從用戶界面 (UI)、開發、使用腳本等開始的所有情況下為 Web 開發人員提供了更大的靈活性而增加。

HTML5 還能夠處理多媒體內容，而無需安裝插件，我們可以使用該技術輕松開發交互式游戲。

6. 干凈的標記和改進的代碼

HTML5 帶有簡潔的標記和簡潔的代碼，使其比以前的版本更易于訪問。HTML 5 允許 Web 開發人員和 Web 設計人員使用更簡潔的代碼并刪除 div 標簽并將所有 div 標簽替換為新的 HTML 5 元素。

7. 離線瀏覽

HTML5 還提供離線瀏覽功能，這意味著訪問者可以在沒有有效互聯網連接的情況下加載網頁上的某些元素。假設你訪問了該站點，但不知何故你現在沒有連接到互聯網，或者互聯網連接發生故障。使用 HTML5 離線緩存，我們仍然可以加載網站的核心元素，你可以離線查看它們。

8. HTML5 在網站抓取和索引方面對 SEO 友好：

如今，為了在包括谷歌在內的不同搜索引擎中獲得并保持最高排名，必須小心優化網站和所有必要的 SEO 模塊。HTML 5 帶有各種屬性和模塊，使網絡爬蟲可以輕松搜索你的內容并使其正確編入索引，從而提高其在搜索引擎搜索結果頁面中的排名。HTML5 的技術提供了具有廣泛結構元素、語義、表單類型、新屬性和媒體元素的各種功能，使數字營銷專家和開發人員更容易專注于更好的搜索引擎優化技術并推動更多的自然搜索流量。

9. 視頻和音頻支持

借助 HTML5 技術，我們不再需要依賴第三方插件來渲染音頻和視頻。你可以忘記 Flash Player 和其他第三方媒體播放器和插件。你可以使用新的 HTML5 <video> 和 <audio> 標簽輕松訪問你的視頻和音頻。

以前你必須使用舊的 <embed> 和 <object> 標簽并分配大量參數，以顯示視頻可見并正常工作。但是使用 HTML5 的視頻和音頻標簽，我們可以將它們視為圖像； <video src=”url”/>。

我們只需要像任何其他 HTML 元素一樣在單行標簽中定義高度、寬度和自動播放等參數：<video src=”url” width=”800px” height=”500px”autoplay/>。

10. 地理位置支持

在地理定位的幫助下，我們可以輕松地找出我們在世界上的位置，并輕松地與人們分享這些信息。過去，如果我們想首先檢測客戶端設備的位置，我們必須查看客戶端 IP 地址、你的無線網絡連接、手機的基站和緯度和經度。但是對于 HTML5，已經開發了一組 API，它們可以有效地允許客戶端設備（即你的手機、IP 甚至你的桌面瀏覽器）使用你的 HTML5 兼容瀏覽器直接可用的 JavaScript 檢索地理定位信息。

HTML5 改進并增強了瀏覽體驗。那么為什么不為你的網站和移動應用程序采用 HTML 5 呢？

了解更多

加語義化標簽(開發者可以更加優雅，瀏覽器也可以更好的理解)

搜索引擎檢索，為什么會檢索標題，不會檢索“簡介” ? 這是因為結構的不同。但是結構每個人的class命名習慣都會不一樣，無法做到規范，于是不如出新的標簽。

在有一些低版本的瀏覽器中，h5標簽不兼容，會被認為是div，并不會影響我們的功能。也可以在 script 中新加一行代碼 document.createElement("header") ,但是用了多少標簽，就要寫多少行的 document.createElement("") ，于是有一個第三方的插件 html5shiv.js

使用方法：

<!--[if lt IE 9]><script type="text/javascript" src="http://www.ijquery.cn/js/html5shiv.js"></script><![endif]-->

注意：在頁面中調用Html5.js文件必須添加在頁面的head元素內，因為IE瀏覽器必須在元素解析前知道這個元素，所以這個js文件不能在頁面底部調用。

應用程序標簽

DataList

progress

屬性

鏈接關系描述

鏈接到的地方和當前文檔的關系是什么

<a href="01-sementic-tags.html" rel="pre"></a><a href="02-application-tags.html" rel="next"></a>

rel還出現在其他地方，

<link rel="stylesheet" href="css.css">

link本身不會請求文件，而是rel="stylesheet"才會請求文件

目前國內不流行

結構數據標記

<div itemscope itemtype="www.baidu.com"> <div itemprop="主人">主人</div>
 <div itemprop="小狗">小狗一</div>
 <div itemprop="小狗">小狗二</div> </div>

可以方便搜索引擎重點抓取

很高級，但是只有google支持

ARIA

無障礙富互聯網應用程序

<label for="myinput">請輸入您的名字</label>
<input type="text" id="myinput">

為什么上面一定要label for呢？

是為了搜索引擎的理解

自定義屬性

也就是 data-* 之類的屬性，他們沒有功能性，只是為了保存dom節點的強相關的數據。

<ul id="list"></ul>
 <div id="info"></div>
 <script> var data={ 01:{
 name:"張三",
 age:18
 }, 02:{
 name:"李四",
 age:19
 }, 03:{
 name:"王五",
 age:20
 }
 }; for (var X in data) { var item=data[X]; var oli=document.createElement("li"); var olist=document.getElementById("list");
 oli.appendChild(document.createTextNode(item.name));
 olist.appendChild(oli);
 oli.setAttribute("data-name",item.name);
 oli.setAttribute("data-age",item.age );
 oli.addEventListener("click", function () { var name=this.getAttribute("data-name"); var age=this.getAttribute("data-age");
 alert(age+name)
 })
 }
 </script>

上面的代碼用 setattribue 方法來定義了自定義屬性，然后用getattribute又獲取到了自定義屬性。js也針對自定義屬性出了新的api,也就是 dataset['string'] ,使用這個api可以代替 getAttribute 的方法：

oli.addEventListener("click",function(){ console.log(this.dataset["name"]);
})

智能表單

新的表單類型

<input type="date">
<input type="color">
<input type="range">

但是盡量不要在pc端使用，用戶體驗較差，不能自定義樣式。主要適配在移動端。

虛擬鍵盤適配

<input type="text" name="txt_text" id="txt_text">
<input type="number" name="txt_number" id="txt_number">
<input type="email" name="txt_email" id="txt_email">
<input type="tel" name="txt_tel" id="txt_tel">
<input type="url" name="txt_url" id="txt_url">

上面的代碼在pc端上沒有用處，主要是用在移動端可以根據不同的input的 type 來喚出不同的鍵盤。

雖然 input type="email" 看似可以驗證表單，但是真是太弱了，只是驗證有沒有 @ ，真的要驗證的話，還是要自己寫正則表達式

頁面多媒體

音頻

<audio src="A Moment of Reflection.mp3" controls="controls"></audio>

但是默認的播放器太丑了，我們一般是自己寫一個button，然后為這個button添加一個事件：

<script> var btn=document.getElementById("btn"); var btn1=document.getElementById("btn1"); var audio=document.getElementsByTagName("audio")[0];
 btn.addEventListener("click", function () {
 audio.play();
 })
 btn1.addEventListener("click",function (argument) {
 audio.pause();
 })
</script>

視頻

<video src="A Moment of Reflection.mp4" controls="controls"></video>

但是我們一般不是這樣用的，因為視頻有版權，有些瀏覽器只能支持一兩個，我們一般是source：

<video controls="controls"><source src="下午03-網頁多媒體.web.mp4"><source src="下午03-網頁多媒體.web.ogg"><p>您的瀏覽器不支持</p></video>

還有一個插件，是可以幫我們做兼容的，是https://html5media.info/的組件，ie7以上都可以兼容。

以下是多媒體的屬性;

[image_1b2cut34s130mfufars1a6m6va9.png-66.1kB][1]

字幕

兼容性不是很好，現在還沒有人用

canvas

svg

優勢：體積小，質量高，效果好，可控程度高。

在線咨詢

上一篇：JS - 獲取文件后綴，判斷文件類型（比如是否為圖片格式）
下一篇：什么是HTML5?

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

一張圖帶你看懂HTML 5的六大優勢

您的項目需求