HTML中id属性的有效值是什么？-Java 学习之路

1769

为HTML元素创建 id 属性时，值的规则是什么？

22 回答

-4
你可以从技术上在id / name属性中使用冒号和句点，但我强烈建议避免这两者 .

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

如果你给一个元素id“my.cool：thing”，你的CSS选择器将如下所示：
```
#my.cool:thing { ... /* some rules */ ... }
```
这真的是说，“CSS中有一个id为'my'的元素，一个'cool'和'thing'伪选择器'的元素 .

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

这应该是你的第一个担忧 .
回复于 2024-04-25T12:25:03+08:00
61

任何 Alpha-numeric value 和“ - " and " _ ”都有效 . 但是，您应该使用 A-Z 或 a-z 之间的任何字符启动id名称 .

回复于 2024-04-25T12:25:03+08:00
-2

对于HTML 4，答案是技术上的：

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

HTML 5更宽容，只说id必须包含至少一个字符，并且不能包含任何空格字符 .

id属性在XHTML中区分大小写 .

作为一个纯粹的实际问题，您可能希望避免使用某些字符 . 句点，冒号和'#'在CSS选择器中具有特殊含义，因此您必须在selector string passed to jQuery中使用backslash in CSS或双反斜杠来转义这些字符 . 考虑一下你在使用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 . 这意味着如果你在你的CSS（大写'f'）和 #FirstName { color: red } 中输入了 id="firstName" ，那么那个错误的浏览器将无法设置要求支持Netscape 6的元素's color to red. At the time of this edit, April 2015, I hope you aren' . 考虑这个一个历史的脚注 .

回复于 2024-04-25T12:25:03+08:00
28

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

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

回复于 2024-04-25T12:25:03+08:00
1531
我知道回答这个问题已经很晚了，但由于我遇到了同样的问题，我发现这个答案更加完整，我决定回答 .

所有a，b，c ... x，y，z，A，B，C ...... X，Y，Z，0,1,2 ... 7,8,9， - ，_可用于id，但你不应该使用数字和 - 作为第一个字符 .

这些都是错的：
```
1adfsvsdf   // use number in first
-adfasdf    // use - in first
afd'ksdf    // use ' in characters
asdf;asdf   // use ; in characters
```
回复于 2024-04-25T12:25:03+08:00
7

为 HTML5

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

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

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

回复于 2024-04-25T12:25:03+08:00
42
- 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>.
回复于 2024-04-25T12:25:03+08:00

135

连字符，下划线，句点，冒号，数字和字母都可以与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>

回复于 2024-04-25T12:25:03+08:00

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

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

22 回答

HTML5

更多信息：

HTML5：

PRE-HTML5：

HTML5：ID和类属性的允许值

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

22 回答

HTML5

更多信息：

HTML5：

PRE-HTML5：

HTML5：ID和类属性的允许值

相关问题