数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究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 属性值是否有效之前，尝试了解类属性以及类和 ID 属性之间的区别，这有助于详细了解 ID 属性。
类属性
我们可以在任何标签的起始标签中创建一个类。例如，如果我们想将样式应用于该类，我们只需在样式标签中使用 (.) 点符号，后跟类名。
示例
让我们看下面的例子来理解类属性 -
<!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>
当我们运行上述代码时，将显示一个包含两个标题的网页，一个带有类属性 (欢迎使用 Tutorialspoint)，另一个带有 ID 属性 (HTML5 教程)。
ID 属性和类属性之间的区别
ID 和类属性之间的区别在于，ID 属性可用于识别一个元素，而类属性可用于识别多个元素。
ID 属性
每个元素只能有一个 ID。
每个页面只能有一个具有该 ID 的元素。
当我们使用验证时，id 必须是唯一的。
类
您可以在多个元素上使用相同的类。
您可以在同一个元素上使用多个类。
示例
某些 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，并且当单击“显示”按钮时，将打开以下页面。
1K+ 浏览量
