容易被忽略的5個HTML技巧
對于所有 Web 開發(fā)人員來說，無論你選擇的是哪種框架或后端語言，都需要大量使用 HTML（超文本標(biāo)記語言）。
各種框架和編程語言可能會此消彼長，但 HTML 永不會過時。只是，就算 HTML 的應(yīng)用如此廣泛，這種語言中還是有不少多數(shù)開發(fā)人員都不了解的標(biāo)簽和屬性。
而且，盡管市面上有各種模板引擎（例如 Pug）可用，但你仍然需要對 HTML 和 CSS 有所了解。
如果你經(jīng)常使用 CSS，請查看我最近的博客，了解一些鮮為人知卻非常有用的 CSS 屬性：
https://medium.com/javascript-in-plain-english/6-css-properties-nobody-is-talking-about-e6cab5138d02
我認(rèn)為，大家最好盡可能使用 HTML 特性來實現(xiàn)所需的功能，盡量不要動用 JavaScript。當(dāng)然我也承認(rèn)，HTML 寫起來可能會枯燥無味。
雖然許多開發(fā)人員每天都在使用 HTML，但他們并沒有試著提升自己的技能水平，沒有想過真正用好一些鮮為人知的 HTML 特性。
以下是你應(yīng)該了解的 5 個 HTML 標(biāo)簽和屬性：
圖像延遲加載可以幫助開發(fā)人員提升網(wǎng)站性能和響應(yīng)速度。
延遲加載可防止設(shè)備第一時間加載屏幕上尚不需要的圖像。但是，當(dāng)你向下滾動或靠近圖像時，圖像就會開始加載。
換句話說，當(dāng)用戶滾動時才加載圖像，讓圖像變?yōu)榭梢姡駝t就不加載。
這可以通過純 HTML 輕松實現(xiàn)。
你所要做的就是將 loading= "lazy"屬性添加到你的圖像文件中。
<img src="image.png" loading="lazy" alt="…" width="200" height="200">使用谷歌的 Lighthouse 工具，你可以深入了解這一特性可以為你節(jié)省的內(nèi)容加載字節(jié)數(shù)：
https://developers.google.com/web/tools/lighthouse/
嘗試搜索什么事物時獲取有用的關(guān)聯(lián)建議確實會很有幫助。
如今，輸入建議和自動完成功能相當(dāng)流行，你一定已經(jīng)在谷歌和 Facebook 等網(wǎng)站上注意到它們了。
你可以使用 JavaScript 添加輸入建議，方法是在輸入字段上設(shè)置一個事件偵聽器，然后將搜索的術(shù)語與預(yù)定義建議進(jìn)行匹配。
https://www.w3schools.com/howto/howto_js_autocomplete.asp
但是，HTML 也允許你使用<datalist>標(biāo)簽顯示一組預(yù)定義的建議。
<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>你是否遇到過圖像無法按預(yù)期縮放的問題？我當(dāng)然就遇到過很多次。
當(dāng)你試圖構(gòu)建一個圖像展示網(wǎng)站，或使用一個大尺寸圖像并將其顯示為縮略圖時，往往就會發(fā)生這種情況。
更改視口寬度時，你可能會注意到某些圖像未按預(yù)期縮放。
幸運的是，HTML 的<picture>標(biāo)簽使開發(fā)人員可以很輕松地解決這一問題，這個標(biāo)簽讓你可以添加適合不同寬度的多個圖像，而不必只對一張圖上下縮放。
<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>如你所見，我們指定了特定圖像必須顯示的一個最小寬度。此標(biāo)簽與<audio>和<video>標(biāo)簽非常相似。
創(chuàng)建網(wǎng)站索引或站點地圖時，這是我最喜歡的標(biāo)簽之一。
當(dāng)你有很多錨標(biāo)簽重定向到某個 URL，并且所有 URL 都以相同的基礎(chǔ)地址開頭時，這個標(biāo)簽就會派上用場。
例如，如果我要指定 Elon Musk 和 Bill Gates 的 Twitter 內(nèi)容的 URL，則 URL（域）的開頭都會相同，而其后將是他們各自的 ID。
一般來說，我必須將鏈接與相同的域名一起粘貼兩次。
<head>
<base href="https://www.twitter.com/" target="_blank">
</head>
<body>
<img src="elonmusk" alt="Elon Musk">
<a href="BillGates">Bill Gate</a>
</body>上面的代碼將生成一個圖像重定向到“https://www.twitter.com/elonmusk”和一個錨標(biāo)記重定向到“https://www.twitter.com/billgates”。<base>標(biāo)簽必須具有“href”或一個目標(biāo)屬性。
如果要在頁面一段時間不活動時，或者第一時間將用戶重定向到另一個頁面，只需使用純 HTML 即可輕松實現(xiàn)。
當(dāng)你打開某些站點時，你可能已經(jīng)注意到了此特性，看到了“你將在 5 秒鐘內(nèi)被重定向”這一行文字。
<meta http-equiv="refresh" content="4; URL='https://google.com' />這里的 content 屬性指定了重定向倒計時的秒數(shù)。值得注意的是，盡管谷歌聲稱將這種形式的重定向與其他重定向一樣對待，但除非確實需要，否則使用這種類型的重定向是不明智的。
因此應(yīng)該只在某些情況下才使用它，例如在長時間不活動后重定向頁面。
HTML 和 CSS 非常強大，你可以只使用兩者就構(gòu)建出色的網(wǎng)站。
但是，盡管人們在大量使用這兩種語言，可許多開發(fā)人員并沒有真正沉浸其中。
除了上面我分享的一些技巧外，還有很多這樣的技巧和竅門，當(dāng)然它們都值得你在自己的項目中嘗試。
如果你還計劃使用 JavaScript，那么一定要查看我最近的博客，其中討論了一些可以節(jié)省你時間的技巧：
https://medium.com/javascript-in-plain-english/5-modern-javascript-tips-and-tricks-to-save-time-7773aff6be26
學(xué)習(xí)任何東西并精通它都需要時間、奉獻(xiàn)精神和實踐，HTML 也不例外。
希望你喜歡閱讀我的文章！
https://js.plainenglish.io/5-html-tricks-nobody-is-talking-about-a0480104fe19