我愛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 功能說明：

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

```htmlmixed=


### legend 功能說明：
HTML `<legend> 元素用於表示其父元素 <fieldset> 的內容標題。`


![](https://i.imgur.com/a2v8wkM.png)



## [datalist](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist) + [option](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/option)

### datalist 功能說明：
`HTML <datalist> 元素包含了一組 <option> 元素，這些元素表示其它表單控件可選值。`

![](https://i.imgur.com/D02kWpS.png)

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



## [progress](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/progress)

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

![](https://i.imgur.com/jQtHfE6.png)

## [abbr](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/abbr)
![](https://i.imgur.com/ODAFv8H.png)

### 功能說明：
`HTML 縮寫元素（<abbr>）用於代表縮寫，並且可以通過可選的 title 屬性提供完整的描述。若使用 title 屬性，則它必須且僅可包含完整的描述內容。`
![](https://i.imgur.com/B6qRKeB.png)


## [del](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/del) + [ins](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/ins)

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

![](https://i.imgur.com/F0kX2GV.png)


### ins 功能說明：
`HTML <ins> 元素定義已經被插入文檔中的文本。`

![](https://i.imgur.com/TcKaH3Q.png)

```htmlembedded=
<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 標簽代表突出顯示的文字，例如可以為了標記特定上下文中的文本而使用這個標簽**.** 舉個例子，它可以用來顯示搜索引擎搜索後關鍵詞