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

墨蓝 2024-03-30 17:21 77阅读 0赞

## 问： ##

为 HTML 元素创建 id 属性时，值有哪些规则？

## 答1: ##

> HuntsBot周刊–不定时分享成功产品案例，学习他们如何成功建立自己的副业–huntsbot.com

对于 HTML 4，从技术上讲，答案是：

ID 和 NAME 标记必须以字母 (\[A-Za-z\]) 开头，后跟任意数量的字母、数字 (\[0-9\])、连字符 (“-”)、下划线 (“\_”) , 冒号 (“:”) 和句点 (“.”)。

HTML 5 更为宽松，仅表示 id 必须至少包含一个字符，并且不得包含任何空格字符。

XHTML 中的 id 属性区分大小写。

作为一个纯粹的实际问题，您可能希望避免使用某些字符。句点、冒号和“\#”在 CSS 选择器中具有特殊含义，因此您必须使用 backslash in CSS 或 selector string passed to jQuery 中的双反斜杠来转义这些字符。想想在您对 id 中的句点和冒号发疯之前，您必须多久在样式表或代码中转义一个字符。

例如，HTML 声明

是有效的。您可以在 CSS 中选择该元素为 \#first.name，在 jQuery 中像这样选择：$(‘\#first\\.name’). 但是如果您忘记了反斜杠 $(‘\#first.name’)，您将有一个完全有效的选择器来查找具有 id first 的元素并且还具有name 类。这是一个容易被忽视的错误。从长远来看，您可能会更高兴选择 id first-name（连字符而不是句点），而不是。

您可以通过严格遵守命名约定来简化您的开发任务。例如，如果您将自己完全限制为小写字符，并且始终使用连字符或下划线分隔单词（但不能同时使用两者，选择一个，从不使用另一个），那么您就有一个易于记忆的模式。您永远不会想知道“是 firstName 还是 FirstName？”因为您将始终知道您应该输入 first\_name。更喜欢骆驼案？然后限制自己，不要使用连字符或下划线，并且始终始终对第一个字符使用大写或小写，不要混合使用它们。

现在一个非常模糊的问题是至少有一个浏览器，Netscape 6，incorrectly treated id attribute values as case-sensitive。这意味着如果您在 HTML（小写“f”）中输入 id=“firstName”，在 CSS（大写“F”）中输入 \#FirstName \{ color: red \}，那么有问题的浏览器将无法将元素的颜色设置为红色.在 2015 年 4 月进行本次编辑时，我希望您没有被要求支持 Netscape 6。将此视为历史脚注。

`请注意，class 和 id 属性在 XHTML 中是区分大小写的，而所有其他属性则不是。 Eric Meyer 在我参加的一个 CSS 研讨会中提到了这一点。`

`另请注意，如果您尝试编写 CSS 规则以按 ID 定位元素，并且 ID 带有数字，它将不起作用。无赖！`

`至于'。或 ':' 在使用 jQuery 的 ID 中，请参阅 jQuery FAQ。它包含一个小功能，可以进行必要的转义。`

`@Wolfram 引用的 jquery 常见问题解答是 how-do-i-select-an-element-by-an-id-that-has-characters-used-in-css-notation。`

## 答2: ##

> huntsbot.com洞察每一个产品背后的需求与收益，从而捕获灵感

从 HTML 4 specification：

ID 和 NAME 标记必须以字母 (\[A-Za-z\]) 开头，后跟任意数量的字母、数字 (\[0-9\])、连字符 (“-”)、下划线 (“\_”) , 冒号 (“:”) 和句点 (“.”)。

一个常见的错误是使用以数字开头的 ID。

`请注意，HTML5 允许的内容远多于 HTML4，例如 456bereastreet.com/archive/201011/… 和 w3.org/TR/html5/elements.html#the-id-attribute`

## 答3: ##

> HuntsBot周刊–不定时分享成功产品案例，学习他们如何成功建立自己的副业–huntsbot.com

从技术上讲，您可以在 id/name 属性中使用冒号和句点，但我强烈建议避免两者。

在 CSS（以及 jQuery 等几个 JavaScript 库）中，句点和冒号都有特殊的含义，如果不小心就会遇到问题。句点是类选择器，冒号是伪选择器（例如，当鼠标悬停在元素上时，“:hover”表示元素）。

