很多人想學(xué)html5，但又不了解，最重要的是不知道學(xué)完之后能做什么。下面千鋒就與大家分享html5的就業(yè)方向與就業(yè)前景。

html5的優(yōu)勢在哪里？

HTML5可以提供：

1、提高可用性和改進(jìn)用戶的友好體驗(yàn);

2、有幾個新的標(biāo)簽，這將有助開發(fā)人員定義重要的內(nèi)容;

3、可以給站點(diǎn)帶來更多的多媒體元素(視頻和音頻);

4、可以很好的替代FLASH和Silverlight;

5、當(dāng)涉及到網(wǎng)站的抓取和索引的時候，對于SEO很友好;

6、將被大量應(yīng)用于移動應(yīng)用程序和游戲。

學(xué)完html5可以找什么工作？

根據(jù)智聯(lián)招聘的相關(guān)專家介紹，html5開發(fā)工程師工作1—2年之后會成為web前端高級軟件工程師，年薪可以達(dá)到15萬以上，工作3—5年之后可以成為了web前端技術(shù)主管或者是經(jīng)理，年薪在15—50萬之間，工作5年以上，年薪可想而知，當(dāng)然職位上也會有所提升，會成為互聯(lián)網(wǎng)公司的技術(shù)總監(jiān)或者是產(chǎn)品經(jīng)理，那學(xué)習(xí)html5開發(fā)究竟可以選擇從事哪些工作呢?

學(xué)習(xí)完html5開發(fā)，你可以從事的職位有很多，例如：web前端開發(fā)工程師、html5開發(fā)工程師、web APP開發(fā)工程師、Java開發(fā)工程師等工作。

html5現(xiàn)在很火，就當(dāng)前市場用人制度來看，我國對于高級html5開發(fā)人員的缺口有將近12萬左右，尤其是北、上、廣、深等一線城市中html5開發(fā)人員的薪資待遇將會更高，html5的就業(yè)選擇相對來講還是比較多的，就業(yè)壓力低、行業(yè)限制少、可以選擇很多熱門的行業(yè)，如互聯(lián)網(wǎng)、電子商務(wù)和教育等等專業(yè)，對自己來講更是有機(jī)會進(jìn)入到大型的網(wǎng)絡(luò)公司，所以就業(yè)領(lǐng)域相對來講還是比較多的。

TML5 是第五個且是當(dāng)前的 HTML 版本，它是用于在萬維網(wǎng)上構(gòu)建和呈現(xiàn)內(nèi)容的標(biāo)記語言。本文將幫助讀者了解它。 -- Palak Shah

本文導(dǎo)航

• -新標(biāo)簽和元素 …… 08%

• -HTML5 的高級功能 …… 16%

• -地理位置 …… 16%

• -網(wǎng)絡(luò)存儲 …… 33%

• -應(yīng)用緩存（AppCache） …… 44%

• -視頻 …… 50%

• -音頻 …… 61%

• -畫布（Canvas） …… 71%

• -HTML5 工具 …… 78%

編譯自： http://opensourceforu.com/2017/06/introduction-to-html5/

作者： Palak Shah

譯者： geekpi

HTML5 是第五個且是當(dāng)前的 HTML 版本，它是用于在萬維網(wǎng)上構(gòu)建和呈現(xiàn)內(nèi)容的標(biāo)記語言。本文將幫助讀者了解它。

HTML5 通過 W3C 和Web 超文本應(yīng)用技術(shù)工作組Web Hypertext Application Technology Working Group之間的合作發(fā)展起來。它是一個更高版本的 HTML，它的許多新元素可以使你的頁面更加語義化和動態(tài)。它是為所有人提供更好的 Web 體驗(yàn)而開發(fā)的。HTML5 提供了很多的功能，使 Web 更加動態(tài)和交互。

HTML5 的新功能是：

• 新標(biāo)簽，如 <header> 和 <section>

• 用于 2D 繪圖的 <canvas> 元素

• 本地存儲

• 新的表單控件，如日歷、日期和時間

• 新媒體功能

• 地理位置

HTML5 還不是正式標(biāo)準(zhǔn)（LCTT 譯注：HTML5 已于 2014 年成為“推薦標(biāo)準(zhǔn)”），因此，并不是所有的瀏覽器都支持它或其中一些功能。開發(fā) HTML5 背后最重要的原因之一是防止用戶下載并安裝像 Silverlight 和 Flash 這樣的多個插件。

新標(biāo)簽和元素

• 語義化元素： 圖 1 展示了一些有用的語義化元素。

• 表單元素： HTML5 中的表單元素如圖 2 所示。

• 圖形元素： HTML5 中的圖形元素如圖 3 所示。

• 媒體元素： HTML5 中的新媒體元素如圖 4 所示。

圖 1：語義化元素

圖 2：表單元素

圖 3：圖形元素

圖 4：媒體元素

HTML5 的高級功能

地理位置

