快速掌握 10 個 HTML5 必備技巧

TML5 對于初學者甚至是非程序員來說都有著十足的吸引力。實際上，只要你訪問網站，就會和 HTML 打交道。如果能夠熟悉一些關鍵的編程技巧，當你對網站做一些細節調整或優化基本的 Web 元素時就能節省大量的時間（甚至是金錢）。因此，本文精選了 10 個對于 Web 開發者來說非常實用的 HTML 編程技巧，而且它們不需要花太多時間精力就可以輕松掌握。

1. 可與本地緩存媒體資源交互

HTML5 FileSystem API 一開始被認為是 AppCache 的替代方案，用來實現資產的動態緩存。但是你知道嗎，其實你還可以用它來實現與用戶本地設備上存儲文件的交互。

例如，你可以在應用中添加以下功能：

斷點上傳器：將文件復制到一個本地沙箱中，然后分批上傳。出現連接中斷、瀏覽器崩潰故障后可以重新啟動上傳操作。
為游戲、音樂播放器，照片編輯器等媒體密集型應用啟用本地緩存。
為內容查看創建離線模式，例如離線視頻、電子郵件附件和文本等。

注意：FileSystem API 僅被 Chrome 支持。

如果你想嘗試離線存儲功能，還可以參考以下資源和代碼教程：

Eric Bidelman：如何使用 HTML5 FileSystem API[1]。
管理 HTML5 離線存儲 [2]。
HTML5 中的脫機文件：FileSystem API[3]。

2. 進行自動表單驗證

對于網站安全性和流暢的用戶體驗來說，表單驗證非常重要。所以我們應該讓用戶更輕松地在你的網站上輸入各種正確類型的值。

在 HTML5 中有幾種新的輸入類型可用，這些類型已經打包進了預定義的驗證功能：

'email'
'url'
'tel'

但當你需要用戶提供某些標準輸入未指定的數據時（例如一個包含特殊字符的用戶名），往往就會出問題了。這就是“pattern”屬性派上用場的時候。

Pattern 可讓你定義自定義規則，然后使用正則表達式（RegEx）驗證表單輸入。RegEx 指定了<input>元素值將要檢查的表達式。

下面是一個添加新規則的示例。例如，你要指定密碼不應超過 15 個字符，并且只能包含小寫字母：

<form action="/action_page.php">
Password: <input?type="password"?name="pw"?pattern="[a-z].{1,15,}">
<input?type="submit">
</form>

為了更好地說明規則，你還可以添加一條自定義消息，告訴用戶為什么他們輸入的密碼不符合要求。只需再加上一行來自定義彈出消息即可：

<form action="/action_page.php">
Password: <input?type="password"?name="pw"?pattern="[a-z].{1,15,}"?title="One to fifteen characters, lowercase only".>>
<input?type="submit">
</form>

3. 為 HTML5 代碼元素創建縮寫

Emmet[4] 是一個很好用的文本編輯器插件，可以簡化你的 HTML/CSS 編碼流程。這個工具使用的語法類似于 CSS 的選擇器，可讓你為標準 HTML 代碼元素創建各種縮寫。

下面是一個例子。如果你輸入：

div#header>h1.logo>a{website}

則會收到：

<div?id="header">
<h1?class="logo"><a?href="">website</a></h1>
</div>

你可以使用 cheat sheet[5] 中的多種已有組合，也可以為任意 HTML 標簽創建自定義組合，然后按 Tab 或 Ctrl + E 將其添加到文本編輯器中。我自己是一名從事了多年開發的web前端老程序員，目前辭職在做自己的web前端私人定制課程，去年我花了一個月整理了一份最適合2019年學習的web前端學習干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關注我的頭條號并在后臺私信我：前端，即可免費獲取。

4. 實現更優的視頻傳輸

使用 video 標簽，可以將支持視頻播放的媒體播放器無縫嵌入到網頁中。

你可以選擇：

使用 getUserMedia() 或 WebRTC 啟用來自攝像頭的實時流。
使用 src 屬性播放本地托管的視頻：<video src="file.avi"/>。

