blocks|key|2969733|text|从HTML+4+specification|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2969734|2969735|+ID和名称令牌必须以字母(A-Za-z)开头，后面可以是任意数量的字母、数字(0-9)、连字符("-")、下划线("_")、冒号(":")和句点(".")。|blockquote|2969736|2969737|2969738|一个常见的错误是使用以数字开头的ID。|2969739|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3.org/TR/html4/types.html#type-id^0|1|K|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@$A|U|B|V|1|W]]|C|$]]|$1|D|3|-4|5|6|7|X|8|@]|9|@]|C|$]]|$1|E|3|F|5|G|7|Y|8|@]|9|@]|C|$]]|$1|H|3|-4|5|6|7|Z|8|@]|9|@]|C|$]]|$1|I|3|-4|5|6|7|10|8|@]|9|@]|C|$]]|$1|J|3|K|5|6|7|11|8|@]|9|@]|C|$]]|$1|L|3|-4|5|6|7|12|8|@]|9|@]|C|$]]]|M|$N|$5|O|P|Q|C|$R|S]]]]

<p>From the <a href="http://www.w3.org/TR/html4/types.html#type-id" rel="noreferrer">HTML 4 specification</a>:</p>

<blockquote>
  <p>ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").</p>
</blockquote>

<p>A common mistake is to use an ID that starts with a digit.</p>


blocks|key|5225025|text|严格地说，它应该匹配|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5225026|[A-Za-z][-A-Za-z0-9_:.]*|code-block|syntax|javascript|5225027|但是jQuery似乎对冒号有问题，所以最好避免使用冒号。|offset|length|5225028|entityMap|0|LINK|mutability|MUTABLE|url|https://en.wikipedia.org/wiki/JQuery^0|0|0|2|6|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>Strictly it should match</p>
<pre><code>[A-Za-z][-A-Za-z0-9_:.]*
</code></pre>
<p>But <a href="https://en.wikipedia.org/wiki/JQuery" rel="nofollow noreferrer">jQuery</a> seems to have problems with colons, so it might be better to avoid them.</p>


blocks|key|3814964|text|从HTML4规范中...|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3814965|ID和名称标记必须以字母(A-Za-z)开头，后面可以是任意数量的字母、数字(0-9)、连字符("-")、下划线("_")、冒号(":")和句点(".")。|3814966|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

<p>From the HTML 4 specification...</p>
<p>The ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens (&quot;-&quot;), underscores (&quot;_&quot;), colons (&quot;:&quot;), and periods (&quot;.&quot;).</p>


blocks|key|741353|text|在实践中，许多站点使用以数字开头的id属性，即使从技术上讲这不是有效的HTML.|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|741354|HTML+5+draft+specification放宽了id和name属性的规则:它们现在只是不透明的字符串，不能包含空格。|741355|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3.org/html/wg/html5/#id^0|H|2|0|T|2|W|4|0|Q|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@$9|X|A|Y|1|Z]]|E|$]]|$1|H|3|-4|5|6|7|10|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|O]]]]

<p>In practice many sites use <code>id</code> attributes starting with numbers, even though this is technically not valid HTML.</p>

<p>The <a href="http://www.w3.org/html/wg/html5/#id" rel="noreferrer">HTML 5 draft specification</a> loosens up the rules for the <code>id</code> and <code>name</code> attributes: they are now just opaque strings which cannot contain spaces.</p>


blocks|key|3815186|text|此外，不要忘记ID是唯一的。一旦使用，ID值可能不会再次出现在文档中的任何位置。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3815187|您可以有多个ID，但所有ID都必须具有唯一的值。|3815188|另一方面，还有class-element。就像ID一样，它可以出现很多次，但是这个值可能会被反复使用。|3815189|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

<p>Also, never forget that an ID is unique. Once used, the ID value may not appear again anywhere in the document.</p>

<p>You may have many ID's, but all must have a unique value.</p>

<p>On the other hand, there is the class-element. Just like ID, it can appear many times, but the value may be used over and over again.</p>


