關(guān)于 HTML5 你需要了解的基礎(chǔ)知識(shí)

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

本文導(dǎo)航
-新標(biāo)簽和元素 …… 08%
-HTML5 的高級(jí)功能 …… 16%

-地理位置 …… 16%
-網(wǎng)絡(luò)存儲(chǔ) …… 33%
-應(yīng)用緩存（AppCache） …… 44%
-視頻 …… 50%
-音頻 …… 61%
-畫布（Canvas） …… 71%

-HTML5 工具 …… 78%

編譯自： http://opensourceforu.com/2017/06/introduction-to-html5/
作者： Palak Shah
譯者： geekpi

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

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

HTML5 的新功能是：

新標(biāo)簽，如 <header> 和 <section>
用于 2D 繪圖的 <canvas> 元素
本地存儲(chǔ)
新的表單控件，如日歷、日期和時(shí)間
新媒體功能
地理位置

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

新標(biāo)簽和元素

語(yǔ)義化元素：圖 1 展示了一些有用的語(yǔ)義化元素。
表單元素： HTML5 中的表單元素如圖 2 所示。
圖形元素： HTML5 中的圖形元素如圖 3 所示。
媒體元素： HTML5 中的新媒體元素如圖 4 所示。

圖 1：語(yǔ)義化元素

圖 2：表單元素

圖 3：圖形元素

圖 4：媒體元素

HTML5 的高級(jí)功能

`地理位置`

這是一個(gè) HTML5 API，用于獲取網(wǎng)站用戶的地理位置，用戶必須首先允許網(wǎng)站獲取他或她的位置。這通常通過(guò)按鈕和/或?yàn)g覽器彈出窗口來(lái)實(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)站首頁(yè)提供本地標(biāo)題和天氣
工作職位可以自動(dòng)計(jì)算通勤時(shí)間

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

全球定位系統(tǒng)（GPS）是最準(zhǔn)確的
網(wǎng)絡(luò)信號(hào) - IP地址、RFID、Wi-Fi 和藍(lán)牙 MAC地址
GSM/CDMA 蜂窩 ID
用戶輸入

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

if (navigator.geolocation) {
// do stuff
}

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

語(yǔ)法是：

getCurrentPosition(showLocation, ErrorHandler, options);

showLocation：定義了檢索位置信息的回調(diào)方法。
ErrorHandler（可選）：定義了在處理異步調(diào)用時(shí)發(fā)生錯(cuò)誤時(shí)調(diào)用的回調(diào)方法。
options （可選）：定義了一組用于檢索位置信息的選項(xiàng)。

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

描述位置的測(cè)地方式直接指向緯度和經(jīng)度。
位置信息的民用表示法是人類可讀的且容易理解。

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

圖 5 包含了一個(gè)位置對(duì)象返回的屬性集。

圖5：位置對(duì)象屬性

`網(wǎng)絡(luò)存儲(chǔ)`

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

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

更安全
更快
存儲(chǔ)更多的數(shù)據(jù)
存儲(chǔ)的數(shù)據(jù)不會(huì)隨每個(gè)服務(wù)器請(qǐng)求一起發(fā)送。只有在被要求時(shí)才包括在內(nèi)。這是 HTML5 Web 存儲(chǔ)超過(guò) Cookie 的一大優(yōu)勢(shì)。

有兩種類型的 Web 存儲(chǔ)對(duì)象：

本地 - 存儲(chǔ)沒(méi)有到期日期的數(shù)據(jù)。
會(huì)話 - 僅存儲(chǔ)一個(gè)會(huì)話的數(shù)據(jù)。

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

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

下面給出了使用 Web 存儲(chǔ)對(duì)象的語(yǔ)法：

存儲(chǔ)一個(gè)值：

localStorage.setItem("key1", "value1");
localStorage["key1"] = "value1";

得到一個(gè)值：

alert(localStorage.getItem("key1"));
alert(localStorage["key1"]);

刪除一個(gè)值： -removeItem("key1");
刪除所有值：

