HTML
动态标准 — 最后更新于 2024年9月12日
动态标准 — 最后更新于 2024年9月12日
本规范没有提供描述面包屑导航菜单的机器可读方式。鼓励作者只在一个段落中使用一系列链接。nav 元素可用于标记包含这些段落的区域为导航块。
在以下示例中，可以通过两种路径到达当前页面。
< nav >
< p >
< a href = "/" > Main</ a > ▸
< a href = "/products/" > Products</ a > ▸
< a href = "/products/dishwashers/" > Dishwashers</ a > ▸
< a > Second hand</ a >
</ p >
< p >
< a href = "/" > Main</ a > ▸
< a href = "/second-hand/" > Second hand</ a > ▸
< a > Dishwashers</ a >
</ p >
</ nav > 本规范未定义任何专门用于标记应用于一组页面（也称为标签云）的关键字列表的标记。通常，鼓励作者使用 ul 元素标记此类列表，并使用显式内联计数，然后隐藏这些计数并使用样式表将其转换为表示效果，或者使用 SVG。
这里，三个标签包含在一个简短的标签云中
< style >
. tag-cloud > li > span { display : none ; }
. tag-cloud > li { display : inline ; }
. tag-cloud-1 { font-size : 0.7 em ; }
. tag-cloud-2 { font-size : 0.9 em ; }
. tag-cloud-3 { font-size : 1.1 em ; }
. tag-cloud-4 { font-size : 1.3 em ; }
. tag-cloud-5 { font-size : 1.5 em ; }
@ media speech {
. tag-cloud > li > span { display : inline }
}
</ style >
...
< ul class = "tag-cloud" >
< li class = "tag-cloud-4" >< a title = "28 instances" href = "/t/apple" > apple</ a > < span > (popular)</ span >
< li class = "tag-cloud-2" >< a title = "6 instances" href = "/t/kiwi" > kiwi</ a > < span > (rare)</ span >
< li class = "tag-cloud-5" >< a title = "41 instances" href = "/t/pear" > pear</ a > < span > (very popular)</ span >
</ ul > 每个标签的实际频率使用 title 属性给出。提供了一个 CSS 样式表，用于将标记转换为不同大小的单词云，但对于不支持 CSS 或不是可视化的用户代理，标记包含注释（如“(流行)”或“(罕见)”）以按频率对各种标签进行分类，从而使所有用户都能从信息中受益。
使用 ul 元素（而不是 ol），因为顺序并不特别重要：虽然列表实际上按字母顺序排列，但如果按标签长度排序，它也会传达相同的信息。
tag rel 关键字未在这些 a 元素上使用，因为它们不表示应用于页面本身的标签；它们只是索引列表中标签本身的一部分。
本规范没有定义用于标记对话、会议记录、聊天记录、剧本中的对话、即时消息日志以及其他不同参与者轮流进行话语的情况的特定元素。
相反，鼓励作者使用 p 元素和标点符号标记对话。需要为样式目的标记说话者的作者鼓励使用 span 或 b。文本包含在 i 元素中的段落可用于标记舞台提示。
此示例使用艾伯特和科斯泰洛著名的小品《谁是第一》中的摘录演示了这一点
< p > Costello: Look, you gotta first baseman?
< p > Abbott: Certainly.
< p > Costello: Who's playing first?
< p > Abbott: That's right.
< p > Costello becomes exasperated.
< p > Costello: When you pay off the first baseman every month, who gets the money?
< p > Abbott: Every dollar of it.以下摘录显示了如何使用 data 元素为每一行提供 Unix 时间戳来标记 IM 对话日志。请注意，时间戳采用 time 元素不支持的格式，因此使用 data 元素代替（即 Unix time_t 时间戳）。如果作者希望使用 time 元素支持的日期和时间格式之一标记数据，则可以使用该元素代替 data。这可能是有利的，因为它允许数据分析工具明确地检测时间戳，而无需与页面作者协调。
< p > < data value = "1319898155" > 14:22</ data > < b > egof</ b > I'm not that nerdy, I've only seen 30% of the star trek episodes
< p > < data value = "1319898192" > 14:23</ data > < b > kaj</ b > if you know what percentage of the star trek episodes you have seen, you are inarguably nerdy
< p > < data value = "1319898200" > 14:23</ data > < b > egof</ b > it's unarguably
< p > < data value = "1319898228" > 14:23</ data > < i > * kaj blinks</ i >
< p > < data value = "1319898260" > 14:24</ data > < b > kaj</ b > you are not helping your caseHTML 无法很好地标记图形，因此游戏交互式对话的描述更难以标记。此示例显示了一种可能的约定，使用 dl 元素列出对话中每个点的可能回复。另一个需要考虑的选项是以 DOT 文件的形式描述对话，并将结果输出为 SVG 图像以放置在文档中。[DOT]
< p > Next, you meet a fisher. You can say one of several greetings:
< dl >
< dt > "Hello there!"
< dd >
< p > She responds with "Hello, how may I help you?"; you can respond with:
< dl >
< dt > "I would like to buy a fish."
< dd > < p > She sells you a fish and the conversation finishes.
< dt > "Can I borrow your boat?"
< dd >
< p > She is surprised and asks "What are you offering in return?".
< dl >
< dt > "Five gold." (if you have enough)
< dt > "Ten gold." (if you have enough)
< dt > "Fifteen gold." (if you have enough)
< dd > < p > She lends you her boat. The conversation ends.
< dt > "A fish." (if you have one)
< dt > "A newspaper." (if you have one)
< dt > "A pebble." (if you have one)
< dd > < p > "No thanks", she replies. Your conversation options
at this point are the same as they were after asking to borrow
her boat, minus any options you've suggested before.
</ dl >
</ dd >
</ dl >
</ dd >
< dt > "Vote for me in the next election!"
< dd > < p > She turns away. The conversation finishes.
< dt > "Madam, are you aware that your fish are running away?"
< dd >
< p > She looks at you skeptically and says "Fish cannot run, miss".
< dl >
< dt > "You got me!"
< dd > < p > The fisher sighs and the conversation ends.
< dt > "Only kidding."
< dd > < p > "Good one!" she retorts. Your conversation options at this
point are the same as those following "Hello there!" above.
< dt > "Oh, then what are they doing?"
< dd > < p > She looks at her fish, giving you an opportunity to steal
her boat, which you do. The conversation ends.
</ dl >
</ dd >
</ dl > 在一些游戏中，对话更简单：每个角色仅仅有一组固定的台词。在此示例中，游戏常见问题解答/攻略列出了每个角色的一些已知可能的回复
< section >
< h1 > Dialogue</ h1 >
< p >< small > Some characters repeat their lines in order each time you interact
with them, others randomly pick from amongst their lines. Those who respond in
order have numbered entries in the lists below.</ small >
< h2 > The Shopkeeper</ h2 >
< ul >
< li > How may I help you?
< li > Fresh apples!
< li > A loaf of bread for madam?
</ ul >
< h2 > The pilot</ h2 >
< p > Before the accident:
< ul >
< li > I'm about to fly out, sorry!
< li > Sorry, I'm just waiting for flight clearance and then I'll be off!
</ ul >
< p > After the accident:
< ol >
< li > I'm about to fly out, sorry!
< li > Ok, I'm not leaving right now, my plane is being cleaned.
< li > Ok, it's not being cleaned, it needs a minor repair first.
< li > Ok, ok, stop bothering me! Truth is, I had a crash.
</ ol >
< h2 > Clan Leader</ h2 >
< p > During the first clan meeting:
< ul >
< li > Hey, have you seen my daughter? I bet she's up to something nefarious again...
< li > Nice weather we're having today, eh?
< li > The name is Bailey, Jeff Bailey. How can I help you today?
< li > A glass of water? Fresh from the well!
</ ul >
< p > After the earthquake:
< ol >
< li > Everyone is safe in the shelter, we just have to put out the fire!
< li > I'll go and tell the fire brigade, you keep hosing it down!
</ ol >
</ section > HTML 没有用于标记脚注的专用机制。以下是建议的替代方案。
对于简短的内联注释，可以使用 title 属性。
在此示例中，对话的两个部分使用 title 属性用类似脚注的内容进行注释。
< p > < b > Customer</ b > : Hello! I wish to register a complaint. Hello. Miss?
< p > < b > Shopkeeper</ b > : < span title = "Colloquial pronunciation of 'What do you'"
> Watcha</ span > mean, miss?
< p > < b > Customer</ b > : Uh, I'm sorry, I have a cold. I wish to make a complaint.
< p > < b > Shopkeeper</ b > : Sorry, < span title = "This is, of course, a lie." > we're
closing for lunch</ span > .不幸的是，目前不鼓励依赖 title 属性，因为许多用户代理不会以本规范要求的可访问方式公开该属性（例如，需要使用鼠标之类的指向设备才能显示工具提示，这排除了仅限键盘的用户和仅限触摸的用户，例如任何拥有现代手机或平板电脑的用户）。
如果使用 title 属性，则可以使用 CSS 来吸引读者注意具有该属性的元素。
例如，以下 CSS 在具有 title 属性的元素下方放置一条虚线。
[title] { border-bottom : thin dashed; } 对于较长的注释，应使用 a 元素，指向文档中后面的元素。约定是链接的内容为方括号中的数字。
在此示例中，对话中的脚注链接到对话下方的段落。然后，该段落反过来链接回对话，允许用户返回到脚注的位置。
< p > Announcer: Number 16: The < i > hand</ i > .
< p > Interviewer: Good evening. I have with me in the studio tonight
Mr Norman St John Polevaulter, who for the past few years has been
contradicting people. Mr Polevaulter, why < em > do</ em > you
contradict people?
< p > Norman: I don't. < sup >< a href = "#fn1" id = "r1" > [1]</ a ></ sup >
< p > Interviewer: You told me you did!
...
< section >
< p id = "fn1" >< a href = "#r1" > [1]</ a > This is, naturally, a lie,
but paradoxically if it were true he could not say so without
contradicting the interviewer and thus making it false.</ p >
</ section > 对于旁注，即应用于整个文本部分而不是特定单词或句子的较长注释，应使用 aside 元素。
在此示例中，在对话之后给出了一个侧边栏，提供了一些上下文。
< p > < span class = "speaker" > Customer</ span > : I will not buy this record, it is scratched.
< p > < span class = "speaker" > Shopkeeper</ span > : I'm sorry?
< p > < span class = "speaker" > Customer</ span > : I will not buy this record, it is scratched.
< p > < span class = "speaker" > Shopkeeper</ span > : No no no, this's'a tobacconist's.
< aside >
< p > In 1970, the British Empire lay in ruins, and foreign
nationalists frequented the streets — many of them Hungarians
(not the streets — the foreign nationals). Sadly, Alexander
Yalt has been publishing incompetently-written phrase books.
</ aside > 对于图形或表格，可以在相关的 figcaption 或 caption 元素中或在周围的散文文本中包含脚注。
在此示例中，表格的单元格包含脚注，这些脚注在散文中给出。使用 figure 元素为表格及其脚注的组合提供单个图例。
< figure >
< figcaption > Table 1. Alternative activities for knights.</ figcaption >
< table >
< tr >
< th > Activity
< th > Location
< th > Cost
< tr >
< td > Dance
< td > Wherever possible
< td > £0< sup >< a href = "#fn1" > 1</ a ></ sup >
< tr >
< td > Routines, chorus scenes< sup >< a href = "#fn2" > 2</ a ></ sup >
< td > Undisclosed
< td > Undisclosed
< tr >
< td > Dining< sup >< a href = "#fn3" > 3</ a ></ sup >
< td > Camelot
< td > Cost of ham, jam, and spam< sup >< a href = "#fn4" > 4</ a ></ sup >
</ table >
< p id = "fn1" > 1. Assumed.</ p >
< p id = "fn2" > 2. Footwork impeccable.</ p >
< p id = "fn3" > 3. Quality described as "well".</ p >
< p id = "fn4" > 4. A lot.</ p >
</ figure > 如果元素属于以下情况之一，则称该元素实际上已禁用
button 元素，该元素已禁用input 元素，该元素已禁用select 元素，该元素已禁用textarea 元素，该元素已禁用optgroup 元素，该元素具有 disabled 属性option 元素，该元素已禁用fieldset 元素，该元素是已禁用的字段集此定义用于确定哪些元素可聚焦，以及哪些元素与 :enabled 和 :disabled 伪类 匹配。
CSS 值和单位 将 'attr()' 函数的目的属性名称的大小写敏感性留给宿主语言定义。[CSSVALUES]
当将 CSS 'attr()' 函数的属性名称部分与 HTML 元素 上无命名空间属性的名称进行比较时HTML 文档，CSS 'attr()' 函数的名称部分必须首先转换为 ASCII 小写。当与其他属性进行比较时，相同函数必须根据其原始大小写进行比较。在这两种情况下，要匹配，值必须与彼此相同（因此比较区分大小写）。
这与比较 CSS 属性选择器的名称部分相同，下一节中对此进行了说明。
Selectors 将元素名称、属性名称和属性值的区分大小写留给宿主语言定义。 [SELECTORS]
当将 CSS 元素 类型选择器 与 HTML 文档 中 HTML 元素 的名称进行比较时，CSS 元素 类型选择器 必须首先 转换为 ASCII 小写。当与其他元素比较时，相同的选择器必须根据其原始大小写进行比较。在这两种情况下，要匹配，值必须 完全相同（因此比较区分大小写）。
当将 CSS 属性选择器 的名称部分与 HTML 文档 中 HTML 元素 上的属性名称进行比较时，CSS 属性选择器 的名称部分必须首先 转换为 ASCII 小写。当与其他属性比较时，相同的选择器必须根据其原始大小写进行比较。在这两种情况下，比较都区分大小写。
属性选择器 在 HTML 文档 中的 HTML 元素 上必须将具有以下名称的属性的值视为 ASCII 不区分大小写
accept
accept-charset
align
alink
axis
bgcolor
charset
checked
clear
codetype
color
compact
declare
defer
dir
direction
disabled
enctype
face
frame
hreflang
http-equiv
lang
language
link
media
method
multiple
nohref
noresize
noshade
nowrap
readonly
rel
rev
rules
scope
scrolling
selected
shape
target
text
type
valign
valuetype
vlink
例如，选择器 [bgcolor="#ffffff"] 将匹配任何具有 bgcolor 属性且值包括 #ffffff、#FFFFFF 和 #fffFFF 的 HTML 元素。即使 bgcolor 对给定元素没有影响（例如，div），也会发生这种情况。
选择器 [type=a s] 将匹配任何具有 type 属性且其值为 a 的 HTML 元素，但由于 s 标志，其值不为 A 的元素则不匹配。
所有其他属性值以及其他所有内容都必须被视为完全 相同，用于选择器匹配的目的。这包括
Selectors 定义了 ID 和类选择器（例如 #foo 和 .bar），当与处于 怪异模式 的文档中的元素匹配时，将以 ASCII 不区分大小写 的方式进行匹配。但是，这并不适用于将“id”或“class”作为名称部分的属性选择器。选择器 [class="foobar"] 将其值视为区分大小写，即使在 怪异模式 中也是如此。
可以使用许多动态选择器与 HTML 结合使用。本节定义了这些选择器何时匹配 HTML 元素。 [SELECTORS] [CSSUI]
:defined所有当前引擎都支持。
:link所有当前引擎都支持。
:visited所有当前引擎都支持。
所有具有 href 属性的 a 元素，以及所有具有 href 属性的 area 元素，必须匹配 :link 和 :visited 中的一个。
其他规范可能会应用更具体的规则，关于这些元素如何匹配这些 伪类，以减轻此要求的直接实现中的一些隐私问题。
:active所有当前引擎都支持。
:active 伪类 定义为匹配 当用户激活元素时
的元素。
为了确定某个特定元素是否 被激活（仅用于定义 :active 伪类），HTML 用户代理必须使用以下列表中的第一个相关条目。
button 元素input 元素，其 type 属性处于 提交按钮、图像按钮、重置按钮 或 按钮 状态href 属性的 a 元素href 属性的 area 元素例如，如果用户使用键盘通过按空格键按下 button 元素，则该元素将在元素收到 keydown 事件的时间与元素收到 keyup 事件的时间之间匹配此 伪类。
该元素 被激活。
当用户开始表示触发元素的 激活行为 的意图，以及用户停止表示触发元素的 激活行为 的意图的时间或元素的 激活行为 完成运行的时间（以先发生者为准）之间，则称该元素 处于正式激活状态。
当用户使用指向设备指示元素且该指向设备处于“按下”状态时，则称该元素处于活动指向状态（例如，对于鼠标，在鼠标按钮按下到松开之间的时间；对于多点触控环境中的手指，在手指触碰显示屏表面时）。
根据选择器中的定义，:active也匹配扁平树中处于激活状态的元素的祖先元素。 [SELECTORS]
:hover所有当前引擎都支持。
:hover 伪类被定义为匹配一个元素，当用户使用指向设备指定该元素时
。为了定义:hover 伪类，HTML用户代理必须将用户使用指向设备指示的元素视为用户指定的元素。
根据选择器中的定义，:hover也匹配扁平树中处于指定状态的元素的祖先元素。[SELECTORS]
此外，任何作为当前匹配:hover的label元素的关联控件的元素，也匹配:hover。（但它不计入指定状态。）
特别考虑以下片段：
< p > < label for = c > < input id = a > </ label > < span id = b > < input id = c > </ span > </ p > 如果用户使用指向设备指定了 ID 为“a”的元素，则p元素（及其在以上代码片段中未显示的所有祖先）、label元素、ID 为“a”的元素和 ID 为“c”的元素将匹配:hover 伪类。ID 为“a”的元素通过处于指定状态来匹配；label和p元素由于选择器中关于扁平树祖先的条件而匹配；ID 为“c”的元素通过以上关于关联控件的附加条件匹配（即，其label元素匹配:hover）。但是，ID 为“b”的元素不匹配:hover：其扁平树后代未被指定，即使该扁平树后代匹配:hover。
:focus所有当前引擎都支持。
对于 CSS :focus 伪类，当以下条件满足时，元素获得焦点
它本身不是可导航容器；并且
以下任何一项为真
它是顶级可遍历元素的当前焦点链中列出的元素之一；或者
:target所有当前引擎都支持。
对于 CSS :target 伪类，文档的目标元素是一个列表，其中包含文档的目标元素（如果它不为 null），或者不包含任何元素（如果它为 null）。[SELECTORS]
:popover-open所有当前引擎都支持。
:popover-open 伪类被定义为匹配任何HTML 元素，其popover属性不在无弹出窗口状态中，且其弹出窗口可见性状态为显示。
:enabled所有当前引擎都支持。
:enabled 伪类必须匹配任何button、input、select、textarea、optgroup、option、fieldset元素或与表单关联的自定义元素，且这些元素未被禁用。
:disabled所有当前引擎都支持。
:checked所有当前引擎都支持。
:indeterminate所有当前引擎都支持。
:indeterminate 伪类必须匹配属于以下任意类别的元素
：default所有当前引擎都支持。
：placeholder-shown:placeholder-shown 伪类必须匹配属于以下任一类别的任何元素。
input 元素，它们具有placeholder 属性，其值当前正显示给用户。textarea 元素，它们具有placeholder 属性，其值当前正显示给用户。：valid所有当前引擎都支持。
：invalid所有当前引擎都支持。
：user-valid:user-valid 伪类必须匹配input、textarea 和select 元素，其用户有效性为 true，是约束验证候选者，并且满足其约束条件。
：user-invalid:user-invalid 伪类必须匹配input、textarea 和select 元素，其用户有效性为 true，是约束验证候选者，但不满足其约束条件。
：in-range所有当前引擎都支持。
：out-of-range所有当前引擎都支持。
：required所有当前引擎都支持。
：optional所有当前引擎都支持。
：autofill:-webkit-autofill:autofill 和:-webkit-autofill 伪类必须匹配已被用户代理自动填充的input 元素。如果用户编辑了自动填充的字段，则这些伪类必须停止匹配。
自动填充可能通过 autocomplete 属性实现，但即使没有该属性，用户代理也可能自动填充。
:read-only所有当前引擎都支持。
:read-write所有当前引擎都支持。
:read-write 伪类 必须匹配属于以下任意类别的元素，出于选择器的目的，这些元素被视为用户可更改的：[SELECTORS]
input 元素应用了 readonly 属性，并且是 可变 的（即没有指定 readonly 属性且未 禁用 的）textarea 元素没有 readonly 属性，并且未 禁用 的input 元素也不是 textarea 元素:read-only 伪类 必须匹配所有其他 HTML 元素。
:modaldialog 元素的 is modal 标志为 true:dir(ltr):dir(rtl):state(identifier) 伪类必须匹配所有 自定义元素，其 状态集 的 集合项 包含 identifier。
:playing:paused:seeking:buffering:buffering 伪类 必须匹配所有 媒体元素，其 paused 属性为 false，networkState 属性为 NETWORK_LOADING，并且就绪状态为 HAVE_CURRENT_DATA 或更低。
:stalled:stalled 伪类 必须匹配所有 媒体元素，这些元素匹配 :buffering 伪类 且其 is currently stalled 为 true。
:muted:volume-locked:volume-locked 伪类 必须匹配所有 媒体元素，此时用户代理的 音量锁定 为 true。
本规范未定义元素何时匹配 :lang() 动态 伪类，因为它在 Selectors 中以与语言无关的方式进行了充分详细的定义。 [SELECTORS]