我愛JS · 02月20日

還在用CSS搞？介紹 10 個優秀的 HTML 標籤，超牛逼低調神標籤！！（更：補MDN說明

來自這個：

https://www.youtube.com/embed/HhkIstbkmpU

fieldset ・legend ・datalist ・option ・progress ・abbr ・del ・ins ・mark ・marquee

摘要

fieldset ・legend 表單用
・datalist ・option 資料選單用
・progress 進度條用
・abbr 縮寫用
・del 刪除線用
・ins 插入文字用
・mark 螢光標籤用
・marquee 過時的捲動元素

fieldset + legend

fieldset 功能說明：

用於對表單中的控制元素進行分組

<form action="#">
  <fieldset>
    <legend>Do you agree?</legend>
    <input type="checkbox" id="chbx" name="agree" value="Yes!" />
    <label for="chbx">I agree</label>
  </fieldset>
</form>

legend 功能說明：

HTML <legend> 元素用於表示其父元素 <fieldset> 的內容標題。

datalist + option

datalist 功能說明：

HTML <datalist> 元素包含了一組 <option> 元素，這些元素表示其它表單控件可選值。

option 功能說明：

HTML 元素 <option> 用於定義在 <select>, <optgroup> 或 <datalist> 元素中包含的項。<option> 可以在彈出窗口和 HTML 文檔中的其他項目列表中表示菜單項。

progress

功能說明：

HTML中的 <progress> 元素用來顯示一項任務的完成進度。雖然規範中沒有規定該元素具體如何顯示，瀏覽器開發商可以自己決定，但通常情況下，該元素都顯示為一個進度條形式。

abbr

功能說明：

HTML 縮寫元素（<abbr>）用於代表縮寫，並且可以通過可選的 title 屬性提供完整的描述。若使用 title 屬性，則它必須且僅可包含完整的描述內容。

del + ins

del 功能說明：

HTML 的 <del> 標簽表示一些被從文檔中刪除的文字內容。比如可以在需要顯示修改記錄或者源代碼差異的情況使用這個標簽。<ins>標簽的作用恰恰於此相反：表示文檔中添加的內容。

ins 功能說明：

HTML <ins> 元素定義已經被插入文檔中的文本。

<p>“You're late!”</p>
<del>
  <p>“I apologize for the delay.”</p>
</del>
<ins cite="../howtobeawizard.html" datetime="2018-05">
  <p>“A wizard is never late …”</p>
</ins>

mark

功能說明：

HTML 標記文本元素 (< Mark >) 表示為引用或符號目的而標記或突出顯示的文本，這是由於標記的段落在封閉上下文中的相關性或重要性造成的。

這個 HTML mark 標簽代表突出顯示的文字，例如可以為了標記特定上下文中的文本而使用這個標簽**.** 舉個例子，它可以用來顯示搜索引擎搜索後關鍵詞