如果你给一个元素 id “my.cool:thing”，你的 CSS 选择器将如下所示：

#my.cool:thing {
         ... /* some rules */ ... }

这实际上是在用 CSS 语言说“id 为 ‘my’ 的元素、一个 ‘cool’ 类和 ‘thing’ 伪选择器”。

坚持使用任何大小写、数字、下划线和连字符的 AZ。如上所述，请确保您的 ID 是唯一的。

这应该是您首先关心的问题。

`您可以使用冒号和句点 - 但您需要使用双反斜杠对其进行转义，例如：$('#my\\.cool\\:thing') 或转义变量：$('#'+id.replace (/\./,'\\.').replace(/\:/,'\\:')) groups.google.com/group/jquery-en/browse_thread/thread/…`

`请参阅Álvaro González's answer。`

## 答4: ##

> 保持自己快人一步,享受全网独家提供的一站式外包任务、远程工作、创意产品订阅服务–huntsbot.com

jQuery 确实处理任何有效的 ID 名称。您只需要转义元字符（即点、分号、方括号…）。这就像说 JavaScript 有引号问题只是因为你不会写

var name = 'O'Hara';

Selectors in jQuery API (see bottom note)

`这是对另一个答案的评论，并不试图回答原始问题。`

`@Sean 回到当天，这个问题被标记为 jQuery。确实，现在说的意义不大。但是，老实说，我不记得 13 年前我的想法。`

## 答5: ##

> huntsbot.com全球7大洲远程工作机会，探索不一样的工作方式

HTML5：ID 和类属性的允许值

从 HTML5 开始，对 ID 值的唯一限制是：

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

类似的规则适用于类（当然，唯一性除外）。

所以值可以是所有数字，只有一个数字，只是标点符号，包括特殊字符，等等。只是没有空格。这与 HTML4 非常不同。

在 HTML 4 中，ID 值必须以字母开头，然后只能跟字母、数字、连字符、下划线、冒号和句点。

在 HTML5 中，这些是有效的：

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

请记住，在 ID 的值中使用数字、标点符号或特殊字符可能会在其他上下文（例如 CSS、JavaScript、正则表达式）中引起问题。

例如，以下 ID 在 HTML5 中有效：

...

但是，它在 CSS 中是无效的：

来自 CSS2.1 规范：

4.1.3 字符和大小写 在 CSS 中，标识符（包括选择器中的元素名称、类和 ID）只能包含字符 \[a-zA-Z0-9\] 和 ISO 10646 字符 U+00A0 及更高，加上连字符 ( -) 和下划线 (\_)；它们不能以数字、两个连字符或一个连字符后跟一个数字开头。

在大多数情况下，您可以在字符有限制或特殊含义的上下文中转义字符。

W3C 参考资料

HTML5

3.2.5.1 id 属性 id 属性指定其元素的唯一标识符（ID）。该值在元素的主子树中的所有 ID 中必须是唯一的，并且必须包含至少一个字符。该值不得包含任何空格字符。注意：对于 ID 可以采用的形式没有其他限制；特别是，ID 可以仅包含数字、以数字开头、以下划线开头、仅包含标点符号等。 3.2.5.7 类属性 如果指定，该属性的值必须是一组空格-表示元素所属的各种类的分隔标记。 HTML 元素分配给它的类由所有在 class 属性的值按空格分割时返回的类组成。 （重复项被忽略。）作者可以在类属性中使用的标记没有额外的限制，但鼓励作者使用描述内容性质的值，而不是描述所需内容呈现的值。

## 答6: ##

> huntsbot.com聚合了超过10+全球外包任务平台的外包需求，寻找外包任务与机会变的简单与高效。

严格来说应该匹配

[A-Za-z][-A-Za-z0-9_:.]*

但是 jQuery 似乎有冒号的问题，所以最好避免使用它们。

`或者：“所以最好避免使用 jquery”。 ;)`

`请参阅Álvaro González's answer。`

`@domsson 为什么我们应该避免使用 JQuery？请给我们更多信息好吗？`

## 答7: ##

> huntsbot.com全球7大洲远程工作机会，探索不一样的工作方式

HTML5：

