HTML 中 id 属性的有效值是啥？

Posted 2023-03-03

技术标签:

【中文标题】HTML 中 id 属性的有效值是啥？【英文标题】：What are valid values for the id attribute in HTML?HTML 中 id 属性的有效值是什么？ 【发布时间】：2010-09-09 09:26:01 【问题描述】：

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

【问题讨论】：

这在 HTML5 和以前的规范版本之间有所不同。我在这里解释了：mathiasbynens.be/notes/html5-id-class 我注意到 SharePoint 2010 为 Web 部件中动态生成的表分配了这样的值 - 8CC7EF38-31D8-4786-8C20-7E6D56E49AE2-E60CE5E2-6E64-4350-A884-654B72DA5A53 & 包含该类型 ID 值的页面在任何流行的浏览器中都没有中断。不过，通过 javascript 处理此类 ID 值很棘手 - mvark.blogspot.in/2012/07/… HTML4 和 HTML5 对 ID 值的要求非常不同。以下是 HTML5 ID 规则的快速完整概要：***.com/a/31773673/3597276 请注意：按照一些答案的说法并使用句点（**.**) 使用 jQuery 会给您带来很多麻烦，例如，使用 <input id="me.name" /> 然后使用 @987654331 @ 将导致 jQuery 查找带有 .name 类的 <me> 标记，这是没有人真正想要的！ @SamSwift웃 不，您只需将特殊字符转义为docs say。请检查此online demo。 【参考方案1】：

从 ES2015 开始，如果文档字符集设置为 UTF-8，我们也可以几乎使用所有 Unicode 字符作为 ID。

在这里测试：https://mothereff.in/js-variables

阅读：Valid JavaScript variable names in ES2015

在 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

&lt;div id="H̹̙̦̮͉̩̗̗ͧ̇̏̊̾Eͨ͆͒̆ͮ̃͏̷̮̣̫̤̣Cͯ̂͐͏̨̛͔̦̟͈̻O̜͎͍͙͚̬̝̣̽ͮ͐͗̀ͤ̍̀͢M̴̡̲̭͍͇̼̟̯̦̉̒͠Ḛ̛̙̞̪̗ͥͤͩ̾͑̔͐ͅṮ̴̷̷̗̼͍̿̿̓̽͐H̙̙̔̄͜"&gt;

你应该使用它吗？可能不是个好主意！

阅读：JavaScript: Syntax error missing after function body

【讨论】：

【参考方案2】：

值可以是：[a-z]、[A-Z]、[0-9]、[* _ : -]

用于 HTML5...

我们可以用任何标签添加id。

【讨论】：

【参考方案3】：

在 HTML 中

ID 应以 A-Z 或 a-z 开头。您可以添加数字、句点、连字符、下划线和冒号。

例如：

<span id="testID2"></span>
<span id="test-ID2"></span>
<span id="test_ID2"></span>
<span id="test:ID2"></span>
<span id="test.ID2"></span>

但即使您可以使用冒号 (:) 或句点 (.) 创建 ID。 CSS 很难将这些 ID 用作选择器。主要是当你想使用伪元素时（:before 和:after）。

在 JavaScript 中也很难选择这些 ID。因此，您应该使用前四个 ID 作为周围许多开发人员的首选方式，如果有必要，您也可以使用后两个。

【讨论】：

【参考方案4】：

没有空格，并且必须以至少一个从 a 到 z 和 0 到 9 的字符开头。

【讨论】：

【参考方案5】：

任何字母数字值、-”和“_”均有效。但是，您应该以 A-Z 或 a-z 之间的任何字符开始 id 名称。

【讨论】：

但在 HTML5 中不需要？查看以前的答案。【参考方案6】：

要引用带有句点的 id，您需要使用反斜杠。我不确定连字符或下划线是否相同。

例如：

HTML

<div id="maintenance.instrumentNumber">############0218</div>

CSS

#maintenance\.instrumentNumberword-wrap:break-word;

【讨论】：

连字符和下划线通常不需要转义。但是，如果连字符出现在标识符的开头并且后跟另一个连字符（例如\--abc）或数字（例如\-123），则例外情况。【参考方案7】：

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).

HTML5：

它摆脱了对 id 属性 (see here) 的额外限制。剩下的唯一要求（除了在文档中是唯一的）是：

该值必须至少包含一个字符（不能为空）它不能包含任何空格字符。

HTML5 之前的：

ID 应该匹配：

[A-Za-z][-A-Za-z0-9_:.]*

开始

-

_

:

.

但应该避免使用: 和.，因为：

例如，一个 ID 可以标记为“ab:c”并在样式表中引用为 #ab:c，但除了作为元素的 id 之外，它还可以表示 id “a”、class “b” ", 伪选择器 "c"。最好避免混淆，避免同时使用. 和:。

【讨论】：

在 HTML5 中，id 不接受 id="c365720c"【参考方案11】：

字母 → 大写和小写

数字 → 0-9

特殊字符→':'、'-'、'_'、'.'

格式应以“.”开头或一个字母，后跟更多字母或数字的特殊字符。 id 字段的值不能以“_”结尾。

另外，空格是不允许的，如果提供的话，它们被视为不同的值，这在 id 属性的情况下是无效的。

【讨论】：

【参考方案12】：

连字符、下划线、句点、冒号、数字和字母都适用于 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>

【讨论】：

【参考方案13】：

看起来，虽然冒号 (:) 和句点 (.) 在 HTML 规范中是有效的，但它们在 CSS 中作为 id 选择器是无效的，因此如果您打算将它们用于此目的，最好避免使用它们.