blocks|key|737584|text|从技术上讲，您可以在id/name属性中使用冒号和句点，但我强烈建议您避免两者都使用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|737585|在CSS+(以及像jQuery这样的几个JavaScript库)中，句点和冒号都有特殊的含义，如果不小心就会遇到问题。句点是类选择器，冒号是伪选择器(例如，当鼠标悬停在某个元素上时，":hover“表示该元素)。|737586|如果你给一个元素id为"my.cool:thing"，你的CSS选择器将如下所示：|737587|#my.cool:thing+{+...+/*+some+rules+*/+...+}|code-block|syntax|javascript|737588|这实际上是说，在CSS语言中，“id为'my‘的元素，一个'cool’类和'thing‘伪选择器”。|737589|任何大小写、数字、下划线和连字符都要使用A-Z。如上所述，请确保您的ids是唯一的。|737590|这应该是你首先关心的问题。|737591|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|U|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|V|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|W|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

<p>You can technically use colons and periods in id/name attributes, but I would strongly suggest avoiding both.</p>

<p>In CSS (and several JavaScript libraries like jQuery), both the period and the colon have special meaning and you will run into problems if you're not careful. Periods are class selectors and colons are pseudo-selectors (eg., ":hover" for an element when the mouse is over it).</p>

<p>If you give an element the id "my.cool:thing", your CSS selector will look like this:</p>

<pre><code>#my.cool:thing { ... /* some rules */ ... }
</code></pre>

<p>Which is really saying, "the element with an id of 'my', a class of 'cool' and the 'thing' pseudo-selector" in CSS-speak.</p>

<p>Stick to A-Z of any case, numbers, underscores and hyphens. And as said above, make sure your ids are unique.</p>

<p>That should be your first concern.</p>


blocks|key|3815366|text|对于HTML+4来说，从技术上讲，答案是：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3815367|3815368|+ID和名称令牌必须以字母(A-Za-z)开头，后面可以是任意数量的字母、数字(0-9)、连字符("-")、下划线("_")、冒号(":")和句点(".")。|blockquote|3815369|3815370|3815371|HTML+5甚至更加宽松，只要求id必须至少包含一个字符，并且不能包含任何空格字符。|3815372|id属性在XHTML中区分大小写。|3815373|作为一个纯粹的实际问题，您可能希望避免某些字符。句点、冒号和“#”在CSS选择器中有特殊的含义，所以你必须在selector+string+passed+to+jQuery中使用backslash+in+CSS或双反斜杠对这些字符进行转义。想一想，在您疯狂地使用ids中的句号和冒号之前，您必须在样式表或代码中转义字符的频率。|3815374|例如，HTML声明<div+id="first.name"></div>是有效的。您可以在CSS中选择该元素为#first\.name，在jQuery中选择为：$('#first\\.name').，但是如果您忘记了反斜杠$('#first.name')，那么您将有一个完美有效的选择器来查找id为first且具有name类的元素。这是一个很容易被忽视的bug。从长远来看，您可能会更高兴地选择id+first-name+(一个连字符，而不是句点)。|style|CODE|3815375|您可以通过严格遵守命名约定来简化开发任务。例如，如果您将自己完全限制为小写字符，并且总是使用连字符或下划线分隔单词(但不是两个都用，请选择其中一个，而不是使用另一个)，那么您就有了一个易于记忆的模式。你永远不会问“是firstName还是FirstName?”因为您将始终知道应该键入first_name。更喜欢驼色的箱子？然后限制自己，不要使用连字符或下划线，并且始终始终使用大写或小写作为第一个字符，不要混淆它们。|3815376|3815377|现在一个非常模糊的问题是，至少有一种浏览器，Netscape+6，incorrectly+treated+id+attribute+values+as+case-sensitive。这意味着如果你在超文本标记语言中输入了id="firstName"+(小写的'F')，在CSS中输入了#FirstName+{+color:+red+}+(大写的'f')，错误浏览器将无法将元素的颜色设置为红色。在2015年4月这篇编辑的时候，我希望你不是被要求支持Netscape+6，把这当作一个历史脚注。|3815378|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3.org/TR/html4/types.html#type-id|1|https://www.w3.org/TR/html5/dom.html#the-id-attribute|2|https://www.w3.org/TR/xhtml1/diffs.html#h-4.2|3|http://learn.jquery.com/using-jquery-core/faq/how-do-i-select-an-element-by-an-id-that-has-characters-used-in-css-notation/|4|http://www.w3.org/TR/CSS2/syndata.html#value-def-identifier|5|https://developer.mozilla.org/en-US/docs/Case_Sensitivity_in_class_and_id_Names^0|2|6|0|0|0|0|0|0|0|6|1|0|5|5|2|0|1I|W|3|2H|G|4|0|9|R|1J|C|28|J|33|G|45|5|4D|4|5K|A|0|30|9|3B|9|3Y|A|0|0|32|E|3Y|P|X|1L|5|0^^$0|@$1|2|3|4|5|6|7|1G|8|@]|9|@$A|1H|B|1I|1|1J]]|C|$]]|$1|D|3|-4|5|6|7|1K|8|@]|9|@]|C|$]]|$1|E|3|F|5|G|7|1L|8|@]|9|@]|C|$]]|$1|H|3|-4|5|6|7|1M|8|@]|9|@]|C|$]]|$1|I|3|-4|5|6|7|1N|8|@]|9|@]|C|$]]|$1|J|3|K|5|6|7|1O|8|@]|9|@$A|1P|B|1Q|1|1R]]|C|$]]|$1|L|3|M|5|6|7|1S|8|@]|9|@$A|1T|B|1U|1|1V]]|C|$]]|$1|N|3|O|5|6|7|1W|8|@]|9|@$A|1X|B|1Y|1|1Z]|$A|20|B|21|1|22]]|C|$]]|$1|P|3|Q|5|6|7|23|8|@$A|24|B|25|R|S]|$A|26|B|27|R|S]|$A|28|B|29|R|S]|$A|2A|B|2B|R|S]|$A|2C|B|2D|R|S]|$A|2E|B|2F|R|S]|$A|2G|B|2H|R|S]]|9|@]|C|$]]|$1|T|3|U|5|6|7|2I|8|@$A|2J|B|2K|R|S]|$A|2L|B|2M|R|S]|$A|2N|B|2O|R|S]]|9|@]|C|$]]|$1|V|3|-4|5|6|7|2P|8|@]|9|@]|C|$]]|$1|W|3|X|5|6|7|2Q|8|@$A|2R|B|2S|R|S]|$A|2T|B|2U|R|S]]|9|@$A|2V|B|2W|1|2X]]|C|$]]|$1|Y|3|-4|5|6|7|2Y|8|@]|9|@]|C|$]]]|Z|$10|$5|11|12|13|C|$14|15]]|16|$5|11|12|13|C|$14|17]]|18|$5|11|12|13|C|$14|19]]|1A|$5|11|12|13|C|$14|1B]]|1C|$5|11|12|13|C|$14|1D]]|1E|$5|11|12|13|C|$14|1F]]]]

<p>For <a href="http://www.w3.org/TR/html4/types.html#type-id" rel="noreferrer">HTML 4</a>, the answer is technically:</p>

<blockquote>
  <p>ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").</p>
</blockquote>

<p><a href="https://www.w3.org/TR/html5/dom.html#the-id-attribute" rel="noreferrer">HTML 5</a> is even more permissive, saying only that an id must contain at least one character and may not contain any space characters.</p>

<p>The id attribute is case sensitive in <a href="https://www.w3.org/TR/xhtml1/diffs.html#h-4.2" rel="noreferrer">XHTML</a>.</p>

<p>As a purely practical matter, you may want to avoid certain characters. Periods, colons and '#' have special meaning in CSS selectors, so you will have to escape those characters using a <a href="http://www.w3.org/TR/CSS2/syndata.html#value-def-identifier" rel="noreferrer">backslash in CSS</a> or a double backslash in a <a href="http://learn.jquery.com/using-jquery-core/faq/how-do-i-select-an-element-by-an-id-that-has-characters-used-in-css-notation/" rel="noreferrer">selector string passed to jQuery</a>. Think about how often you will have to escape a character in your stylesheets or code before you go crazy with periods and colons in ids.</p>

<p>For example, the HTML declaration <code>&lt;div id="first.name"&gt;&lt;/div&gt;</code> is valid. You can select that element in CSS as <code>#first\.name</code> and in jQuery like so: <code>$('#first\\.name').</code> But if you forget the backslash, <code>$('#first.name')</code>, you will have a perfectly valid selector looking for an element with id <code>first</code> and also having class <code>name</code>. This is a bug that is easy to overlook. You might be happier in the long run choosing the id <code>first-name</code> (a hyphen rather than a period), instead.</p>

<p>You can simplify your development tasks by strictly sticking to a naming convention. For example, if you limit yourself entirely to lower-case characters and always separate words with either hyphens or underscores (but not both, pick one and never use the other), then you have an easy-to-remember pattern. You will never wonder "was it <code>firstName</code> or <code>FirstName</code>?" because you will always know that you should type <code>first_name</code>. Prefer camel case? Then limit yourself to that, no hyphens or underscores, and always, consistently use either upper-case or lower-case for the first character, don't mix them.</p>

<hr>

<p>A now very obscure problem was that at least one browser, Netscape 6, <a href="https://developer.mozilla.org/en-US/docs/Case_Sensitivity_in_class_and_id_Names" rel="noreferrer">incorrectly treated id attribute values as case-sensitive</a>. That meant that if you had typed <code>id="firstName"</code> in your HTML (lower-case 'f') and <code>#FirstName { color: red }</code> in your CSS (upper-case 'F'), that buggy browser would have failed to set the element's color to red. At the time of this edit, April 2015, I hope you aren't being asked to support Netscape 6. Consider this a historical footnote.</p>


blocks|key|5225511|text|jQuery+不会处理任何有效的ID名称。您只需要转义元字符(即，点、分号、方括号...)。这就像是说JavaScript有一个引号问题仅仅是因为你不会写|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|5225512|var+name+=+'O'Hara';|code-block|syntax|javascript|5225513|Selectors+in+jQuery+API+(see+bottom+note)|5225514|entityMap|0|LINK|mutability|MUTABLE|url|http://docs.jquery.com/Selectors^0|7|2|0|0|0|15|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Y|8|@]|D|@$9|Z|A|10|1|11]]|E|$]]|$1|M|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

<p>jQuery <strong>does</strong> handle any valid ID name. You just need to escape metacharacters (i.e., dots, semicolons, square brackets...). It's like saying that JavaScript has a problem with quotes only because you can't write</p>

<pre><code>var name = 'O'Hara';
</code></pre>

<p><a href="http://docs.jquery.com/Selectors" rel="noreferrer">Selectors in jQuery API (see bottom note)</a></p>


blocks|key|5225562|text|看起来，虽然冒号(:)和句点(.)在HTML规范中是有效的，但在CSS中作为id选择符是无效的，所以如果您打算将它们用于此目的，最好避免使用它们。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|5225563|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3.org/TR/CSS21/syndata.html#value-def-identifier^0|W|3|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<p>It appears that, although colons (:) and periods (.) are valid in the HTML specification, they are invalid as id selectors in <a href="http://www.w3.org/TR/CSS21/syndata.html#value-def-identifier" rel="nofollow noreferrer">CSS</a>, so they are probably best avoided if you intend to use them for that purpose.</p>


blocks|key|5225624|text|连字符、下划线、句点、冒号、数字和字母都可以与CSS和jQuery一起使用。下面的代码应该可以，但它在整个页面中必须是唯一的，并且必须以字母A-Za-z开头。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5225625|使用冒号和句点需要做更多的工作，但您可以像下面的示例所示那样做。|5225626|<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+"+%2B+testPeriod.length+%2B+"+result.");

++++++++++++var+testColon+=+$("#i\\:Really\\:Like\\:Cake");
++++++++++++$("#testResultColon").html("found+"+%2B+testColon.length+%2B+"+result.");
++++++++});
++++</script>
</body>
</html>|code-block|syntax|javascript|5225627|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Hyphens, underscores, periods, colons, numbers and letters are all valid for use with CSS and jQuery. The following should work, but it must be unique throughout the page and also must start with a letter [A-Za-z].</p>
<p>Working with colons and periods needs a bit more work, but you can do it as the following example shows.</p>
<pre><code>&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Cake&lt;/title&gt;
&lt;style type=&quot;text/css&quot;&gt;
    #i\.Really\.Like\.Cake {
        color: green;
    }
    #i\:Really\:Like\:Cake {
        color: blue;
    }
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id=&quot;i.Really.Like.Cake&quot;&gt;Cake&lt;/div&gt;
    &lt;div id=&quot;testResultPeriod&quot;&gt;&lt;/div&gt;

    &lt;div id=&quot;i:Really:Like:Cake&quot;&gt;Cake&lt;/div&gt;
    &lt;div id=&quot;testResultColon&quot;&gt;&lt;/div&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js&quot;&gt;&lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot;&gt;
        $(function() {
            var testPeriod = $(&quot;#i\\.Really\\.Like\\.Cake&quot;);
            $(&quot;#testResultPeriod&quot;).html(&quot;found &quot; + testPeriod.length + &quot; result.&quot;);

            var testColon = $(&quot;#i\\:Really\\:Like\\:Cake&quot;);
            $(&quot;#testResultColon&quot;).html(&quot;found &quot; + testColon.length + &quot; result.&quot;);
        });
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>


blocks|key|3815636|text|字母表→大写和小写|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3815637|数字→0-9|3815638|特殊字符→':‘、'-’、'_‘、'.’|3815639|格式应以'.‘开头。或字母表，后跟更多字母表或数字中的任一特殊字符。id字段的值不能以'_‘结尾。|3815640|此外，不允许使用空格，如果提供了空格，它们将被视为不同的值，这对于id属性是无效的。|3815641|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|N|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|O|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|P|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|K|$]]

<p>alphabets → caps &amp; small</p>
<p>digits → 0-9</p>
<p>special characters → ':', '-', '_', '.'</p>
<p>The format should be either starting from '.' or an alphabet, followed by either of the special characters of more alphabets or numbers. The value of the id field must not end at an '_'.</p>
<p>Also, spaces are not allowed, if provided, they are treated as different values, which is not valid in case of the id attributes.</p>


blocks|key|3815759|text|HTML5：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3815760|它摆脱了对id属性(see+here)的额外限制。剩下的唯一要求(除了在文档中是唯一的)是：|offset|length|3815761|3815762|该值必须包含至少一个字符(不能为空)|ordered-list-item|3815763|它不能包含任何空格字符。|3815764|3815765|3815766|HTML5之前的版本：|3815767|ID应匹配：|3815768|[A-Za-z][-A-Za-z0-9_:.]*|code-block|syntax|javascript|3815769|3815770|必须以A-Z或a-z开头，并包含-+(连字符)、_+(下划线)、:+(冒号)和.+(句点)|style|CODE|3815771|3815772|但是我们应该避免使用:和.，因为：|3815773|例如，ID可以被标记为"a.b:c“，并在样式表中引用为#a.b:c，但除了是元素的id之外，它还可以表示id+"a"，类"b"，伪选择器"c”。最好避免混淆，并且完全避免使用.和:。|3815774|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3.org/TR/2011/WD-html5-20110525/elements.html#the-id-attribute^0|0|A|8|0|0|0|0|0|0|0|0|0|0|0|G|1|O|1|W|1|13|1|0|0|A|1|C|1|0|2G|1|2I|1|0^^$0|@$1|2|3|4|5|6|7|1E|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1F|8|@]|9|@$D|1G|E|1H|1|1I]]|A|$]]|$1|F|3|-4|5|6|7|1J|8|@]|9|@]|A|$]]|$1|G|3|H|5|I|7|1K|8|@]|9|@]|A|$]]|$1|J|3|K|5|I|7|1L|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|1M|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|1N|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|1O|8|@]|9|@]|A|$]]|$1|P|3|Q|5|6|7|1P|8|@]|9|@]|A|$]]|$1|R|3|S|5|T|7|1Q|8|@]|9|@]|A|$U|V]]|$1|W|3|-4|5|6|7|1R|8|@]|9|@]|A|$]]|$1|X|3|Y|5|I|7|1S|8|@$D|1T|E|1U|Z|10]|$D|1V|E|1W|Z|10]|$D|1X|E|1Y|Z|10]|$D|1Z|E|20|Z|10]]|9|@]|A|$]]|$1|11|3|-4|5|6|7|21|8|@]|9|@]|A|$]]|$1|12|3|13|5|6|7|22|8|@$D|23|E|24|Z|10]|$D|25|E|26|Z|10]]|9|@]|A|$]]|$1|14|3|15|5|6|7|27|8|@$D|28|E|29|Z|10]|$D|2A|E|2B|Z|10]]|9|@]|A|$]]|$1|16|3|-4|5|6|7|2C|8|@]|9|@]|A|$]]]|17|$18|$5|19|1A|1B|A|$1C|1D]]]]

<h2>HTML5:</h2>
<p>It gets rid of the additional restrictions on the <em>id</em> attribute (<a href="http://www.w3.org/TR/2011/WD-html5-20110525/elements.html#the-id-attribute" rel="nofollow noreferrer">see here</a>). The only requirements left (apart from being unique in the document) are:</p>
<ol>
<li>the value must contain at least one character (can’t be empty)</li>
<li>it can’t contain any space characters.</li>
</ol>
<hr />
<h2>Pre-HTML5:</h2>
<p>ID should match:</p>
<pre><code>[A-Za-z][-A-Za-z0-9_:.]*
</code></pre>
<ol>
<li>Must <em>start</em> with A-Z or a-z characters</li>
<li>May contain <code>-</code> (hyphen), <code>_</code> (underscore), <code>:</code> (colon) and <code>.</code> (period)</li>
</ol>
<p>But one should avoid <code>:</code> and <code>.</code> because:</p>
<p>For example, an ID could be labelled &quot;a.b:c&quot; and referenced in the style sheet as #a.b:c, but as well as being the id for the element, it could mean id &quot;a&quot;, class &quot;b&quot;, pseudo-selector &quot;c&quot;. It is best to avoid the confusion and stay away from using <code>.</code> and <code>:</code> altogether.</p>


blocks|key|737842|text|type|unstyled|depth|inlineStyleRanges|entityRanges|data|737843|+ID最适合命名布局的各个部分，因此您不应为ID和|ordered-list-item|737844|ID提供相同的名称。case+sensitive|737845|using+ID允许使用字母数字和特殊字符|737846|，但应避免使用#+:+.+*+!符号。不允许使用空格|offset|length|style|CODE|737847|不能以数字或连字符开头|737848|case|737849|ID选择器比使用class+sensitive|737850|using+ID选择器"-“更快(也可以使用下划线"_”，但这对SEO不好)对于长的CSS类或Id规则名称|737851|如果一个规则有一个ID选择器作为它的键选择器，请不要将标记名添加到规则中。由于id是唯一的，因此添加标记名会减慢匹配过程，因此id属性可用于任何needlessly.|737852|In元素，而在HTML4.01中，id属性不能与：<base>,+<head>,+<html>,+<meta>,+<param>,+<script>,+<style>,+and+<title>.|737853|一起使用|737854|entityMap|0|LINK|mutability|MUTABLE|url|https://en.wikipedia.org/wiki/Search_engine_optimization^0|0|0|0|0|7|9|0|0|0|0|W|3|0|0|0|P|20|0|0^^$0|@$1|2|3|-4|4|5|6|19|7|@]|8|@]|9|$]]|$1|A|3|B|4|C|6|1A|7|@]|8|@]|9|$]]|$1|D|3|E|4|C|6|1B|7|@]|8|@]|9|$]]|$1|F|3|G|4|C|6|1C|7|@]|8|@]|9|$]]|$1|H|3|I|4|C|6|1D|7|@$J|1E|K|1F|L|M]]|8|@]|9|$]]|$1|N|3|O|4|C|6|1G|7|@]|8|@]|9|$]]|$1|P|3|Q|4|C|6|1H|7|@]|8|@]|9|$]]|$1|R|3|S|4|5|6|1I|7|@]|8|@]|9|$]]|$1|T|3|U|4|C|6|1J|7|@]|8|@$J|1K|K|1L|1|1M]]|9|$]]|$1|V|3|W|4|C|6|1N|7|@]|8|@]|9|$]]|$1|X|3|Y|4|C|6|1O|7|@$J|1P|K|1Q|L|M]]|8|@]|9|$]]|$1|Z|3|10|4|5|6|1R|7|@]|8|@]|9|$]]|$1|11|3|-4|4|5|6|1S|7|@]|8|@]|9|$]]]|12|$13|$4|14|15|16|9|$17|18]]]]

<ol>
<li>IDs are best suited for naming parts of your layout, so you should not give the same name for ID and class</li>
<li>ID allows alphanumeric and special characters</li>
<li>but avoid using the <code># : . * !</code> symbols</li>
<li>spaces are not allowed</li>
<li>not started with numbers or a hyphen followed by a digit</li>
<li>case sensitive</li>
<li>using ID selectors is faster than using class selectors</li>
<li>use hyphen &quot;-&quot; (underscore &quot;_&quot; can also be used, but it is not good for <a href="https://en.wikipedia.org/wiki/Search_engine_optimization" rel="nofollow noreferrer">SEO</a>) for long CSS class or Id rule names</li>
<li>If a rule has an ID selector as its key selector, don’t add the tag name to the rule. Since IDs are unique, adding a tag name would slow down the matching process needlessly.</li>
<li>In HTML5, the id attribute can be used on any HTML element and In HTML 4.01, the id attribute cannot be used with: <code>&lt;base&gt;, &lt;head&gt;, &lt;html&gt;, &lt;meta&gt;, &lt;param&gt;, &lt;script&gt;, &lt;style&gt;, and &lt;title&gt;.</code></li>
</ol>


blocks|key|737886|text|对于HTML5|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|737887|737888|该值在元素的home子树中的所有ID中必须是唯一的，并且必须至少包含一个字符。该值不得包含任何空格字符。|blockquote|737889|737890|737891|至少一个字符，没有空格。|737892|这为有效的用例打开了大门，比如使用重音字符。这也给了我们更多的弹头，因为你现在可以使用会导致CSS和JavaScript问题的id值，除非你真的很小心。|737893|entityMap|0|LINK|mutability|MUTABLE|url|https://en.wikipedia.org/wiki/HTML5^0|2|5|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@$A|W|B|X|1|Y]]|C|$]]|$1|D|3|-4|5|6|7|Z|8|@]|9|@]|C|$]]|$1|E|3|F|5|G|7|10|8|@]|9|@]|C|$]]|$1|H|3|-4|5|6|7|11|8|@]|9|@]|C|$]]|$1|I|3|-4|5|6|7|12|8|@]|9|@]|C|$]]|$1|J|3|K|5|6|7|13|8|@]|9|@]|C|$]]|$1|L|3|M|5|6|7|14|8|@]|9|@]|C|$]]|$1|N|3|-4|5|6|7|15|8|@]|9|@]|C|$]]]|O|$P|$5|Q|R|S|C|$T|U]]]]

<p>For <a href="https://en.wikipedia.org/wiki/HTML5" rel="nofollow noreferrer">HTML5</a>:</p>
<blockquote>
<p>The value must be unique amongst all the IDs in the element’s home
subtree and must contain at least one character. The value must not
contain any space characters.</p>
</blockquote>
<p>At least one character, no spaces.</p>
<p>This opens the door for valid use cases such as using accented characters. It also gives us plenty of more ammo to shoot ourselves in the foot with, since you can now use <em>id</em> values that will cause problems with both CSS and JavaScript unless you’re really careful.</p>


blocks|key|5225984|text|HTML5|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5225985|请记住ID必须是唯一的，即文档中不能有多个元素具有相同的id值。|5225986|HTML5中关于ID内容的规则是(除了唯一)：|5225987|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.|code-block|syntax|javascript|5225988|这是关于ID的W3规范(来自MDN)：|offset|length|style|BOLD|5225989|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).|5225990|更多信息：|5225991|5225992|+-全局属性(id)|unordered-list-item|CODE|5225993|+attribute+(id)|5225994|5225995|entityMap^0|0|0|0|0|7|2|0|0|0|0|7|2|0|C|2|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|15|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|16|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|17|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|18|8|@$M|19|N|1A|O|P]]|9|@]|A|$]]|$1|Q|3|R|5|H|7|1B|8|@]|9|@]|A|$I|J]]|$1|S|3|T|5|6|7|1C|8|@]|9|@]|A|$]]|$1|U|3|-4|5|6|7|1D|8|@]|9|@]|A|$]]|$1|V|3|W|5|X|7|1E|8|@$M|1F|N|1G|O|Y]]|9|@]|A|$]]|$1|Z|3|10|5|X|7|1H|8|@$M|1I|N|1J|O|Y]]|9|@]|A|$]]|$1|11|3|-4|5|6|7|1K|8|@]|9|@]|A|$]]|$1|12|3|-4|5|6|7|1L|8|@]|9|@]|A|$]]]|13|$]]

