it-swarm.cn

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

为HTML元素创建id属性时,值的规则是什么?

1854
Mr Shark

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

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

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

Id属性在 _ xhtml _ 中区分大小写。

作为一个纯粹的实际问题,您可能希望避免使用某些字符。句点,冒号和'#'在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(小写'f')和id="firstName"中输入了#FirstName { color: red }(大写'F'),那么该错误的浏览器将无法将元素的颜色设置为红色。在2015年4月的编辑时,我希望您不会被要求支持Netscape 6.请将此视为历史脚注。

1584
dgvid

来自 HTML 4规范

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

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

211
Peter Hilton

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

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

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

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

这真的在说,“CSS中有一个id为'my'的元素,一个'cool'和'thing'伪选择器'。

坚持任何案例,数字,下划线和连字符的A-Z。如上所述,确保您的ID是唯一的。

那应该是你的第一个担忧。

145
Michael Thompson

jQuery does 处理任何有效的ID名称。你只需要逃避元字符(即点,分号,方括号......)。这就像是说JavaScript只引用了引号问题,因为你无法写

var name = 'O'Hara';

jQuery API中的选择器(参见下注)

63
Álvaro González

严格来说应该匹配

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

但是jquery似乎对冒号有问题所以最好避免它们。

60
Mr Shark

HTML5:

摆脱了id属性的附加限制 见这里 。剩下的唯一要求(除了在文档中是唯一的)是:

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

PRE-HTML5:

ID应匹配:

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

但是应该避免:.因为:

例如,ID可以标记为“ab:c”并在样式表中引用为#ab:c但是作为元素的id,它可以表示id“a”,类“b”,伪选择器“c”。最好避免混淆,远离使用。并且:完全。

52
Zaheer Ahmed

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,正则表达式)。

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

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

然而,它在CSS中无效:/

从CSS2.1规范:

4.1.3字符和大小写

在CSS中,identifiers(包括选择器中的元素名称,类和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属性的值时返回的所有类。 (忽略重复项。)

作者可以在类属性中使用的令牌没有其他限制,但鼓励作者使用描述内容性质的值,而不是描述内容所需表示的值。

47
Michael_B

在实践中,许多站点使用以数字开头的id属性,即使这在技术上是无效的HTML。

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

32
pdc

连字符,下划线,句点,冒号,数字和字母都可以与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>
29
blacksun1

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 spec(从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).

更多信息:

23
Sergio

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

<div id="maintenance.instrumentNumber">############0218</div>

CSS

#maintenance\.instrumentNumber{Word-wrap:break-Word;}
17
Anthony

此外,永远不要忘记ID是唯一的。使用后,ID值可能不会再次出现在文档中的任何位置。

您可能拥有许多ID,但所有ID都必须具有唯一值。

另一方面,有class-element。就像ID一样,它可以出现很多次,但是这个值可能会被反复使用。

14
Vordreller

来自HTML 4规范......

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

编辑:噢哦!再次击败按钮!

14
Steve Morgan

元素的唯一标识符。

文档中不得有多个具有相同id值的元素。

任何字符串,具有以下限制:

  1. 必须至少有一个字符长
  2. 不得包含任何空格字符:

    • U + 0020 SPACE
    • U + 0009字符制表(标签)
    • U + 000A LINE FEED(LF)
    • U + 000C FORM FEED(FF)
    • U + 000D运输返回(CR)

使用除ASCII letters and digits, '_', '-' and '.'之外的字符可能会导致兼容性问题,因为HTML 4中不允许这样做。虽然这个限制已在HTML 5中解除,但ID应以字母开头以便兼容。

11
Bhavin Solanki

虽然冒号(:)和句点(。)在HTML规范中有效,但它们在 _ css _ 中的id选择器无效,因此如果您打算将它们用于此目的,则最好避免使用冒号。

9
lstg

for HTML5

该值必须在元素的主子树中的所有ID中唯一,并且必须至少包含一个字符。该值不得包含任何空格字符。

至少一个字符,没有空格。

这为有效的用例打开了大门,例如使用重音字符。它还为我们提供了更多的弹药来射击自己,因为你现在可以使用会导致CSS和JavaScript问题的id值,除非你非常小心。

8
Kanishka Panamaldeniya

任何 字母数值 和“ - ”和“ _ ”有效。但是,你应该 A-Z a-z 之间的任何字符开始id名称

7
Tazwar Utshas
  1. ID最适合命名布局的一部分,因此不应为ID和类指定相同的名称
  2. ID允许使用字母数字和特殊字符
  3. 但避免使用# : . * !符号
  4. 不允许空格
  5. 不是以数字或连字符后跟数字开头的
  6. 区分大小写
  7. 使用ID选择器比使用类选择器更快
  8. 对于长CSS类或Id规则名称,使用连字符“ - ”(下划线“_”也可以使用但不能用于seo)
  9. 如果规则具有ID选择器作为其键选择器,请不要将标记名称添加到规则中。由于ID是唯一的,因此添加标记名称会不必要地减慢匹配过程。
  10. 在HTML5中,id属性可用于任何HTML元素,而在HTML 4.01中,id属性不能用于:<base>, <head>, <html>, <meta>, <param>, <script>, <style>, and <title>.
7

没有空格,必须至少从a到z和0到9的char开头。

5
Wembo Mulumba