5 個不常提及的 HTML 技巧

編譯：冷星

來源：SegmentFault 思否社區

Web 開發人員都在廣泛的使用 HTML。無論你使用什麼框架或者選擇哪個後端語言，框架在變，但是 HTML 始終如一。儘管被廣泛使用，但還是有一些標籤或者屬性是大部分開發者不熟知的。雖然現在有很多的模版引擎供我們使用，但是我們還是需要儘可能的熟練掌握 HTML 內容，就像 CSS 一樣。

在我看來，最好儘可能使用 HTML 特性來實現我們的功能，而不是使用 JavaScript 實現相同的功能，儘管我承認編寫 HTML 可能會是重複的和無聊的。

儘管許多開發人員每天都在使用 HTML，但他們並沒有嘗試改進自己的項目，也沒有真正利用 HTML 的一些鮮爲人知的特性。

下面這 5 個通過 HTML 標籤 / 屬性實現的功能我覺得需要了解一下：

圖片懶加載

圖片懶加載可以幫助提升網站的性能和響應能力。圖片懶加載可以避免立即加載那些不在屏幕中立即顯示的圖片素材，當用戶滾動臨近圖片時再去開始加載。

換言之，當用戶滾動到圖片出現時再進行加載，否則不加載。這就降低了屏幕內容展示過程中的圖片素材的請求數量，提升了站點性能。

往往我們都是通過 javascript 來實現的，通過監聽頁面滾動事件來確定加載對應的資源。但是，在不完全考慮兼容性的場景下，我們其實可以直接通過 HTML 來直接實現。

注：本篇的提到的標籤和屬性的兼容性需要大家根據實際場景來選取是否使用

可以通過爲圖片文件添加 loading="lazy" 的屬性來實現:

<img src="image.png" loading="lazy" alt="lazy" width="200" height="200" />

輸入提示

當用戶在進行輸入搜索功能時，如果能夠給出有效的提示，這會大大提升用戶體驗。輸入建議和自動完成功能現在到處可見，我們可以使用 Javascript 添加輸入建議，方法是在輸入框上設置事件偵聽器，然後將搜索到的關鍵詞與預定義的建議相匹配。

其實，HTML 也是能夠讓我們來實現預定義輸入建議功能的，通過標籤來實現。需要注意的是，使用時這個標籤的 id 屬性需要和 input 元素的 list 屬性一致。

<label for="country">請選擇喜歡的國家:</label>
<input list="countries" >
<datalist id="countries">
  <option value="UK">
  <option value="Germany">
  <option value="USA">
  <option value="Japan">
  <option value="India">
  <option value=“China”>
</datalist>

Picture 標籤

你是否遇到過在不同場景或者不同尺寸的設備上面的時候，圖片展示適配問題呢？我想大家都遇到過。

針對只有一個尺寸的圖片素材的時候，我們往往可以通過 CSS 的 object-fit 屬性來進行裁切適配。但是有些時候需要針對不同的分辨率來顯示不同尺寸的圖片的場景的時候，我們是否可以直接通過 HTML 來實現呢？

HTML 提供了標籤，允許我們來添加多張圖片資源，並且根據不同的分辨率需求來展示不同的圖片。

<picture>
  <source media="(min-width:768px)" srcset="med_flower.jpg">
  <source media="(min-width:495px)" srcset="small_flower.jpg">
  <img src="high_flower" style="width: auto;" />
</picture>

我們可以定義不同區間的最小分辨率來確定圖片素材，這個標籤的使用有些類似和 < video > 標籤。

Base URL

當我們的頁面有大量的錨點跳轉或者靜態資源加載時，並且這些跳轉或者資源都在統一的域名的場景時，我們可以通過標籤來簡化這個處理。

例如，我們有一個列表需要跳轉到微博的不同大 V 的主頁，我們就可以通過設置來簡化跳轉路徑

<head>
  <base href="https://www.weibo.com/" target="_blank">  
</head>
<body>
  <a href="jackiechan">成龍</a>
  <a href="kukoujialing">賈玲</a>
</body>

頁面重定向（刷新）

當我們希望實現一段時間後或者是立即重定向到另一個頁面的功能時，我們可以直接通過 HTML 來實現。

我們經常會遇到有些站點會有這樣一個功能，“5s 後頁面將跳轉”。這個交互可以嵌入到 HTML 中，直接通過 < meta > 標籤，設置 http-equiv="refresh" 來實現

<meta http-equiv="refresh" content="4; URL='https://google.com' />

這裏 content 屬性指定了重定向發生的秒數。值得一提的是，儘管谷歌聲稱這種形式的重定向和其他的重定向方式一樣可用，但是使用這種類型的重定向其實並不是那麼的優雅，往往會顯得很突兀。

因此，最好在某些特殊的情況下使用它，比如在長時間用戶不活動之後再重定向到目標頁面。

後記

HTML 和 CSS 是非常強大的，哪怕我們僅僅使用這兩種技術也能創建出一些奇妙的網站。雖然它們的使用量很大很普遍，還是有很多的開發者並沒有真正的深入瞭解他們，還有很多的內容需要我們深入的去學習和理解，實踐，有很多的技巧等待着我們去發現。

原文地址：

https://js.plainenglish.io/5-html-tricks-nobody-is-talking-about-a0480104fe19

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/LSAo2wvmP78gQx3oe7DDoA

圖片懶加載

輸入提示

Picture 標籤

Base URL

頁面重定向（刷新）

後記

猜你喜歡