为HTML元素创建id属性时,该值有哪些规则?
当前回答
对于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”。最好避免混淆,远离使用。和:总计。
Html ID
id属性指定其元素的唯一标识符(id)。
身份证的形式没有其他限制;特别是,ID可以仅由数字组成,以数字开头,以下划线开头,仅由标点符号组成,等等。
元素的唯一标识符可以用于多种用途,最明显的是作为使用片段链接到文档的特定部分的方式,作为编写脚本时以元素为目标的方式,以及根据CSS对特定元素进行样式设置的方式。
要引用带句点的id,需要使用反斜杠。我不确定连字符或下划线是否相同。
例如:
HTML
<div id="maintenance.instrumentNumber">############0218</div>
CSS
#maintenance\.instrumentNumber{word-wrap:break-word;}
HTML5:ID和类属性的允许值
从HTML5开始,对ID值的唯一限制是:
必须在文档中唯一不能包含任何空格字符必须至少包含一个字符
类似的规则适用于类(当然,唯一性除外)。
所以值可以是所有数字,只有一个数字,只有标点符号,包括特殊字符等等。没有空格。这与HTML4非常不同。
在HTML4中,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字符和大小写在CSS中,标识符(包括元素名称、类和ID选择器)只能包含字符[a-zA-Z0-9]和ISO 10646字符U+00A0及更高,加上连字符(-)和下划线(_); 它们不能以数字、两个连字符或连字符开头后跟一个数字。
在大多数情况下,您可以在具有限制或特殊含义的上下文中转义字符。
W3C参考
HTML5
3.2.5.1 id属性id属性指定其元素的唯一标识符(id)。该值必须在元素主页中的所有ID中唯一子树,并且必须至少包含一个字符。该值不得包含任何空格字符。注意:ID的形式没有其他限制;在里面特别是,ID可以由数字组成,以数字开头,开始带下划线,仅由标点符号等组成。3.2.5.7等级属性如果指定了属性,则该属性的值必须是表示元素属于。HTML元素分配给它的类包含所有类属性的值拆分时返回的类空间。(重复项被忽略。)作者可以在中使用的令牌没有其他限制class属性,但鼓励作者使用描述内容的性质,而不是描述内容的期望呈现。
自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:“函数体后面缺少语法错误}”
推荐文章
- 撇号的HTML代码
- 为什么我的CSS3媒体查询不能在移动设备上工作?
- 下一个元素的CSS选择器语法是什么?
- 我如何用CSS跨浏览器绘制垂直文本?
- 如何获得box-shadow在左侧和右侧
- 相对定位一个元素,而不占用文档流中的空间
- 如何在jQuery检索复选框值
- 禁用身体滚动
- 如何在删除前显示确认消息?
- 在一个CSS宽度的小数点后的位置是尊重?
- 我怎么能选择一个特定的类的最后一个元素,而不是父里面的最后一个孩子?
- 反应:为什么当道具改变时子组件不更新
- 我怎么能检查html元素,从DOM消失失去焦点?
- 在Atom编辑器中是否有格式化HTML的命令?
- 把<script>标签放在</body>标签之后是错误的吗?