协慌网

登录 贡献 社区

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

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

答案

对于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 属性值视为区分大小写 。这意味着如果您在 CSS(小写'f')和#FirstName { color: red }中输入了 CSS id="firstName" '(大写'F'),那么这个错误的浏览器就会失败将元素的颜色设置为红色。在 2015 年 4 月的编辑时,我希望您不会被要求支持 Netscape 6. 请将此视为历史脚注。

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 是唯一的。

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