<h2>HTML5</h2>
<p>Keeping in mind that ID must be unique, i.e., there must not be multiple elements in a document that have the same id value.</p>
<p>The rules about ID content in HTML5 are (apart from being unique):</p>
<pre><code>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.
</code></pre>
<p>This is the <strong>W3</strong> spec about ID (from MDN):</p>
<pre><code>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).
</code></pre>
<h2>More information:</h2>
<ul>
<li><a href="http://www.w3.org/TR/html-markup/global-attributes.html#common.attrs.id" rel="nofollow noreferrer"><strong>W3</strong></a> - global attributes (<code>id</code>)</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#id" rel="nofollow noreferrer"><strong>MDN</strong></a> attribute (<code>id</code>)</li>
</ul>


blocks|key|3816020|text|要引用带有句点的id，需要使用反斜杠。我不确定连字符或下划线是否相同。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3816021|例如：|3816022|HTML|3816023|<div+id="maintenance.instrumentNumber">############0218</div>|code-block|syntax|javascript|3816024|CSS|3816025|#maintenance\.instrumentNumber{word-wrap:break-word;}|3816026|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|S|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|T|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|H|7|V|8|@]|9|@]|A|$I|J]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>To reference an id with a period in it, you need to use a backslash. I am not sure if it's the same for hyphens or underscores.</p>
<p>For example:</p>
<h3>HTML</h3>
<pre><code>&lt;div id=&quot;maintenance.instrumentNumber&quot;&gt;############0218&lt;/div&gt;
</code></pre>
<p>CSS</p>
<pre><code>#maintenance\.instrumentNumber{word-wrap:break-word;}
</code></pre>


