📜  HTML 中 id 属性的有效值是什么?

📅  最后修改于: 2021-11-08 05:36:43             🧑  作者: Mango

id 属性是用于指定文档的唯一标识符。使用# (哈希)符号后跟 id 来使用 id 属性。该值在元素的主子树中的所有 ID 中必须是唯一的。

句法:


ID 属性的允许值:
从 HTML5 开始,id 必须满足这三个条件:

  • 在文档中必须是唯一的。
  • 不得包含任何空格字符。
  • 必须至少包含一个字符。

所以该值可以是所有数字,只有一位数字,包括特殊字符等。只是没有空格。

在 HTML 5 中,这些 id 值是有效的:

 ....  
   ....  
   ....  
   ....  
   ....  

注意:在 ID 的值中使用数字或特殊字符可能会导致其他上下文(CSS、JavaScript)出现问题。
例子:

 .... <\tag >

此 ID 在 HTML 5 中有效但在CSS 中,javaScript标识符(包括元素名称、类和选择器中的 ID)只能包含字符[a-zA-Z0-9]。

现在我们将看到HTMLCSS中有效和无效 ID 值的示例。

示例 1: id 的值是1gfg1geeks ,它们在HTML 5中有效但在CSS中无效。所以我们只是得到简单的输出而不是样式输出,因为ID值在 CSS 中是无效的



  

    Id Attributes
    

  

    
GeeksforGeeks
    
      A computer science portal for geeks   
  

输出:

示例 2:现在我们将更改 od IDs 的值,但代码保持不变。 id的值是GFG怪才这是在CSSHTML 5有效以及有效。所以这次我们会得到样式化的输出,因为ID值在 CSS 中是有效的



  

    Id Attributes
    

  

    
GeeksforGeeks
    
      A computer science portal for geeks   
  

输出:

我们刚刚看到了HTMLCSS中有效 ID 值的示例。
现在我们看到HTMLjavaScript中有效和无效 ID 值的另一个示例。

示例 3:我们将取 ID 值.\1gfg ,它在 HTML 5 中有效但在javaScript 中无效。所以点击更改文本按钮后什么都不会发生,因为ID 的值对于 javaScript 无效


  

  
    

Hello Geeks!

                          

输出:

现在我们将看到另一个示例,其中我们将 ID 的值从.\1gfg更改为gfg并且更改按钮将起作用Hello Geeks!将被GeeksForGeeks替换为绿色,因为ID 的值对 JavaScript 有效

示例 4:


  

  
    

Hello Geeks!

                    

输出: