HTML5 對於初學者甚至是非程序員來說都有著十足的吸引力。實際上，只要你訪問網站，就會和 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 指定了元素值將要檢查的表達式。
下面是一個添加新規則的示例。例如，你要指定密碼不應超過 15 個字符，並且只能包含小寫字母：
<code>/<code>
為了更好地說明規則，你還可以添加一條自定義消息，告訴用戶為什麼他們輸入的密碼不符合要求。只需再加上一行來自定義彈出消息即可：
<code>/<code>
3. 為 HTML5 代碼元素創建縮寫
Emmet[4] 是一個很好用的文本編輯器插件，可以簡化你的 HTML/CSS 編碼流程。這個工具使用的語法類似於 CSS 的選擇器，可讓你為標準 HTML 代碼元素創建各種縮寫。
下面是一個例子。如果你輸入：
<code>div#header>h1.logo>a{website}/<code>則會收到：
<code><divid><h1class><ahref>website/<ahref>/<h1class>/<divid>/<code>
你可以使用 cheat sheet[5] 中的多種已有組合，也可以為任意 HTML 標籤創建自定義組合，然後按 Tab 或 Ctrl + E 將其添加到文本編輯器中。我自己是一名從事了多年開發的web前端老程序員，目前辭職在做自己的web前端私人定製課程，去年我花了一個月整理了一份最適合2019年學習的web前端學習乾貨，各種框架都有整理，送給每一位前端小夥伴，想要獲取的可以關注我的頭條號並在後臺私信我：前端，即可免費獲取。
4. 實現更優的視頻傳輸
使用 video 標籤，可以將支持視頻播放的媒體播放器無縫嵌入到網頁中。
你可以選擇：
- 使用 getUserMedia() 或 WebRTC 啟用來自攝像頭的實時流。
- 使用 src 屬性播放本地託管的視頻：<video>。
此外，你必須為視頻指定“控件”（例如播放、暫停和音量調節），否則用戶將沒有任何控件可用。這裡的示例代碼如下：
<code><video><sourcesrc>/<video>/<code>
為了進一步改善觀看體驗，你還可以嘗試使用以下屬性：
- disablePictureInPicture[6]：禁止瀏覽器顯示畫中畫上下文菜單或自動請求畫中畫。
- loop：提示瀏覽器在結束播放後自動重播視頻。
- muted：自動使視頻中的音頻靜音。
- poster：將自定義圖像顯示為視頻縮略圖。否則，瀏覽器將顯示視頻的第一幀作為縮略圖。
- preload：向瀏覽器指示哪些參數將帶來最佳的用戶體驗。你可以將它設置為 none（無預加載要求）；metadata：僅會預取視頻元數據；auto：即使用戶不希望觀看整個視頻，也要下載全部視頻數據。 注意：autoplay 屬性的優先級高於此屬性。
你可以在這個 HTML 速查表 [7] 中找到更多使用方便的多媒體文件標籤。
5. 改善圖像的顯示方式
<picture>標籤有助於優化圖像的顯示方式。
它通常用於：
- 樣式：指定在各種條件下應如何顯示媒體（例如，為較小的屏幕加載圖像的較小版本）。這是創建響應式設計的關鍵一環。
- 提升速度：根據用戶的屏幕規格指定應加載的圖像尺寸。
- 瀏覽器支持：在各種類型的瀏覽器中提供不同的圖像格式，以顯示正確的內容。
示例：
<code><picture><sourcemedia><sourcemedia><imgsrc>/<sourcemedia>/<sourcemedia>/<picture>/<code>
<picture>標籤包含兩個附加子元素：
- <source>：指定媒體元素的媒體資源。
- <img>：定義一個圖像。
要啟用其他樣式選項，請將以下屬性添加到<source>元素：
- srcset（必需）：使用它來定義圖像的目標 URL。
- media（類似於媒體查詢）：是一個條件，用戶代理為每個<source>元素評估這個條件。/<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 文件，並使用以下代碼對其進行修改：
<code><ifmodule>mod_gzip_on Yesmod_gzip_dechunk Yesmod_gzip_item_includefile.(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>/<code>
如果這樣做不起作用，請參考下面這些針對不同 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>屬性添加降序列表替代升序列表。
下面是一個示例代碼片段：
<code><olreversed>
聽起來可能沒有多大意義，但是當你想在頁面中添加一些時髦的樣式時，它可能就會派上用場了。
小結
現在你應該掌握了這 10 個新的 HTML5 技巧和竅門，它們應該可以幫助你構建更快、更人性化和更有吸引力的網站。不過千萬要記得，在開始實驗之前先對你的網站進行備份！
原文鏈接：https://mp.weixin.qq.com/s/qtQZUvsnIn0nsFbG51lQQw
閱讀更多 小白沖沖沖沖 的文章
