w3school - html语言教程




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

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(来自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 atribute( id

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


HTML5:

摆脱在这里看到的id属性的额外限制。 唯一的要求(除了在文件中是独一无二的)是:

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

PRE-HTML5:

ID应该匹配:

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

但应该避免:. 东阳:

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


  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>.


HTML5

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

至少有一个字符,不能有空格。

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


HTML 4规范

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

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


任何字母数字值和“ - ”和“ _ ”都是有效的。 但是,您应该使用AZaz之间的任何字符来启动id名称


元素的唯一标识符。

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

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

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

    • U + 0020 SPACE
    • U + 0009 CHARACTER TABULATION(标签)
    • U + 000A LINE FEED(LF)
    • U + 000C FORM FEED(FF)
    • U + 000D CARRIAGE RETURN(CR)

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


在HTML5中,id不能以数字开头,例如id- "1kid" ,它们不能有空格(id = "Some kind"


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

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


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

ID和名称标记必须以字母([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') ,那么您将拥有一个完美有效的选择器,它将first查找带有id的元素,并且还具有类name 。 这是一个容易忽略的错误。 相反,从长远来看,选择id first-name (连字符而非句点)可能会更快乐。

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

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


您可以在技术上使用冒号和句号在id / name属性中,但我强烈建议避免这两种情况。

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

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

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

这真的是说:“CSS中的ID为'my'的元素,'cool'类和'thing'伪选择器”。

坚持任何情况下的AZ,数字,下划线和连字符。 如上所述,确保您的ID是唯一的。

这应该是你首先关心的问题。


看起来,虽然冒号(:)和句点(。)在HTML规范中是有效的,但它们作为CSS id选择符是无效的,因此如果打算将它们用于该目的,可能最好避免使用它们。


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

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

CSS

#maintenance\.instrumentNumber{word-wrap:break-word;}




html