此外，你必須為視頻指定“控件”（例如播放、暫停和音量調節），否則用戶將沒有任何控件可用。這里的示例代碼如下：

<video width="768"?height="432"?autoplay>
<source?src="video.mp4"?type="video/mp4">
</video>

為了進一步改善觀看體驗，你還可以嘗試使用以下屬性：

disablePictureInPicture[6]：禁止瀏覽器顯示畫中畫上下文菜單或自動請求畫中畫。
loop：提示瀏覽器在結束播放后自動重播視頻。
muted：自動使視頻中的音頻靜音。
poster：將自定義圖像顯示為視頻縮略圖。否則，瀏覽器將顯示視頻的第一幀作為縮略圖。
preload：向瀏覽器指示哪些參數將帶來最佳的用戶體驗。你可以將它設置為 none（無預加載要求）；metadata：僅會預取視頻元數據；auto：即使用戶不希望觀看整個視頻，也要下載全部視頻數據。注意：autoplay 屬性的優先級高于此屬性。

你可以在這個 HTML 速查表 [7] 中找到更多使用方便的多媒體文件標簽。

5. 改善圖像的顯示方式

<picture>標簽有助于優化圖像的顯示方式。

它通常用于：

樣式：指定在各種條件下應如何顯示媒體（例如，為較小的屏幕加載圖像的較小版本）。這是創建響應式設計的關鍵一環。
提升速度：根據用戶的屏幕規格指定應加載的圖像尺寸。
瀏覽器支持：在各種類型的瀏覽器中提供不同的圖像格式，以顯示正確的內容。

示例：

<picture>
<source?media="(min-width: 846px)"?srcset="img_1.jpg">
<source?media="(min-width: 300 px)"?srcset="img_2.jpg">
<img?src="img_3.jpg"?alt="logo">
</picture>

<picture>標簽包含兩個附加子元素：

<source>：指定媒體元素的媒體資源。
<img>：定義一個圖像。

要啟用其他樣式選項，請將以下屬性添加到<source>元素：

srcset（必需）：使用它來定義圖像的目標 URL。
media（類似于媒體查詢）：是一個條件，用戶代理為每個<source>元素評估這個條件。
sizes：指定寬度描述符。
type：提供 MIME 類型定義。

<img>元素可用來確保在不支持<picture>元素的瀏覽器中正確顯示圖像。

6. 提升首屏頁面的加載速度

如果你希望你的網站在搜索結果中獲得靠前的排名，并提供出色的用戶體驗，那么就需要重點關注頁面的加載速度。

但是，要在 Google Page Insights 中拿到高分并不是那么容易。雖然這一工具的確會標出你的網站上應該修復的內容，但是對于從頭開始對網站進行編碼的人們并沒有提供明確的優化指導。

谷歌對于首屏設計的官方建議 [8] 有些含糊不清：

調整你的 HTML 結構，以首先加載關鍵的首屏內容。
減少你的資源使用的數據量。

所以我們來將其分解為更可操作的幾個步驟：

確保你的 CSS 是內聯的。
盡量減少、合并和消除不必要的外部 CSS 文件。
自動減少阻礙渲染的 CSS 數據。
使用 CSS 媒體類型和媒體查詢，將某些 CSS 資源指定為非渲染阻礙類型 [9]。
將<content>部分放在<sidebar>之前。
推遲加載 JavaScript。
生成可嵌入的字體數據以加快字體加載速度，并選擇 web 安全的字體 [10]。

然后再次運行檢查任務，看看是否還有需要修復的內容。

7. 網站加速

只要將 .zip 文件而不是 index.html 文件發送給瀏覽器，就可以節省大量帶寬和下載時間。

圖片來自 betterexplained[11]

要設置 .gzip 壓縮，你需要在 web 主機 / 服務器上找到 htaccess 文件，并使用以下代碼對其進行修改：

