id为HTML元素创建属性时，该值有哪些规则？
HTML中id属性的有效值是什么？
第1491篇《HTML中id属性的有效值是什么？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点
共16个回答
没有空格，必须至少从a到z以及0到9之间的一个字符开头。
任何字母数字值以及“ - ”和“ _ ”均有效。但是，您应该以AZ或az之间的任何字符开头id名称。
在HTML中
ID应该以{AZ}或{az} 开头，您可以添加数字，句点，连字符，下划线和冒号。
例如：
<span id="testID2"></span>
<span id="test-ID2"></span>
<span id="test_ID2"></span>
<span id="test:ID2"></span>
<span id="test.ID2"></span>
但是，即使您可以使用冒号（:)或period（。）来创建ID，对于CSS来说，也很难将这些ID用作选择器。主要是当您想使用伪元素（：before，：after）时。
同样在JS中，很难选择这些ID。因此，您应该使用前四个ID作为许多开发人员的首选，如果有必要，还可以使用后两个ID。
从ES2015开始，如果文档字符集设置为UTF8，我们几乎也可以将所有Unicode字符用作ID。
在这里测试：https : //mothereff.in/js-variables
了解更多信息：https : //mathiasbynens.be/notes/javascript-identifiers-es6
在ES2015中，标识符必须以$，_或具有Unicode派生的核心属性ID_Start的任何符号开头。
标识符的其余部分可以包含$，_，U + 200C零宽度非连接符，U + 200D零宽度连接符或具有Unicode派生核心属性ID_Continue的任何符号。
const target = document.querySelector("div").id
console.log(
target
)
document.getElementById(target).style.backgroundColor = "black"div {
border: 1px black solid;
width: 100%;
height: 200px
}<div id="H̹̙̦̮͉̩̗̗ͧ̇̏̊̾Eͨ͆͒̆ͮ̃͏̷̮̣̫̤̣Cͯ̂͐͏̨̛͔̦̟͈̻O̜͎͍͙͚̬̝̣̽ͮ͐͗̀ͤ̍̀͢M̴̡̲̭͍͇̼̟̯̦̉̒͠Ḛ̛̙̞̪̗ͥͤͩ̾͑̔͐ͅṮ̴̷̷̗̼͍̿̿̓̽͐H̙̙̔̄͜">- ID最适合命名布局的某些部分，因此ID和类的名称不应相同
- ID允许使用字母数字和特殊字符
- 但避免使用
# : . * !符号 - 不允许有空格
- 不是以数字或连字符开头的数字
- 区分大小写
- 使用ID选择器比使用类选择器快
- 对于长CSS类或ID规则名称，请使用连字符“-”（下划线“ _”也可以但对seo不利）
- 如果规则将ID选择器作为其键选择器，请不要将标签名称添加到规则中。由于ID是唯一的，因此添加标签名称会不必要地减慢匹配过程。
- 在HTML5中，可以在任何HTML元素上使用id属性，在HTML 4.01中，不能将id属性用于：
<base>, <head>, <html>, <meta>, <param>, <script>, <style>, and <title>.
对于 HTML5
该值在元素的主子树中的所有ID中必须是唯一的，并且必须包含至少一个字符。该值不得包含任何空格字符。
至少一个字符，没有空格。
这为诸如用重音符号的有效用例打开了大门。这也给了我们更多弹药，因为您现在可以使用id值，除非您非常小心，否则它们会导致CSS和JavaScript出现问题。
看起来，尽管冒号（:)和句点（。）在HTML规范中有效，但它们在CSS中作为id选择器无效，因此，如果打算将它们用作此目的，最好避免使用。
另外，请不要忘记ID是唯一的。使用后，ID值可能不会再出现在文档中的任何位置。
您可能有许多ID，但是所有ID都必须具有唯一值。
另一方面，有类元素。就像ID一样，它可以出现很多次，但是该值可以反复使用。
从HTML 4规范...
ID和NAME令牌必须以字母（[A-Za-z]）开头，然后可以跟任意数量的字母，数字（[0-9]），连字符（“-”），下划线（“ _”） ，冒号（“：”）和句点（“。”）。
编辑：天哪！再次被殴打！
连字符，下划线，句点，冒号，数字和字母都可与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>
要引用带有句点的ID，您需要使用反斜杠。不确定连字符或下划线是否相同。例如：HTML
<div id="maintenance.instrumentNumber">############0218</div>
的CSS
#maintenance\.instrumentNumber{word-wrap:break-word;}
实际上，许多站点使用id以数字开头的属性，即使从技术上讲这不是有效的HTML。
在HTML 5规范草案放宽了规则的id和name属性：他们现在不能包含空格只是不透明的字符串。
根据HTML 4规范：
ID和NAME令牌必须以字母（[A-Za-z]）开头，然后可以跟任意数量的字母，数字（[0-9]），连字符（“-”），下划线（“ _”） ，冒号（“：”）和句点（“。”）。
一个常见的错误是使用以数字开头的ID。
HTML5：
摆脱了对id属性的其他限制，请参见此处。剩下的唯一要求（除了在文档中是唯一的）是：
- 该值必须至少包含一个字符（不能为空）
- 它不能包含任何空格字符。
HTML5之前的版本：
ID应匹配：
[A-Za-z][-A-Za-z0-9_:.]*
- 必须以AZ或az字符开头
- 可能包含
-（连字符），_（下划线），:（冒号）和.（句号）
但应避免:并.因为：
例如，一个ID可以标记为“ ab：c”，并在样式表中以#ab：c引用，但作为元素的ID，也可能意味着id为“ a”，类为“ b”，伪选择器“ c”。最好避免混乱，并远离使用。和：总共。
严格应该匹配
[A-Za-z][-A-Za-z0-9_:.]*
但是jquery似乎在冒号方面存在问题，因此最好避免使用冒号。
相似问题
问题类别
值可以是：[az]，[AZ]，[0-9]，[* _：-]
它用于HTML5 ...
我们可以使用任何标签添加ID。