HTML中的tag、element、class、name、id

青云Zeo發表於2024-11-28
HTML

id屬性

1. **唯一性**：id屬性值在當前文件中必須唯一；

2. **CSS和Javascript**：id常用於CSS選擇器和Javascript中，用於選擇和操作特定的元素；

3. **DOM選擇**：在Javascript中，可以透過document.getElementsById('id值')來獲取對應的元素；

name屬性

1. **重複性**：name屬性值在同一文件中可以重複。name通常用於表單元素，如\<input\>、\<select\>等，以分組具有相同名稱的表單控制元件；

2. **表單資料**：在表單提交時，具有相同name屬性的表單元素的值會被組合在一起，這對於傳送陣列或一組值到伺服器端非常有用；

3. **DOM選擇**：在Javascript中，可以透過getElementsByName('name值')來獲取所以具有相同name值的元素，這回返回一個NodeList;

4. **表單驗證**：表單驗證時，name屬性可以用來標識需要驗證的欄位；

class屬性

1. **重複性**：class屬性值在同一文件中可以重複，一個元素也可以有多個class值；

2. **用途**：用於指定元素的類（css樣式），可以用於分組具有相同樣式或行為的元素；

3. **css選擇**：在css中，可以透過.class值來選擇所有具有該值類名的元素；

4. **DOM選擇**：在JavaScript中，可以document.getElementsByClassName('class值')來獲取所有具有該類名的元素，這會返回一個HTMLCollection；

5. **靈活性**：class屬性值提供了更高的靈活性，可以輕鬆地為元素新增、移除或切換類，以改變元素的樣式或行為；

標籤（tag）

1. **用途**：標籤（tag）是HTML元素的型別，比如\<p\>、\<div\>、\<a\>等，它們定義了頁面結構和內容的語義；
2. **唯一性**：標籤本身不是唯一的，同一個頁面上中可以有多個相同型別的標籤；
3. **結構**：標籤定義了文件的結構，告訴瀏覽器如何顯示內容；

元素（element）

1. **定義**：元素（element）是由開始標籤、結束標籤以及它們之間的內容構成的整體，是HTML文件中的基本構成單位；
2. **組成**：元素可以包含文字、資料、圖片、其他元素等；
3. **用途**：元素構成了HTML文件的主體，定義了網頁的結構和內容；
4. **示例**： 下面示例程式碼中，<div>和</div>之間的所有內容，包括<p>標籤和它包含的文字，構成了一個<div>元素
<details>
點選檢視程式碼 
<div>
  <p>這是一個段落，位於一個<div>元素內。</p>
</div>

相關文章