blocks|key|2970982|text|HTML5:+ID和类属性的允许值|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2970983|从HTML5开始，对ID值的唯一限制是：|2970984|2970985|在文档中必须是唯一的|ordered-list-item|2970986|不能包含任何空格|2970987|必须至少包含一个字符|2970988|类似的规则也适用于类(当然，唯一性除外)。|2970989|因此，值可以是全数字，只有一个数字，只有标点符号，包括特殊字符，等等。只是没有空格。这与HTML4非常不同。|2970990|在HTML4中，ID值必须以字母开头，然后只能跟字母、数字、连字符、下划线、冒号和句号。|2970991|在HTML5中，这些是有效的：|2970992|<div+id="999">+...+</div>
<div+id="#%25LV-%7C%7C">+...+</div>
<div+id="____V">+...+</div>
<div+id="⌘⌥">+...+</div>
<div+id="♥">+...+</div>
<div+id="{}">+...+</div>
<div+id="©">+...+</div>
<div+id="♤₩¤☆€~¥">+...+</div>|code-block|syntax|javascript|2970993|请记住，在ID的值中使用数字、标点符号或特殊字符可能会在其他上下文中造成麻烦(例如，CSS、JavaScript、regex)。|2970994|例如，以下ID在HTML5中有效：|2970995|<div+id="9lions">+...+</div>|2970996|但是在CSS:中是无效的|offset|length|style|BOLD|2970997|来自CSS2.1规范：|2970998|2970999|+|blockquote|2971000|2971001|在CSS中，标识符(包括选择器中的元素名称、类和In+)只能包含字符a-zA-Z0-9和ISO+10646字符U%2B00A0及更高，加上连字符(-)和下划线(_)；它们不能以数字、两个连字符或连字符后跟数字开头。|2971002|2971003|在大多数情况下，您可以在具有限制或特殊含义的上下文中对字符进行转义。|2971004|2971005|W3C参考|2971006|HTML5|2971007|2971008|++|2971009|2971010|id属性指定其元素的唯一标识符(ID)。|CODE|2971011|该值在元素的home子树中的所有ID中必须是唯一的，并且必须至少包含一个字符。该值不得包含任何空格字符。|2971012|注意:对于ID可以采用的形式没有其他限制；特别是，ID可以仅由数字组成，以数字开头，以下划线开头，仅由标点符号组成，等等。|2971013|+|2971014|如果指定了该属性，则该属性的值必须是一组空格分隔的标记，这些标记表示元素所属的各种类。|2971015|HTML元素分配给它的类由class属性值在空格上拆分时返回的所有类组成。(重复项将被忽略。)|2971016|对于作者可以在class属性中使用的标记没有额外的限制，但鼓励作者使用描述内容的性质的值，而不是描述所需的内容表示形式的值。|2971017|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3.org/TR/html5/dom.html#the-id-attribute|1|http://www.w3.org/TR/html5/dom.html#classes^0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|7|0|0|0|0|0|29|L|0|0|0|0|0|5|0|0|0|1|1|0|0|0|0|2|0|0|0|0|1|1|0|0|0|0^^$0|@$1|2|3|4|5|6|7|2K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|2L|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|2M|8|@]|9|@]|A|$]]|$1|E|3|F|5|G|7|2N|8|@]|9|@]|A|$]]|$1|H|3|I|5|G|7|2O|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|2P|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|2Q|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|2R|8|@]|9|@]|A|$]]|$1|P|3|Q|5|6|7|2S|8|@]|9|@]|A|$]]|$1|R|3|S|5|6|7|2T|8|@]|9|@]|A|$]]|$1|T|3|U|5|V|7|2U|8|@]|9|@]|A|$W|X]]|$1|Y|3|Z|5|6|7|2V|8|@]|9|@]|A|$]]|$1|10|3|11|5|6|7|2W|8|@]|9|@]|A|$]]|$1|12|3|13|5|V|7|2X|8|@]|9|@]|A|$W|X]]|$1|14|3|15|5|6|7|2Y|8|@$16|2Z|17|30|18|19]]|9|@]|A|$]]|$1|1A|3|1B|5|6|7|31|8|@]|9|@]|A|$]]|$1|1C|3|-4|5|6|7|32|8|@]|9|@]|A|$]]|$1|1D|3|1E|5|1F|7|33|8|@]|9|@]|A|$]]|$1|1G|3|-4|5|6|7|34|8|@]|9|@]|A|$]]|$1|1H|3|1I|5|6|7|35|8|@$16|36|17|37|18|19]]|9|@]|A|$]]|$1|1J|3|-4|5|6|7|38|8|@]|9|@]|A|$]]|$1|1K|3|1L|5|6|7|39|8|@]|9|@]|A|$]]|$1|1M|3|-4|5|6|7|3A|8|@]|9|@]|A|$]]|$1|1N|3|1O|5|6|7|3B|8|@$16|3C|17|3D|18|19]]|9|@]|A|$]]|$1|1P|3|1Q|5|6|7|3E|8|@]|9|@]|A|$]]|$1|1R|3|-4|5|6|7|3F|8|@]|9|@]|A|$]]|$1|1S|3|1T|5|1F|7|3G|8|@]|9|@$16|3H|17|3I|1|3J]]|A|$]]|$1|1U|3|-4|5|6|7|3K|8|@]|9|@]|A|$]]|$1|1V|3|1W|5|6|7|3L|8|@$16|3M|17|3N|18|1X]]|9|@]|A|$]]|$1|1Y|3|1Z|5|6|7|3O|8|@]|9|@]|A|$]]|$1|20|3|21|5|6|7|3P|8|@]|9|@]|A|$]]|$1|22|3|23|5|6|7|3Q|8|@]|9|@$16|3R|17|3S|1|3T]]|A|$]]|$1|24|3|25|5|6|7|3U|8|@]|9|@]|A|$]]|$1|26|3|27|5|6|7|3V|8|@]|9|@]|A|$]]|$1|28|3|29|5|6|7|3W|8|@]|9|@]|A|$]]|$1|2A|3|-4|5|6|7|3X|8|@]|9|@]|A|$]]]|2B|$2C|$5|2D|2E|2F|A|$2G|2H]]|2I|$5|2D|2E|2F|A|$2G|2J]]]]

