html是什么 - 什么是HTML中的id属性的有效值?




html教程 html菜鸟 (18)

为HTML元素创建id属性时,该值有哪些规则?


Answers

  1. ID最适合命名布局的各个部分,因此不应为ID和类提供相同的名称
  2. ID允许使用字母数字和特殊字符
  3. 但避免使用# : . * ! # : . * ! 符号
  4. 不允许有空格
  5. 不是以数字或连字符后跟数字开始
  6. 区分大小写
  7. 使用ID选择器比使用类选择器更快
  8. 对于较长的CSS类或Id规则名使用连字符“ - ”(下划线“_”也可以使用,但不适用于seo)
  9. 如果规则具有ID选择器作为其关键选择器,则不要将标记名称添加到规则中。 由于ID是唯一的,因此添加标签名称会不必要地减慢匹配过程。
  10. 在HTML5中,id属性可用于任何HTML元素,而在HTML 4.01中,id属性不能用于: <base>, <head>, <html>, <meta>, <param>, <script>, <style>, and <title>.

任何字母数字值和“ - ”和“ _ ”都是有效的。 但是,您应该使用AZaz之间的任何字符来启动id名称


字母 - >帽子和小
数字 - > 0-9
特殊字符 - >':',' - ','_','。'

格式应该从'。'开始。 或字母表,然后是更多字母或数字的特殊字符。 id字段的值不能以'_'结尾。
而且,空格不允许(如果提供),它们被视为不同的值,这对id属性无效。


在实践中,许多网站使用以数字开头的id属性,即使这在技术上无效HTML。

HTML 5草案规范放宽了idname属性的规则:它们现在只是不透明的字符串,不能包含空格。


严格来说它应该匹配

[A-Za-z][-A-Za-z0-9_:.]*

但jquery似乎有冒号问题,所以避免它们可能会更好。


HTML5

该值在元素的主子树中的所有ID中必须是唯一的,并且必须至少包含一个字符。 该值不能包含任何空格字符。

至少有一个字符,不能有空格。

这为有效用例打开了大门,例如使用重音字符。 它还使我们有更多的弹药可以在脚下自我射击,因为现在您可以使用id值,这会导致CSS和JavaScript出现问题,除非您非常小心。


连字符,下划线,句点,冒号,数字和字母都适用于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>

没有空格,必须以从a到z和0到9的至少一个字符开始。



从HTML 4规范...

ID和名称标记必须以字母([A-Za-z])开头,后面可以跟随任意数量的字母,数字([0-9]),连字符(“ - ”),下划线(“_”) ,冒号(“:”)和句点(“。”)。

编辑:德哦! 再次击败按钮!


HTML5

请记住,ID必须是唯一的,即。 文档中不能有多个元素具有相同的id值。

有关HTML5中ID内容的规则(除了独特之外):

This attribute's value must not contain white spaces. [...] 
Though this restriction has been lifted in HTML 5, 
an ID should start with a letter for compatibility.

这是有关ID(来自MDN)的W3规范:

Any string, with the following restrictions:
must be at least one character long
must not contain any space characters
Previous versions of HTML placed greater restrictions on the content of ID values 
(for example, they did not permit ID values to begin with a number).