這是一個 HTML5 API，用于獲取網(wǎng)站用戶的地理位置，用戶必須首先允許網(wǎng)站獲取他或她的位置。這通常通過按鈕和/或?yàn)g覽器彈出窗口來實(shí)現(xiàn)。所有最新版本的 Chrome、Firefox、IE、Safari 和 Opera 都可以使用 HTML5 的地理位置功能。

地理位置的一些用途是：

• 公共交通網(wǎng)站

• 出租車及其他運(yùn)輸網(wǎng)站

• 電子商務(wù)網(wǎng)站計(jì)算運(yùn)費(fèi)

• 旅行社網(wǎng)站

• 房地產(chǎn)網(wǎng)站

• 在附近播放的電影的電影院網(wǎng)站

• 在線游戲

• 網(wǎng)站首頁提供本地標(biāo)題和天氣

• 工作職位可以自動計(jì)算通勤時間

工作原理： 地理位置通過掃描位置信息的常見源進(jìn)行工作，其中包括以下：

• 全球定位系統(tǒng)（GPS）是最準(zhǔn)確的

• 網(wǎng)絡(luò)信號 - IP地址、RFID、Wi-Fi 和藍(lán)牙 MAC地址

• GSM/CDMA 蜂窩 ID

• 用戶輸入

該 API 提供了非常方便的函數(shù)來檢測瀏覽器中的地理位置支持：

if (navigator.geolocation) {

// do stuff

}

getCurrentPosition API 是使用地理位置的主要方法。它檢索用戶設(shè)備的當(dāng)前地理位置。該位置被描述為一組地理坐標(biāo)以及航向和速度。位置信息作為位置對象返回。

語法是：

getCurrentPosition(showLocation, ErrorHandler, options);

• showLocation：定義了檢索位置信息的回調(diào)方法。

• ErrorHandler（可選）：定義了在處理異步調(diào)用時發(fā)生錯誤時調(diào)用的回調(diào)方法。

• options （可選）： 定義了一組用于檢索位置信息的選項(xiàng)。

我們可以通過兩種方式向用戶提供位置信息：測地和民用。

1. 描述位置的測地方式直接指向緯度和經(jīng)度。

2. 位置信息的民用表示法是人類可讀的且容易理解。

如下表 1 所示，每個屬性/參數(shù)都具有測地和民用表示。

圖 5 包含了一個位置對象返回的屬性集。

圖5：位置對象屬性

網(wǎng)絡(luò)存儲

在 HTML 中，為了在本機(jī)存儲用戶數(shù)據(jù)，我們需要使用 JavaScript cookie。為了避免這種情況，HTML5 已經(jīng)引入了 Web 存儲，網(wǎng)站利用它在本機(jī)上存儲用戶數(shù)據(jù)。

與 Cookie 相比，Web 存儲的優(yōu)點(diǎn)是：

• 更安全

• 更快

• 存儲更多的數(shù)據(jù)

• 存儲的數(shù)據(jù)不會隨每個服務(wù)器請求一起發(fā)送。只有在被要求時才包括在內(nèi)。這是 HTML5 Web 存儲超過 Cookie 的一大優(yōu)勢。

有兩種類型的 Web 存儲對象：

1. 本地 - 存儲沒有到期日期的數(shù)據(jù)。

2. 會話 - 僅存儲一個會話的數(shù)據(jù)。

如何工作： localStorage 和 sessionStorage 對象創(chuàng)建一個 key=value 對。比如： key="Name"， value="Palak"。

這些存儲為字符串，但如果需要，可以使用 JavaScript 函數(shù)（如 parseInt() 和 parseFloat()）進(jìn)行轉(zhuǎn)換。

下面給出了使用 Web 存儲對象的語法：

• 存儲一個值：

• localStorage.setItem("key1", "value1");

• localStorage["key1"]="value1";

• 得到一個值：

• alert(localStorage.getItem("key1"));

• alert(localStorage["key1"]);

• 刪除一個值： -removeItem("key1");

• 刪除所有值：

• localStorage.clear();

應(yīng)用緩存（AppCache）

使用 HTML5 AppCache，我們可以使 Web 應(yīng)用程序在沒有 Internet 連接的情況下脫機(jī)工作。除 IE 之外，所有瀏覽器都可以使用 AppCache（截止至此時）。

應(yīng)用緩存的優(yōu)點(diǎn)是：

• 網(wǎng)頁瀏覽可以脫機(jī)

• 頁面加載速度更快

• 服務(wù)器負(fù)載更小

cache manifest 是一個簡單的文本文件，其中列出了瀏覽器應(yīng)緩存的資源以進(jìn)行脫機(jī)訪問。 manifest 屬性可以包含在文檔的 HTML 標(biāo)簽中，如下所示：

<html manifest="test.appcache">

...

</html>

它應(yīng)該在你要緩存的所有頁面上。

緩存的應(yīng)用程序頁面將一直保留，除非：

1. 用戶清除它們

2. manifest 被修改

3. 緩存更新

視頻

在 HTML5 發(fā)布之前，沒有統(tǒng)一的標(biāo)準(zhǔn)來顯示網(wǎng)頁上的視頻。大多數(shù)視頻都是通過 Flash 等不同的插件顯示的。但 HTML5 規(guī)定了使用 video 元素在網(wǎng)頁上顯示視頻的標(biāo)準(zhǔn)方式。

