Question

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

Answer 1

对于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课程。这是一个容易被忽视的错误。从长远来看，选择身份first-name（连字符而不是句号）可能会更快乐。

您可以通过严格遵守命名约定来简化开发任务。例如，如果您将自己完全限制为小写字符，并且始终使用连字符或下划线分隔单词（但不是两者，请选择一个而不使用另一个），那么您将拥有一个易于记忆的模式。你永远不会怀疑“它是firstName还是FirstName？”因为你总是知道你应该输入first_name。喜欢骆驼的情况？然后限制自己，没有连字符或下划线，并始终一直使用大写或小写的第一个字符，不要混合它们。

现在一个非常模糊的问题是至少有一个浏览器，Netscape 6，incorrectly treated id attribute values as case-sensitive。这意味着，如果您在HTML（小写“f”）和id="firstName"中输入了#FirstName { color: red }（大写“F”），则该错误的浏览器将无法设置元素的颜色为红色。在2015年4月的编辑时，我希望您不会被要求支持Netscape 6.请将此视为历史脚注。

Answer 2

来自HTML 4 specification：

ID和NAME令牌必须以字母（[A-Za-z]）开头，后面可以跟任意数量的字母，数字（[0-9]），连字符（“ - ”），下划线（“ _“），冒号（”：“）和句号（”。“）。

常见的错误是使用以数字开头的ID。

Answer 3

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

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

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

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

真正说的是，“CSS中的id为'my'的元素，'cool'和'thing'伪选择器的类'。

坚持任何案例，数字，下划线和连字符的A-Z。如上所述，确保您的ID是唯一的。

这应该是你的首要关注点。

Answer 4

jQuery 确实处理任何有效的ID名称。你只需要逃避元字符（即点，分号，方括号......）。这就像是说JavaScript只引用了引号问题，因为你不能写

var name = 'O'Hara';

Selectors in jQuery API (see bottom note)

Answer 5

严格来说应该匹配

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

但是jquery似乎对冒号有问题所以最好避免它们。

Answer 6

HTML5：

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

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

PRE-HTML5：

ID应匹配：

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

必须以A-Z或a-z字符开头
可能包含-（连字符），_（下划线），:（冒号）和.（句号）

但是应该避免:和.：

例如，ID可以标记为“ab：c”并在样式表中引用为#ab：c但是作为元素的id，它可能意味着id“a”，类“b” ，伪选择器“c”。最好避免混淆，远离使用。和：一起。

Answer 7

HTML5：ID＆amp;的允许值类属性

从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）。

该值必须在元素主页中的所有ID中唯一   子树，必须包含至少一个字符。价值不能   包含任何空格字符。

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

3.2.5.7 The class attribute

如果指定了属性，则该属性必须具有一组值   空格分隔的标记，表示各种类   元素属于。

HTML元素分配给它的类包含所有类   分割class属性的值时返回的类   空间。（忽略重复。）

作者可以使用的令牌没有其他限制   class属性，但鼓励作者使用值   描述内容的本质，而不是描述的值   期望的内容呈现。

Answer 8

在实践中，许多网站使用以数字开头的id属性，即使这在技术上是无效的HTML。

HTML 5 draft specification放宽了id和name属性的规则：它们现在只是不透明的字符串，不能包含空格。

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

Answer 10

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 atribute（id）

Answer 11

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

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

CSS

#maintenance\.instrumentNumber{word-wrap:break-word;}

Answer 12

来自HTML 4规范......

ID和NAME令牌必须以字母（[A-Za-z]）开头，后面可以跟任意数量的字母，数字（[0-9]），连字符（“ - ”），下划线（“ _“），冒号（”：“）和句号（”。“）。

编辑：噢哦！再次击败按钮！

Answer 13

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

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

另一方面，有class-element。就像ID一样，它可以出现很多次，但是这个值可能会被反复使用。

Answer 14

元素的唯一标识符。

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

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

必须至少有一个字符
不得包含任何空格字符：
- U + 0020 SPACE
- U + 0009 CHARACTER TABULATION（标签）
- U + 000A LINE FEED（LF）
- U + 000C FORM FEED（FF）
- U + 000D CARRIAGE RETURN（CR）

使用public class ViewModelBase : INotifyPropertyChanged { public event PropertyChangedEventHandler PropertyChanged; public void OnPropertyChanged(string propName) { PropertyChangedEventHandler handler = PropertyChanged; if (handler != null) { handler(this, new PropertyChangedEventArgs(propName)); } } }以外的字符可能会导致兼容性问题，因为ASCII letters and digits, '_', '-' and '.'中不允许这样做。虽然HTML 4已取消此限制，但ID应以兼容字母开头。

Answer 15

虽然冒号（:)和句点（。）在HTML规范中有效，但它们在CSS中作为id选择器无效，因此如果您打算将它们用于此目的，最好避免使用它。 / p>

Answer 16

代表HTML5

该值必须在元素主页中的所有ID中唯一子树，必须包含至少一个字符。价值不能包含任何空格字符。

至少一个字符，没有空格。

这为有效的用例打开了大门，例如使用重音字符。它还为我们提供了更多的弹药来射击自己，因为你现在可以使用会导致CSS和JavaScript出现问题的id值，除非你非常小心。

Answer 17

ID最适合命名布局的部分内容，因此不应为ID和类
ID允许使用字母数字和特殊字符
但请避免使用# : . * !符号
不允许空格
没有以数字或连字符后跟数字
区分大小写
使用ID选择器比使用类选择器
对于长CSS类或Id规则名称，使用连字符“ - ”（下划线“_”也可以使用但不适用于seo）
如果规则有ID选择器作为其键选择器，请不要将标记名称添加到规则中。由于ID是唯一的，因此添加标记名称会不必要地减慢匹配过程。
在HTML5中，id属性可用于任何HTML元素，而在HTML 4.01中，id属性不能用于：<base>, <head>, <html>, <meta>, <param>, <script>, <style>, and <title>.

Answer 18

任何字母数字值和＆＃34; - ＆＃34;和＆＃34; _ ＆＃34;已验证。但是，您应使用 A-Z 或 a-z 之间的任何字符启动ID名称。

Answer 19

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

Answer 20

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

用于HTML5 ...

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

Answer 21

自 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̙̙̔̄͜">

Answer 22

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

但是即使您可以使用冒号（:)或句点（。）来创建ID，对于 CSS 来说，也很难将这些ID用作选择器。主要是当您要使用伪元素（：before，：after）时。

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

Answer 23

救命，我的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>

Answer 24

HTML ID

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

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

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

Answer 25

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

Answer 26

alphabets-＆GT;大写＆amp;小
digits-＆GT; 0-9
特殊字符 - ＆gt; '：'，' - '，'_'，'。'

格式应该从'。'开始。或字母表，后跟更多字母或数字的特殊字符。 id字段的值不得以'_'结尾。
另外，不允许使用空格，如果提供空格，则将它们视为不同的值，这在id属性的情况下无效。

Answer 27

在HTML5中，ID不能以数字开头，例如id - "1kid"，他们不能有空格（id = "Some kind"）

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

27 个答案:

HTML5：

PRE-HTML5：

HTML5：ID＆amp;的允许值类属性

HTML5

更多信息：