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

问题描述

在为 HTML 元素创建 id 属性时，值有什么规则?

解决方案

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

<块引用>

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

HTML 5 更加宽容，说只是一个 id 必须至少包含一个字符，并且不能包含任何空格字符.

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

作为一个纯粹的实际问题，您可能希望避免使用某些字符.句点、冒号和#"在 CSS 选择器中具有特殊含义，因此您必须使用 CSS 中的反斜杠 或 传递给 jQuery 的选择器字符串.想想在您对 id 中的句点和冒号感到疯狂之前，您需要多长时间对样式表或代码中的字符进行转义.

例如，HTML 声明

是有效的.您可以在 CSS 中选择该元素作为 #first.name 并在 jQuery 中像这样:$('#first\.name'). 但是如果你忘记了反斜杠，$('#first.name')，您将有一个完全有效的选择器，用于查找 ID 为 first 并且还具有 class name.这是一个很容易被忽视的错误.从长远来看，您可能会更高兴选择 id first-name(一个连字符而不是句点).

您可以通过严格遵守命名约定来简化您的开发任务.例如，如果您完全限制自己使用小写字符，并且总是用连字符或下划线分隔单词(但不能同时使用，请选择一个，不要使用另一个)，那么您就有了一个易于记忆的模式.您永远不会想知道是 firstName 还是 FirstName?"因为您将始终知道应该键入 first_name.更喜欢骆驼壳?然后限制自己，不要使用连字符或下划线，并且始终始终使用大写或小写作为第一个字符，不要混合使用.

<小时>

现在一个非常模糊的问题是，至少有一个浏览器，Netscape 6，错误地处理了 id属性值区分大小写.这意味着，如果您在 HTML 中输入了 id="firstName"(小写 'f')并在 CSS 中输入了 #FirstName { color: red }(大写-case '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屋！