<h2>HTML5: Permitted Values for ID &amp; Class Attributes</h2>

<p>As of HTML5, the only restrictions on the value of an ID are:</p>

<ol>
<li>must be unique in the document</li>
<li>must not contain any space characters</li>
<li>must contain at least one character</li>
</ol>

<p>Similar rules apply to classes (except for the uniqueness, of course).</p>

<p>So the value can be all digits, just one digit, just punctuation characters, include special characters, whatever. Just no whitespace. This is very different from HTML4.</p>

<p>In HTML 4, ID values must begin with a letter, which can then be followed only by letters, digits, hyphens, underscores, colons and periods.</p>

<p>In HTML5 these are valid:</p>

<pre><code>&lt;div id="999"&gt; ... &lt;/div&gt;
&lt;div id="#%LV-||"&gt; ... &lt;/div&gt;
&lt;div id="____V"&gt; ... &lt;/div&gt;
&lt;div id="⌘⌥"&gt; ... &lt;/div&gt;
&lt;div id="♥"&gt; ... &lt;/div&gt;
&lt;div id="{}"&gt; ... &lt;/div&gt;
&lt;div id="©"&gt; ... &lt;/div&gt;
&lt;div id="♤₩¤☆€~¥"&gt; ... &lt;/div&gt;
</code></pre>

