为HTML元素创建id属性时，该值有哪些规则？
当前回答
任何字母数字值“-”和“_”都是有效的。但是，您应该以A-Z或A-Z之间的任何字符开始id名称。
其他回答
此外，永远不要忘记ID是唯一的。一旦使用，ID值可能不会再次出现在文档中的任何位置。
您可能有许多ID，但所有ID都必须具有唯一的值。
另一方面，还有class元素。就像ID一样，它可以出现多次，但值可能会被反复使用。
从技术上讲，可以在id/name属性中使用冒号和句点，但我强烈建议避免两者。
在CSS（以及jQuery等几个JavaScript库）中，句点和冒号都有特殊含义，如果不小心就会遇到问题。句点是类选择器，冒号是伪选择器（例如，当鼠标悬停在元素上时，元素的“：hover”）。
如果给元素id为“my.ccool:thing”，则CSS选择器将如下所示：
#my.cool:thing { ... /* some rules */ ... }
也就是说，在CSS中，“id为‘my’的元素、‘cool’类和‘thing’伪选择器”。
任何大小写、数字、下划线和连字符都要使用A-Z。如上所述，确保您的ID是唯一的。
这应该是你最关心的问题。
对于HTML 4，技术上的答案是：
ID和NAME标记必须以字母（[a-Za-z]）开头，后面可以是任意数量的字母、数字（[0-9]）、连字符（“-”）、下划线（“_”）、冒号（“：”）和句点（“.”）。
HTML5甚至更为宽松，只表示id必须至少包含一个字符，并且不能包含任何空格字符。
在XHTML中，id属性区分大小写。
作为一个纯粹的实际问题，您可能需要避免某些字符。句点、冒号和“#”在CSS选择器中具有特殊含义，因此您必须在CSS中使用反斜杠或在传递给jQuery的选择器字符串中使用双反斜杠来转义这些字符。想想在你疯狂地使用id中的句点和冒号之前，你需要多长时间在样式表或代码中转义一个字符。
例如，HTML声明<div id=“first.name”></div>是有效的。您可以在CSS中将该元素选择为#first\.name，并在jQuery中选择为：$（'#first\\name'）。但是如果您忘记了反斜杠$（'#first.name'），您将拥有一个完全有效的选择器来查找一个id优先且具有类名的元素。这是一个容易忽视的错误。从长远来看，选择id名（连字符而不是句点）可能会更快乐。
通过严格遵守命名约定，可以简化开发任务。例如，如果您将自己完全限制为小写字符，并且始终使用连字符或下划线分隔单词（但不能同时使用连字符和下划线，请选择其中一个，不要使用另一个），那么您就有了一个易于记忆的模式。你永远不会怀疑“是firstName还是firstName？”，因为你永远知道你应该输入first_name。更喜欢驼色？然后限制自己，不要使用连字符或下划线，并且始终对第一个字符使用大写或小写，不要混用它们。
现在一个非常模糊的问题是，至少有一个浏览器Netscape 6错误地将id属性值视为区分大小写。这意味着，如果您在HTML中键入id=“firstName”（小写'f'），在CSS中键入#firstName｛color:red｝（大写'f'），则错误浏览器将无法将元素的颜色设置为红色。在2015年4月进行编辑时，我希望您没有被要求支持Netscape 6。将其视为历史脚注。
连字符、下划线、句点、冒号、数字和字母都适用于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值，这会导致CSS和JavaScript出现问题。