localStorage.clear();

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

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

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

網(wǎng)頁(yè)瀏覽可以脫機(jī)
頁(yè)面加載速度更快
服務(wù)器負(fù)載更小

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

<html manifest="test.appcache">
...
</html>

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

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

用戶清除它們
manifest 被修改
緩存更新

`視頻`

在 HTML5 發(fā)布之前，沒(méi)有統(tǒng)一的標(biāo)準(zhǔn)來(lái)顯示網(wǎng)頁(yè)上的視頻。大多數(shù)視頻都是通過(guò) Flash 等不同的插件顯示的。但 HTML5 規(guī)定了使用 video 元素在網(wǎng)頁(yè)上顯示視頻的標(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 和未來(lái)版本的 Chrome 中工作，我們必須添加一個(gè) MPEG4 和 WebM 文件。

video 元素允許多個(gè) source 元素。source 元素可以鏈接到不同的視頻文件。瀏覽器將使用第一個(gè)識(shí)別的格式，如下所示：

<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 的輸出

`音頻`

對(duì)于音頻，情況類似于視頻。在 HTML5 發(fā)布之前，在網(wǎng)頁(yè)上播放音頻沒(méi)有統(tǒng)一的標(biāo)準(zhǔn)。大多數(shù)音頻也通過(guò) Flash 等不同的插件播放。但 HTML5 規(guī)定了通過(guò)使用音頻元素在網(wǎng)頁(yè)上播放音頻的標(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 的未來(lái)版本中使 audio 工作，我們必須添加一個(gè) MP3 和 Wav 文件。

audio 元素允許多個(gè) source 元素，它可以鏈接到不同的音頻文件。瀏覽器將使用第一個(gè)識(shí)別的格式，如下所示：

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

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

畫布元素不具有繪制元素的功能。我們可以通過(guò)使用 JavaScript 來(lái)實(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 所示。

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

HTML5 工具

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

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

HTML5 Maker：用來(lái)在 HTML、JavaScript 和 CSS 的幫助下與網(wǎng)站內(nèi)容交互。非常容易使用。它還允許我們開發(fā)幻燈片、滑塊、HTML5 動(dòng)畫等。
Liveweave：用來(lái)測(cè)試代碼。它減少了保存代碼并將其加載到屏幕上所花費(fèi)的時(shí)間。在編輯器中粘貼代碼即可得到結(jié)果。它非常易于使用，并為一些代碼提供自動(dòng)完成功能，這使得開發(fā)和測(cè)試更快更容易。
Font dragr：在瀏覽器中預(yù)覽定制的 Web 字體。它會(huì)直接載入該字體，以便你可以知道看起來(lái)是否正確。也提供了拖放界面，允許你拖動(dòng)字形、Web 開放字體和矢量圖形來(lái)馬上測(cè)試。
HTML5 Please：可以讓我們找到與 HTML5 相關(guān)的任何內(nèi)容。如果你想知道如何使用任何一個(gè)功能，你可以在 HTML Please 中搜索。它提供了支持的瀏覽器和設(shè)備的有用資源的列表，語(yǔ)法，以及如何使用元素的一般建議等。
Modernizr：這是一個(gè)開源工具，用于給訪問(wèn)者瀏覽器提供最佳體驗(yàn)。使用此工具，你可以檢測(cè)訪問(wèn)者的瀏覽器是否支持 HTML5 功能，并加載相應(yīng)的腳本。
Adobe Edge Animate：這是必須處理交互式 HTML 動(dòng)畫的 HTML5 開發(fā)人員的有用工具。它用于數(shù)字出版、網(wǎng)絡(luò)和廣告領(lǐng)域。此工具允許用戶創(chuàng)建無(wú)瑕疵的動(dòng)畫，可以跨多個(gè)設(shè)備運(yùn)行。
Video.js：這是一款基于 JavaScript 的 HTML5 視頻播放器。如果要將視頻添加到你的網(wǎng)站，你應(yīng)該使用此工具。它使視頻看起來(lái)不錯(cuò)，并且是網(wǎng)站的一部分。
The W3 Validator： W3 驗(yàn)證工具測(cè)試 HTML、XHTML、SMIL、MathML 等中的網(wǎng)站標(biāo)記的有效性。要測(cè)試任何網(wǎng)站的標(biāo)記有效性，你必須選擇文檔類型為 HTML5 并輸入你網(wǎng)頁(yè)的 URL。這樣做之后，你的代碼將被檢查，并將提供所有錯(cuò)誤和警告。
HTML5 Reset：此工具允許開發(fā)人員在 HTML5 中重寫舊網(wǎng)站的代碼。你可以使用這些工具為你網(wǎng)站的訪問(wèn)者提供一個(gè)良好的網(wǎng)絡(luò)體驗(yàn)。

Palak Shah

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

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

作者：Palak Shah[2] 譯者：geekpi 校對(duì)：wxy

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

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

tml5圖標(biāo)

在HTML5中新增了幾個(gè)全局屬性（所謂全局屬性是指所有元素共用的屬性）。

contentEditable屬性（可編輯，是一個(gè)布爾值，當(dāng)為true的時(shí)候，表示元素包含內(nèi)容可編輯，默認(rèn)是false，不可編輯）。示例
一個(gè)文檔

在網(wǎng)頁(yè)中就可以重新對(duì)它進(jìn)行編輯

hidden屬性（隱藏顯示，這個(gè)屬性可以通過(guò)js去控制顯示或隱藏，同樣也是一個(gè)布爾值，值為true就是顯示，false就是隱藏）
spellcheck屬性（針對(duì)input和textarea，對(duì)用戶輸入的內(nèi)容進(jìn)行語(yǔ)法檢查，也是一個(gè)布爾值,為true就要檢查，如果單詞拼寫錯(cuò)誤，就會(huì)顯示下圖下標(biāo)帶波浪線的錯(cuò)誤單詞提示）

單詞拼寫錯(cuò)誤

tabindex屬性（按鍵盤TAB鍵切換，帶到指定 tab順序的鏈接）

按TAB鍵可以切換指定順序的鏈接上

義化標(biāo)簽，是把 HTML 文檔中的元素劃分到不同區(qū)域，每個(gè)區(qū)域有自己的含義。

在 HTML5 中，提供了如下圖所示的語(yǔ)義化標(biāo)簽，可更直觀看到頁(yè)面結(jié)構(gòu)。

標(biāo)簽說(shuō)明：

header 標(biāo)簽是頭部區(qū)域。
nav 標(biāo)簽是導(dǎo)航區(qū)域。
article 標(biāo)簽是內(nèi)容區(qū)域。
section 標(biāo)簽是文檔中部分內(nèi)容區(qū)域。
aside 標(biāo)簽是側(cè)邊內(nèi)容欄區(qū)域。
footer 標(biāo)簽是底部信息區(qū)域。

例如，環(huán)球科學(xué)的首頁(yè)，用語(yǔ)義化標(biāo)簽劃分結(jié)構(gòu)：

這些標(biāo)簽本身只有一個(gè)塊級(jí)元素的特點(diǎn)，若不加入 CSS 樣式，沒(méi)有任何效果。

header 標(biāo)簽是一種具有引導(dǎo)和導(dǎo)航作用的構(gòu)架元素，通常用來(lái)放置整個(gè)頁(yè)面或者頁(yè)面中一個(gè)內(nèi)容塊的標(biāo)題，若是作為整個(gè)頁(yè)面的標(biāo)題，應(yīng)該放在頁(yè)面的起始位置。
nav 標(biāo)簽是一個(gè)可以用作頁(yè)面導(dǎo)航的鏈接組。其中的導(dǎo)航元素可以將頁(yè)面導(dǎo)航至其他關(guān)聯(lián)頁(yè)。需要注意的是并不是需要將一個(gè)頁(yè)面的所有超鏈接都放到 nav 標(biāo)簽中，只放具有導(dǎo)航意義的超鏈接即可。
section 標(biāo)簽用于對(duì)頁(yè)面上的內(nèi)容進(jìn)行分區(qū)，可以通過(guò)該標(biāo)簽將頁(yè)面的內(nèi)容分成多個(gè)部分。每個(gè)部分之間又有一定的聯(lián)系。一個(gè) section 標(biāo)簽通常由標(biāo)題和內(nèi)容組成。
article 標(biāo)簽用來(lái)表示頁(yè)面中獨(dú)立的、完整的、可以獨(dú)自被外部引用的內(nèi)容。它可以是一篇文章、一段評(píng)論、或者一段描述。一個(gè) article 通常都包含一個(gè) header 標(biāo)簽作為該文章的標(biāo)題。
aside 標(biāo)簽用來(lái)描述當(dāng)前頁(yè)面內(nèi)容的附注信息，它可以是當(dāng)前頁(yè)面內(nèi)容相關(guān)的引用、廣告、側(cè)邊欄等。
footer 標(biāo)簽可以作為內(nèi)容的注腳，例如在網(wǎng)頁(yè)中添加版權(quán)信息等。

time 標(biāo)簽可以對(duì)日期進(jìn)行管理操作。它代表某個(gè)日期或者是 24 小時(shí)中的某個(gè)時(shí)刻。當(dāng)表示時(shí)刻的時(shí)候，可以使用時(shí)區(qū)進(jìn)行顯示。例如：

<time datetime="2024-1-14">2024年1月14日</time>
<time datetime="2024-1-14T20:00">2024年1月14日晚8點(diǎn)</time>
<time datetime="2024-1-14T20:00Z">2024年1月14日晚8點(diǎn)</time>

搜索引擎會(huì)讀取 datetime 屬性的值，標(biāo)簽中的文字是在頁(yè)面中顯示的文字。其中 T 代表的是日期和時(shí)間的間隔。z 代表的是時(shí)間使用的是 UTC 標(biāo)準(zhǔn)時(shí)間。

time 標(biāo)簽有一個(gè)特殊的屬性為：pubdate。該屬性是布爾類型，通常用在 article 標(biāo)簽中代表該文章的發(fā)布日期。新建一個(gè) index.html 文件，在其中寫入以下內(nèi)容：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <article>
      <header>
        <h1>文章標(biāo)題</h1>
        <p>發(fā)布日期：<time datetime="2024-1-14" pubdate>2024年1月14日</time></p>
      </header>
    </article>
  </body>
</html>

figure 標(biāo)簽規(guī)定獨(dú)立的流內(nèi)容（包括圖像、圖表、照片、代碼片段等）。

figcaption 標(biāo)簽為figure流內(nèi)容的標(biāo)題。figcaption 標(biāo)簽應(yīng)該被置于 figure 標(biāo)簽的第一個(gè)或最后一個(gè)子標(biāo)簽的位置。

figure 和 figcaption 標(biāo)簽的使用，語(yǔ)法格式如下：

<figure>
  <figcaption></figcaption>
</figure>

在 HTML 中為我們提供了 code 標(biāo)簽，在 <code> 與 </code> 之間就是代碼編輯區(qū)域。

舉個(gè)例子，新建一個(gè) index1.html 文件，在其中寫入以下內(nèi)容。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <figure>
      <pre>
            <code>
                var str = "Hello LanQiao";
                console.log(str);
            </code>
        </pre>
      <figcaption>
        <p>這是一段 JavaScript 代碼</p>
      </figcaption>
    </figure>
  </body>
</html>

點(diǎn)擊預(yù)覽頁(yè)面，效果如下：

從截圖可以看出代碼部分在 code 標(biāo)簽里的內(nèi)容，與我們普通文字是不一樣。在我們的代碼里有一對(duì) pre 標(biāo)簽，它是用來(lái)格式化文本內(nèi)容的，保留文本原有的換行格式。

在線咨詢

上一篇：php配置限定某個(gè)目錄禁止解析php 限制user_agent
下一篇：web前端入門JavaScript筆記之一

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商