<p>Just bear in mind that using numbers, punctuation or special characters in the value of an ID may cause trouble in other contexts (e.g., CSS, JavaScript, regex).</p>

<p>For example, the following ID is valid in HTML5:</p>

<pre><code>&lt;div id="9lions"&gt; ... &lt;/div&gt;
</code></pre>

<p><strong><em>However, it is invalid in CSS:</em></strong></p>

<p>From the CSS2.1 spec:</p>

<blockquote>
  <p><a href="https://www.w3.org/TR/CSS21/syndata.html#characters" rel="noreferrer"><strong>4.1.3 Characters and case</strong></a></p>
  
  <p>In CSS, <em>identifiers</em> (including element names, classes, and IDs in
  selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646
  characters U+00A0 and higher, plus the hyphen (-) and the underscore
  (_); <strong><em>they cannot start with a digit, two hyphens, or a hyphen
  followed by a digit</em></strong>.</p>
</blockquote>

<p>In most cases you may be able to escape characters in contexts where they have restrictions or special meaning.</p>

<hr>

<p><strong>W3C References</strong></p>

<p>HTML5</p>

<blockquote>
  <p><a href="http://www.w3.org/TR/html5/dom.html#the-id-attribute" rel="noreferrer"><strong>3.2.5.1 The <code>id</code>
  attribute</strong></a></p>
  
  <p>The <code>id</code> attribute specifies its element's unique identifier (ID). </p>
  
  <p>The value must be unique amongst all the IDs in the element's home
  subtree and must contain at least one character. The value must not
  contain any space characters.</p>
  
  <p>Note: There are no other restrictions on what form an ID can take; in
  particular, IDs can consist of just digits, start with a digit, start
  with an underscore, consist of just punctuation, etc.</p>
  
  <p><a href="http://www.w3.org/TR/html5/dom.html#classes" rel="noreferrer"><strong>3.2.5.7 The <code>class</code>
  attribute</strong></a></p>
  
  <p>The attribute, if specified, must have a value that is a set of
  space-separated tokens representing the various classes that the
  element belongs to.</p>
  
  <p>The classes that an HTML element has assigned to it consists of all
  the classes returned when the value of the class attribute is split on
  spaces. (Duplicates are ignored.)</p>
  
  <p>There are no additional restrictions on the tokens authors can use in
  the class attribute, but authors are encouraged to use values that
  describe the nature of the content, rather than values that describe
  the desired presentation of the content.</p>
</blockquote>


blocks|key|741863|text|元素的唯一标识符。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|741864|文档中不能有多个元素具有相同的id值。|741865|任何字符串，但有以下限制：|741866|741867|必须至少为一个字符长度|ordered-list-item|741868|不能包含任何空格字符：|741869|741870|-+U%2B0020+SPACE
-+U%2B0009+CHARACTER+TABULATION+(tab)
-+U%2B000A+LINE+FEED+(LF)
-+U%2B000C+FORM+FEED+(FF)
-+U%2B000D+CARRIAGE+RETURN+(CR)|code-block|syntax|javascript|741871|​|741872|使用除ASCII+letters+and+digits,+'_',+'-'+and+'.'之外的字符可能会导致兼容性问题，因为在HTML+4中不允许使用这些字符。尽管在HTML+5中取消了此限制，但为了兼容，ID应以字母开头。|offset|length|style|CODE|741873|entityMap^0|0|0|0|0|0|0|0|0|0|3|16|1S|6|2C|6|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|12|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|13|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|14|8|@]|9|@]|A|$]]|$1|G|3|H|5|I|7|15|8|@]|9|@]|A|$]]|$1|J|3|K|5|I|7|16|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|17|8|@]|9|@]|A|$]]|$1|M|3|N|5|O|7|18|8|@]|9|@]|A|$P|Q]]|$1|R|3|S|5|6|7|19|8|@]|9|@]|A|$]]|$1|T|3|U|5|6|7|1A|8|@$V|1B|W|1C|X|Y]|$V|1D|W|1E|X|Y]|$V|1F|W|1G|X|Y]]|9|@]|A|$]]|$1|Z|3|-4|5|6|7|1H|8|@]|9|@]|A|$]]]|10|$]]

