傑克! 真是太神奇了!

特性

• 所有的 HTML tag 都可以附帶指定 ID 的屬性. 例如:

  <div id="div1" ...>
  <p id="paraX"...>This is a sample paragraph. ...</p>
  <table id="time_zone"><tr>...
  

• ID 值 (原則上) 必需唯一. (參看 注意事項1)
• ID 值的合法字元為: 第一個字元為英文字母 [A-Za-z], 加上任何長度組合的 英文字母, 數字 [0-9], 減號 (-), 底線 (_), 冒號 (:), 小數點 (.) (參看 注意事項2)

用途

• 用於 CSS selector, 指定需要套用的元素. 例如:

  <style type="text/css">
  #div1 {color:red; margin: 5px;}
  </style>
  ...
  <div id="div1">
  <p>....</p>
  </div>
  

• 用於建立文件的參考位置 (anchor). 一但 anchor 點標示之後, 自己或別的文件就可以使用 <a> tag 來連結, 語法 <a href='...'>
• 連結到不同文件的參考位置 <a href="doc_url#id_value">...</a>
• 連結到同一文件中的參考位置 <a href="#id_value">...</a>
• 用於同一文件中, 沒有明確的連結目的地. 如: <a href="#" onclick="..." >...</a> 主要是執行 onclick="..." 內的 javascript_(備註)
• 這類參考位置除了使用 id='...' 來標示之外, 也可以用 name="..." 來標示.
• 用於 javascript 取得需要參考之 HTML 元素, 例如:

  <div id="id1">
  ...
  </div>
  <script type="text/javascript">
    var xObj = document.getElementById("id1");
    ...
  </script>
  

注意事項:

1. ID 值不小心不是唯一值時, browser 不會特別產生告警, 但是:
   • CSS selector 使用 #id_value 時對所有重覆 (id=#id_value) 的元素都有效, 可以正常上色, 改變樣式.
   • 使用 <a href="#id_value"> 只能連結到第一個元素
   • 使用 document.getElementById("id_value") 只會找到第一個元素
2. 含不合法字元的 ID 值
   • 含有空白字元 (SP) 及井字號 (#) 的 ID 值是不合法的, 因為 CSS selector 無法表示.
   • CSS selector 會將空白會被解釋成 '包含', 因此無法明確找到這些元素. 只能改用 [id='...'] 來當 selector (但權重不同於用於代表 ID 的 #)
   • 硬要亂搞可以使用 unicode 表示法, 參看 https://mathiasbynens.be/notes/css-escapes