【讨论】：

@MathiasBynens 链接已损坏。现在是mothereff.in/css-escapes#0foo%23bar.baz%3Aqux 如果你正确地转义它们，它们不是无效的。见mothereff.in/css-escapes#0foo%23bar.baz%3Aqux【参考方案14】：

来自 HTML 4 规范...

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

【讨论】：

【参考方案15】：

严格来说应该匹配

[A-Za-z][-A-Za-z0-9_:.]*

但是jQuery 似乎有冒号的问题，所以最好避免使用它们。

【讨论】：

或者：“所以最好避免使用 jquery”。 ;) 见Álvaro González's answer。 @domsson 我们为什么要避免使用 JQuery？能否请您提供更多信息？【参考方案16】：

大写和小写字母都可以使用 '_' 和 '-' 也有效数字有效冒号 (,) 和句点 (.) 似乎有效有趣的是，表情符号有效

【讨论】：

【参考方案17】：

HTML ID

id 属性指定其元素的唯一标识符 (ID)。

对于 ID 可以采用的形式没有其他限制；特别是，ID 可以仅包含数字、以数字开头、以下划线开头、仅包含标点符号等。

元素的唯一标识符可用于多种用途，最显着的用途是使用片段链接到文档的特定部分、在编写脚本时定位元素以及设置特定样式的样式来自 CSS 的元素。

【讨论】：

【参考方案18】：

求助，我的 Javascript 坏了！

每个人都说 ID 不能重复。

最好在除 FireFox 之外的所有浏览器中试用

<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>

【讨论】：

【参考方案19】：

对于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。请将此视为历史脚注。

【讨论】：

请注意，class 和 id 属性在 XHTML 中是区分大小写的，所有其他属性都不区分。 Eric Meyer 在我参加的一个 CSS 研讨会中提到了这一点。另请注意，如果您尝试编写 CSS 规则以按 ID 定位元素，并且 ID 带有数字，它将不起作用。无赖！至于'.'或 ':' 在 ID 中使用 jQuery，请参阅 jQuery FAQ。它包含一个执行必要转义的小函数。【参考方案20】：

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 Characters and case

在 CSS 中，标识符（包括元素名称、类和 ID 选择器）只能包含字符 [a-zA-Z0-9] 和 ISO 10646 字符 U+00A0 及更高，加上连字符 (-) 和下划线 (_); 它们不能以数字、两个连字符或一个连字符开头后跟一个数字。

在大多数情况下，您可以在具有限制或特殊含义的上下文中对字符进行转义。

W3C 参考文献

HTML5

3.2.5.1 The id attribute

id 属性指定其元素的唯一标识符 (ID)。

该值在元素的 home 中的所有 ID 中必须是唯一的子树，并且必须至少包含一个字符。该值不得包含任何空格字符。

注意：对于 ID 可以采用的形式没有其他限制；在特别是，ID 可以只包含数字，以数字开头，开始带下划线，仅包含标点符号等。

3.2.5.7 The class attribute

属性，如果指定，必须有一个值，它是一组以空格分隔的标记，表示元素所属。

HTML 元素分配给它的类包括所有当类属性的值被拆分时返回的类空格。（重复的被忽略。）

作者可以使用的令牌没有额外的限制类属性，但鼓励作者使用描述内容的性质，而不是描述的值所需的内容呈现方式。

【讨论】：

【参考方案21】：

元素的唯一标识符。

文档中不能有多个元素具有相同的 id 值。

任何字符串，有以下限制：

不得包含任何空格字符：

使用除ASCII letters and digits, '_', '-' and '.' 之外的字符可能会导致兼容性问题，因为它们在HTML 4 中是不允许的。尽管HTML 5 中取消了此限制，但为了兼容性，ID 应以字母开头。

【讨论】：

【参考方案22】：

从技术上讲，您可以在 id/name 属性中使用冒号和句点，但我强烈建议避免两者。

在 CSS（和几个 JavaScript 库，如 jQuery）中，句点和冒号都有特殊的含义，如果不小心就会遇到问题。句点是类选择器，冒号是伪选择器（例如，当鼠标悬停在元素上时，“:hover”表示元素）。

如果你给一个元素 id “my.cool:thing”，你的 CSS 选择器将如下所示：

#my.cool:thing  ... /* some rules */ ...

在 CSS 语言中，真正的意思是“id 为 'my'、类 'cool' 和 'thing' 伪选择器的元素”。

坚持使用任何大小写、数字、下划线和连字符的 A-Z。如上所述，请确保您的 id 是唯一的。

这应该是您首先关心的问题。

【讨论】：

您可以使用冒号和句点 - 但您需要使用双反斜杠对其进行转义，例如：$('#my\\.cool\\:thing') 或转义变量：$ ('#'+id.replace(/\./,'\\.').replace(/\:/,'\\:')) groups.google.com/group/jquery-en/browse_thread/thread/… 见Álvaro González's answer。【参考方案23】：

此外，永远不要忘记 ID 是唯一的。使用后，ID 值可能不会再次出现在文档中的任何位置。

您可能有多个 ID，但都必须具有唯一值。

另一方面，还有类元素。就像ID一样，它可以出现多次，但值可能会被反复使用。

【讨论】：

【参考方案24】：

jQuery 确实处理任何有效的 ID 名称。您只需要转义元字符（即点、分号、方括号......）。这就像说 JavaScript 有引号问题只是因为你不会写