<p>A unique identifier for the element.</p>

<p>There must not be multiple elements in a document that have the same id value.</p>

<p>Any string, with the following restrictions:</p>

<ol>
<li>must be at least one character long</li>
<li><p>must not contain any space characters:</p>

<ul>
<li>U+0020 SPACE</li>
<li>U+0009 CHARACTER TABULATION (tab)</li>
<li>U+000A LINE FEED (LF)</li>
<li>U+000C FORM FEED (FF)</li>
<li>U+000D CARRIAGE RETURN (CR)</li>
</ul></li>
</ol>

<p>Using characters except <code>ASCII letters and digits, '_', '-' and '.'</code> may cause compatibility problems, as they weren't allowed in <code>HTML 4</code>. Though this restriction has been lifted in <code>HTML 5</code>, an ID should start with a letter for compatibility.</p>


blocks|key|2971134|text|任何字母数字值、"-“和"_”都有效。但是，id名称应该以A-Z或a-z之间的任何字符开头。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|2971135|entityMap^0|2|5|9|1|D|1|T|3|X|3|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]|$9|M|A|N|B|C]|$9|O|A|P|B|C]|$9|Q|A|R|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|G|$]]

<p>Any <strong>alpha-numeric value</strong>,&quot;<strong>-</strong>&quot;, and &quot;<strong>_</strong>&quot; are valid. But, you should <em>start the id name</em> with any character between <strong>A-Z</strong> or <strong>a-z</strong>.</p>


blocks|key|2971161|text|不能有空格，并且必须至少以a到z和0到9之间的字符开头。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2971162|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>No spaces, and it must begin with at least a character from a to z and 0 to 9.</p>


blocks|key|2971230|text|在HTML中|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2971231|ID应以{A-Z}或{a-z}开头。您可以添加数字、句点、连字符、下划线和冒号。|offset|length|style|BOLD|2971232|例如：|2971233|<span+id="testID2"></span>
<span+id="test-ID2"></span>
<span+id="test_ID2"></span>
<span+id="test:ID2"></span>
<span+id="test.ID2"></span>|code-block|syntax|javascript|2971234|但是即使你可以用冒号(:)或句点(.)来做ID。CSS很难使用这些ID作为选择器。主要是当您想要使用伪元素(:before和:after)时。|CODE|2971235|此外，在JavaScript中很难选择这些ID，所以你应该使用前四个ID作为许多开发人员的首选方法，如果有必要，你也可以使用后两个ID。|2971236|entityMap^0|0|0|2|4|5|A|5|N|H|0|0|0|H|1|1I|7|1Q|6|O|3|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|W|8|@$D|X|E|Y|F|G]|$D|Z|E|10|F|G]|$D|11|E|12|F|G]|$D|13|E|14|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|15|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|16|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|17|8|@$D|18|E|19|F|Q]|$D|1A|E|1B|F|Q]|$D|1C|E|1D|F|Q]|$D|1E|E|1F|F|G]]|9|@]|A|$]]|$1|R|3|S|5|6|7|1G|8|@]|9|@]|A|$]]|$1|T|3|-4|5|6|7|1H|8|@]|9|@]|A|$]]]|U|$]]

<p>In HTML</p>
<p><strong>ID</strong> should start with <strong>{A-Z}</strong> or <strong>{a-z}</strong>. You can add <strong>digits, periods, hyphens, underscores, and colons.</strong></p>
<p>For example:</p>
<pre><code>&lt;span id=&quot;testID2&quot;&gt;&lt;/span&gt;
&lt;span id=&quot;test-ID2&quot;&gt;&lt;/span&gt;
&lt;span id=&quot;test_ID2&quot;&gt;&lt;/span&gt;
&lt;span id=&quot;test:ID2&quot;&gt;&lt;/span&gt;
&lt;span id=&quot;test.ID2&quot;&gt;&lt;/span&gt;
</code></pre>
<p>But even though you can make ID with colons (:) or period (<code>.</code>). It is hard for <strong>CSS</strong> to use these IDs as a selector. Mainly when you want to use pseudo elements (<code>:before</code> and <code>:after</code>).</p>
<p>Also in JavaScript it is hard to select these ID's.
So you should use first four ID's as the preferred way by many developers around and if it's necessary then you can use the last two also.</p>


blocks|key|2971267|text|Walues可以是:+a-z，A-Z，0-9，*_：-|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2971268|它用于HTML5...|2971269|我们可以用任何标签添加id。|2971270|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

<p>Walues can be: [a-z], [A-Z], [0-9], [* _ : -]</p>
<p>It is used for HTML5...</p>
<p>We can add id with any tag.</p>


blocks|key|5226415|text|由于ES2015，如果文档字符集设置为-8，我们也可以使用几乎所有的Unicode字符来表示ID。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|5226416|在这里测试：https://mothereff.in/js-variables|5226417|​|5226418|📷|atomic|5226419|5226420|阅读相关信息：|5226421|5226422|在ES2015中，标识符必须以$、_或任何具有Unicode派生核心属性ID_Start的符号开头。|blockquote|5226423|5226424|标识符的其余部分可以包含$、_、Unicode零宽度非联接、U%2B200C零宽度联接或具有U%2B200D派生核心属性ID_Continue的任何符号。|5226425|5226426|5226427|const+target+=+document.querySelector("div").id
console.log(
+++target
)
document.getElementById(target).style.backgroundColor+=+"black"|code-block|syntax|javascript|5226428|div+{
++border:+1px+black+solid;
++width:+100%25;
++height:+200px
}|5226429|<div+id="H̹̙̦̮͉̩̗̗ͧ̇̏̊̾Eͨ͆͒̆ͮ̃͏̷̮̣̫̤̣Cͯ̂͐͏̨̛͔̦̟͈̻O̜͎͍͙͚̬̝̣̽ͮ͐͗̀ͤ̍̀͢M̴̡̲̭͍͇̼̟̯̦̉̒͠Ḛ̛̙̞̪̗ͥͤͩ̾͑̔͐ͅṮ̴̷̷̗̼͍̿̿̓̽͐H̙̙̔̄͜">|5226430|5226431|5226432|你应该使用它吗？可能不是个好主意！|5226433|5226434|entityMap|0|LINK|mutability|MUTABLE|url|https://mothereff.in/js-variables|1|IMAGE|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/653ba67caadfb94145a8413429f6ca9d.png|imageAlt^0|J|O|0|6|X|0|0|0|0|1|1|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1Q|8|@$9|1R|A|1S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1T|8|@]|D|@$9|1U|A|1V|1|1W]]|E|$]]|$1|H|3|I|5|6|7|1X|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|1Y|8|@]|D|@$9|1Z|A|20|1|21]]|E|$]]|$1|M|3|I|5|6|7|22|8|@]|D|@]|E|$]]|$1|N|3|O|5|6|7|23|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|24|8|@]|D|@]|E|$]]|$1|Q|3|R|5|S|7|25|8|@]|D|@]|E|$]]|$1|T|3|-4|5|6|7|26|8|@]|D|@]|E|$]]|$1|U|3|V|5|6|7|27|8|@]|D|@]|E|$]]|$1|W|3|-4|5|6|7|28|8|@]|D|@]|E|$]]|$1|X|3|I|5|6|7|29|8|@]|D|@]|E|$]]|$1|Y|3|Z|5|10|7|2A|8|@]|D|@]|E|$11|12]]|$1|13|3|14|5|10|7|2B|8|@]|D|@]|E|$11|12]]|$1|15|3|16|5|10|7|2C|8|@]|D|@]|E|$11|12]]|$1|17|3|I|5|6|7|2D|8|@]|D|@]|E|$]]|$1|18|3|-4|5|6|7|2E|8|@]|D|@]|E|$]]|$1|19|3|1A|5|6|7|2F|8|@]|D|@]|E|$]]|$1|1B|3|O|5|6|7|2G|8|@]|D|@]|E|$]]|$1|1C|3|-4|5|6|7|2H|8|@]|D|@]|E|$]]]|1D|$1E|$5|1F|1G|1H|E|$1I|1J]]|1K|$5|1L|1G|1M|E|$1N|1O|1P|-4]]]]

