本文我將向你展示一些html被低估的元素。
1. picture
<picture> 標簽的結構類似于帶有 <sources> 的 video 標簽，但用于圖像。有人會說：“等等，我們不是有 <img> 嗎？為什么我要使用它呢？”。<picture> 遠比 <img> 強大的多。
<picture> 用于處理響應式圖片，當你具有兩種或兩種以上質量的圖像時，如何處理？也許你嘗試使用服務器渲染來檢測用戶代理，以便為設備和頁面提供對應質量的圖像。使用Picture元素，你可以使用媒體查詢來告訴瀏覽器應顯示哪個圖像，而其他來源將被忽略，從而可以更快地加載圖像。如果將Picture與css響應式經典屬性結合使用，則可以實現真實的響應式圖像。
來看一個示例：
<picture>
<source media="(max-width: 500px)" srcset="alt/image.img">
<img src="path/to/default.img">
</picture>
可根據視口大小自動調節
2. fieldset
<fieldset> HTML原生的“表單組”。在我看來，有時最好使用此標簽來節省創建布局的時間，而實際上對于seo更好。但它太丑了，但這是另一個很好的新東西，因為你不用擔心元素的位置，只需要把它們組合起來。
<fieldset>
<legend>登錄:</legend>
用戶名: <input type="text"><br>
密碼: <input type="password"><br>
<button>登錄</button>
</fieldset>
我們可以用CSS適當修飾一下樣式。
3. progress
<progress> 進度條，現在是市面上有太多帶有復雜進度條的庫，但是我不明白為什么這個標簽沒有得到充分利用。應用CSS也非常容易，如果你不介意設置一個最小值和最大值值也無所謂，因為它將顯示為待定加載欄。
<progress max=100 value=13></progress>
如你所見，使用JAVAScript設置樣式和操縱值非常容易，下次你需要進度條時，請考慮這個老朋友。
4. base
<base>標簽是我的最愛之一，它比你想象的更有幫助。 這將有助于更好地處理相對的 <a> 鏈接，因為你只需要在頭中用 <base> 聲明根網址，所有的相對路徑的鏈接都不會采用默認的，而是采用已聲明的根網址，一般的目標屬性也可以重寫。默認情況下，相對鏈接會重定向到實際路徑，但是有時生成的動態內容并不理想。除非提供完整的URL，否則相對圖像或文件的路徑也將采用 <base> 默認值，如果這樣做，則 <base> 會被毫無問題地忽略。
<base href=”https://zhangbing.site/" target=”_blank”>
<a href="vue3.html">Vue3備忘單</a>
當鼠標移到鏈接“Vue3備忘單”的時候顯示為“https://zhangbing.site/vue3.html”，且在新瀏覽器標簽頁打開此網頁。
知道有什么用了吧！此標簽可以放在網頁的 <head> 里面。
5. 更多輸入標簽
你是否知道輸入內容不只是文字或密碼類型？我也不是在談論電子郵件輸入。
/ 5.1 日期輸入 /
可能大家最了解這種類型的是 [type=date]，但我們還有更具體的，比如月、周甚至小時。
- date - 選取日、月、年
- month - 選取月、年
- week - 選取周和年
- time - 選取時間（小時和分鐘）
- datetime - 選取時間、日、月、年（UTC 時間）
- datetime-local - 選取時間、日、月、年（本地時間）
<input type=”date” />
<input type=”datetime-local” />
<input type=”month” />
<input type=”week” />
<input type=”time” />
此輸入將返回 Date() 類的有效且可讀的格式。
/ 5.2 顏色選擇 /
老實說，[type = color] 輸入提示的樣式在很大程度上取決于你的瀏覽器，但它是一種快速干凈的解決方案，可為用戶提供選擇顏色的選項。
<input type=”color” />
此輸入將返回一個十六進制數字值。
/ 5.3 范圍 Range /
當你要為用戶提供選擇范圍內數字的選項時，范圍輸入類型是解決方案。使用此功能在自己的視頻播放器中創建音量滑塊后，便可以使用可接受的最小值和最大值進行操作。
<input type=”range” />
6. details
<details> 標簽規定了用戶可見的或者隱藏的需求的補充細節，用來供用戶開啟關閉的交互式控件。任何形式的內容都能被放在 <details> 標簽里邊。<details> 元素的內容對用戶是不可見的，除非設置了 open 屬性。只需單擊 <details> 內的 <summary> 標記就足以顯示所有隱藏的內容。順便說一下，不需要JavaScript，你可以使用CSS使其更漂亮。
下面是一個例子
<details>
<summary>
<span class="summary-title">Details 元素與自定義箭頭！</span>
<div class="summary-chevron-up">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>
</div>
</summary>
<div class="summary-content">來自國內知名電動車電池供應商星恒電源的消息顯示，星恒為青桔騎行配套鋰電池達成 100 萬組，并且雙方又簽訂的新的戰略合作協議，青桔騎行宣布正式加盟星恒推出的《恒星伙伴計劃》，他們為青桔騎行配套的鋰電池產自滁州生產基地。</div>
</details>
效果如下
7.文本格式化標簽
我喜歡一些格式化標簽，但它們不足以占據我條目中的整個位置。這是一個標簽，沒有太多的樣式，但是對于保持一致并以更好的做法編寫HTML而言很重要，并且它們在下一個地方很有用。
/ 7.1 mark /
實際上，使用 <span> 環繞文本然后提供背景顏色是一種不好的做法，因為存在 <mark>，請避免使用 <span> 并在需要突出顯示文本時開始使用 <mark>。<mark> 默認使用經典的熒光筆黃色，但它對顏色CSS屬性的響應沒有任何問題。
<p>
滴滴、美團、哈啰紛紛加碼共享電單車：餡餅or陷阱？
<mark>事情正在起變化，一個曾經“死去”的賽道正在悄悄復活。</mark>
曾經被證偽的共享電單車，巨頭與無數小玩家又紛紛入局、狂飆，泥沙俱下。最終即便巨頭勝出，又能否避開共享單車的結局？
</p>
效果如下
/ 7.2 abbr /
如果你需要在文本中使用一個縮寫名稱，這個標簽是可以勝任的壞孩子。
<abbr title=”Software as a Service”>SaaS</abbr>
標題屬性可以是一個很好的補充，可以得到首字母縮寫的原生工具提示。
/ 7.3 pre /
預格式化的文本或 <pre> 用于顯示文本，它是用來顯示所寫的文本，所有的空格、制表符和支持的字符都將被完全按照它在塊中的格式化來顯示。
<pre>
/* Code */
var json = {
a: 1,
b: 2,
c: 3
}
function example(){
console.log(“Hello world”);
return true;
}
example();
</pre>
/ 7.4 hr /
這不是一個格式化的文本，但在 <p> 元素中很好用，也不是什么大問題，所以我把它放在這里。作為分隔符使用，默認情況下，它有一個白色背景的對比色，并使用了父元素寬度的100%。
<!-- 就這么簡單: -->
<hr />
易于設置樣式，更改 border-color CSS屬性。
8. [contenteditable]
如果要用HTML創建WYSIWYG（所見即所得）編輯器確實比您想象的要容易。僅將屬性 [contenteditable] 添加到放置編輯器的div中，才會自動將用戶可寫的所有內容轉換為可寫內容。
<div contenteditable>
<p>如果要用HTML創建WYSIWYG（所見即所得）編輯器確實比您想象的要容易。</p>
</div>
這個功能比你想象的更強大，因為當一個元素處于designMode狀態時，execCommand函數就可以使用，你可以將其綁定到按鈕上，這樣用戶就可以加亮、加粗、斜體、下劃線等。一些編輯器庫，如Quilljs（推薦），TinyMCE（LGPL不推薦），甚至Medium編輯器，使用 [contenteditable] 來創建他們的編輯器庫，他們并不像有人認為的那樣使用大的 <textarea>。當需要將內容存儲在數據庫中時可能會遇到一些麻煩，必須避開換行符，引號或HTML標記，但最終還是值得的。
結束
即使它們不是那么流行，也可以是一個更好的選擇，而不是你經常使用的。我希望通過這篇文章，你能開始搜索其他有趣的屬性，如pattern、hidden或data-*等語義元素。
如果對你有所啟發和幫助，可以點個關注、收藏、轉發，也可以留言討論，這是對作者的最大鼓勵。
