一尘不染

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

javascript

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


阅读 228

收藏
2022-02-10

共1个答案

一尘不染

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

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

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

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

作为一个纯粹的实际问题,您可能希望避免使用某些字符。句点、冒号和“#”在 CSS 选择器中具有特殊含义,因此您必须使用CSS 中的反斜杠或传递给 jQuery的选择器字符串中的双反斜杠来转义这些字符。想想在您对 id 中的句点和冒号发疯之前,您必须多久在样式表或代码中转义一个字符。

例如,HTML 声明<div id="first.name"></div>是有效的。#first\.name您可以像这样在 CSS 和 jQuery中选择该元素:$('#first\\.name').但是如果您忘记了反斜杠,$('#first.name')您将有一个完全有效的选择器来查找具有 idfirst并且还具有 class的元素name。这是一个容易被忽视的错误。从长远来看,您可能会更高兴选择 id first-name(连字符而不是句点),而不是。

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


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

2022-02-10