---
- tag: #02-Areas/Dev/HTML
- date: 240908
---
# 那些你可能不知道的 HTML 標籤🏷️

{%youtube VkWJQe_EsjQ%}

- 這個個影片介紹了幾個我自己完全不知道的 HTML Tag，而且都非常實用
- 想說自己看完之後也順手整理一下，加強記憶

## Highlight

### `<abbr>`

- 用途：當滑鼠 hover 在指定的文字上面時，會出現解釋性文字[^1]
- 示範：`<abbr titel="Cascading Style Sheets">CSS</abbr>`
- 注意事項：由於他只有 hover 才會觸發，所以在沒有 hover 的行動裝置上面沒有作用

### `<code>`

- 用途：被 tag 包圍的元素會用等寬字體來呈現[^2]
- 示範：`<code>console.log("Hello World!")</code>`
- 注意事項：他的功能只有讓文字變成等寬字體，所以如果要好看的話還是必須要使用 CSS 來設計樣式

### `<kbd>`

- 用途：跟 `<code>` 類似，但用來處理鍵盤上的按鍵[^3]
- 示範：`<kbd>shift + S</kbd>`
- 注意事項：跟 `<code>` 一樣，樣式需要自己處理

### `<datalist> <option>`

- 用途：讓 `<input>` 可以根據使用者輸入的文字自動推薦內容[^4]
- 示範：

<input type="input" list="party">
<datalist id="party">
  <option value="民進黨"></option>
  <option value="國民黨"></option>
  <option value="民眾黨"></option>
</datalist>

- 注意事項：暫時想不到

### `<dialog>`

- 用途：類似於 JS 的 `<alert>`，不過是純 HTML[^5]
- 示範：

<dialog open="">
  <p>這是一段彈出式提示🔔</p>
</dialog>

- 注意事項：只要在裡面增加 `open=""` 這個 Attribute 就可以打開這個提示，搭配 JS 可以在需要的地方使用

### `<details><summary>`

- 用途：讓網頁無需 CSS and JS 就可以建立下拉式內容
- 示範：

<details>
  <summary>1+1=?</summary>
  2
</details>

- 注意事項：

### `<time>`

- 用途：語意化標籤，可以將時間轉成機器看得懂的格式，**~實際上~**他沒有任何肉眼可見的效果，但是對於 SEO 或是以時間為主的服務會有很大的幫助（譬如待辦事項或是日曆）
- 示範：

<p><time datetime="2024-09-09">星期一</p>

- 注意事項：`datetime` 是一個必要的 attribute，並且對於格式有嚴格要求[^6]

### `<ruby> <rt> <rp>`

- 用途：讓文字的上方可以出現文字，譬如日文的漢字上面加讀音[^7]
- 示範：


<ruby>
  文字<rt>wen zi<rt>
</ruby>
<ruby>
  混 <rt>ㄏㄨㄣˋ </rt> 世 <rt>ㄕˋ </rt> 魔 <rt>ㄇㄛˊ </rt> 王 <rt>ㄨㄤˊ </rt>
</ruby>  

- 注意事項：

1. `<rp>` 是為了支援的不支援 `<rt>` 的瀏覽器，我看了一下 Can I Use[^8]之後發現大多都基本支援，所以使用 `<rt>` 就可以了
2. 注音也可以用，但可能是因為原本是針對西文字體來設計，所以需要一些額外的排版處理會比較好看，尤其是有三個注音組合需要在文字的後面多一個空格，不然會無法置中

### `<progress> <meter>`

- 用途：顯示進度條，不用任何的 CSS[^9]，meter 則可以設定不同的閾值讓進度條出現不同的顏色
- 示範：


<progress max="100" value="30">30%</progress>
<meter min="0" max="100" low="30" high="60" optimum="90" value="70"></meter>

- 注意事項：`<meter>` 的 high 其實是我們一般理解的中（mid），optimum 則是高（high）

### `<fieldset> <legend>`

- 用途：讓內容被方框圍住[^10]
- 示範：


<form>
  <fieldset>
  <legend>選擇你最討厭的國家</legend>
    <input type="radio" id="中國" name="country" value="中國">
      <lebel for="中國"></lebel>
    <input type="radio" name="country" value="日本">
      <lebel for="日本"></lebel>
    <input type="radio" name="country" value="美國">
      <lebel for="美國"></lebel>
  </fieldset>
</form>

- 注意事項：form 只是其中一種用法

[^1]: [`<abbr>` The Abbreviation element - HTML: HyperText Markup Language | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/abbr)
[^2]: [`<code>` The Inline Code element - HTML: HyperText Markup Language | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code)
[^3]: [`<kbd>` The Keyboard Input element - HTML: HyperText Markup Language | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/kbd)
[^4]: [`<datalist>` The HTML Data List element - HTML: HyperText Markup Language | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist)
[^5]: [`<dialog>` The Dialog element - HTML: HyperText Markup Language | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog)
[^6]: [`<time>` The \(Date\) Time element - HTML: HyperText Markup Language | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time#valid_datetime_values)
[^7]: [`<ruby>` The Ruby Annotation element - HTML: HyperText Markup Language | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ruby)
[^8]: [Ruby annotation | Can I use... Support tables for HTML5, CSS3, etc](https://caniuse.com/ruby)
[^9]: [`<progress>` The Progress Indicator element - HTML: HyperText Markup Language | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress)
[^10]: [`<fieldset>` The Field Set element - HTML: HyperText Markup Language | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset)