为HTML元素创建id属性时,该值有哪些规则?
当前回答
连字符、下划线、句点、冒号、数字和字母都适用于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>
其他回答
连字符、下划线、句点、冒号、数字和字母都适用于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>
字母表→ 大写和小写
数字→ 0-9
特殊字符→ ':', '-', '_', '.'
格式应以“.”开头或字母表,后跟更多字母或数字的特殊字符。id字段的值不能以“_”结尾。
此外,不允许空格,如果提供了空格,它们将被视为不同的值,这在id属性的情况下是无效的。
墙可以是:[a-z]、[a-z]、[0-9]、[*_:-]
它用于HTML5。。。
我们可以用任何标签添加id。
HTML5
请记住,ID必须是唯一的,即文档中不能有多个元素具有相同的ID值。
HTML5中关于ID内容的规则是(除了唯一性之外):
此属性的值不能包含空格。[...]虽然HTML5中取消了这一限制,但为了兼容性,ID应该以字母开头。
这是关于ID的W3规范(来自MDN):
任何字符串,具有以下限制:必须至少有一个字符长不能包含任何空格字符以前版本的HTML对ID值的内容设置了更大的限制(例如,它们不允许ID值以数字开头)。
更多信息:
W3-全局属性(id)MDN属性(id)
ID最适合命名布局的部分,因此不应为ID和类指定相同的名称ID允许字母数字和特殊字符但避免使用#:.*!符号不允许空格不是以数字或连字符开头,后跟数字区分大小写使用ID选择器比使用类选择器更快对于长CSS类或Id规则名称,也可以使用连字符“-”(下划线“_”,但这不利于SEO)如果规则有一个ID选择器作为其键选择器,则不要将标记名称添加到规则中。由于ID是唯一的,因此添加标记名会不必要地减慢匹配过程。在HTML5中,id属性可以用于任何HTML元素,而在HTML4.01中,id特性不能用于:<base>、<head>、<HTML>、<meta>、<param>、<script>、<style>和<title>。
推荐文章
- 使伸缩项目正确浮动
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何触发自动填充在谷歌Chrome?
- 创建圈div比使用图像更容易的方法?
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?
- 如何删除和清除所有的本地存储数据
- 强制打开“另存为…”弹出打开文本链接点击PDF在HTML
- 如何修改标签文本?
- 在HTML中还有其他有用的空格码吗,比如半空格的 , em-spaces, en-spaces等等?
- 输入触发器按钮单击