整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
TML5 是第五個且是當前的 HTML 版本，它是用于在萬維網上構建和呈現內容的標記語言。本文將幫助讀者了解它。 -- Palak Shah
本文導航
-新標簽和元素 …… 08%
-HTML5 的高級功能 …… 16%
-地理位置 …… 16%
-網絡存儲 …… 33%
-應用緩存（AppCache） …… 44%
-視頻 …… 50%
-音頻 …… 61%
-畫布（Canvas） …… 71%
-HTML5 工具 …… 78%
編譯自： http://opensourceforu.com/2017/06/introduction-to-html5/作者： Palak Shah
譯者： geekpi
HTML5 是第五個且是當前的 HTML 版本，它是用于在萬維網上構建和呈現內容的標記語言。本文將幫助讀者了解它。
HTML5 通過 W3C 和Web 超文本應用技術工作組Web Hypertext Application Technology Working Group之間的合作發展起來。它是一個更高版本的 HTML，它的許多新元素可以使你的頁面更加語義化和動態。它是為所有人提供更好的 Web 體驗而開發的。HTML5 提供了很多的功能，使 Web 更加動態和交互。
HTML5 的新功能是：
新標簽，如 <header> 和 <section>
用于 2D 繪圖的 <canvas> 元素
本地存儲
新的表單控件，如日歷、日期和時間
新媒體功能
地理位置
HTML5 還不是正式標準（LCTT 譯注：HTML5 已于 2014 年成為“推薦標準”），因此，并不是所有的瀏覽器都支持它或其中一些功能。開發 HTML5 背后最重要的原因之一是防止用戶下載并安裝像 Silverlight 和 Flash 這樣的多個插件。
語義化元素： 圖 1 展示了一些有用的語義化元素。
表單元素： HTML5 中的表單元素如圖 2 所示。
圖形元素： HTML5 中的圖形元素如圖 3 所示。
媒體元素： HTML5 中的新媒體元素如圖 4 所示。
圖 1：語義化元素
圖 2：表單元素
圖 3：圖形元素
圖 4：媒體元素
地理位置這是一個 HTML5 API，用于獲取網站用戶的地理位置，用戶必須首先允許網站獲取他或她的位置。這通常通過按鈕和/或瀏覽器彈出窗口來實現。所有最新版本的 Chrome、Firefox、IE、Safari 和 Opera 都可以使用 HTML5 的地理位置功能。
地理位置的一些用途是：
公共交通網站
出租車及其他運輸網站
電子商務網站計算運費
旅行社網站
房地產網站
在附近播放的電影的電影院網站
在線游戲
網站首頁提供本地標題和天氣
工作職位可以自動計算通勤時間
工作原理： 地理位置通過掃描位置信息的常見源進行工作，其中包括以下：
全球定位系統（GPS）是最準確的
網絡信號 - IP地址、RFID、Wi-Fi 和藍牙 MAC地址
GSM/CDMA 蜂窩 ID
用戶輸入
該 API 提供了非常方便的函數來檢測瀏覽器中的地理位置支持：
if (navigator.geolocation) {// do stuff
}
getCurrentPosition API 是使用地理位置的主要方法。它檢索用戶設備的當前地理位置。該位置被描述為一組地理坐標以及航向和速度。位置信息作為位置對象返回。
語法是：
getCurrentPosition(showLocation, ErrorHandler, options);
showLocation：定義了檢索位置信息的回調方法。
ErrorHandler（可選）：定義了在處理異步調用時發生錯誤時調用的回調方法。
options （可選）： 定義了一組用于檢索位置信息的選項。
我們可以通過兩種方式向用戶提供位置信息：測地和民用。
描述位置的測地方式直接指向緯度和經度。
位置信息的民用表示法是人類可讀的且容易理解。
如下表 1 所示，每個屬性/參數都具有測地和民用表示。
圖 5 包含了一個位置對象返回的屬性集。
圖5：位置對象屬性
網絡存儲在 HTML 中，為了在本機存儲用戶數據，我們需要使用 JavaScript cookie。為了避免這種情況，HTML5 已經引入了 Web 存儲，網站利用它在本機上存儲用戶數據。
與 Cookie 相比，Web 存儲的優點是：
更安全
更快
存儲更多的數據
存儲的數據不會隨每個服務器請求一起發送。只有在被要求時才包括在內。這是 HTML5 Web 存儲超過 Cookie 的一大優勢。
有兩種類型的 Web 存儲對象：
本地 - 存儲沒有到期日期的數據。
會話 - 僅存儲一個會話的數據。
如何工作： localStorage 和 sessionStorage 對象創建一個 key=value 對。比如： key="Name"， value="Palak"。
這些存儲為字符串，但如果需要，可以使用 JavaScript 函數（如 parseInt() 和 parseFloat()）進行轉換。
下面給出了使用 Web 存儲對象的語法：
存儲一個值：
localStorage.setItem("key1", "value1");
localStorage["key1"] = "value1";
得到一個值：
alert(localStorage.getItem("key1"));
alert(localStorage["key1"]);
刪除一個值： -removeItem("key1");
刪除所有值：
localStorage.clear();
應用緩存（AppCache）使用 HTML5 AppCache，我們可以使 Web 應用程序在沒有 Internet 連接的情況下脫機工作。除 IE 之外，所有瀏覽器都可以使用 AppCache（截止至此時）。
應用緩存的優點是：
網頁瀏覽可以脫機
頁面加載速度更快
服務器負載更小
cache manifest 是一個簡單的文本文件，其中列出了瀏覽器應緩存的資源以進行脫機訪問。 manifest 屬性可以包含在文檔的 HTML 標簽中，如下所示：
<html manifest="test.appcache">...
</html>
它應該在你要緩存的所有頁面上。
緩存的應用程序頁面將一直保留，除非：
用戶清除它們
manifest 被修改
緩存更新
視頻在 HTML5 發布之前，沒有統一的標準來顯示網頁上的視頻。大多數視頻都是通過 Flash 等不同的插件顯示的。但 HTML5 規定了使用 video 元素在網頁上顯示視頻的標準方式。
目前，video 元素支持三種視頻格式，如表 2 所示。
下面的例子展示了 video 元素的使用：
<! DOCTYPE HTML><html>
<body>
<video src=" vdeo.ogg" width="320" height="240" controls="controls">
This browser does not support the video element.
</video>
</body>
</html>
例子使用了 Ogg 文件，并且可以在 Firefox、Opera 和 Chrome 中使用。要使視頻在 Safari 和未來版本的 Chrome 中工作，我們必須添加一個 MPEG4 和 WebM 文件。
video 元素允許多個 source 元素。source 元素可以鏈接到不同的視頻文件。瀏覽器將使用第一個識別的格式，如下所示：
<video width="320" height="240" controls="controls"><source src="vdeo.ogg" type="video/ogg" />
<source src=" vdeo.mp4" type="video/mp4" />
<source src=" vdeo.webm" type="video/webm" />
This browser does not support the video element.
</video>
圖6：Canvas 的輸出
音頻對于音頻，情況類似于視頻。在 HTML5 發布之前，在網頁上播放音頻沒有統一的標準。大多數音頻也通過 Flash 等不同的插件播放。但 HTML5 規定了通過使用音頻元素在網頁上播放音頻的標準方式。音頻元素用于播放聲音文件和音頻流。
目前，HTML5 audio 元素支持三種音頻格式，如表 3 所示。
audio 元素的使用如下所示：
<! DOCTYPE HTML><html>
<body>
<audio src=" song.ogg" controls="controls">
This browser does not support the audio element.
</video>
</body>
</html>
此例使用 Ogg 文件，并且可以在 Firefox、Opera 和 Chrome 中使用。要在 Safari 和 Chrome 的未來版本中使 audio 工作，我們必須添加一個 MP3 和 Wav 文件。
audio 元素允許多個 source 元素，它可以鏈接到不同的音頻文件。瀏覽器將使用第一個識別的格式，如下所示：
<audio controls="controls"><source src="song.ogg" type="audio/ogg" />
<source src="song.mp3" type="audio/mpeg" />
This browser does not support the audio element.
</audio>
畫布（Canvas）要在網頁上創建圖形，HTML5 使用 畫布 API。我們可以用它繪制任何東西，并且它使用 JavaScript。它通過避免從網絡下載圖像而提高網站性能。使用畫布，我們可以繪制形狀和線條、弧線和文本、漸變和圖案。此外，畫布可以讓我們操作圖像中甚至視頻中的像素。你可以將 canvas 元素添加到 HTML 頁面，如下所示：
<canvas id="myCanvas" width="200" height="100"></canvas>
畫布元素不具有繪制元素的功能。我們可以通過使用 JavaScript 來實現繪制。所有繪畫應在 JavaScript 中。
<script type="text/javascript">var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="blue";
cxt.storkeStyle = "red";
cxt.fillRect(10,10,100,100);
cxt.storkeRect(10,10,100,100);
</script>
以上腳本的輸出如圖 6 所示。
你可以繪制許多對象，如弧、圓、線/垂直梯度等。
為了有效操作，所有熟練的或業余的 Web 開發人員/設計人員都應該使用 HTML5 工具，當需要設置工作流/網站或執行重復任務時，這些工具非常有幫助。它們提高了網頁設計的可用性。
以下是一些幫助創建很棒的網站的必要工具。
HTML5 Maker： 用來在 HTML、JavaScript 和 CSS 的幫助下與網站內容交互。非常容易使用。它還允許我們開發幻燈片、滑塊、HTML5 動畫等。
Liveweave： 用來測試代碼。它減少了保存代碼并將其加載到屏幕上所花費的時間。在編輯器中粘貼代碼即可得到結果。它非常易于使用，并為一些代碼提供自動完成功能，這使得開發和測試更快更容易。
Font dragr： 在瀏覽器中預覽定制的 Web 字體。它會直接載入該字體，以便你可以知道看起來是否正確。也提供了拖放界面，允許你拖動字形、Web 開放字體和矢量圖形來馬上測試。
HTML5 Please： 可以讓我們找到與 HTML5 相關的任何內容。如果你想知道如何使用任何一個功能，你可以在 HTML Please 中搜索。它提供了支持的瀏覽器和設備的有用資源的列表，語法，以及如何使用元素的一般建議等。
Modernizr： 這是一個開源工具，用于給訪問者瀏覽器提供最佳體驗。使用此工具，你可以檢測訪問者的瀏覽器是否支持 HTML5 功能，并加載相應的腳本。
Adobe Edge Animate： 這是必須處理交互式 HTML 動畫的 HTML5 開發人員的有用工具。它用于數字出版、網絡和廣告領域。此工具允許用戶創建無瑕疵的動畫，可以跨多個設備運行。
Video.js： 這是一款基于 JavaScript 的 HTML5 視頻播放器。如果要將視頻添加到你的網站，你應該使用此工具。它使視頻看起來不錯，并且是網站的一部分。
The W3 Validator： W3 驗證工具測試 HTML、XHTML、SMIL、MathML 等中的網站標記的有效性。要測試任何網站的標記有效性，你必須選擇文檔類型為 HTML5 并輸入你網頁的 URL。這樣做之后，你的代碼將被檢查，并將提供所有錯誤和警告。
HTML5 Reset： 此工具允許開發人員在 HTML5 中重寫舊網站的代碼。你可以使用這些工具為你網站的訪問者提供一個良好的網絡體驗。
Palak Shah
作者是高級軟件工程師。她喜歡探索新技術，學習創新概念。她也喜歡哲學。你可以通過 palak311@gmail.com[1] 聯系她。
via: http://opensourceforu.com/2017/06/introduction-to-html5/
作者：Palak Shah[2] 譯者：geekpi 校對：wxy
本文由 LCTT 原創編譯，Linux中國 榮譽推出
TML（HyperText Markup Language，超文本標記語言）是一種用于定義網頁內容的含義和結構的標記語言。除此之外，網頁還需要 CSS 描述網頁的展示效果和 JavaScript實現與用戶的交互性。它不是編程語言。
HTML 是由 Tim Berners-Lee 和同事 Daniel W.Connolly 于 1990 年創立的一種標記語言。當時，Tim Berners-Lee 發明了萬維網，并且為了方便閱讀網頁，又發明了 HTML、HTTP、URL，使用自制的瀏覽器去訪問網頁。HTML 中元素的設計深受 CERN 內部的 SGML 為基礎的文件格式 SGMLguid影響。
在Tim Berners-Lee 與 1990年發明了 HTML 后，經過了24年時間，到 2014年才發展到HTML 5，之間經歷了HTML 2.0、HTML 3.2、HTML 4.0、HTML4.01，直到HTML 5 這幾個版本。
Tim Berners-Lee加入的互聯網工程任務組（IETF）于 1993 年發布首個HTML規范的提案，并于6個月后過期，IETF創建了一個HTML工作組，并在 1995年完成 HTML 2.0，這是第一個HTML規范，而之前的版本只是草案階段，非正式版本。
而之后HTML標準的發展因為競爭利益遭到停歇，因此，從 1996 年開始，就一直由W3C組織維護HTML規范了，W3C 組織將標準化發布到 4.0版本后，終于在 2000年成為國際標準。
然而，發布了四個版本后，業界普遍認為 HTML 已經到了窮途末路，因此也將焦點轉移到了XML和XHTML上，因此，HTML迫切需要添加新功能，指定新規范，從而扭轉這一切。
就在這種情況下，一組人在 2004 年成立了 WHATWG，并創立了 HTML5 規范，同時也開始專門針對 Web 應用開發新功能，Web 2.0 就是在這時被發明的。在 2006 年，W3C 又重新介入 HTML，并與 WHATWG 合作共同，最終在 2008 年發布了 HTML5 工作草案。而在 HTML 5 規范還未定稿的情況下，各大瀏覽器廠商都開始將自家產品升級以支持 HTML 5 的新功能了。最終在 2014 年 10月 28 日完成標準化。
HTML 5 是基于各種各樣的理念進行設計的，這些設計理念體現了對可能性和可行性的新認識。但 HTML 5 并不是顛覆性的革新。而是要保持一切新特性平滑過渡。
因為在 HTML 5 之前，在網頁上看視頻等，只能使用插件，如 Adobe 開發的 Flash，但瀏覽器廠商不想在自家產品上使用插件，因此，HTML 5 中的一個新特性就是讓瀏覽器直接處理那些原來要使用 Flash 的富內容。
HTML 經過這些年的發展，已經走向成熟，是前端開發中不可或缺的一環，而 HTML 5 標準還沒有到最終版本，現在仍處在完善階段。前端要學習的還有很多，大家要加油！
TML5是移動互聯網的未來嗎？
自2010年喬布斯公開支持并在iOS禁止Flash后，在多數開發者心中，這開始變成一個肯定的答案。
2010年到2011年，HTML5概念被熱炒，受到追捧，甚至不少人預言HTML5應用將會替代原生app。但或許是當初被捧得太高，而不論是生態環境還是技術支持都遠遠算不上成熟，HTML5游戲在短暫熱捧之后遭遇諸多問題，隨后開始陷入冰谷，當初使用HTML5開發游戲的團隊紛紛轉型——HTML5或許將是未來，但現在談論還為時過早。
在被遺忘一段時間之后，現在，一些專注于游戲領域的HTML5引擎服務提供商正在重整旗鼓（詳見今日推送的第二篇文章），這讓我們不由再次回頭審視HTML5游戲走過的整個路程，并開始思考一個問題：在HTML5那條通往“未來”的遙遠道路上，它正站在一個什么樣的位置上？
■過去
2010年4月，蘋果公司宣布禁止FlashPlayer登陸iOS系統，鼓勵開發者使用HTML5技術，這一舉動引起了軒然大波，喬布斯甚至為此撰寫了一篇長文《關于Flash的幾點思考》進行回應。當年十月，Zynga收購了HTML5游戲引擎開發商Dextrose，并在隨后發布了第一款HTML5游戲《MafiaWarsAtlanticCity》。
從2011年開始，HTML5的概念開始火爆，在這一年，諸多大廠紛紛出擊這一領域進行布局，MOTO投資了HTML5游戲公司Moblyng，迪士尼收購了HTML5游戲引擎公司RocketPack。
Facebook社交游戲開發商Wooga也在當年宣布進軍HTML5和iOS游戲領域。
在同一年，Unity確認支持HTML5，Facebook收購HTML5技術團隊Strobe，將自身在移動端的發力重心放在HTML5上。同年，手游大廠EA、Popcap、Gameloft也相繼發布了自己的HTML5游戲。
在2011年底，還有一件重要的事情，Adobe宣布停止在Android系統更新FlashPlayer，并推薦開發者使用HTML5技術開發移動Web應用。
就在看起來形勢一片大好HTML5概念火熱的時候，哀歌從2012年開始唱響。
在2012年開年之際，此前MOTO投資的HTML5游戲開發商Moblyng倒閉是第一個音符，隨后在六月，Wooga宣布停止開發HTML5游戲，他們曾經推出一款HTML5游戲《MagicLand：Island》，但是玩家玩這個游戲的總次數只有130萬次，留存率僅5%，相比之下，他們在iOS平臺推出的《DiamondDash》則獲得了1800萬次的下載。
為這支哀歌譜下強音的是Facebook的失敗。在2012年9月，扎克伯格在接受采訪時表示：“Facebook曾經錯誤地將賭注押在了HTML5上，這是我們最大的戰略錯誤，致使我們錯失了移動市場的發展良機。”
在那之后，曾經被捧上高位打上未來標簽的HTML5技術在移動端狠狠摔落，HTML5開始淡出視野。
總結下來，HTML5在移動游戲領域所遭遇的困境，主要是由于四個原因：
1、技術不成熟，開發生態不完整
2、沒有合適的載體，瀏覽器渲染性能低下
3、沒有成熟的生態環境（渠道，運營商）
4、受制于網絡環境
這些原因最終造成了游戲功能和表現受限，體驗大打折扣。
在2013年底，下一代JavaScript標準規范ES6草案鎖定并正式發布。
■現在
目前HTML5的框架和庫都普遍偏于Web應用的制作，專注于游戲的偏少，比較流行的HTML5框架包括CreateJS，JQuery，AngularJS和Node.js，專注于HTML5游戲的引擎有Impact、Phaser、Pixi、Createjs、EaselJSPhaser、Turbulenz、GameClosure、Coco2d-HTML5和Egret等。
現在主流網站幾乎全部支持HTML5標準，幾乎所有流行的網站都采用了HTML5技術。但是在移動設備上，還尚未出現非常成熟的HTML5應用或游戲，這一市場還在剛剛起步。游戲方面，此前有一二三國、修仙三國、三國喵喵傳等游戲，而目前，墨麟、游戲谷、光年互動等開發商正在開發HTML5游戲。
正在發生的另外一些事情：
1.各瀏覽器對HTML5標準化的支持正在慢慢趨于一致
2.硬件的變革正在不斷推動采用HTML5技術制作的復雜應用和游戲的用戶體驗的快速提升
3.Web游戲類型在3G/4G網絡下的數據發送接收速度正在變得相對高效，但目前國內總體網絡質量仍不樂觀
4.逐漸涌現出的HTML5游戲引擎和制作工具，開始降低H5游戲制作成本，并提高游戲開發效率
5.混生應用出現，上層使用h5開發，底層使用c++渲染，性能得到很大提升，這種方式是當前階段的主流
6.一些巨頭正在嘗試引領這個市場，騰訊的手機QQ空間的安卓版應用，在前段時間將“玩吧”菜單放置在了底部菜單欄的一級入口；在玩吧中，現在已經上線了不少HTML5游戲，不僅有休閑游戲，也有一些卡牌類的中重度游戲，同時在安裝QQ空間首次登錄時，會自動進入一個名為“讓童年飛”的HTML5休閑游戲，騰訊正在嘗試引導用戶嘗試這些HTML5游戲，不過總體來說，內容還處于匱乏階段，玩吧目前僅提供13款游戲；此外還有百度輕應用等。
看起來一切正在往前有序推進，不過站在游戲開發者角度來說又是什么看法？
在一些開發者看來，HTML5游戲開發快、易調試、跨平臺、推廣成本更低的特點，或許會是其優勢所在，但是問題的核心在于如果不能在游戲體驗上給予玩家更多好處，那么就沒有太多的理由去看好，基于這點才會有市場，別的都是業內臆想。
而對于游戲玩家來說，內容才是永遠的核心。
■未來
HTML5的成熟條件是什么？
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
