HTML：被低估，且未被廣泛使用的有用的標(biāo)簽

本文我將向你展示一些html被低估的元素。

1. picture

<picture> 標(biāo)簽的結(jié)構(gòu)類似于帶有 <sources> 的 video 標(biāo)簽，但用于圖像。有人會(huì)說(shuō)：“等等，我們不是有 <img> 嗎？為什么我要使用它呢？”。<picture> 遠(yuǎn)比 <img> 強(qiáng)大的多。

<picture> 用于處理響應(yīng)式圖片，當(dāng)你具有兩種或兩種以上質(zhì)量的圖像時(shí)，如何處理？也許你嘗試使用服務(wù)器渲染來(lái)檢測(cè)用戶代理，以便為設(shè)備和頁(yè)面提供對(duì)應(yīng)質(zhì)量的圖像。使用Picture元素，你可以使用媒體查詢來(lái)告訴瀏覽器應(yīng)顯示哪個(gè)圖像，而其他來(lái)源將被忽略，從而可以更快地加載圖像。如果將Picture與css響應(yīng)式經(jīng)典屬性結(jié)合使用，則可以實(shí)現(xiàn)真實(shí)的響應(yīng)式圖像。

來(lái)看一個(gè)示例：

<picture>
  <source media="(max-width: 500px)" srcset="alt/image.img">
  <img src="path/to/default.img">
</picture>

可根據(jù)視口大小自動(dòng)調(diào)節(jié)

2. fieldset

<fieldset> HTML原生的“表單組”。在我看來(lái)，有時(shí)最好使用此標(biāo)簽來(lái)節(jié)省創(chuàng)建布局的時(shí)間，而實(shí)際上對(duì)于seo更好。但它太丑了，但這是另一個(gè)很好的新東西，因?yàn)槟悴挥脫?dān)心元素的位置，只需要把它們組合起來(lái)。

<fieldset>
  <legend>登錄:</legend>
  用戶名: <input type="text"><br>
  密碼: <input type="password"><br>
  <button>登錄</button>
</fieldset>

我們可以用CSS適當(dāng)修飾一下樣式。

3. progress

<progress> 進(jìn)度條，現(xiàn)在是市面上有太多帶有復(fù)雜進(jìn)度條的庫(kù)，但是我不明白為什么這個(gè)標(biāo)簽沒(méi)有得到充分利用。應(yīng)用CSS也非常容易，如果你不介意設(shè)置一個(gè)最小值和最大值值也無(wú)所謂，因?yàn)樗鼘@示為待定加載欄。

<progress max=100 value=13></progress>

如你所見(jiàn)，使用JAVAScript設(shè)置樣式和操縱值非常容易，下次你需要進(jìn)度條時(shí)，請(qǐng)考慮這個(gè)老朋友。

4. base

<base>標(biāo)簽是我的最愛(ài)之一，它比你想象的更有幫助。這將有助于更好地處理相對(duì)的 <a> 鏈接，因?yàn)槟阒恍枰陬^中用 <base> 聲明根網(wǎng)址，所有的相對(duì)路徑的鏈接都不會(huì)采用默認(rèn)的，而是采用已聲明的根網(wǎng)址，一般的目標(biāo)屬性也可以重寫(xiě)。默認(rèn)情況下，相對(duì)鏈接會(huì)重定向到實(shí)際路徑，但是有時(shí)生成的動(dòng)態(tài)內(nèi)容并不理想。除非提供完整的URL，否則相對(duì)圖像或文件的路徑也將采用 <base> 默認(rèn)值，如果這樣做，則 <base> 會(huì)被毫無(wú)問(wèn)題地忽略。

<base href=”https://zhangbing.site/" target=”_blank”>
<a href="vue3.html">Vue3備忘單</a>

當(dāng)鼠標(biāo)移到鏈接“Vue3備忘單”的時(shí)候顯示為“https://zhangbing.site/vue3.html”，且在新瀏覽器標(biāo)簽頁(yè)打開(kāi)此網(wǎng)頁(yè)。

知道有什么用了吧！此標(biāo)簽可以放在網(wǎng)頁(yè)的 <head> 里面。

5. 更多輸入標(biāo)簽

你是否知道輸入內(nèi)容不只是文字或密碼類型？我也不是在談?wù)撾娮余]件輸入。

/ 5.1 日期輸入 /

可能大家最了解這種類型的是 [type=date]，但我們還有更具體的，比如月、周甚至小時(shí)。

date - 選取日、月、年
month - 選取月、年
week - 選取周和年
time - 選取時(shí)間（小時(shí)和分鐘）
datetime - 選取時(shí)間、日、月、年（UTC 時(shí)間）
datetime-local - 選取時(shí)間、日、月、年（本地時(shí)間）

<input type=”date” />
<input type=”datetime-local” />
<input type=”month” />
<input type=”week” />
<input type=”time” />

此輸入將返回 Date() 類的有效且可讀的格式。

/ 5.2 顏色選擇 /

老實(shí)說(shuō)，[type = color] 輸入提示的樣式在很大程度上取決于你的瀏覽器，但它是一種快速干凈的解決方案，可為用戶提供選擇顏色的選項(xiàng)。

<input type=”color” />

此輸入將返回一個(gè)十六進(jìn)制數(shù)字值。

/ 5.3 范圍 Range /

