HTML 全域屬性 (global attributes)

所有的 HTML 元素都有的屬性，我們稱做全域屬性 (global attributes)，可以在所有的元素中使用，以下我們將會一一介紹這些屬性。

id 元素唯一識別符號

id 是用來設定 HTML 元素的唯一識別符號 (identifier)，每個 HTML 元素的 id 需要是在整份 HTML 文件中獨一無二 (unique) 不可重複的。

設定 id 有三種用途：

  1. 用作 <a> 連結的錨點 (anchor) 名稱。例如點擊連結 <a href="#myid"> 會跳到 <tag id="myid"> 元素處
  2. 用在 JavaScript 可以透過 id 存取該元素
  3. 用在 CSS 可以用 id 當選擇器 (selector)

命名 id 可以用的字元有 ASCII 英文字、數字、底線 _、一槓 - 和點 .。

語法範例：

<p id="exciting">The most exciting paragraph on the page. One of a kind!</p>

class 元素類別名稱

class 是用來設定 HTML 元素的類別名稱 (class names)，每一個 HTML 元素可以有多個類別，你可以用空格分隔 (space-separated) 開不同的類別名稱。

class 有兩種用途：

  1. 用在 JavaScript 可以透過 class 存取該元素
  2. 用在 CSS 可以用 class 當選擇器 (selector)

class 的命名規則是：

  1. 一個 A-Z 或 a-z 字開頭
  2. 接著這些任意的 A-Z a-z 0-9 - _ 字元
  3. class name 是大小寫有別 (case-sensitive)

語法範例：

<p class="note editorial">Above point sounds a bit obvious. Remove/rewrite?</p>

style 設定 CSS 樣式

style 用來直接設定該 HTML 元素的 CSS 樣式 (inline style)，而用 style 屬性設定的 CSS 優先權是最高的，會蓋過寫在 <style> 或外部樣式表中的樣式。

語法範例：

<p style="padding: 15px; line-height: 1.5; text-align: center; border: 3px solid #000;">
   Hello World!
</p>

顯示結果：

Hello World!

title

title 用來提供關於該 HTML 元素的額外資訊，當滑鼠移動到該元素上方時，瀏覽器也會出現一個 tooltip 顯示 title 的內容。

語法範例：

<div title="hello~~">Hover Me!</div>

data-*

HTML 元素的資料屬性 data-* 是用來存放自定義的資料 (custom data attributes)，通常是用來和 JavaScript 存取互動。

定義一個資料屬性 data-* 包含兩個部分：

  1. data- 開頭
  2. 接著任意的字串表示資料名稱

語法範例：

<img src="ship.png"
     data-ship-id="324"
     data-weapons="laserI laserII"
     data-shields="72%"
     data-x="414354"
     data-y="85160"
     data-z="31940">

tabindex

tabindex 設定一個數字，用來設定該 HTML 元素可以被聚焦 (focusable)，當你按 tab 鍵時也可以跳到該元素上，而 tabindex 數字大小的順序也代表當你按 tab 鍵時的跳躍順序。

tabindex 如果設定一個負數，表示該元素可以被聚焦，但不參與鍵盤鍵 (例如 tab) 的瀏覽切換。

語法範例：

<a href="https://www.fooish.com/" tabindex="2">Fooish</a>
<a href="https://www.google.com/" tabindex="1">Google</a>
<a href="https://www.facebook.com/" tabindex="3">Facebook</a>

contenteditable

contenteditable 用來設定該元素的內容是否可以被使用者編輯 (editable)。

contenteditable 有兩種屬性值：

  • true: 表示元素可以被編輯
  • false: 表示元素不可以被編輯 (預設值)

語法範例：

<div contenteditable="true">
    <p>點我看看是不是可以編輯</p>
</div>

顯示結果：

點我看看是不是可以編輯

dir 文字方向

dir 用來設定語言文字的方向順序，dir 有這些值：

  • ltr: 從左到右 (left to right)，像是英文
  • rtl: 從右到左 (right to left)，像是阿拉伯文
  • auto: 讓瀏覽器自動判斷，預設值

語法範例：

