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

作者：前端工匠

獲取資源：上方URL獲取資源

多維度前端+后端技術

MQ隊列、Redis緩存
VUE、html5
視頻流技術、文件上傳下載
AES、MD5

您提到了幾個不同的技術領域，我們可以逐一探討如何在這些方面提升您的技能。

1. 消息隊列（MQ）和 Redis 緩存

消息隊列 (Message Queue, MQ)

• 基礎知識：理解消息隊列的基本概念，如發布/訂閱模式、點對點模式等。
• 實現原理：了解消息隊列的內部實現機制，例如消息持久化、消息確認機制等。
• 常用系統：熟悉 RabbitMQ、Kafka、RocketMQ 等主流的消息隊列系統。
• 應用場景：學習消息隊列在異步處理、負載均衡、系統解耦等方面的應用場景。
• 運維管理：掌握消息隊列的配置、監控和故障排查技巧。

Redis 緩存

• 數據結構：熟悉 Redis 提供的各種數據結構，如字符串、列表、集合、哈希表、有序集合等。
• 使用場景：了解 Redis 在緩存、計數器、排行榜、會話存儲等場景中的應用。
• 高級特性：學習 Redis 的事務、Lua 腳本、持久化機制等高級特性。
• 集群與高可用：掌握 Redis 集群的搭建和維護，以及主從復制等高可用方案。

2. Vue.js 和 HTML5

Vue.js

• 基礎知識：理解 Vue 的核心概念，如響應式系統、組件化開發、指令和生命周期鉤子等。
• 官方文檔：深入閱讀 Vue 的官方文檔，了解最新特性和最佳實踐。
• 組件庫：熟悉 Element UI、Vuetify 等流行的 Vue 組件庫。
• 狀態管理：學習 Vuex 進行復雜狀態管理的方法。
• 路由管理：使用 Vue Router 實現單頁應用的路由管理。

HTML5

• 新特性：掌握 HTML5 引入的新標簽和屬性，如 <article>, <section>, <header> 等。
• 多媒體：了解 <video> 和 <audio> 標簽的使用方法，以及相關的 API。
• 表單增強：使用 HTML5 表單控件，如日期選擇器、顏色選擇器等。
• 離線存儲：學習 HTML5 的離線存儲機制，如 localStorage 和 sessionStorage。
• 畫布和 SVG：掌握 <canvas> 和 SVG 的基本用法，用于繪制圖形和動畫。

3. 視頻流技術和文件上傳下載

視頻流技術

• 編碼格式：了解 H.264、H.265 等視頻編碼格式。
• 流媒體協議：熟悉 HLS、RTMP、RTSP 等流媒體傳輸協議。
• 播放器集成：學習如何集成視頻播放器，如 Video.js 或 Plyr。
• 自適應流：理解自適應比特率流的概念及其實現方式。

文件上傳下載

• 表單提交：了解如何使用 HTML 表單上傳文件。
• Ajax 上傳：學習如何使用 XMLHttpRequest 或 Fetch API 實現異步文件上傳。
• 分塊上傳：掌握大文件分塊上傳的技術，提高上傳效率和穩定性。
• 進度條：實現文件上傳過程中的進度顯示功能。
• 斷點續傳：了解斷點續傳的技術原理和實現方式。

4. 密碼學：AES 和 MD5

AES (Advanced Encryption Standard)

• 加密算法：理解 AES 的工作原理，包括密鑰擴展、輪函數等。
• 模式選擇：了解不同的工作模式，如 ECB、CBC、CFB、OFB 等。
• 安全考慮：注意密鑰管理和 IV 的使用，避免安全漏洞。

MD5 (Message-Digest Algorithm 5)

• 摘要算法：了解 MD5 的作用和基本原理，即如何生成固定長度的摘要。
• 應用場景：知道 MD5 在校驗文件完整性方面的用途。
• 安全問題：認識到 MD5 已經不適用于安全敏感的場景，如密碼存儲。

為了更深入地學習這些技術，你可以嘗試完成一些實際的項目來應用這些知識。例如，你可以構建一個基于 Vue.js 的前端應用程序，其中包含視頻流播放、文件上傳下載等功能，并利用 Redis 和消息隊列進行數據緩存和異步處理。同時，在項目中使用 AES 對敏感數據進行加密，并使用 MD5 對文件進行校驗。這樣的實踐將幫助你更好地理解和掌握這些技術。

. HTTP狀態碼及其含義