<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include?file?.(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

如果這樣做不起作用，請參考下面這些針對不同 web 服務器類型的教程：

Apache：https://httpd.apache.org/docs/current/mod/mod_deflate.html#enable
Litespeed：https://www.litespeedtech.com/support/wiki/doku.php/litespeed_wiki:config:gzip-compression
NGINX：https://docs.nginx.com/nginx/admin-guide/web-server/compression/

8. 利用 Microdata 進行 SEO

你可以使用 microdata 將額外的上下文編入網頁。然后，網絡爬蟲就可以從你的頁面中渲染微數據，并為用戶提供更好的瀏覽體驗，以更高的精確性對你的網站建立索引并為其提供更準確的搜索結果排名。

簡而言之，Microdata 由名稱 / 值（name/value）對組成，每一個項目（item）定義一組命名的屬性（property）。

項目具有項目類型、全局標識符和一個屬性列表。要創建一個新項目，請使用 itemscope attribute。
屬性具有一個或多個值。要將屬性分配給項目，請使用 itemprop attribute。

9. 使用 HTML5 本地存儲代替 Cookie

Local Storage（也稱為 DOM 存儲）使你可以在本地存儲用戶數據，這樣就無需通過 HTTP 網絡請求發送數據了。它可以節省帶寬并提升數據存儲能力。看起來不錯吧？

但是有一個重要的警告：本地存儲僅能保存在客戶端，而 cookie 既可以保存在服務器端也可以在客戶端。因此，如果你的網站使用了服務器端的 Cookie 來基于已知的用戶首選項自定義內容，則遷移到本地存儲可能就需要重大的架構更改工作了。

但在比較簡單的情況下（例如你使用 Cookie 來存儲一些基本設置），本地存儲可能是一個很好的替代品，尤其是在網絡連接質量較差的區域。另外請記住，本地存儲對于高敏感數據（例如財務信息）可能不是理想的選擇，并且建議你對本地存儲的所有數據都進行額外的加密。

Jenkov 詳細介紹了如何設置和配置 HTML5 本地存儲 [13]。

10. 編寫有編號項目的降序列表

文章最后介紹一個非常簡單的技巧：你可以使用<reversed>屬性添加降序列表替代升序列表。

下面是一個示例代碼片段：

<ol?reversed>
<li>Ready</li>
<li>Set</li>
<li>Go!</li>
</ol>

聽起來可能沒有多大意義，但是當你想在頁面中添加一些時髦的樣式時，它可能就會派上用場了。

小結

現在你應該掌握了這 10 個新的 HTML5 技巧和竅門，它們應該可以幫助你構建更快、更人性化和更有吸引力的網站。不過千萬要記得，在開始實驗之前先對你的網站進行備份！

原文鏈接：https://mp.weixin.qq.com/s/qtQZUvsnIn0nsFbG51lQQw

作者：前端工匠

TML5引入了應用程序緩存，它允許我們將網頁資源緩存到用戶的設備上，以便在離線狀態下訪問，并且能夠更快地加載頁面。這種新方法提供了一種改進用戶體驗的方式，無論是在網絡不穩定的環境下還是在需要快速加載頁面的情況下。以下是一些常用的HTML5應用程序緩存技術及其代碼示例：

1. 創建緩存清單

在HTML文件中創建一個清單文件，列出要緩存的資源。以下是一個示例清單文件：

```html

CACHE MANIFEST
# 版本號
CACHE MANIFEST VERSION 1
# 要緩存的資源
CACHE:
index.html
styles.css
script.js
image.jpg
# 在離線狀態下的回退頁面
FALLBACK:
/ offline.html
# 需要在線檢查更新的資源
NETWORK:
api.example.com

```

2. 啟用應用程序緩存

在HTML文件的`<html>`標簽中添加`manifest`屬性，指定清單文件的URL。以下是一個啟用應用程序緩存的示例代碼：

```html

<!DOCTYPE html>
<html manifest="offline.appcache">
<body>
<!-- 網頁內容 -->
</body>
</html>

```

3. 更新緩存

通過更改清單文件的版本號或更新資源的URL來觸發緩存更新。瀏覽器將自動下載新的資源并更新緩存。

4. 離線訪問

一旦資源被緩存，用戶可以在離線狀態下訪問網頁。瀏覽器將從緩存中加載資源，而無需依賴于網絡連接。

通過使用HTML5應用程序緩存，我們可以提供更好的用戶體驗，使網頁在離線狀態下也能正常工作，并且能夠更快地加載頁面。無論是創建緩存清單、啟用應用程序緩存還是更新緩存，這種新方法為我們提供了更多的靈活性和便利性。記住，在使用HTML5應用程序緩存時，要合理管理緩存的資源，并定期更新緩存以確保用戶獲得最新的內容。

我是永不低頭的熊，喜歡美食、健身，當然也喜歡寫代碼，每天不定時更新各類編程相關的文章，希望你在碼農這條路上不再孤單！

、XHTML與HTML的區別

文檔結構

XHTML DOCTYPE 是強制性的

<html>中的 XML namespace 屬性是強制性的

<html>、<head>、<title>以及 <body>也是強制性的

元素語法

XHTML 元素必須正確嵌套

XHTML 元素必須始終關閉

XHTML 元素必須小寫

XHTML 文檔必須有一個根元素

屬性語法

XHTML 屬性必須使用小寫

XHTML 屬性值必須用引號包圍

XHTML 屬性最小化也是禁止的

二、HTML5中一些新特性

用于繪畫的 canvas 元素

用于媒介回放的 video 和 audio 元素

對本地離線存儲的更好的支持

新的特殊內容元素，比如 article、footer、header、nav、section

新的表單控件，比如 calendar、date、time、email、url、search

注意：最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 將支持某些 HTML5 特性。

IE9 以下版本瀏覽器兼容HTML5的方法，使用本站的靜態資源的html5shiv包：

<!--[if lt IE 9]>
    <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->

? ?/*html5*/
article,aside,dialog,footer,header,section,nav,figure,menu{display:block}

我自己是一名從事了多年開發的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個月整理了一份最適合2019年學習的web前端學習干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關注我的頭條號并在后臺私信我：前端，即可免費獲取。

三、HTML5web存儲

使用HTML5可以在本地存儲用戶的瀏覽數據。

早些時候,本地存儲使用的是 cookie。但是Web 存儲需要更加的安全與快速. 這些數據不會被保存在服務器上，但是這些數據只用于用戶請求網站數據上.它也可以存儲大量的數據，而不影響網站的性能.

數據以鍵/值對存在, web網頁的數據只允許該網頁訪問使用。

瀏覽器支持：

Internet Explorer 8+, Firefox, Opera, Chrome, 和 Safari支持Web 存儲。

注意: Internet Explorer 7 及更早IE版本不支持web 存儲.

localStorage 和 sessionStorage

客戶端存儲數據的兩個對象為：

localStorage - 用于長久保存整個網站的數據，保存的數據沒有過期時間，直到手動去除。

sessionStorage - 用于臨時保存同一窗口(或標簽頁)的數據，在關閉窗口或標簽頁之后將會刪除這些數據。

在使用 web 存儲前,應檢查瀏覽器是否支持 localStorage 和sessionStorage:

if(typeof(Storage)!=="undefined")
{
    // 是的! 支持 localStorage  sessionStorage 對象!
    // 一些代碼.....
} else {
    // 抱歉! 不支持 web 存儲。
}

不管是 localStorage，還是 sessionStorage，可使用的API都相同，常用的有如下幾個（以localStorage為例）：

保存數據：localStorage.setItem(key,value);

讀取數據：localStorage.getItem(key);

刪除單個數據：localStorage.removeItem(key);

刪除所有數據：localStorage.clear();

得到某個索引的key：localStorage.key(index);

四、HTML5 應用程序緩存

HTML5 -應用程序緩存=>使用文章鏈接跳轉點這里

五、HTML5 服務器發送事件（Server-Sent Events）

Server-Sent 事件指的是網頁自動獲取來自服務器的更新。

以前也可能做到這一點，前提是網頁不得不詢問是否有可用的更新。通過服務器發送事件，更新能夠自動到達。

例子：Facebook/Twitter 更新、股價更新、新的博文、賽事結果等。

所有主流瀏覽器均支持服務器發送事件，除了 Internet Explorer。

<h1>獲取服務端更新數據</h1>
<div id="result"></div>

if(typeof(EventSource)!=="undefined")
{
	var source=new EventSource("demo_sse.php");
	source.onmessage=function(event)
	{
		document.getElementById("result").innerHTML+=event.data + "<br>";
	};
}
else
{
	document.getElementById("result").innerHTML="抱歉，你的瀏覽器不支持 server-sent 事件...";
}

六、HTML5 WebSocket

WebSocket 是 HTML5 開始提供的一種在單個 TCP 連接上進行全雙工通訊的協議。

WebSocket 使得客戶端和服務器之間的數據交換變得更加簡單，允許服務端主動向客戶端推送數據。在 WebSocket API 中，瀏覽器和服務器只需要完成一次握手，兩者之間就直接可以創建持久性的連接，并進行雙向數據傳輸。

在 WebSocket API 中，瀏覽器和服務器只需要做一個握手的動作，然后，瀏覽器和服務器之間就形成了一條快速通道。兩者之間就直接可以數據互相傳送。

現在，很多網站為了實現推送技術，所用的技術都是 Ajax 輪詢。輪詢是在特定的的時間間隔（如每1秒），由瀏覽器對服務器發出HTTP請求，然后由服務器返回最新的數據給客戶端的瀏覽器。這種傳統的模式帶來很明顯的缺點，即瀏覽器需要不斷的向服務器發出請求，然而HTTP請求可能包含較長的頭部，其中真正有效的數據可能只是很小的一部分，顯然這樣會浪費很多的帶寬等資源。

HTML5 定義的 WebSocket 協議，能更好的節省服務器資源和帶寬，并且能夠更實時地進行通訊。

詳情和代碼示例：.

七、HTTP狀態消息

1xx: 信息

2xx: 成功

3xx: 重定向

4xx: 客戶端錯誤

5xx: 服務器錯誤

詳情

八、HTTP 方法：GET 對比 POST

兩種最常用的 HTTP 方法是：GET 和 POST。

什么是 HTTP ？

超文本傳輸協議（HTTP）的設計目的是保證客戶端與服務器之間的通信。

HTTP 的工作方式是客戶端與服務器之間的請求-應答協議。

web 瀏覽器可能是客戶端，而計算機上的網絡應用程序也可能作為服務器端。

舉例：客戶端（瀏覽器）向服務器提交 HTTP 請求；服務器向客戶端返回響應。響應包含關于請求的狀態信息以及可能被請求的內容。

GET - 從指定的資源請求數據。

POST - 向指定的資源提交要被處理的數據。

GET 方法

請注意，查詢字符串（名稱/值對）是在 GET 請求的 URL 中發送的：

/test/demo_form.php?name1=value1&name2=value2

有關 GET 請求的其他一些注釋：

GET 請求可被緩存

GET 請求保留在瀏覽器歷史記錄中

GET 請求可被收藏為書簽

GET 請求不應在處理敏感數據時使用

GET 請求有長度限制

GET 請求只應當用于取回數據

POST 方法

請注意，查詢字符串（名稱/值對）是在 POST 請求的 HTTP 消息主體中發送的：

有關 POST 請求的其他一些注釋：

POST 請求不會被緩存

POST 請求不會保留在瀏覽器歷史記錄中

POST 不能被收藏為書簽

POST 請求對數據長度沒有要求

其他 HTTP 請求方法

下面的表格列出了其他一些 HTTP 請求方法：

原文鏈接：https://blog.csdn.net/weixin_39834961/article/details/103765680
作者：yhlyeah

在線咨詢

上一篇：前端進階之路：點擊事件綁定
下一篇：JavaScript中裝載XML文檔

您的項目需求

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

整合營銷服務商

快速掌握 10 個 HTML5 必備技巧

您的項目需求