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

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

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

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

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

id属性在XHTML中区分大小写。

作为一个纯粹的实际问题,你可能想避免某些字符。 句点,冒号和'#'在CSSselect器中有特殊的含义,所以你必须使用CSS中的反斜线或传递给jQuery的select器string中的双反斜线来转义这些字符。 考虑一下,在疯狂地使用句号和冒号来疯狂之前,你多久必须逃离样式表或代码中的某个angular色。

例如,HTML声明<div id="first.name"></div>是有效的。 您可以在CSS中select这个元素作为#first\.name并在jQuery中如下所示: $('#first\\.name'). 但是,如果您忘记了反斜杠$('#first.name') ,您将拥有一个非常有效的select器,它将first查找带有id的元素,并且还具有类name 。 这是一个容易忽略的错误。 您可能会长期selectid first-name (连字符而非句点),而不是快乐。

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


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

从HTML 4规范 :

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

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

你可以在技术上使用冒号和时段id /名称属性,但我强烈build议避免这两个。

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

如果你给一个元素ID“my.cool:thing”,你的CSSselect器将如下所示:

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

这就是说,“在CSS中,id为'my'的元素,'cool'类和'thing'伪select器。

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

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

jQuery处理任何有效的ID名称。 你只需要转义元字符(即点,分号,方括号等)。 这就好像是说JavaScript只是因为你不能写而引起问题

 var name = 'O'Hara'; 

jQuery API中的select器(请参见底部说明)

严格来说,它应该匹配

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

但jquery似乎有冒号的问题,所以它可能会更好地避免它们。

HTML5:

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

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

PRE-HTML5:

ID应该匹配:

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

但应该避免:. 东阳:

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

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

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

HTML5:ID和类属性的允许值

从HTML5开始,ID的唯一限制是:

  1. 在文档中必须是唯一的
  2. 不得包含任何空格字符
  3. 必须包含至less一个字符

类似的规则适用于类(当然除了唯一性)。

所以值可以是全部数字,只有一个数字,只是标点符号,包括特殊字符,不pipe。 只是没有空白。 这与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,正则expression式)中造成麻烦。

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

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

但是,它在CSS中是无效的:

从CSS2.1规范:

4.1.3特征和案例

在CSS中, 标识符 (包括元素名称,类和select器中的ID)只能包含字符[a-zA-Z0-9]和ISO 10646字符U + 00A0及更高版本,连字符( – )和下划线_); 他们不能以数字,两个连字符或连字符后跟数字开头

在大多数情况下,您可以在有限制或具有特殊含义的环境中转义angular色。


W3C参考

HTML5

3.2.5.1 id属性

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

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

注意:身份证可以采取的forms没有其他限制; 特别是ID可以只包含数字,以数字开头,以下划线开头,只包含标点符号等。

3.2.5.7 class属性

该属性(如果指定)必须具有一个值,该值是一组空格分隔的标记,表示该元素所属的各个类。

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

对于作者可以在类属性中使用的标记没有额外的限制,但鼓励作者使用描述内容本质的值,而不是描述所需内容表示的值。

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

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

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

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

CSS

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

从HTML 4规范…

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

编辑:德哦! 再次击败button!

另外,不要忘记一个ID是唯一的。 一旦使用,ID值可能不会再出现在文档的任何地方。

你可能有很多ID,但都必须有一个独特的价值。

另一方面,还有类元素。 就像身份证一样,它可以出现很多次,但是价值可能会一遍又一遍地被使用。

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

HTML5

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

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

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

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

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

元素的唯一标识符。

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

任何string,具有以下限制:

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

    • U + 0020空间
    • U + 0009字符表(tab)
    • 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应该以一个字母开头来兼容。

没有空格,必须至less从a到z和0到9开始。

字母 – >帽子和小
数字 – > 0-9
特殊字符 – >':',' – ','_','。'

格式应该从“。”开始。 或字母表,然后是更多字母或数字的特殊字符。 id字段的值不能以'_'结尾。
而且,不允许使用空格(如果提供),则将其视为不同的值,对于id属性无效。

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