id 属性是用于指定文档的唯一标识符。使用#
(哈希)符号后跟 id 来使用 id 属性。该值在元素的主子树中的所有 ID 中必须是唯一的。
句法:
ID 属性的允许值:
从 HTML5 开始,id 必须满足这三个条件:
- 在文档中必须是唯一的。
- 不得包含任何空格字符。
- 必须至少包含一个字符。
所以该值可以是所有数字,只有一位数字,包括特殊字符等。只是没有空格。
在 HTML 5 中,这些 id 值是有效的:
....
....
....
....
....
注意:在 ID 的值中使用数字或特殊字符可能会导致其他上下文(CSS、JavaScript)出现问题。
例子:
.... <\tag >
此 ID 在 HTML 5 中有效但在CSS 中,javaScript标识符(包括元素名称、类和选择器中的 ID)只能包含字符[a-zA-Z0-9]。
现在我们将看到HTML和CSS中有效和无效 ID 值的示例。
示例 1: id 的值是1gfg和1geeks ,它们在HTML 5中有效但在CSS中无效。所以我们只是得到简单的输出而不是样式输出,因为ID的值在 CSS 中是无效的。
Id Attributes
GeeksforGeeks
A computer science portal for geeks
输出:
示例 2:现在我们将更改 od IDs 的值,但代码保持不变。 id的值是GFG和怪才这是在CSS中HTML 5有效以及有效。所以这次我们会得到样式化的输出,因为ID的值在 CSS 中是有效的。
Id Attributes
GeeksforGeeks
A computer science portal for geeks
输出:
我们刚刚看到了HTML和CSS中有效 ID 值的示例。
现在我们看到HTML和javaScript中有效和无效 ID 值的另一个示例。
示例 3:我们将取 ID 值.\1gfg ,它在 HTML 5 中有效但在javaScript 中无效。所以点击更改文本按钮后什么都不会发生,因为ID 的值对于 javaScript 无效。
Hello Geeks!
输出:
现在我们将看到另一个示例,其中我们将 ID 的值从.\1gfg更改为gfg并且更改按钮将起作用Hello Geeks!将被GeeksForGeeks替换为绿色,因为ID 的值对 JavaScript 有效。
示例 4:
Hello Geeks!
输出: