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

为 HTML 元素创建id属性时,该值有哪些规则?

答案

对于HTML 4 ,技术上的答案是:

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

HTML 5更为宽容,只说一个 id 必须至少包含一个字符,并且不得包含任何空格字符。

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

从纯粹的实践出发,您可能要避免使用某些字符。在 CSS 选择器中,句号,冒号和 '#' 具有特殊含义,因此您必须在 CSS 中使用反斜杠或在传递给 jQuery选择器字符串中使用双反斜杠来转义那些字符。想一想,在迷上句号和 ID 中的冒号之前,必须多久在样式表或代码中转义一个字符。

例如,HTML 声明<div id="first.name"></div>是有效的。您可以在 CSS 中选择该元素作为#first\.name ,在 jQuery 中选择该元素: $('#first\\.name').但是,如果你忘记反斜杠, $('#first.name')你将有一个完全有效的选择寻找与 ID 元素first ,并且还具有类name 。这是一个容易忽略的错误。从长远来看,您可能会更快乐,而是选择 id first-name (连字符而不是句点)。

您可以通过严格遵守命名约定来简化开发任务。例如,如果您将自己完全限制为小写字母,并且始终使用连字符或下划线来分隔单词(但不能同时使用连字符或下划线来分隔单词),则您将拥有一种易于记忆的模式。您将永远不会怀疑 “是firstName还是FirstName ?” 因为您将永远知道应该键入first_name 。喜欢骆驼案吗?然后限制自己,不要使用连字符或下划线,并且始终对第一个字符使用大写或小写,请勿混用。


现在非常模糊的问题是,至少一个浏览器 Netscape 6 错误地将 id 属性值视为区分大小写 。这意味着,如果您在 HTML 中输入id="firstName" (小写字母'f'),而在 CSS 中#FirstName { color: red } (大写字母'F'),则该多虫浏览器将无法将元素的颜色设置为红色。在进行此编辑(2015 年 4 月)时,希望您不会被要求支持 Netscape6。请考虑一下这是一个历史脚注。

根据HTML 4 规范

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

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

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

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

如果为元素提供 id 为 “my.cool:thing”,则 CSS 选择器将如下所示:

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

这实际上是在讲 CSS 的 “id 为'my','cool'类和'thing'伪选择器的元素”。

不论大小写,数字,下划线和连字符,都应遵守 AZ。如上所述,请确保您的 ID 是唯一的。

那应该是您的首要考虑。

jQuery 处理任何有效的 ID 名称。您只需要转义元字符(即点,分号,方括号...)。就像说 JavaScript 引号有问题只是因为您不能编写

var name = 'O'Hara';

jQuery API 中的选择器(请参阅底部注释)

严格应该匹配

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

但是 jquery 似乎在冒号方面存在问题,因此最好避免使用冒号。

HTML5:

摆脱了对 id 属性的其他限制, 请参见此处 。剩下的唯一要求(除了在文档中是唯一的)是:

  1. 该值必须包含至少一个字符(不能为空)
  2. 它不能包含任何空格字符。

HTML5 之前的版本:

ID 应匹配:

[A-Za-z][-A-Za-z0-9_:.]*
  1. 必须以 AZ 或 az 字符开头
  2. 可能包含- (连字符), _ (下划线), :冒号)和. (期)

但应该避免:.因为:

例如,一个 ID 可以标记为 “ab:c”,并在样式表中称为 #ab:c,但作为元素的 ID,也可能意味着 id 为 “a”,类为 “b”,伪选择器 “c”。最好避免混乱,并远离使用。和:总共。

HTML5:ID 和类属性的允许值

从 HTML5 开始,对 ID 值的唯一限制是:

  1. 在文档中必须唯一
  2. 不得包含任何空格字符
  3. 必须至少包含一个字符

类似的规则适用于类(当然,唯一性除外)。

因此,值可以是全数字,仅一位数字,标点符号,包括特殊字符(无论如何)。只是没有空格。这与 HTML4 有很大的不同。

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

在 HTML5 中,这些是有效的:

<div id="999"> ... </div>
<div id="#%LV-||"> ... </div>
<div id="____V"> ... </div>
<div id="⌘⌥"> ... </div>
<div id="♥"> ... </div>
<div id="{}"> ... </div>
<div id="©"> ... </div>
<div id="♤₩¤☆€~¥"> ... </div>

请记住,在 ID 的值中使用数字,标点符号或特殊字符可能会在其他情况下(例如 CSS,JavaScript,regex)引起麻烦。

例如,以下 ID 在 HTML5 中有效:

<div id="9lions"> ... </div>

但是,在 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 class属性

如果指定了属性,则该属性必须具有一个值,该值是一组用空格分隔的标记,代表该元素所属的各种类。

HTML 元素分配给它的类包括当 class 属性的值在空格上分割时返回的所有类。 (重复项将被忽略。)

作者可以在 class 属性中使用的令牌没有其他限制,但是鼓励作者使用描述内容性质的值,而不是描述内容期望呈现的值。

实际上,尽管从技术上讲这不是有效的 HTML,但许多站点都使用以数字开头的id属性。

HTML 5 规范草案放宽了idname属性的规则:它们现在只是不透明的字符串,不能包含空格。

连字符,下划线,句点,冒号,数字和字母都可与 CSS 和 JQuery 一起使用。以下内容应该可以使用,但在整个页面中必须是唯一的,并且必须以字母 [A-Za-z] 开头。

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

<html>
<head>
<title>Cake</title>
<style type="text/css">
    #i\.Really\.Like\.Cake {
        color: green;
    }
    #i\:Really\:Like\:Cake {
        color: blue;
    }
</style>
</head>
<body>
    <div id="i.Really.Like.Cake">Cake</div>
    <div id="testResultPeriod"></div>

    <div id="i:Really:Like:Cake">Cake</div>
    <div id="testResultColon"></div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(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.");
        });
    </script>
</body>
</html>

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(frnn MDN)的W3规范:

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