<p dir="rtl">This paragraph is in English but incorrectly goes right to left.</p>
<p dir="ltr">This paragraph is in English and correctly goes left to right.</p>
<p>هذه الفقرة باللغة العربية ولكن بشكل خاطئ من اليسار إلى اليمين.</p>
<p dir="auto">هذه الفقرة باللغة العربية ، لذا يجب الانتقال من اليمين إلى اليسار.</p>

顯示結果：

This paragraph is in English but incorrectly goes right to left.

This paragraph is in English and correctly goes left to right.

هذه الفقرة باللغة العربية ولكن بشكل خاطئ من اليسار إلى اليمين.

هذه الفقرة باللغة العربية ، لذا يجب الانتقال من اليمين إلى اليسار.

draggable 可以被拖曳的元素

draggable 指定該元素可以被拖曳 (drag and drop)，通常是會搭配 JavaScript 使用。

draggable 有兩種屬性值：

  • true: 表示元素可以被拖曳
  • false: 表示元素不可以被拖曳 (預設值)

語法範例：

<p draggable="true">This is a draggable paragraph.</p>

hidden 隱藏元素

hidden 用來設定該 HTML 元素是否要被從畫面中隱藏起來，通常讓使用者滿足某些條件後才能看見。hidden 是一個布林屬性 (boolean)。

語法範例：

<p>你看得見我</p>
<p hidden>你看不見我</p>

顯示結果：

你看得見我

accesskey 指定鍵盤快捷鍵

accesskey 用來生成鍵盤快捷鍵，讓該 HTML 元素可以快速被訪問，而 accesskey 的屬性值是指定一個字元 (英文字或數字)。

語法範例：

<button accesskey="s">Stress reliever</button>

而不同的作業系統或瀏覽器，使用快捷鍵的方式不太一樣：

Windows 快捷鍵:

  • Firefox: Alt + Shift + key
  • Edge: Alt + key
  • Internet Explorer: Alt + key
  • Google Chrome: Alt + Shift + key
  • Safari: Alt + key
  • Opera: Alt + key

Mac 快捷鍵:

  • Firefox: Control + Option + key 或 Control + Alt + key
  • Google Chrome: Control + Alt + key
  • Safari: Control + Alt + key
  • Opera: Control + Alt + key

lang

lang 用來提供網頁內容的語言資訊，聲明一個 HTML 元素的內容是用什麼語言 (language)，可以用來幫助搜尋引擎 (Google) 判斷內容、用在 CSS 選擇器等。

<html lang="en">
  <p>This paragraph is English.</p>
  
  <p lang="en-GB">This paragraph is defined as British English.</p>
  <p lang="fr">Ce paragraphe est défini en français.</p>
</html>

常見的 lang 設定：

  • 英文 en
  • 法文 fr
  • 繁體中文 zh-Hant
  • 臺灣用的繁體中文 zh-Hant-TW
  • 中國大陸用的繁體中文 zh-Hant-CN
  • 香港用的繁體中文 zh-Hant-HK
  • 澳門用的繁體中文 zh-Hant-MO
  • 新加坡用的繁體中文 zh-Hant-SG
  • 簡體中文 zh-Hans
  • 臺灣用的簡體中文 zh-Hans-TW
  • 中國大陸用的簡體中文 zh-Hans-CN
  • 香港用的簡體中文 zh-Hans-HK
  • 澳門用的簡體中文 zh-Hans-MO
  • 新加坡用的簡體中文 zh-Hans-SG
  • 客家話 zh-hakka

spellcheck 自動即時拼字檢查

控制瀏覽器要不要對內容進行即時拼字檢查，通常是用在可以被編輯 (editable) 的元素上，像是 <input>, <textarea> 或 contenteditable="true" 的元素。

spellcheck 有兩種屬性值：

  • true: 表示開啟拼字檢查
  • false: 表示關閉拼字檢查

語法範例：

<p contenteditable spellcheck="true">This exampull will be checkd fur spellung when you try to edit it.</p>

translate 聲明內容是否需要被翻譯

translate 用來聲明該 HTML 元素的內容需不需要被翻譯，這屬性會被運用在例如 Google Translate 做網頁翻譯時。

translate 有兩種屬性值：

  • yes: 表示需要被翻譯
  • no: 表示不需要被翻譯

語法範例：

<footer>
  <small>© 2020 <span translate="no">BrandName</span></small>
</footer>