HTML 的 id 屬性有哪些有效值？

HTML 中的 ID 屬性被稱為元素的唯一識別符號。它有助於使用 CSS 樣式、指令碼目標和錨鏈接來標識網頁中的區域。

首先，讓我們看看 HTML 中 ID 屬性的用途：

ID 屬性可以透過使用命令在網頁上執行不同的操作：

  • ID 屬性用於指令碼引用：在 JavaScript 函式中，我們使用 ID 屬性來透過指令碼更改頁面上精確的元素。

  • ID 屬性用於樣式表選擇器：大多數人都會使用此功能，因為如果我們想為網頁上的一個專案設定樣式，通常會使用此屬性。

  • ID 屬性用於命名錨點連結：網頁瀏覽器只需指向 URL 末尾的 ID（前面帶有井號）即可轉到我們網頁文件中的特定位置。

語法

HTML 中 ID 屬性的語法或用法：

<tag id = #values>

HTML 中 ID 屬性規則：

確保 ID 屬性遵循以下規則：

  • ID 屬性至少應包含一個字元，第一個字元應為字元 (a-z) 或 (A-Z)，其餘字元可以是任何型別，甚至可以是特殊字元。

  • ID 屬性不包含任何空格。

  • 在文件中，每個 ID 必須唯一。

示例

以下示例顯示了 ID 屬性的值：

<div id = "#123"> .... </div> 
<tag id = "#%ADF@"> .... </tag> 
<h1 id = " _H"> .... </h1> 
<div id = "@"> .... </tag> 
<tag id = " {}"> .... </tag>

在瞭解這些 ID 屬性值是否有效之前，請嘗試瞭解 class 屬性以及 class 屬性和 ID 屬性之間的區別，這有助於詳細瞭解 ID 屬性。

Class 屬性

我們可以在任何標籤的起始標籤中建立一個類。例如，如果我們想將樣式應用於該類，我們只需在 style 標籤中使用 (.) 點符號，後跟類名。

示例

讓我們看下面的例子來理解 class 屬性：

<!DOCTYPE html>
<html>
<head>
   <title>Class attribute</title>
   <style type="text/css">
      .heading {
         color: green;
         text-align: center;
      }
      #heading {
         color: red;
         text-align: center;
      }
   </style>
</head>
<body>
   <h1 class="heading">Welcome To TutorialsPoint.</h1>
   <h2 id="heading">HTML5 Tutorial</h2>
</body>
</html>

執行上述程式碼時，將顯示一個包含兩個標題的網頁，一個帶有 class 屬性（歡迎來到 Tutorialspoint），另一個帶有 ID 屬性（HTML5 教程）。

ID 屬性和 Class 屬性之間的區別

ID 屬性和 class 屬性之間的區別在於，id 屬性可用於標識一個元素，而 class 屬性可用於標識多個元素。

ID 屬性

  • 每個元素只能有一個 ID。

  • 每個頁面只能有一個具有該 ID 的元素。

  • 使用驗證時，id 必須唯一。

Class

  • 您可以在多個元素上使用相同的類。

  • 您可以在同一個元素上使用多個類。

示例

某些 ID 屬性在 HTML 5 中有效，但在層疊樣式表 (CSS) 中無效。在這種情況下，建議使用簡單的輸出而不是樣式化的輸出，因為我們用於 ID 的某些值在 CSS 中可能無效。

以下示例演示了使用 CSS 的簡單 ID 屬性：

<!DOCTYPE html>
<html>  
<head>
   <title>Simple Id Attributes</title>
   <style>
      #@TP {
         color: #070770;
         text-align: center;
         font-size: 30px;
         font-weight: bold;
      }
      #@TP1 {
         text-align: center;
         font-size: 25px;
      }
   </style>
</head>
<body>
   <div id="@TP">TutorialsPoint Website</div>
   <div id="@TP1">
      Html5 Tutorials, CSS Tutorials, JavScript Tutorials
   </div>
</body>
</html>

執行上述程式碼時，將顯示兩個 div 元素，一個帶有 ID 屬性（TutorialsPoint 網站），另一個帶有其他 ID 屬性（Html5 教程、CSS 教程、JavaScript 教程）。

示例

現在我們將更改上述示例中的 ID 值。ID 值在 HTML 5 和 CSS 中有效。因此，由於 ID 有效，我們可以獲得樣式化的輸出。

以下示例演示了有效 ID 的功能：

<!DOCTYPE html>
<html>
<head>
   <title>Simple Id Attributes</title>
   <style>
      #TP1 {
         color: #070770;
         text-align: center;
         font-size: 30px;
         font-weight: bold;
      }
      #TP2 {
         text-align: center;
         font-size: 25px;
      }
   </style>
</head>
<body>
   <div id="TP1">TutorialsPoint Website</div>
   <div id="TP2">
      Html5 Tutorials, CSS Tutorials, JavScript Tutorials
   </div>
</body>
</html>

執行上述程式時，將顯示帶有 ID 屬性的兩個 div 元素，如下所示：

示例

考慮另一個示例，該示例演示了“JavaScript 不支援無效 ID”的概念。

<!DOCTYPE html>
<html>
<body>
   <h1 id="1TP">TutorialsPoint WEBSITE Content</h1>
   <button onclick="Value()">
      Display
   </button>
   <style>
      #.1TP {
         color: blue;
      }
   </style>
   <script>
      function Value() {
         document.getElementById(".1TP").innerHTML = "TutorialsPoint";
      }
   </script>
</body>
</html>

示例

考慮另一個示例，該示例演示了 JavaScript 和 HTML 支援的有效 ID。

<!DOCTYPE html>
<html>
<body>
   <h1 id="TP">TutorialsPoint WEBSITE Content</h1>
   <button onclick="displayResult()">
      Display
   </button>
   <style>
      #TP{
         color: blue;
      }
   </style>
   <script>
      function displayResult() {
         document.getElementById("TP").innerHTML = "TutorialsPoint";
      }
   </script>
</body>
</html>

執行上述程式時，將顯示一個 ID 屬性以及標有“顯示”的按鈕。

當 ID 值僅採用字元時，JavaScript 和 HTML 支援該 ID，單擊“顯示”按鈕時，將開啟以下頁面。

更新於：2023年10月4日

1K+ 次檢視

啟動您的職業生涯

完成課程獲得認證

開始學習
廣告