为 HTML 元素创建 id 属性时，值有哪些规则？
<me> 标签与类 .name，没有人真正想要的！
对于 HTML 4，从技术上讲，答案是：
ID 和 NAME 标记必须以字母 ([A-Za-z]) 开头，后跟任意数量的字母、数字 ([0-9])、连字符 ("-")、下划线 ("_") , 冒号 (":") 和句点 (".")。
HTML 5 更为宽松，仅表示 id 必须至少包含一个字符，并且不得包含任何空格字符。
XHTML 中的 id 属性区分大小写。
作为一个纯粹的实际问题，您可能希望避免使用某些字符。句点、冒号和“#”在 CSS 选择器中具有特殊含义，因此您必须使用 backslash in CSS 或 selector string passed to 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，incorrectly treated id attribute values as case-sensitive。这意味着如果您在 HTML（小写“f”）中输入 id="firstName"，在 CSS（大写“F”）中输入 #FirstName { color: red }，那么有问题的浏览器将无法将元素的颜色设置为红色.在 2015 年 4 月进行本次编辑时，我希望您没有被要求支持 Netscape 6。将此视为历史脚注。
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' 伪选择器”。
坚持使用任何大小写、数字、下划线和连字符的 AZ。如上所述，请确保您的 ID 是唯一的。
这应该是您首先关心的问题。
jQuery 确实处理任何有效的 ID 名称。您只需要转义元字符（即点、分号、方括号...）。这就像说 JavaScript 有引号问题只是因为你不会写
var name = 'O'Hara';
Selectors in jQuery API (see bottom note)
HTML5：ID 和类属性的允许值
从 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 规范：
4.1.3 字符和大小写 在 CSS 中，标识符（包括选择器中的元素名称、类和 ID）只能包含字符 [a-zA-Z0-9] 和 ISO 10646 字符 U+00A0 及更高，加上连字符 ( -) 和下划线 (_)；它们不能以数字、两个连字符或一个连字符后跟一个数字开头。
在大多数情况下，您可以在字符有限制或特殊含义的上下文中转义字符。
W3C 参考资料
HTML5
3.2.5.1 id 属性 id 属性指定其元素的唯一标识符（ID）。该值在元素的主子树中的所有 ID 中必须是唯一的，并且必须包含至少一个字符。该值不得包含任何空格字符。注意：对于 ID 可以采用的形式没有其他限制；特别是，ID 可以仅包含数字、以数字开头、以下划线开头、仅包含标点符号等。 3.2.5.7 类属性 如果指定，该属性的值必须是一组空格-表示元素所属的各种类的分隔标记。 HTML 元素分配给它的类由所有在 class 属性的值按空格分割时返回的类组成。 （重复项被忽略。）作者可以在类属性中使用的标记没有额外的限制，但鼓励作者使用描述内容性质的值，而不是描述所需内容呈现的值。
HTML5：
它摆脱了对 id 属性 (see here) 的额外限制。剩下的唯一要求（除了在文档中是唯一的）是：
该值必须至少包含一个字符（不能为空）它不能包含任何空格字符。
HTML5 之前的：
ID 应匹配：
[A-Za-z][-A-Za-z0-9_:.]*
必须以 AZ 或 az 字符开头 可能包含 -（连字符）、_（下划线）、:（冒号）和 . （时期）
但是应该避免使用 : 和 .，因为：
例如，一个 ID 可以标记为“ab:c”并在样式表中引用为 #ab:c，但除了作为元素的 id 之外，它还可以表示 id “a”、类“b”、伪-选择器“c”。最好避免混淆并避免同时使用 . 和 :。
id="c365720c"
实际上，许多网站使用以数字开头的 id 属性，即使这在技术上不是有效的 HTML。
HTML 5 draft specification 放宽了 id 和 name 属性的规则：它们现在只是不能包含空格的不透明字符串。
连字符、下划线、句点、冒号、数字和字母都适用于 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 的 W3 规范（来自 MDN）：
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 属性 (id)
要引用带有句点的 id，您需要使用反斜杠。我不确定连字符或下划线是否相同。
例如：
HTML
<div id="maintenance.instrumentNumber">############0218</div>
CSS
#maintenance\.instrumentNumber{word-wrap:break-word;}
\--abc）或数字（例如 \-123）。
从 HTML 4 规范...
ID 和 NAME 标记必须以字母 ([A-Za-z]) 开头，后跟任意数量的字母、数字 ([0-9])、连字符 ("-")、下划线 ("_" )、冒号 (":") 和句点 (".")。
此外，永远不要忘记 ID 是唯一的。一旦使用，ID 值可能不会再次出现在文档中的任何位置。
您可能有许多 ID，但都必须具有唯一值。
另一方面，有类元素。就像 ID 一样，它可以出现多次，但值可能会被反复使用。
元素的唯一标识符。
文档中不能有多个元素具有相同的 id 值。
任何字符串，具有以下限制：
长度必须至少为一个字符 不得包含任何空格字符： U+0020 SPACE U+0009 CHARACTER TABULATION (tab) U+000A LINE FEED (LF) U+000C FORM FEED (FF) U+000D CARRIAGE RETURN (CR)
使用 ASCII letters and digits, '_', '-' and '.' 以外的字符可能会导致兼容性问题，因为 HTML 4 中不允许使用这些字符。尽管在 HTML 5 中取消了此限制，但为了兼容性，ID 应以字母开头。
看起来，尽管冒号 (:) 和句点 (.) 在 HTML 规范中是有效的，但它们在 CSS 中作为 id 选择器是无效的，因此如果您打算将它们用于此目的，最好避免使用它们。
ID 最适合命名布局的一部分，因此不应为 ID 提供相同的名称，并且类 ID 允许使用字母数字和特殊字符，但应避免使用 # : 。 * ！不允许符号空格 不以数字或连字符开头，后跟数字区分大小写 使用 ID 选择器比使用类选择器更快 使用连字符“-”（也可以使用下划线“_”，但对 SEO 不利）对于长 CSS 类或 Id 规则名称 如果规则将 ID 选择器作为其键选择器，则不要将标记名称添加到规则中。由于 ID 是唯一的，添加标签名称会不必要地减慢匹配过程。在 HTML5 中，id 属性可以用于任何 HTML 元素，而在 HTML 4.01 中，id 属性不能用于：