Anurag Kanoria InfoQ
作者 | Anurag Kanoria
譯者 | 王強
策劃 | 李俊辰
對於所有 Web 開發人員來說，無論你選擇的是哪種框架或後端語言，都需要大量使用 HTML（超文字標記語言）。
各種框架和程式語言可能會此消彼長，但 HTML 永不會過時。只是，就算 HTML 的應用如此廣泛，這種語言中還是有不少多數開發人員都不瞭解的標籤和屬性。
而且，儘管市面上有各種模板引擎（例如 Pug）可用，但你仍然需要對 HTML 和 CSS 有所瞭解。
如果你經常使用 CSS，請檢視我最近的部落格，瞭解一些鮮為人知卻非常有用的 CSS 屬性：
https://medium.com/javascript-in-plain-english/6-css-properties-nobody-is-talking-about-e6cab5138d02
我認為，大家最好儘可能使用 HTML 特性來實現所需的功能，儘量不要動用 JavaScript。當然我也承認，HTML 寫起來可能會枯燥無味。
雖然許多開發人員每天都在使用 HTML，但他們並沒有試著提升自己的技能水平，沒有想過真正用好一些鮮為人知的 HTML 特性。
以下是你應該瞭解的 5 個 HTML 標籤和屬性：
1. 延遲載入影象
影象延遲載入可以幫助開發人員提升網站效能和響應速度。
延遲載入可防止裝置第一時間載入螢幕上尚不需要的影象。但是，當你向下滾動或靠近影象時，影象就會開始載入。
換句話說，當用戶滾動時才載入影象，讓影象變為可見，否則就不載入。
這可以透過純 HTML 輕鬆實現。
你所要做的就是將 loading= "lazy"屬性新增到你的影象檔案中。
新增屬性後，你的圖片元素應如下所示：
<img src="image.png" loading="lazy" alt="…" width="200" height="200">使用谷歌的 Lighthouse 工具，你可以深入瞭解這一特性可以為你節省的內容載入位元組數：
https://developers.google.com/web/tools/lighthouse/
2. 輸入建議
嘗試搜尋什麼事物時獲取有用的關聯建議確實會很有幫助。
如今，輸入建議和自動完成功能相當流行，你一定已經在谷歌和 Facebook 等網站上注意到它們了。
你可以使用 JavaScript 新增輸入建議，方法是在輸入欄位上設定一個事件偵聽器，然後將搜尋的術語與預定義建議進行匹配。
https://www.w3schools.com/howto/howto_js_autocomplete.asp
但是，HTML 也允許你使用<datalist>標籤顯示一組預定義的建議。
請記住，此標籤的 ID 屬性必須與輸入欄位列表屬性相同。
<label for="country">Choose your country from the list:</label><input list="countries" name="country" id="country"><datalist id="countries"><option value="UK"><option value="Germany"><option value="USA"><option value="Japan"><option value="India"></datalist>3. 圖片標籤
你是否遇到過影象無法按預期縮放的問題？我當然就遇到過很多次。
當你試圖構建一個影象展示網站，或使用一個大尺寸影象並將其顯示為縮圖時，往往就會發生這種情況。
更改視口寬度時，你可能會注意到某些影象未按預期縮放。
幸運的是，HTML 的<picture>標籤使開發人員可以很輕鬆地解決這一問題，這個標籤讓你可以新增適合不同寬度的多個影象，而不必只對一張圖上下縮放。
你的程式碼將如下所示：
<picture> <source media="(min-width:768px)" srcset="med_flag.jpg"> <source media="(min-width:495px)" srcset="small_flower.jpg"> <img src="high_flag.jpg" alt="Flags" style="width:auto;"></picture>如你所見，我們指定了特定影象必須顯示的一個最小寬度。此標籤與<audio>和<video>標籤非常相似。
4. Base URL
建立網站索引或站點地圖時，這是我最喜歡的標籤之一。
當你有很多錨標籤重定向到某個 URL，並且所有 URL 都以相同的基礎地址開頭時，這個標籤就會派上用場。
例如，如果我要指定 Elon Musk 和 Bill Gates 的 Twitter 內容的 URL，則 URL（域）的開頭都會相同，而其後將是他們各自的 ID。
一般來說，我必須將連結與相同的域名一起貼上兩次。
但是，HTML 有一個<base>標籤，可用於設定基礎 URL，如下所示：
5. 文件重新整理
如果要在頁面一段時間不活動時，或者第一時間將使用者重定向到另一個頁面，只需使用純 HTML 即可輕鬆實現。
當你開啟某些站點時，你可能已經注意到了此特性，看到了“你將在 5 秒鐘內被重定向”這一行文字。
此行為已烘焙到 HTML 中，你可以使用<meta>標籤，在其上設定 http-equiv= "refresh"來啟用它。
<meta http-equiv="refresh" content="4; URL='https://google.com' />這裡的 content 屬性指定了重定向倒計時的秒數。值得注意的是，儘管谷歌聲稱將這種形式的重定向與其他重定向一樣對待，但除非確實需要，否則使用這種型別的重定向是不明智的。
因此應該只在某些情況下才使用它，例如在長時間不活動後重定向頁面。
最後的想法
HTML 和 CSS 非常強大，你可以只使用兩者就構建出色的網站。
但是，儘管人們在大量使用這兩種語言，可許多開發人員並沒有真正沉浸其中。
除了上面我分享的一些技巧外，還有很多這樣的技巧和竅門，當然它們都值得你在自己的專案中嘗試。