它摆脱了对 id 属性 (see here) 的额外限制。剩下的唯一要求（除了在文档中是唯一的）是：

该值必须至少包含一个字符（不能为空）它不能包含任何空格字符。

HTML5 之前的：

ID 应匹配：

[A-Za-z][-A-Za-z0-9_:.]*

必须以 AZ 或 az 字符开头 可能包含 -（连字符）、\_（下划线）、:（冒号）和 . （时期）

但是应该避免使用 : 和 .，因为：

例如，一个 ID 可以标记为“ab:c”并在样式表中引用为 \#ab:c，但除了作为元素的 id 之外，它还可以表示 id “a”、类“b”、伪-选择器“c”。最好避免混淆并避免同时使用 . 和 :。

`在 HTML5 中，id 不接受 id="c365720c"`

`实际上 HTML5 可以。`

## 答8: ##

> 保持自己快人一步,享受全网独家提供的一站式外包任务、远程工作、创意产品订阅服务–huntsbot.com

实际上，许多网站使用以数字开头的 id 属性，即使这在技术上不是有效的 HTML。

HTML 5 draft specification 放宽了 id 和 name 属性的规则：它们现在只是不能包含空格的不透明字符串。

## 答9: ##

> huntsbot.com提供全网独家一站式外包任务、远程工作、创意产品分享与订阅服务!

连字符、下划线、句点、冒号、数字和字母都适用于 CSS 和 jQuery。以下应该有效，但它必须在整个页面中是唯一的，并且还必须以字母 \[A-Za-z\] 开头。

使用冒号和句点需要做更多的工作，但您可以按照以下示例进行操作。

Cake
    
        #i\.Really\.Like\.Cake {
        
            color: green;
        }
        #i\:Really\:Like\:Cake {
        
            color: blue;
        }
    
    
    
        Cake
        
    
        Cake
        
        
        
            $(function() {
        
                var testPeriod = $("#i\\.Really\\.Like\\.Cake");
                $("#testResultPeriod").html("found " + testPeriod.length + " result.");
    
                var testColon = $("#i\\:Really\\:Like\\:Cake");
                $("#testResultColon").html("found " + testColon.length + " result.");
            });

## 答10: ##

> 保持自己快人一步,享受全网独家提供的一站式外包任务、远程工作、创意产品订阅服务–huntsbot.com

HTML5

请记住，ID 必须是唯一的，即文档中不能有多个元素具有相同的 id 值。

HTML5 中关于 ID 内容的规则是（除了唯一性之外）：

This attribute's value must not contain white spaces. [...]
    Though this restriction has been lifted in HTML 5,
    an ID should start with a letter for compatibility.

这是关于 ID 的 W3 规范（来自 MDN）：

Any string, with the following restrictions:
    must be at least one character long
    must not contain any space characters
    Previous versions of HTML placed greater restrictions on the content of ID values
    (for example, they did not permit ID values to begin with a number).

更多信息：

W3 - 全局属性（id）

MDN 属性 (id)

## 答11: ##

> huntsbot.com聚合了超过10+全球外包任务平台的外包需求，寻找外包任务与机会变的简单与高效。

要引用带有句点的 id，您需要使用反斜杠。我不确定连字符或下划线是否相同。

例如：

HTML

############0218

CSS

#maintenance\.instrumentNumber{
        word-wrap:break-word;}

`连字符和下划线通常不需要转义。但是，例外情况是连字符出现在标识符的开头并且后跟另一个连字符（例如 \--abc）或数字（例如 \-123）。`

原文链接：[https://www.huntsbot.com/qa/la93/what-are-valid-values-for-the-id-attribute-in-html?lang=zh\_CN&from=csdn][https_www.huntsbot.com_qa_la93_what-are-valid-values-for-the-id-attribute-in-html_lang_zh_CN_from_csdn]

> huntsbot.com精选全球7大洲远程工作机会，涵盖各领域，帮助想要远程工作的数字游民们能更精准、更高效的找到对方。

[https_www.huntsbot.com_qa_la93_what-are-valid-values-for-the-id-attribute-in-html_lang_zh_CN_from_csdn]: https://www.huntsbot.com/qa/la93/what-are-valid-values-for-the-id-attribute-in-html?lang=zh_CN&from=csdn