HTML 中 id 属性的有效值有哪些?
HTML 中的 ID 属性被称为元素的唯一标识符。它有助于通过使用 CSS 样式、脚本目标和锚链接来识别网页中的区域。
首先，让我们看看 HTML 中 ID 属性的用途 −
ID 属性可以通过使用命令在网页上执行不同的操作 −
用于引用脚本的 ID 属性 − 在 JavaScript 函数中，我们使用 ID 属性通过脚本更改页面上的精确元素。
用于样式表选择器的 ID 属性 − 大多数人都会使用此功能，因为如果我们想要在网页上设置某个项目的样式，通常会使用此属性。
ID 属性用于命名锚点链接 − Web 浏览器只需指向 URL 末尾以井号开头的 ID，即可转到 Web 文档中的特定位置。
语法
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 属性
我们可以在任何标签的起始标签中创建一个 class。假设，如果我们想将样式应用于 class，只需在 style 标签中使用 (.) 句点符号，后跟 class 名称即可。
示例
让我们通过以下示例来理解 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 中有效，但在层叠样式表中无效。在这种情况下，建议使用简单输出而不是样式化输出，因为我们用于 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，单击"显示"按钮时将打开以下页面。
相关文章
有用资源
html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/
