什么是HTML中的id属性的有效值？ [英] What are valid values for the id attribute in HTML?

问题描述

当为HTML元素创建 id 属性时，该值有哪些规则？

解决方案

对于 HTML 4 ，答案是技术上的：

ID和名称标记必须以字母（[A-Za-z]）开头，并且可以跟任何数字（[0-9]），连字符（ - ），下划线（_），冒号（：）和句点（。）。

HTML 5 更加宽容，只表示一个ID必须包含至少一个字符，并且不得包含任何空格字符。

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

作为一个纯粹实际的问题，您可能想避免某些字符。句点，冒号和'＃'在CSS选择器中有特殊含义，因此您必须使用 CSS中的反斜杠或者选择器字符串传递给jQuery 。考虑一下在你用疯狂的句号和冒号来疯狂之前，你经常需要在样式表或代码中逃避一个角色。

例如，HTML声明< div id =first.name>< / div> 是有效的。你可以在CSS中选择这个元素作为＃first \.name ，在jQuery中如下所示： $（'＃first \\.name '）。但是如果你忘记了反斜杠， $（'＃first.name'），你将有一个非常有效的选择器寻找元素的ID 第一，并且还有类名称。这是一个容易忽略的错误。改为选择id first-name （连字符而不是句点），您可能会感到更高兴。

您可以通过严格遵守命名约定来简化您的开发任务。例如，如果您完全将自己限制为小写字符，并始终用连字符或下划线分隔单词（但不能同时选择一个而不使用另一个），那么您将拥有一个易于记忆的模式。你永远不会怀疑它是 firstName 还是 FirstName ？因为你总是会知道你应该输入 first_name 。喜欢骆驼的情况？然后限制自己，不要使用连字符或下划线，并始终如此，对第一个字符始终使用大写或小写字母，不要混合它们。

---

现在一个非常模糊的问题是，至少有一个浏览器Netscape 6，rel =https://developer.mozilla.org/en-US/docs/Case_Sensitivity_in_class_and_id_Names =noreferrer>将id属性值错误处理为区分大小写。这意味着如果您在HTML（小写'f'）和 #FirstName {color：red}中键入了 id =firstName 在你的CSS中（大写'F'），那个错误的浏览器将无法将元素的颜色设置为红色。在编辑时，2015年4月，我希望您不要被要求支持Netscape 6.请考虑这是一个历史脚注。

When creating the id attributes for HTML elements, what rules are there for the value?

解决方案

For HTML 4, the answer is technically:

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

HTML 5 is even more permissive, saying only that an id must contain at least one character and may not contain any space characters.

The id attribute is case sensitive in XHTML.

As a purely practical matter, you may want to avoid certain characters. Periods, colons and '#' have special meaning in CSS selectors, so you will have to escape those characters using a backslash in CSS or a double backslash in a selector string passed to jQuery. Think about how often you will have to escape a character in your stylesheets or code before you go crazy with periods and colons in ids.

For example, the HTML declaration <div id="first.name"></div> is valid. You can select that element in CSS as #first\.name and in jQuery like so: $('#first\\.name'). But if you forget the backslash, $('#first.name'), you will have a perfectly valid selector looking for an element with id first and also having class name. This is a bug that is easy to overlook. You might be happier in the long run choosing the id first-name (a hyphen rather than a period), instead.

You can simplify your development tasks by strictly sticking to a naming convention. For example, if you limit yourself entirely to lower-case characters and always separate words with either hyphens or underscores (but not both, pick one and never use the other), then you have an easy-to-remember pattern. You will never wonder "was it firstName or FirstName?" because you will always know that you should type first_name. Prefer camel case? Then limit yourself to that, no hyphens or underscores, and always, consistently use either upper-case or lower-case for the first character, don't mix them.

---

A now very obscure problem was that at least one browser, Netscape 6, incorrectly treated id attribute values as case-sensitive. That meant that if you had typed id="firstName" in your HTML (lower-case 'f') and #FirstName { color: red } in your CSS (upper-case 'F'), that buggy browser would have failed to set the element's color to red. At the time of this edit, April 2015, I hope you aren't being asked to support Netscape 6. Consider this a historical footnote.

这篇关于什么是HTML中的id属性的有效值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！