2021系列——2021年你必須知道的HTML標記和屬性

據Google統計，全球有700多種程式語言，是不是聽上去很聳人聽聞？！現今，各種框架和各種程式語言一直是你方唱罷我登場，來來往往。

而對於HTML，不管你習慣與否，它始終在那。無論選擇哪種框架或後端語言，所有Web開發人員都必須躲不開使用HTML。個人認為，即使是實現相同的功能，最好還是使用HTML編寫，而非JS，儘管我也承認編寫HTML可能顯得比較「重體力」，而且很無聊。

HTML有如此廣泛的用途和「堅強的生命力」，仍有開發人員所不太知曉的標籤和屬性。以下是您應該瞭解的5個HTML標記和屬性：

1 . 懶加載圖片

懶加載避免加載瀏覽器上那些不需要去即可加載的圖像，而是當向下滑動頁面或接近圖像時，圖像才開始加載。

換句話說，當用戶下滑頁面時加載圖像，呈現他們，否則不做加載。懶加載圖像可以幫助提高網站性能和響應速度。

這可以通過HTML輕鬆實現，所要做的就是將loading= 「lazy」屬性添加到圖像文件中。

添加屬性後，我們的圖片元素會是這樣：

<img src="https://kknews.cc/code/image.png" loading="lazy" alt="…" width="200" height="200">

通過使用Google的Lighthouse工具，你可以get到相關的一些技巧。

相關地址：https://developers.google.com/web/tools/lighthouse/

2 . 輸入推薦

用戶在做搜索錄入時，如果能夠拿到相關的輸入內容推薦，應該會提升使用體驗。

如今，輸入補全推薦功能是相當普遍的，你可以在天貓、頭條、抖音等太多平台見到。你可以通過JS添加輸入補全推薦，方法是在輸入欄位上設置事件偵聽，這樣能夠把搜索到的詞條與預定義推薦進行匹配。

但是，通過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 . 圖片標籤

你是否曾經遇到圖像無法按預期縮放的情況？我是遇到過的，譬如當我要使用大圖，同時把它顯示為縮略圖時，很可能會發生這種情況。

更改viewport width時，你會注意到某些圖像未按預期縮放。幸運的是，HTML通過使用<picture>標記使開發人員很容易地解決這個問題，該標記允許你添加適合不同寬度的多個圖像，而不必單個縮放。

如下所示：

<picture>
<source media="(min-width:768px)" srcset="med_flag.jpg">
<source media="(min-width:495px)" srcset="small_flower.jpg">
<img src="https://kknews.cc/code/high_flag.jpg" alt="Flags">
</picture>

如你看到的，我們指定了必須顯示特定圖像的最小寬度。

這個標籤和<audio>和<video>標籤非常相似。

4 . base URL

在創建網站索引或站點地圖的時候，這應該算是我最喜歡的標籤之一。

如果我們有很多錨標籤重定向到某個URL，並且所有URL都以相同的base address開頭時，這個標籤應該非常有用。

例如，如果我要指定zhang san和wang er的微博handles的URL，則URL的開頭會相同，而其後是它們各自的ID。通常，我必須將連結與相同的域名一起粘貼兩次。

不過，HTML有一個<base> tag，這使我可以設置基本URL的標記，如下所示：

<head>
<base href="https://www.weibo.com/">
</head>
<body>
<img src="https://kknews.cc/code/zhangsan" alt="Zhang San">
<a href="https://kknews.cc/code/wanger">Wang Er</a>
</body>

上面的代碼將生成一個圖像重定向到「 https://www.weibo.com/zhangsan」和一個錨標記重定向到「 https://www.weibo.com/wanger」。

這個<base> tab應該要麼是具有「href」或是所提供對象的屬性。

5 . 文檔刷新

如果要把用戶重定向到另一個頁面，那麼是可以用純HTML來輕鬆實現的。

過往你打開某些網站的時，可能注意到了這個功能：彈出「你會在5秒鐘內被重定向」。

你是可以通過<meta> tab，並對它進行設置http-equiv=
「refresh」從而使用它。

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

在此，content屬性指定重定向發生的秒數。

HTML加CSS是很強大，我們其實是可以僅使用它們兩就構建出像樣的網站的，只要你足夠沉浸於其中，不斷學習。

來源：kknews2021系列——2021年你必須知道的HTML標記和屬性

RELATED ARTICLESMORE FROM AUTHOR