更多信息:

  • W3 - 全局属性( id
  • MDN atribute( id

HTML5:ID和类属性的许可值

从HTML5开始,对ID值的唯一限制是:

  1. 在文档中必须是唯一的
  2. 不得包含任何空格字符
  3. 必须至少包含一个字符

类似的规则适用于类(当然除了唯一性)。

所以这个值可以是全部数字,只是一个数字,只是标点符号,包括特殊字符,不管。 没有空白。 这与HTML4非常不同。

在HTML 4中,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可以只包含数字,以数字开头,以下划线开头,仅包含标点符号等。

3.2.5.7 class属性

该属性(如果指定的话)必须具有一个值,该值是一组表示该元素所属的各个类的空格分隔的标记。

HTML元素分配给它的类包含当类属性的值在空间上分割时返回的所有类。 (重复被忽略。)

对于作者可以在类属性中使用的标记没有其他限制,但鼓励作者使用描述内容本质的值,而不是描述所需内容呈现的值。


元素的唯一标识符。

文档中不能有多个元素具有相同的id值。

任何字符串,具有以下限制:

  1. 必须至少有一个字符长
  2. 不得包含任何空格字符:

    • U + 0020 SPACE
    • U + 0009 CHARACTER TABULATION(标签)
    • U + 000A LINE FEED(LF)
    • U + 000C FORM FEED(FF)
    • U + 000D CARRIAGE RETURN(CR)

使用ASCII letters and digits, '_', '-' and '.'以外的ASCII letters and digits, '_', '-' and '.' 可能会导致兼容性问题,因为它们在HTML 4是不允许的。 虽然HTML 5解除了这个限制,但ID应以字母开头以兼容。


对于HTML 4 ,答案在技术上是:

ID和名称标记必须以字母([A-Za-z])开头,后面可以跟随任意数量的字母,数字([0-9]),连字符(“ - ”),下划线(“_”) ,冒号(“:”)和句点(“。”)。

HTML 5更加宽容,只是说一个ID必须包含至少一个字符并且可能不包含任何空格字符。

id属性在XHTML区分大小写。

作为一个纯粹的实际问题,你可能想避免某些字符。 句点,冒号和'#'在CSS选择器中有特殊含义,所以你必须使用CSS中反斜线传递给jQuery选择器字符串中的双反斜线来转义这些字符。 考虑一下,在疯狂地使用时间段和冒号进入id之前,您需要多久才能逃脱样式表或代码中的某个角色。

例如,HTML声明<div id="first.name"></div>是有效的。 您可以在CSS中选择该元素作为#first\.name并在jQuery中如下所示: $('#first\\.name'). 但是,如果您忘记了反斜杠$('#first.name') ,那么您将拥有一个完美有效的选择器,它将first查找带有id的元素,并且还具有类name 。 这是一个容易忽略的错误。 相反,从长远来看,选择id first-name (连字符而非句点)可能会更快乐。

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

一个现在非常模糊的问题是,至少有一个浏览器Netscape 6 错误地将id属性值视为区分大小写 。 这意味着如果你的CSS(大写'F')在你的HTML(小写'f')和#FirstName { color: red }中键入了id="firstName" ,那么这个错误的浏览器将会失败将元素的颜色设置为红色。 在编辑时,2015年4月,我希望你没有被要求支持Netscape 6.请考虑这是一个历史脚注。


另外,请不要忘记ID是唯一的。 一旦使用,ID值可能不会再出现在文档的任何地方。

你可能有许多ID,但都必须具有唯一的价值。

另一方面,还有类元素。 就像ID一样,它可以出现很多次,但是这个值可能会一遍又一遍地被使用。


HTML5:

摆脱在这里看到的id属性的额外限制。 唯一的要求(除了在文件中是独一无二的)是:

  1. 该值必须包含至少一个字符(不能为空)
  2. 它不能包含任何空格字符。

PRE-HTML5:

ID应该匹配:

[A-Za-z][-A-Za-z0-9_:.]*
  1. 必须以AZ或az字符开头
  2. 可能包含- (连字符), _ (下划线), :冒号)和. (期)

但应该避免:. 东阳:

例如,ID可以被标记为“ab:c”并且在样式表中被引用为#ab:c,但是也可以是该元素的id,它可以表示id“a”,类“b”选择器“c”。 最好避免混淆,远离使用。 和:一起。


HTML 4规范

ID和名称标记必须以字母([A-Za-z])开头,后面可以跟随任意数量的字母,数字([0-9]),连字符(“ - ”),下划线(“_”) ,冒号(“:”)和句点(“。”)。

一个常见的错误是使用以数字开头的ID。


回答:

  • 浏览器将尝试将chucknorris转换为十六进制值。
  • 由于cchucknorris中唯一有效的十六进制字符, 因此该值变为: c00c00000000对于所有无效的值,为0 )。
  • 然后浏览器将结果分为3个分组: Red = c00cGreen = 0000Blue = 0000
  • 由于html背景的有效十六进制值仅包含每种颜色类型( rgb )的2位数字,因此最后两位数字将从每个组中截断,留下rgb值c00000 ,这是一种砖红色调颜色。






html