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


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


1710
2017-09-16 09:08


起源


这与HTML5和规范的早期版本不同。我在这里解释一下: mathiasbynens.be/notes/html5-id-class - Mathias Bynens
我注意到SharePoint 2010为Web部件中的动态生成的表和包含ID值的页面分配了这样的值 - {8CC7EF38-31D8-4786-8C20-7E6D56E49AE2} - {E60CE5E2-6E64-4350-A884-654B72DA5A53}在任何流行的浏览器中都没有出现这种情况。虽然通过JavaScript处理此类ID值很棘手 - mvark.blogspot.in/2012/07/... - mvark
HTML4和HTML5要求 ID 价值观非常不同。这是HTML5的快速完整概述 ID 规则: stackoverflow.com/a/31773673/3597276 - Michael_B
请注意:正如一些答案所说并使用一段时间(**.**) 使用jQuery会让你陷入相当多的麻烦,例如,使用 <input id="me.name" /> 接着 $("#me.name").val() 将导致jQuery寻找一个 <me> 标记与类 .name,没有人真的想要! - Sam Swift 웃
@SamSwift웃不,你只需要逃脱特殊角色 文档说。请检查一下 在线演示。 - Álvaro González


答案:


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

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

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

id属性区分大小写 XHTML

作为一个纯粹的实际问题,您可能希望避免使用某些字符。句点,冒号和'#'在CSS选择器中具有特殊含义,因此您必须使用a来转义这些字符 CSS中的反斜杠 或者是一个双反斜杠 选择器字符串传递给jQuery。考虑一下你在使用ID中的句点和冒号疯狂之前,你有多少经常逃脱样式表或代码中的字符。

例如,HTML声明 <div id="first.name"></div> 已验证。您可以在CSS中选择该元素 #first\.name 和jQuery一样: $('#first\\.name'). 但如果你忘了反斜杠, $('#first.name'),你将有一个完全有效的选择器来寻找一个带有id的元素 first 还有上课 name。这是一个容易被忽视的错误。从长远来看,选择身份证可能会更快乐 first-name (连字符而不是句号)。

您可以通过严格遵守命名约定来简化开发任务。例如,如果您将自己完全限制为小写字符并且始终使用连字符或下划线分隔单词(但不能同时使用两者,请选择一个而不使用另一个),那么您将拥有一个易于记忆的模式。你永远不会想到“是它 firstName 要么 FirstName?“因为你总是知道你应该输入 first_name。喜欢骆驼的情况?然后限制自己,没有连字符或下划线,并始终一致地使用大写或小写的第一个字符,不要混合它们。


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


1488
2017-09-17 01:42



请注意class和id属性 是 在XHTML中区分大小写,所有其他属性都不是。 Eric Meyer在我参加的CSS研讨会上提到了这一点。 - John Topley
另请注意,如果您尝试编写CSS规则以按ID定位元素,并且ID具有数字,则无法使用。坏消息! - Zack The Human
至于'。'或使用jQuery在ID中的':',请参阅jQuery 常问问题。它包含一个小功能,可以进行必要的转义。 - Wolfram
该 id 属性是[w3.org/TR/html4/struct/global.html#adef-id](case 在HTML4中敏感,并且必须以字母开头(限于A到Z)。另请注意,您的示例不应将元素的文本颜色设置为红色,因为您的CSS引用了具有类的元素 FirstName不是你的 id。 - Augustus Kling
奥古斯都指出的错误仍然存​​在。在你的例子中,如果你有 id="firstName" 在HTML 4或HTML 5和 #FirstName { color: red } 在CSS中, 只有一个有缺陷的浏览器会 将元素的颜色设置为红色。 - Stephen Booher


来自 HTML 4规范

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

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


195
2017-09-16 09:09



请注意,HTML5允许的内容远远多于HTML4 456bereastreet.com/archive/201011/... 和 w3.org/TR/html5/elements.html#the-id-attribute - Mr Shark
IE6不支持以下划线开头的ID,但无论如何它已经死了。 - rahmanisback
关于IE6的@rahmanisback,人们会这么认为,但我现在正在为一家银行完成一项提案,他们坚持要求供应商开发的任何应用程序都在IE6中运行。这适用于30,000名用户。哎呀,如果我们能让他们在所有桌面上更新他们的浏览器,它可能只会帮助失业率。 - Karl
@Karl我很遗憾听到这个消息。尽一切努力警告IE6安全问题。然而,IE7很快将成为新的IE6,所以是的,这个行业似乎是我们的命运来弥补MS过去的错误。 - rahmanisback
@MrShark第二个链接坏了; 新链接 - SWdV


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

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

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

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

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

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

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


130
2017-09-16 14:01



你可以使用冒号和句号 - 但是你需要使用双反斜杠来逃避它们,例如:$('#my \\。cool \\:thing')或转义变量:$('#'+ id.replace (/\。/,'\\。')。更换(/\:/,'\\:')) groups.google.com/group/jquery-en/browse_thread/thread/... - joeformd
为什么不是数字;为什么只是A-Z?只要您不以数字开头,数字是指引用与数字键入的数据相关的元素时非常有用的ID。 - cori
只是FYI,破折号 是 技术上连字符。减号不是ASCII字符集。 en.wikipedia.org/wiki/Plus_and_minus_signs#Character_codes - Tony
如果你有这些角色(., :)在ids中,并且无法删除它们(咳嗽...... Sharepoint),你可以在CSS中使用属性选择器而不是id选择器来解决这个问题,例如: [id='my.cool:thing']但是,这个选择器的特异性低于id选择器,这可能会导致其他问题。 - Faust
旧的,我知道,但更新为包括数字和连字符连字符 - Michael Thompson


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

var name = 'O'Hara';

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


60
2018-01-10 20:40





严格来说应该匹配

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

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


51
2017-09-16 09:11



不应该是[A-Za-z] [ - A-Za-z0-9 _:。] *,因为第一个字母后的所有内容都是可选的(“任何数字”包括零,“可能”暗示“不是”不得不”)。 - foo


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”。最好避免混淆,远离使用。并且:完全。


39
2018-01-18 07:09





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中, 身份标识 (包括元素名称,类和ID)   选择器)只能包含字符[a-zA-Z0-9]和ISO 10646   字符U + 00A0和更高,加上连字符( - )和下划线   (_); 它们不能以数字,两个连字符或连字符开头   接着是一个数字

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


W3C参考文献

HTML5

3.2.5.1 id   属性

id attribute指定其元素的唯一标识符(ID)。

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

注意:ID可以采用何种形式没有其他限制;在   特别是,ID可以只包含数字,以数字开头,开始   带下划线,仅包括标点符号等。

3.2.5.7 class   属性

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

HTML元素分配给它的类包含所有类   分割class属性的值时返回的类   空间。 (忽略重复项。)

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


33
2017-08-02 15:53