HTML IDs：初學者的全面指南
你好，未來的網頁開發者們！今天，我們將要深入HTML IDs的奇妙世界。別擔心如果你是個新手；我們會從最基礎的知識開始，然後逐步深入。在這個教學結束時，你將會成為一名ID專家！讓我們開始吧！
什麼是HTML ID？
在我們深入細節之前，讓我們先了解HTML ID究竟是什麼。將ID視為HTML元素的獨特名稱標籤。就像你有一個獨特的名字來識別你一樣，ID在頁面上唯一地識別一個HTML元素。
ID的語法
現在，讓我們看看如何在HTML中實際使用IDs。語法相當簡單：
<element id="uniqueName">這裡是內容</element>在這裡，element可以是任何HTML標籤，如<div>、<p>、<span>等，而uniqueName是你分配給它的唯一標識符。
例如：
<p id="intro">歡迎來到我們的網站！</p>在這個例子中，我們給段落分配了一個ID為"intro"。
使用HTML ID屬性
既然我們知道了如何添加ID，讓我們看看如何使用它。IDs由於以下幾個原因而非常有用：
- 使用CSS進行樣式設置：你可以使用IDs為元素應用特定的樣式。
- JavaScript操作：IDs使得使用JavaScript選擇和操作元素變得容易。
- 創建锚點：你可以使用IDs在頁面內創建锚點鏈接。
讓我們看一些例子：
1. 使用CSS進行樣式設置
<style>
#special-heading {
color: blue;
font-size: 24px;
}
</style>
<h2 id="special-heading">這個標題很特別！</h2>在這個例子中，我們使用CSS為我們帶有ID "special-heading"的標題設置了樣式。它將會以藍色顯示，並比正常文字大。
2. JavaScript操作
<button id="myButton">點我！</button>
<script>
document.getElementById("myButton").onclick = function() {
alert("按鈕被點擊！");
}
</script>在這裡，我們使用JavaScript為我們帶有ID "myButton"的按鈕添加了一個點擊事件。當被點擊時，它會顯示一個提示框。
3. 創建锚點
<h2 id="section1">第1節</h2>
<p>這裡有一些內容...</p>
<a href="#section1">跳转到第1節</a>在這個例子中，點擊鏈接會將頁面滾動到帶有ID "section1"的元素。
HTML中的ID與類別的區別
現在，你可能會想，"ID和類別之間有什麼區別？" 好問題！讓我們來分析一下：
| 特性 | ID | 類別 |
|---|---|---|
| 唯一性 | 必須在頁面上唯一 | 可以多次使用 |
| CSS選擇器 | 使用 #（例如，#myID） | 使用 .（例如，.myClass） |
| JavaScript選擇 | getElementById() | getElementsByClassName() |
| 使用 | 對於獨特元素 | 對於類似元素的群組 |
記住，IDs就像你的社會保險號碼 - 對你來說是唯一的。類別則像你的頭髮顏色 - 很多人可以共享同一個！
關於ID要記住的事情
- 唯一性：ID必須在頁面內唯一。沒有兩個元素應該有相同的ID。
- 大小寫敏感：IDs是大小寫敏感的。"myID"和"myid"被視為不同的。
- 開頭字符：ID不能以數字開頭。它必須以字母開頭。
- 無空格：IDs中不能包含空格。
有效ID屬性模式
在給你的IDs命名時，遵循以下規則以確保它們是有效的：
- 以字母開頭（A-Z或a-z）
- 可以跟隨：
- 字母（A-Za-z）
- 數字（0-9）
- 连字符（-）
- 下劃線（_）
- 冒號（:）
- 點（.）
以下是一個有效和無效ID範例的表格：
| 有效IDs | 無效IDs |
|---|---|
| my-heading | 2fast2furious |
| section_1 | my heading |
| intro:para | my#heading |
| footer.copyright | my@heading |
結論
好了，各位！你現在已經對HTML IDs有了深入了解。記住，熟能生巧，所以不要害怕在你的HTML項目中嘗試使用IDs。他們是一個強大的工具，可以使你的網頁開發之旅更加順暢。
在我讓你離開之前，這裡有一個給網頁開發者的笑話：為什麼程序員喜歡暗色模式？因為光會吸引蟲子！?
快樂編程，願你的IDs永遠唯一！
Credits: Image by storyset