關於 HTML5 你須要瞭解的基礎知識

時間 2019-11-11

標籤關於 html5 html 須要瞭解基礎知識欄目 HTML5 简体版

原文原文鏈接

關於 HTML5 你須要瞭解的基礎知識
HTML5 是第五個且是當前的 HTML 版本，它是用於在萬維網上構建和呈現內容的標記語言。本文將幫助讀者瞭解它。 -- Palak Shah
最後，若是你們若是在自學遇到困難，想找一個前端的學習環境，能夠加入咱們的前端學習圈，點擊我加入吧，會節約不少時間，減小不少在學習中遇到的難題。javascript

本文導航
-新標籤和元素 …… 08%
-HTML5 的高級功能 …… 16%
-地理位置 …… 16%
-網絡存儲 …… 33%
-應用緩存（AppCache） …… 44%
-視頻 …… 50%
-音頻 …… 61%
-畫布（Canvas） …… 71%
-HTML5 工具 …… 78%
編譯自： http://opensourceforu.com/201...
做者： Palak Shah
譯者： geekpi
HTML5 是第五個且是當前的 HTML 版本，它是用於在萬維網上構建和呈現內容的標記語言。本文將幫助讀者瞭解它。
HTML5 經過 W3C 和Web 超文本應用技術工做組Web Hypertext Application Technology Working Group之間的合做發展起來。它是一個更高版本的 HTML，它的許多新元素可使你的頁面更加語義化和動態。它是爲全部人提供更好的 Web 體驗而開發的。HTML5 提供了不少的功能，使 Web 更加動態和交互。html

HTML5 的新功能是：前端

新標籤，如 <header> 和 <section>
用於 2D 繪圖的 <canvas> 元素
本地存儲
新的表單控件，如日曆、日期和時間
新媒體功能
地理位置
HTML5 還不是正式標準（LCTT 譯註：HTML5 已於 2014 年成爲「推薦標準」），所以，並非全部的瀏覽器都支持它或其中一些功能。開發 HTML5 背後最重要的緣由之一是防止用戶下載並安裝像 Silverlight 和 Flash 這樣的多個插件。html5

新標籤和元素java

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

關於 HTML5 你須要瞭解的基礎知識canvas

圖 1：語義化元素
瀏覽器

關於 HTML5 你須要瞭解的基礎知識緩存

圖 2：表單元素安全

關於 HTML5 你須要瞭解的基礎知識

圖 3：圖形元素

關於 HTML5 你須要瞭解的基礎知識

圖 4：媒體元素

HTML5 的高級功能

地理位置

這是一個 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 所示，每一個屬性/參數都具備測地和民用表示。

關於 HTML5 你須要瞭解的基礎知識

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

關於 HTML5 你須要瞭解的基礎知識

圖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 所示。

關於 HTML5 你須要瞭解的基礎知識

下面的例子展現了 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>

關於 HTML5 你須要瞭解的基礎知識

圖6：Canvas 的輸出

音頻

對於音頻，狀況相似於視頻。在 HTML5 發佈以前，在網頁上播放音頻沒有統一的標準。大多數音頻也經過 Flash 等不一樣的插件播放。但 HTML5 規定了經過使用音頻元素在網頁上播放音頻的標準方式。音頻元素用於播放聲音文件和音頻流。

目前，HTML5 audio 元素支持三種音頻格式，如表 3 所示。

關於 HTML5 你須要瞭解的基礎知識

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 中。

你能夠繪製許多對象，如弧、圓、線/垂直梯度等。

HTML5 工具

爲了有效操做，全部熟練的或業餘的 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 中重寫舊網站的代碼。你可使用這些工具爲你網站的訪問者提供一個良好的網絡體驗。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。