<p>Since <em>ES2015</em> we can as well use <em>almost</em> all <strong>Unicode characters</strong> for ID's, if the document character set is set to UTF-8.</p>
<p>Test out here: <a href="https://mothereff.in/js-variables" rel="nofollow noreferrer">https://mothereff.in/js-variables</a></p>
<p><a href="https://i.stack.imgur.com/E4FWL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/E4FWL.png" alt="Enter image description here" /></a></p>
<p>Read about it: <em><a href="https://mathiasbynens.be/notes/javascript-identifiers-es6" rel="nofollow noreferrer">Valid JavaScript variable names in ES2015</a></em></p>
<blockquote>
<p>In ES2015, identifiers must start with $, _, or any symbol with the
Unicode derived core property ID_Start.</p>
<p>The rest of the identifier can contain $, _, U+200C zero width
non-joiner, U+200D zero width joiner, or any symbol with the Unicode
derived core property ID_Continue.</p>
</blockquote>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>const target = document.querySelector("div").id
console.log(
   target
)
document.getElementById(target).style.backgroundColor = "black"</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>div {
  border: 1px black solid;
  width: 100%;
  height: 200px
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="H̹̙̦̮͉̩̗̗ͧ̇̏̊̾Eͨ͆͒̆ͮ̃͏̷̮̣̫̤̣Cͯ̂͐͏̨̛͔̦̟͈̻O̜͎͍͙͚̬̝̣̽ͮ͐͗̀ͤ̍̀͢M̴̡̲̭͍͇̼̟̯̦̉̒͠Ḛ̛̙̞̪̗ͥͤͩ̾͑̔͐ͅṮ̴̷̷̗̼͍̿̿̓̽͐H̙̙̔̄͜"&gt;</code></pre>
</div>
</div>
</p>
<hr />
<p>Should you use it? Probably not a good idea!</p>
<p>Read about it: <em><a href="https://stackoverflow.com/questions/11945216/javascript-syntax-error-missing-after-function-body/52799593#52799593">JavaScript: Syntax error missing } after function body</a></em></p>


blocks|key|2971374|text|救命，我的Javascript坏了！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2971375|每个人都说ID不能重复。|2971376|在除FireFox之外的所有浏览器中都是最佳选择|2971377|​|2971378|<div+id="ONE"></div>
<div+id="ONE"></div>
<div+id="ONE"></div>
<script>
++document.body.append(+document.querySelectorAll("#ONE").length+,+'+DIVs!')
++document.body.append(+'+in+a+',+typeof+ONE+)
++console.log(+ONE+);
</script>|code-block|syntax|javascript|2971379|2971380|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|S|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|T|8|@]|9|@]|A|$K|L]]|$1|M|3|G|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

<p>Help, my Javascript is broken!</p>
<p>Everyone says IDs can't be duplicates.</p>
<p>Best tried in every browser but FireFox</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="ONE"&gt;&lt;/div&gt;
&lt;div id="ONE"&gt;&lt;/div&gt;
&lt;div id="ONE"&gt;&lt;/div&gt;
&lt;script&gt;
  document.body.append( document.querySelectorAll("#ONE").length , ' DIVs!')
  document.body.append( ' in a ', typeof ONE )
  console.log( ONE );
&lt;/script&gt;</code></pre>
</div>
</div>
</p>


blocks|key|742077|text|Html+ID|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|742078|id属性指定其元素的惟一标识符(ID)。|742079|对于ID可以采用的形式没有其他限制；具体地说，ID可以只由数字组成，以数字开头，以下划线开头，由标点符号组成，等等。|742080|元素的唯一标识符可用于多种目的，最显著的是用作使用片段链接到文档的特定部分的方法，作为编写脚本时针对元素的方法，以及用于从CSS设置特定元素的样式的方法。|742081|entityMap^0|0|7|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Q|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|R|8|@]|D|@]|E|$]]|$1|J|3|K|5|6|7|S|8|@]|D|@]|E|$]]|$1|L|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|M|$]]

<p><em><strong>Html ID</strong></em></p>
<p>The id attribute specifies its element's unique identifier (ID).</p>
<p>There are no other restrictions on what form an ID can take; in particular, IDs can consist of just digits, start with a digit, start with an underscore, consist of just punctuation, etc.</p>
<p>An element's unique identifier can be used for a variety of purposes, most notably as a way to link to specific parts of a document using fragments, as a way to target an element when scripting, and as a way to style a specific element from CSS.</p>


blocks|key|2971502|text|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2971503|ordered-list-item|2971504|‘_’和'-‘起作用，|2971505|Numbers起作用，|2971506|冒号(，)和句点(.)似乎work|2971507|Interestingly，表情符号在|2971508|中起作用|2971509|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|-4|4|5|6|O|7|@]|8|@]|9|$]]|$1|A|3|-4|4|B|6|P|7|@]|8|@]|9|$]]|$1|C|3|D|4|B|6|Q|7|@]|8|@]|9|$]]|$1|E|3|F|4|B|6|R|7|@]|8|@]|9|$]]|$1|G|3|H|4|B|6|S|7|@]|8|@]|9|$]]|$1|I|3|J|4|B|6|T|7|@]|8|@]|9|$]]|$1|K|3|L|4|5|6|U|7|@]|8|@]|9|$]]|$1|M|3|-4|4|5|6|V|7|@]|8|@]|9|$]]]|N|$]]

<ol>
<li>Uppercase and lowercase alphabets works</li>
<li>'_' and '-' works, too</li>
<li>Numbers works</li>
<li>Colons (,) and period (.) seems to work</li>
<li>Interestingly, emojis work</li>
</ol>


<p>When creating the <code>id</code> attributes for HTML elements, what rules are there for the value?</p>


What are valid values for the id attribute in HTML?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

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

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

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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