HTML中有效的id属性值

HTML中有效的id属性值

技术背景

在HTML开发中，id属性用于为元素提供唯一标识符，在CSS样式设置、JavaScript脚本操作等方面有着重要作用。不同版本的HTML对id属性值的规定有所不同，了解这些规则能帮助开发者正确使用id属性。

实现步骤

HTML 4中的规则

在HTML 4里，ID和NAME令牌必须以字母（[A-Za-z]）开头，后面可以跟任意数量的字母、数字（[0-9]）、连字符（-）、下划线（_）、冒号（:）和句号（.）。示例如下：

1
<div id="validId123"></div>

HTML 5中的规则

HTML 5的规则更为宽松，id属性值只要满足以下条件即可：

  1. 在文档中必须是唯一的。
  2. 不能包含任何空格字符。
  3. 必须包含至少一个字符。

示例如下：

1
2
<div id="999"></div>
<div id="#%LV-||"></div>

核心代码

HTML示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html>
<head>
    <title>id属性示例</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>

CSS中选择包含特殊字符的id元素

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

JavaScript中使用包含特殊字符的id元素

1
2
3
const target = document.querySelector("div").id;
console.log("Div id:", target);
document.getElementById(target).style.background = "chartreuse";

最佳实践

  1. 命名规范：严格遵循命名规范，例如全部使用小写字符，用连字符或下划线分隔单词（但不要两者混用）；或者使用驼峰命名法，且始终保持首字母大小写一致。
  2. 避免特殊字符：虽然HTML 5允许使用更多字符，但为避免在CSS和JavaScript中出现问题，尽量避免使用句号、冒号和#等具有特殊含义的字符。
  3. 确保唯一性：id属性值在文档中必须唯一，这是使用id的基本原则。

常见问题

  1. 特殊字符问题：句号、冒号和#在CSS选择器中有特殊含义，使用时需要用反斜杠进行转义。例如，在CSS中选择id="first.name"的元素，需要写成#first\.name；在jQuery中需要写成$('#first\\.name')。
  2. 大小写敏感问题：在XHTML中，id属性是区分大小写的。此外，早期的Netscape 6浏览器曾错误地将id属性值视为区分大小写。
  3. 兼容性问题：使用数字开头或特殊字符作为id值，在HTML 4中是无效的，虽然HTML 5放宽了规则，但为了兼容性，id最好以字母开头。
前端开发 > HTML技术
#前端开发 #jQuery #HTML #CSS #id属性
HTML中有效的id属性值
https://119291.xyz/posts/valid-html-id-attribute-values/
作者
ww
发布于
2025年5月16日
许可协议