• 1XX ：信息狀態碼

100 Continue 繼續，?般在發送 post 請求時，已發送了 http header 之后服務端 將返回此信息，表示確認，之后發送具體參數信息

• 2XX ：成功狀態碼

200 OK 正常返回信息

201 Created 請求成功并且服務器創建了新的資源

202 Accepted 服務器已接受請求，但尚未處理

• 3XX ：重定向

301 Moved Permanently 請求的??已永久移動到新位置。

302 Found 臨時性重定向。

303 See Other 臨時性重定向，且總是使? GET 請求新的 URI 。

304 Not Modified ?從上次請求后，請求的??未修改過。

• 4XX ：客戶端錯誤

400 Bad Request 服務器?法理解請求的格式，客戶端不應當嘗試再次使?相同的內 容發起請求。

401 Unauthorized 請求未授權。

403 Forbidden 禁?訪問。

404 Not Found 找不到如何與 URI 相匹配的資源。

• 5XX: 服務器錯誤

500 Internal Server Error 最常?的服務器端錯誤。

503 Service Unavailable 服務器端暫時?法處理請求（可能是過載或維護）。

7. 語義化的理解

• ?正確的標簽做正確的事情！
• HTML 語義化就是讓??的內容結構化，便于對瀏覽器、搜索引擎解析；
• 在沒有樣式 CSS 情況下也以?種?檔格式顯示，并且是容易閱讀的。
• 搜索引擎的爬?依賴于標記來確定上下?和各個關鍵字的權重，利于 SEO 。
• 使閱讀源代碼的?對?站更容易將?站分塊，便于閱讀維護理解

8. 介紹?下你對瀏覽器內核的理解？

主要分成兩部分：渲染引擎( layout engineer 或 Rendering Engine )和 JS 引擎

• 渲染引擎：負責取得??的內容（ HTML 、 XML 、圖像等等）、整理訊息（例如加?CSS 等），以及計算??的顯示?式，然后會輸出?顯示器或打印機。瀏覽器的內核的不 同對于??的語法解釋會有不同，所以渲染的效果也不相同。所有??瀏覽器、電?郵件 客戶端以及其它需要編輯、顯示?絡內容的應?程序都需要內核
• JS 引擎則：解析和執? javascript 來實現??的動態效果
• 最開始渲染引擎和 JS 引擎并沒有區分的很明確，后來JS引擎越來越獨?，內核就傾向于只指渲染引擎

9. html5有哪些新特性、移除了那些元素？

(1) HTML5 現在已經不是 SGML 的?集，主要是關于圖像，位置，存儲，多任務等功能的增加

• 繪畫 canvas
• ?于媒介回放的 video 和 audio 元素 本地離線存儲 localStorage ?期存儲數據，瀏覽器關閉后數據不丟失
• sessionStorage 的數據在瀏覽器關閉后?動刪除
• 語意化更好的內容元素，?如 article 、 footer 、 header 、 nav 、 section
• 表單控件， calendar 、 date 、 time 、 email 、 url 、 search
• 新的技術 webworker 、 websocket 、 Geolocation

(2) 移除的元素：

• 純表現的元素： basefont 、 big 、 center 、 font 、 s 、 strike 、 tt 、 u
• 對可?性產?負?影響的元素： frame 、 frameset 、 noframes

(3) ?持 HTML5 新標簽：

• IE8/IE7/IE6 ?持通過 document.createElement ?法產?的標簽
• 可以利?這?特性讓這些瀏覽器?持 HTML5 新標簽
• 瀏覽器?持新標簽后，還需要添加標簽默認的樣式 當然也可以直接使?成熟的框架、?如 html5shim

10. HTML5 的離線儲存怎么使?，?作原理能不能解釋?下？

在?戶沒有與因特?連接時，可以正常訪問站點或應?，在?戶與因特?連接時，更新?戶機器上的緩存?件。

原理：

HTML5 的離線存儲是基于?個新建的 .appcache ?件的緩存機制(不是存儲技 術)，通過這個?件上的解析清單離線存儲資源，這些資源就會像 cookie ?樣被存儲了下 來。之后當?絡在處于離線狀態下時，瀏覽器會通過被離線存儲的數據進???展示。

如何使?：

• ??頭部像下??樣加??個 manifest 的屬性；
• 在 cache.manifest ?件的編寫離線存儲的資源
• 在離線狀態時，操作 window.applicationCache 進?需求實現