在创建时 id
HTML元素的属性,值的规则是什么?
在创建时 id
HTML元素的属性,值的规则是什么?
对于 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.请将此视为历史脚注。
来自 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'伪选择器'的元素。
坚持任何案例,数字,下划线和连字符的A-Z。如上所述,确保您的ID是唯一的。
这应该是你的第一个担忧。
jQuery的 不 处理任何有效的ID名称。你只需要转义元字符(即点,分号,方括号......)。这就像是说JavaScript只引用了引号问题,因为你无法写
var name = 'O'Hara';
严格来说应该匹配
[A-Za-z][-A-Za-z0-9_:.]*
但是jquery似乎对冒号有问题所以最好避免它们。
摆脱了对id属性的额外限制 看这里。剩下的唯一要求(除了在文档中是唯一的)是:
ID应匹配:
[A-Za-z][-A-Za-z0-9_:.]*
-
(连字符), _
(下划线), :
(冒号)和 .
(期)但是应该避免 :
和 .
东阳:
例如,ID可以标记为“ab:c”并在样式表中引用为#ab:c但是作为元素的id,它可以表示id“a”,类“b”,伪选择器“c”。最好避免混淆,远离使用。并且:完全。
从HTML5开始,对ID值的唯一限制是:
类似的规则适用于类(当然,除了唯一性)。
所以值可以是所有数字,只有一位数,只是标点字符,包括特殊字符,等等。只是没有空格。这与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规范:
在CSS中, 身份标识 (包括元素名称,类和ID) 选择器)只能包含字符[a-zA-Z0-9]和ISO 10646 字符U + 00A0和更高,加上连字符( - )和下划线 (_); 它们不能以数字,两个连字符或连字符开头 接着是一个数字。
在大多数情况下,您可以在具有限制或特殊含义的上下文中转义字符。
W3C参考文献
HTML5
该
id
attribute指定其元素的唯一标识符(ID)。该值必须在元素主页中的所有ID中唯一 子树,必须包含至少一个字符。价值不能 包含任何空格字符。
注意:ID可以采用何种形式没有其他限制;在 特别是,ID可以只包含数字,以数字开头,开始 带下划线,仅包括标点符号等。
如果指定了该属性,则该属性必须具有一组值 空格分隔的标记,表示各种类 元素属于。
HTML元素分配给它的类包含所有类 分割class属性的值时返回的类 空间。 (忽略重复项。)
作者可以使用的令牌没有其他限制 class属性,但鼓励作者使用值 描述内容的本质,而不是描述的值 期望的内容呈现。