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

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

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

1851

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

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

HTML 5甚至更宽松,只说一个 id 必须包含至少一个字符,并且不能包含任何空格字符。

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

作为纯粹的实际问题,您可能希望避免某些字符。在 CSS 选择器中,句号,冒号和“#”具有特殊含义,因此您必须使用backslash in CSSselector string passed to jQuery中的双反斜杠来转义这些字符。考虑一下,在对 ids 中的句号和冒号发疯之前,您必须多久转义一次样式表或代码中的字符。

例如,HTML 声明<div id="first.name"></div>是有效的。您可以在 CSS 中将该元素选择为#first\.name,而在 jQuery 中选择如下:$('#first\\.name').但是,如果您忘记了反斜杠$('#first.name'),您将有一个完全有效的选择器来查找 ID 为first的元素,并且在类5

您可以通过严格遵守命名约定来简化开发任务。例如,如果您将自己完全限制为小写字符,并且始终用连字符或下划线分隔单词(但不能同时使用,请选择一个而不要使用另一个),那么您将拥有一个易于记忆的模式。您永远不会怀疑“是firstName还是FirstName下划线?”

一个现在非常模糊的问题是,至少有一个浏览器,Netscape 6,incorrectly treated id attribute values as case-sensitive。这意味着如果你在你的 HTML 中输入了id="firstName"(小写 'f'),在你的 CSS 中输入了#FirstName { color: red }(大写 'F'),那个有缺陷的浏览器将无法将元素的颜色设置为红色。在这个时候,2015 年 4 月

238

HTML 4 specification

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

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

172

从技术上讲,您可以在 id / name 属性中使用冒号和句号,但我强烈建议避免两者。

在 CSS(和几个 JavaScript 库,如 jQuery)中,句号和冒号都有特殊的含义,如果你不小心,你会遇到问题。句号是类选择器,冒号是伪选择器(例如,当鼠标在元素上时,“:hover”)。

如果你给一个元素 id“my.cool:thing”,你的 CSS 选择器看起来像这样:

#my.cool:thing { ... /* some rules */ ... }

这实际上是在说,“ID 为 'my' 的元素,一类 'cool' 和 'thing' 伪选择器”在 CSS-speak 中。

坚持任何大小写,数字,下划线和连字符的 A-Z。如上所述,请确保您的 ID 是唯一的。

这应该是你的第一个问题。

75

HTML5:ID 和类属性的允许值

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

在文档中必须是唯一的

不得包含任何空格字符

必须至少包含一个字符

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

所以值可以是所有的数字,只有一个数字,只是标点符号,包括特殊字符,随便什么。只是没有空格。这与 HTML5 有很大的不同。

在 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 Characters and case

在 CSS 中,标识符(包括选择器中的元素名称、类和 ID)只能包含字符 [a-zA-Z0-9] 和 ISO 10646 字符 U + 00A0 及更高,加上连字符 (-) 和下划线 (_);它们不能以数字、两个连字符或连字符开头,后跟数字>em。

在大多数情况下,您可以在具有限制或特殊含义的上下文中转义字符。

W3C 参考

HTML5

3.2.5.1 Theid attribute

id属性指定其元素的唯一标识符 (ID)。

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

注意:对于 ID 可以采用的形式没有其他限制;特别是,ID 可以仅由数字组成,以数字开头,以下划线开头,仅由标点符号组成等。

3.2.5.7 Theclass attribute

属性(如果已指定)的值必须是一组以空格分隔的标记,表示元素所属的各种类。

HTML 元素分配给它的类由 class 属性的值在空格上拆分时返回的所有类组成。(重复项将被忽略。)

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

本站系公益性非盈利分享网址,本文来自用户投稿,不代表码文网立场,如若转载,请注明出处

(875)
在 LateX中更改引文样式
上一篇
使用htmldom解析器删除 href链接和标签
下一篇

相关推荐

  • html网页设计知识点总结基本原理与实践

    示例示例HTML网页设计知识点总结:HTML标签:HTML标签用于定义网页中各个元素的结构和样式,常用标签有div、p、h1-h6、ul、ol、li、img、a等。…

    2023-01-13 13:55:36
    0 26 98
  • html弹出框代码:弹出框标题

    HTML弹出框代码是指使用HTML、CSS和JavaScript编写的代码,可以在网页上显示一个弹出框,用于显示消息或提示用户输入信息。下面是一个简单的HTML弹出框代码实例:…

    2023-01-23 02:09:59
    0 82 41
  • html禁止查看源代码:禁止查看源代码

    HTML禁止查看源代码可以通过来实现,代码如下:…

    2023-01-19 06:38:00
    0 56 17
  • html图片全屏代码:全屏显示图片 - 充分利用屏幕空间

    示例示例HTML图片全屏代码就是让图片占满整个浏览器窗口,以下是一个简单的实现方式:上面的代码中,我们将body和html的margin和padding都设置为0,并将宽度和高度设置为100%,然后将背景图片的位置设置为绝对定位,并将宽度和高度设置为100%,这样就可以实现图片全屏了。…

    2023-02-05 00:17:03
    0 15 66
  • html登陆界面源代码:登录界面

    2023-02-06 13:28:31
    0 69 42
  • html如何改变网页字体颜色:标题

    可以使用css样式来改变网页字体颜色,代码如下:上面的代码将所有的p元素的字体颜色设置为红色。…

    2023-01-30 13:33:50
    0 51 19
  • html音频播放器代码播放你喜欢的音乐

    HTML音频播放器代码是使用HTML5中的标签来实现的,可以播放MP3、WAV等多种格式的音频文件。下面是一个简单的HTML音频播放器的代码示例:…

    2023-01-07 09:23:17
    0 26 78
  • html音乐自动播放代码HTML代码实现

    示例示例HTML音乐自动播放代码是用来实现网页上的音乐自动播放功能的,下面是一个简单的html音乐自动播放代码示例:…

    2023-01-04 14:11:51
    0 79 94

发表评论

登录 后才能评论

评论列表(27条)