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

Question

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

原文由 Mr Shark 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

对于 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 属性值视为 case-sensitive 。这意味着，如果您在 HTML（小写“f”）中键入 id="firstName" #FirstName { color: red } 在 CSS（大写“F”）中键入 —，则该错误浏览器将会未能将元素的颜色设置为红色。在 2015 年 4 月进行此编辑时，我希望您没有被要求支持 Netscape 6。将此视为历史注脚。

原文由 dgvid 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

来自 HTML 4 规范：

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

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

原文由 Peter Hilton 发布，翻译遵循 CC BY-SA 2.5 许可协议