目前，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 發(fā)布之前，在網(wǎng)頁上播放音頻沒有統(tǒng)一的標(biāo)準(zhǔn)。大多數(shù)音頻也通過 Flash 等不同的插件播放。但 HTML5 規(guī)定了通過使用音頻元素在網(wǎng)頁上播放音頻的標(biāo)準(zhǔn)方式。音頻元素用于播放聲音文件和音頻流。

目前，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）

要在網(wǎng)頁上創(chuàng)建圖形，HTML5 使用 畫布 API。我們可以用它繪制任何東西，并且它使用 JavaScript。它通過避免從網(wǎng)絡(luò)下載圖像而提高網(wǎng)站性能。使用畫布，我們可以繪制形狀和線條、弧線和文本、漸變和圖案。此外，畫布可以讓我們操作圖像中甚至視頻中的像素。你可以將 canvas 元素添加到 HTML 頁面，如下所示：

<canvas id="myCanvas" width="200" height="100"></canvas>

畫布元素不具有繪制元素的功能。我們可以通過使用 JavaScript 來實(shí)現(xiàn)繪制。所有繪畫應(yīng)在 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 所示。

你可以繪制許多對象，如弧、圓、線/垂直梯度等。

HTML5 工具

為了有效操作，所有熟練的或業(yè)余的 Web 開發(fā)人員/設(shè)計(jì)人員都應(yīng)該使用 HTML5 工具，當(dāng)需要設(shè)置工作流/網(wǎng)站或執(zhí)行重復(fù)任務(wù)時，這些工具非常有幫助。它們提高了網(wǎng)頁設(shè)計(jì)的可用性。

以下是一些幫助創(chuàng)建很棒的網(wǎng)站的必要工具。

• HTML5 Maker： 用來在 HTML、JavaScript 和 CSS 的幫助下與網(wǎng)站內(nèi)容交互。非常容易使用。它還允許我們開發(fā)幻燈片、滑塊、HTML5 動畫等。

• Liveweave： 用來測試代碼。它減少了保存代碼并將其加載到屏幕上所花費(fèi)的時間。在編輯器中粘貼代碼即可得到結(jié)果。它非常易于使用，并為一些代碼提供自動完成功能，這使得開發(fā)和測試更快更容易。

• Font dragr： 在瀏覽器中預(yù)覽定制的 Web 字體。它會直接載入該字體，以便你可以知道看起來是否正確。也提供了拖放界面，允許你拖動字形、Web 開放字體和矢量圖形來馬上測試。

• HTML5 Please： 可以讓我們找到與 HTML5 相關(guān)的任何內(nèi)容。如果你想知道如何使用任何一個功能，你可以在 HTML Please 中搜索。它提供了支持的瀏覽器和設(shè)備的有用資源的列表，語法，以及如何使用元素的一般建議等。

• Modernizr： 這是一個開源工具，用于給訪問者瀏覽器提供最佳體驗(yàn)。使用此工具，你可以檢測訪問者的瀏覽器是否支持 HTML5 功能，并加載相應(yīng)的腳本。

• Adobe Edge Animate： 這是必須處理交互式 HTML 動畫的 HTML5 開發(fā)人員的有用工具。它用于數(shù)字出版、網(wǎng)絡(luò)和廣告領(lǐng)域。此工具允許用戶創(chuàng)建無瑕疵的動畫，可以跨多個設(shè)備運(yùn)行。

• Video.js： 這是一款基于 JavaScript 的 HTML5 視頻播放器。如果要將視頻添加到你的網(wǎng)站，你應(yīng)該使用此工具。它使視頻看起來不錯，并且是網(wǎng)站的一部分。

• The W3 Validator： W3 驗(yàn)證工具測試 HTML、XHTML、SMIL、MathML 等中的網(wǎng)站標(biāo)記的有效性。要測試任何網(wǎng)站的標(biāo)記有效性，你必須選擇文檔類型為 HTML5 并輸入你網(wǎng)頁的 URL。這樣做之后，你的代碼將被檢查，并將提供所有錯誤和警告。

• HTML5 Reset： 此工具允許開發(fā)人員在 HTML5 中重寫舊網(wǎng)站的代碼。你可以使用這些工具為你網(wǎng)站的訪問者提供一個良好的網(wǎng)絡(luò)體驗(yàn)。

Palak Shah

作者是高級軟件工程師。她喜歡探索新技術(shù)，學(xué)習(xí)創(chuàng)新概念。她也喜歡哲學(xué)。你可以通過 palak311@gmail.com[1] 聯(lián)系她。

via: http://opensourceforu.com/2017/06/introduction-to-html5/

作者：Palak Shah[2] 譯者：geekpi 校對：wxy

本文由 LCTT 原創(chuàng)編譯，Linux中國 榮譽(yù)推出

點(diǎn)擊“了解更多”可訪問文內(nèi)鏈接