當(dāng)你要為用戶提供選擇范圍內(nèi)數(shù)字的選項(xiàng)時(shí)，范圍輸入類型是解決方案。使用此功能在自己的視頻播放器中創(chuàng)建音量滑塊后，便可以使用可接受的最小值和最大值進(jìn)行操作。

<input type=”range” />

6. details

<details> 標(biāo)簽規(guī)定了用戶可見(jiàn)的或者隱藏的需求的補(bǔ)充細(xì)節(jié)，用來(lái)供用戶開(kāi)啟關(guān)閉的交互式控件。任何形式的內(nèi)容都能被放在 <details> 標(biāo)簽里邊。<details> 元素的內(nèi)容對(duì)用戶是不可見(jiàn)的，除非設(shè)置了 open 屬性。只需單擊 <details> 內(nèi)的 <summary> 標(biāo)記就足以顯示所有隱藏的內(nèi)容。順便說(shuō)一下，不需要JavaScript，你可以使用CSS使其更漂亮。

下面是一個(gè)例子

<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">來(lái)自國(guó)內(nèi)知名電動(dòng)車電池供應(yīng)商星恒電源的消息顯示，星恒為青桔騎行配套鋰電池達(dá)成 100 萬(wàn)組，并且雙方又簽訂的新的戰(zhàn)略合作協(xié)議，青桔騎行宣布正式加盟星恒推出的《恒星伙伴計(jì)劃》，他們?yōu)榍嘟垓T行配套的鋰電池產(chǎn)自滁州生產(chǎn)基地。</div>
</details>

效果如下

7.文本格式化標(biāo)簽

我喜歡一些格式化標(biāo)簽，但它們不足以占據(jù)我條目中的整個(gè)位置。這是一個(gè)標(biāo)簽，沒(méi)有太多的樣式，但是對(duì)于保持一致并以更好的做法編寫(xiě)HTML而言很重要，并且它們?cè)谙乱粋€(gè)地方很有用。

/ 7.1 mark /

實(shí)際上，使用  環(huán)繞文本然后提供背景顏色是一種不好的做法，因?yàn)榇嬖?nbsp;，請(qǐng)避免使用  并在需要突出顯示文本時(shí)開(kāi)始使用 。 默認(rèn)使用經(jīng)典的熒光筆黃色，但它對(duì)顏色CSS屬性的響應(yīng)沒(méi)有任何問(wèn)題。

<p>
 	滴滴、美團(tuán)、哈啰紛紛加碼共享電單車：餡餅or陷阱？ 
	<mark>事情正在起變化，一個(gè)曾經(jīng)“死去”的賽道正在悄悄復(fù)活。</mark> 
	曾經(jīng)被證偽的共享電單車，巨頭與無(wú)數(shù)小玩家又紛紛入局、狂飆，泥沙俱下。最終即便巨頭勝出，又能否避開(kāi)共享單車的結(jié)局？
</p>

效果如下

/ 7.2 abbr /

如果你需要在文本中使用一個(gè)縮寫(xiě)名稱，這個(gè)標(biāo)簽是可以勝任的壞孩子。

<abbr title=”Software as a Service”>SaaS</abbr>

標(biāo)題屬性可以是一個(gè)很好的補(bǔ)充，可以得到首字母縮寫(xiě)的原生工具提示。

/ 7.3 pre /

預(yù)格式化的文本或 <pre> 用于顯示文本，它是用來(lái)顯示所寫(xiě)的文本，所有的空格、制表符和支持的字符都將被完全按照它在塊中的格式化來(lái)顯示。

<pre>
  /* Code */
  var json = {
    a: 1,
    b: 2,
    c: 3
  }

  function example(){
    console.log(“Hello world”);
    return true;
  }

  example();
</pre>

/ 7.4 hr /

這不是一個(gè)格式化的文本，但在  元素中很好用，也不是什么大問(wèn)題，所以我把它放在這里。作為分隔符使用，默認(rèn)情況下，它有一個(gè)白色背景的對(duì)比色，并使用了父元素寬度的100%。

<!-- 就這么簡(jiǎn)單: -->
<hr />

易于設(shè)置樣式，更改 border-color CSS屬性。

8. [contenteditable]

如果要用HTML創(chuàng)建WYSIWYG（所見(jiàn)即所得）編輯器確實(shí)比您想象的要容易。僅將屬性 [contenteditable] 添加到放置編輯器的div中，才會(huì)自動(dòng)將用戶可寫(xiě)的所有內(nèi)容轉(zhuǎn)換為可寫(xiě)內(nèi)容。

<div contenteditable>
  <p>如果要用HTML創(chuàng)建WYSIWYG（所見(jiàn)即所得）編輯器確實(shí)比您想象的要容易。</p>
</div>

這個(gè)功能比你想象的更強(qiáng)大，因?yàn)楫?dāng)一個(gè)元素處于designMode狀態(tài)時(shí)，execCommand函數(shù)就可以使用，你可以將其綁定到按鈕上，這樣用戶就可以加亮、加粗、斜體、下劃線等。一些編輯器庫(kù)，如Quilljs（推薦），TinyMCE（LGPL不推薦），甚至Medium編輯器，使用 [contenteditable] 來(lái)創(chuàng)建他們的編輯器庫(kù)，他們并不像有人認(rèn)為的那樣使用大的 <textarea>。當(dāng)需要將內(nèi)容存儲(chǔ)在數(shù)據(jù)庫(kù)中時(shí)可能會(huì)遇到一些麻煩，必須避開(kāi)換行符，引號(hào)或HTML標(biāo)記，但最終還是值得的。