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


当前回答

字母表→ 大写和小写

数字→ 0-9

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

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

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

其他回答

根据HTML 4规范:

ID和NAME标记必须以字母([a-Za-z])开头,后面可以是任意数量的字母、数字([0-9])、连字符(“-”)、下划线(“_”)、冒号(“:”)和句点(“.”)。

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

救命,我的Javascript坏了!

每个人都说ID不能重复。

在除FireFox之外的所有浏览器中都试用过

<div id=“ONE”></div><div id=“ONE”></div><div id=“ONE”></div><脚本>document.body.append(document.querySelectorAll(“#ONE”).length,'DIV!')document.body.append('in',typeofONE)console.log(一);//全局变量!!</script>

解释

在世纪之交,微软拥有90%的浏览器市场份额,

并实施从未标准化的浏览器行为:

1.为每个ID创建全局变量

2.为重复ID创建数组

所有后来的浏览器供应商都复制了这种行为,否则他们的浏览器将不支持旧网站。

2015年左右,Mozilla删除了2。来自FireFox和1。仍然有效。

所有其他浏览器仍然支持1。和2。

我每天都使用它,因为键入ONE而不是document.querySelector(“#ONE”)帮助我更快地创建原型;我不在生产中使用它。

对于HTML 4,技术上的答案是:

ID和NAME标记必须以字母([a-Za-z])开头,后面可以是任意数量的字母、数字([0-9])、连字符(“-”)、下划线(“_”)、冒号(“:”)和句点(“.”)。

HTML5甚至更为宽松,只表示id必须至少包含一个字符,并且不能包含任何空格字符。

在XHTML中,id属性区分大小写。

作为一个纯粹的实际问题,您可能需要避免某些字符。句点、冒号和“#”在CSS选择器中具有特殊含义,因此您必须在CSS中使用反斜杠或在传递给jQuery的选择器字符串中使用双反斜杠来转义这些字符。想想在你疯狂地使用id中的句点和冒号之前,你需要多长时间在样式表或代码中转义一个字符。

例如,HTML声明<div id=“first.name”></div>是有效的。您可以在CSS中将该元素选择为#first\.name,并在jQuery中选择为:$('#first\\name')。但是如果您忘记了反斜杠$('#first.name'),您将拥有一个完全有效的选择器来查找一个id优先且具有类名的元素。这是一个容易忽视的错误。从长远来看,选择id名(连字符而不是句点)可能会更快乐。

通过严格遵守命名约定,可以简化开发任务。例如,如果您将自己完全限制为小写字符,并且始终使用连字符或下划线分隔单词(但不能同时使用连字符和下划线,请选择其中一个,不要使用另一个),那么您就有了一个易于记忆的模式。你永远不会怀疑“是firstName还是firstName?”,因为你永远知道你应该输入first_name。更喜欢驼色?然后限制自己,不要使用连字符或下划线,并且始终对第一个字符使用大写或小写,不要混用它们。


现在一个非常模糊的问题是,至少有一个浏览器Netscape 6错误地将id属性值视为区分大小写。这意味着,如果您在HTML中键入id=“firstName”(小写'f'),在CSS中键入#firstName{color:red}(大写'f'),则错误浏览器将无法将元素的颜色设置为红色。在2015年4月进行编辑时,我希望您没有被要求支持Netscape 6。将其视为历史脚注。

HTML5:

它消除了对id属性的额外限制(请参见此处)。剩下的唯一要求(除了文件中的唯一要求)是:

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


HTML5之前:

ID应匹配:

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

必须以A-Z或A-Z字符开头可以包含-(连字符)、_(下划线)、:(冒号)和。(期间)

但我们应该避免:和。因为:

例如,一个ID可以被标记为“a.b:c”,并在样式表中被引用为#a.b:cc,但除了作为元素的ID之外,它还可以表示ID“a”、类“b”、伪选择器“c”。最好避免混淆,远离使用。和:总计。

自ES2015以来,如果文档字符集设置为UTF-8,我们也可以使用几乎所有的Unicode字符作为ID。

在此测试:https://mothereff.in/js-variables

阅读:ES2015中有效的JavaScript变量名

在ES2015中,标识符必须以$、_或任何带有Unicode派生的核心属性ID_Start。标识符的其余部分可以包含$、_、U+200C零宽度非连接符、U+200D零宽度连接符或任何Unicode符号派生的核心属性ID_Continue。

const target=document.querySelector(“div”).idconsole.log(“Div-id:”,目标)document.getElementById(目标).style.background=“chartreuse”第二部分{边框:5px蓝色实心;宽度:100%;高度:200px}<div id=“H̹̙̦̮͉̩̗ͻͧ̏̾Eͨ͆͒̆ͮ͏̷̰̣̫̤C͈̻ͯ͐O̜͎͍878;͐͗ͤ781;͢M̡̲̭͍͇̼̟̯̦̉̒͠Ḛ̛̙̞̪̗ͥͤͩ̾͑̔͐ͅṮ“”</div>


你应该使用它吗?可能不是个好主意!

阅读:JavaScript:“函数体后面缺少语法错误}”