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+ 次查看

启动您的职业生涯

完成课程获得认证

开始学习
广告