为HTML元素创建id属性时,该值有哪些规则?
当前回答
看起来,虽然冒号(:)和句点(.)在HTML规范中是有效的,但它们在CSS中作为id选择器是无效的,因此如果您打算将它们用于此目的,最好避免使用它们。
其他回答
实际上,许多网站使用以数字开头的id属性,尽管这在技术上是无效的HTML。
HTML5草案规范放宽了id和name属性的规则:它们现在只是不透明的字符串,不能包含空格。
要引用带句点的id,需要使用反斜杠。我不确定连字符或下划线是否相同。
例如:
HTML
<div id="maintenance.instrumentNumber">############0218</div>
CSS
#maintenance\.instrumentNumber{word-wrap:break-word;}
救命,我的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”)帮助我更快地创建原型;我不在生产中使用它。
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属性,但鼓励作者使用描述内容的性质,而不是描述内容的期望呈现。
从HTML 4规范。。。
ID和NAME标记必须以字母([a-Za-z])开头,后面可以是任意数量的字母、数字([0-9])、连字符(“-”)、下划线(“_”)、冒号(“:”)和句点(“.”)。
推荐文章
- 使伸缩项目正确浮动
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何触发自动填充在谷歌Chrome?
- 创建圈div比使用图像更容易的方法?
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?
- 如何删除和清除所有的本地存储数据
- 强制打开“另存为…”弹出打开文本链接点击PDF在HTML
- 如何修改标签文本?
- 在HTML中还有其他有用的空格码吗,比如半空格的 , em-spaces, en-spaces等等?
- 输入触发器按钮单击