1. 15 渲染
    1. 15.1 简介
    2. 15.2 CSS 用户代理样式表和表现提示
    3. 15.3 非替换元素
      1. 15.3.1 隐藏元素
      2. 15.3.2 页面
      3. 15.3.3 流内容
      4. 15.3.4 短语内容
      5. 15.3.5 双向文本
      6. 15.3.6 节和标题
      7. 15.3.7 列表
      8. 15.3.8 表格
      9. 15.3.9 边距折叠怪癖
      10. 15.3.10 表单控件
      11. 15.3.11 hr 元素
      12. 15.3.12 fieldsetlegend 元素
    4. 15.4 替换元素
      1. 15.4.1 嵌入内容
      2. 15.4.2 图片
      3. 15.4.3 嵌入内容和图片的属性
      4. 15.4.4 图片地图
    5. 15.5 小部件
      1. 15.5.1 本机外观
      2. 15.5.2 书写模式
      3. 15.5.3 按钮布局
      4. 15.5.4 button 元素
      5. 15.5.5 detailssummary 元素
      6. 15.5.6 input 元素作为文本输入小部件
      7. 15.5.7 input 元素作为特定领域的小部件
      8. 15.5.8 input 元素作为范围控件
      9. 15.5.9 input 元素作为颜色选择器
      10. 15.5.10 input 元素作为复选框和单选按钮小部件
      11. 15.5.11 input 元素作为文件上传控件
      12. 15.5.12 input 元素作为按钮
      13. 15.5.13 marquee 元素
      14. 15.5.14 meter 元素
      15. 15.5.15 progress 元素
      16. 15.5.16 select 元素
      17. 15.5.17 textarea 元素
    6. 15.6 框架和框架集
    7. 15.7 交互式媒体
      1. 15.7.1 链接、表单和导航
      2. 15.7.2 title 属性
      3. 15.7.3 编辑主机
      4. 15.7.4 在原生用户界面中渲染的文本
    8. 15.8 打印媒体
    9. 15.9 未设置样式的 XML 文档

15 渲染

用户代理不需要以任何特定方式呈现 HTML 文档。但是,本节提供了一套关于渲染 HTML 文档的建议,如果遵循这些建议,则可能会导致用户体验与文档作者的预期体验非常接近。为了避免对本节规范性的混淆,“必须”一词没有被使用。取而代之的是,使用“预期”一词来指示会导致这种体验的行为。对于被指定为支持建议的默认渲染的用户代理的符合性而言,本节中的“预期”一词与“必须”具有相同的符合性含义。

15.1 简介

本节中的建议通常以 CSS 术语表达。用户代理预期要么支持 CSS,要么将本节中给出的 CSS 规则转换为其他呈现机制的近似值。

在没有相反的样式层规则(例如作者样式表)的情况下,用户代理预期会渲染一个元素,以便它向用户传达该元素表示的含义,如本规范所述。

本节中的建议通常假设视觉输出介质的分辨率为 96dpi 或更高,但 HTML 旨在应用于多种媒体(它是一种媒体无关的语言)。鼓励用户代理实现者将本节中的建议适应其目标媒体。


如果元素有任何关联的 CSS 布局框、SVG 布局框或其他样式语言中的等效项,则该元素被认为是正在被渲染

仅仅处于屏幕外并不意味着元素没有被渲染。通常情况下,hidden 属性的存在意味着元素没有被渲染,尽管这可能会被样式表覆盖。

完全激活状态不会影响元素是否被渲染。即使文档没有完全激活并且根本没有显示给用户,其内部的元素仍然可以被视为“正在被渲染”。

当元素被渲染并且其关联的 CSS 布局框与视口相交时,则称该元素与视口相交

类似于被渲染状态,非完全激活文档中的元素仍然可以与视口相交视口不是在文档之间共享的,并且可能不会始终显示给用户,因此非完全激活文档中的元素仍然可以与与其文档关联的视口相交。

本规范没有定义何时测试交集的精确时间,但建议时间与 Intersection Observer API 的时间匹配。[INTERSECTIONOBSERVER]

如果元素没有被渲染,但其子元素(如果有)可以被渲染,这是由于 CSS 'display: contents' 或其他样式语言中的等效项导致的,则称该元素将其渲染委托给其子元素[CSSDISPLAY]


即使不遵守作者级 CSS 样式表,用户代理也预期会表现得好像它们以与本规范和相关 CSS 和 Unicode 规范一致的方式应用了这些部分中给出的 CSS 规则。[CSS] [UNICODE] [BIDI]

这对于与'display''unicode-bidi''direction'属性相关的 issue 尤其重要。

15.2 CSS 用户代理样式表和表现提示

除非另有说明,否则这些小节中给出的 CSS 规则预期将用作包含HTML 元素的所有文档的用户代理级样式表默认值的一部分。

某些规则旨在用于 CSS 级联的作者级零特异性表现提示部分;这些规则被明确地称为表现提示


当以下文本说元素element上的属性attribute映射到像素长度属性(或属性)properties时,这意味着如果element设置了属性attribute,并且使用解析非负整数的规则解析该属性的值不会产生错误,则用户代理预期会将解析后的值用作properties表现提示的像素长度。

当以下文本说元素element上的属性attribute映射到维度属性(或属性)properties时,这意味着如果element设置了属性attribute,并且使用解析维度值的规则解析该属性的值不会产生错误,则用户代理预期会将解析后的维度用作properties表现提示的值,如果维度是长度,则以像素长度给出值,如果维度是百分比,则以百分比给出值。

当以下文本说元素element上的属性attribute映射到维度属性(忽略零)(或属性)properties时,这意味着如果element设置了属性attribute,并且使用解析非零维度值的规则解析该属性的值不会产生错误,则用户代理预期会将解析后的维度用作properties表现提示的值,如果维度是长度,则以像素长度给出值,如果维度是百分比,则以百分比给出值。

当以下文本说元素element上的属性对wh映射到纵横比属性时,这意味着如果element同时具有属性wh,并且使用解析非负整数的规则解析这些属性的值都不会产生错误,则用户代理预期会将解析后的整数用作表现提示,用于形式为auto w / h'aspect-ratio'属性。

当以下文本说元素element上的属性对wh映射到纵横比属性(使用维度规则)时,这意味着如果element同时具有属性wh,并且使用解析维度值的规则解析这些属性的值都不会产生错误或返回百分比,则用户代理预期会将解析后的维度用作表现提示,用于形式为auto w / h'aspect-ratio'属性。

当用户代理需要对节点的后代元素进行对齐时,预期用户代理仅对满足以下条件的后代元素进行对齐:其'margin-inline-start''margin-inline-end'属性计算结果均不为'auto',且处于过度约束状态,并且这两个外边距之一的使用值被强制设置为更大的值,并且自身没有适用的align属性。当多个元素需要对齐某个特定的后代元素时,预期最深层嵌套的此类元素将覆盖其他元素。预期对齐的元素通过在其行左侧行右侧的外边距设置相应的使用值来实现对齐。[CSSLOGICAL] [CSSWM]

15.3 非替换元素

15.3.1 隐藏元素

@namespace "http://www.w3.org/1999/xhtml";

area, base, basefont, datalist, head, link, meta, noembed,
noframes, param, rp, script, style, template, title {
  display: none;
}

[hidden]:not([hidden=until-found i]):not(embed) {
  display: none;
}

[hidden=until-found i]:not(embed) {
  content-visibility: hidden;
}

embed[hidden] { display: inline; height: 0; width: 0; } 

input[type=hidden i] { display: none !important; }

@media (scripting) {
  noscript { display: none !important; }
}

15.3.2 页面

@namespace "http://www.w3.org/1999/xhtml";

html, body { display: block; }

对于下表中的每个属性,给定一个body元素,第一个存在的属性映射到body元素上的像素长度属性。如果未找到任何属性,或者找到的属性的值无法成功解析,则预期将使用默认值 8px 替换该属性。

属性来源
'margin-top' body元素的marginheight属性
body元素的topmargin属性
body元素的容器框架元素marginheight属性
'margin-right' body元素的marginwidth属性
body元素的rightmargin属性
body元素的容器框架元素marginwidth属性
'margin-bottom' body元素的marginheight属性
body元素的bottommargin属性
body元素的容器框架元素marginheight属性
'margin-left' body元素的marginwidth属性
body元素的leftmargin属性
body元素的容器框架元素marginwidth属性

如果body元素的节点文档节点可导航子可导航,并且该可导航容器frameiframe元素,则body元素的容器框架元素是该frameiframe元素。否则,不存在容器框架元素

以上要求意味着页面可以使用例如iframe来更改另一个页面(包括来自其他来源的页面)的边距。这可能存在安全风险,因为它在某些情况下可能允许攻击者制造一种情况,即页面呈现效果与作者的意图不符,可能用于网络钓鱼或以其他方式误导用户。


如果Document节点可导航子可导航,则预期它将被定位和调整大小以适合该可导航容器内容框内。如果容器呈现,则预期可导航将具有宽度和高度均为零的视口

如果Document节点可导航子可导航,该可导航容器frameiframe元素,该元素具有scrolling属性,并且该属性的值与字符串“off”、“noscroll”或“no不区分大小写地匹配,则预期用户代理将阻止为Document节点可导航视口显示任何滚动条,而不管应用于该视口'overflow'属性如何。


body元素的background属性设置为非空值时,预期该新值将相对于元素的节点文档进行编码解析和序列化,如果这没有返回失败,则预期用户代理将把该属性视为表现提示,将元素的'background-image'属性设置为返回值。

body元素具有bgcolor属性时,预期将使用解析传统颜色值的规则解析新值,如果这没有返回错误,则预期用户代理将把该属性视为表现提示,将元素的'background-color'属性设置为结果颜色。

body元素具有text属性时,预期将使用解析传统颜色值的规则解析其值,如果这没有返回错误,则预期用户代理将把该属性视为表现提示,将元素的'color'属性设置为结果颜色。

body元素具有link属性时,预期将使用解析传统颜色值的规则解析其值,如果这没有返回错误,则预期用户代理将把该属性视为表现提示,将Document中与:link伪类匹配的任何元素的'color'属性设置为结果颜色。

body元素具有vlink属性时,预期将使用解析传统颜色值的规则解析其值,如果这没有返回错误,则预期用户代理将把该属性视为表现提示,将Document中与:visited伪类匹配的任何元素的'color'属性设置为结果颜色。

当一个`body` 元素拥有一个 `alink` 属性时,其值预期会使用 解析传统颜色值的规则 进行解析,如果解析未返回错误,则用户代理预期将该属性视为一个 表现提示,设置 'color' 属性,该属性作用于文档`Document` 中匹配 `:active` 伪类 和 `:link` 伪类 或 `:visited` 伪类 的任何元素,并将结果颜色应用于这些元素。

15.3.3 流内容

@namespace "http://www.w3.org/1999/xhtml";

address, blockquote, center, dialog, div, figure, figcaption, footer, form,
header, hr, legend, listing, main, p, plaintext, pre, search, xmp {
  display: block;
}

blockquote, figure, listing, p, plaintext, pre, xmp {
  margin-block: 1em;
}

blockquote, figure { margin-inline: 40px; }

address { font-style: italic; }
listing, plaintext, pre, xmp {
  font-family: monospace; white-space: pre;
}

dialog:not([open]) { display: none; }
dialog {
  position: absolute;
  inset-inline-start: 0; inset-inline-end: 0;
  width: fit-content;
  height: fit-content;
  margin: auto;
  border: solid;
  padding: 1em;
  background-color: Canvas;
  color: CanvasText;
}
dialog:modal {
  position: fixed;
  overflow: auto;
  inset-block: 0;
  max-width: calc(100% - 6px - 2em);
  max-height: calc(100% - 6px - 2em);
}
dialog::backdrop {
  background: rgba(0,0,0,0.1);
}

[popover]:not(:popover-open):not(dialog[open]) {
  display:none;
}

dialog:popover-open {
  display:block;
}

[popover] {
  position: fixed;
  inset: 0;
  width: fit-content;
  height: fit-content;
  margin: auto;
  border: solid;
  padding: 0.25em;
  overflow: auto;
  color: CanvasText;
  background-color: Canvas;
}

:popover-open::backdrop {
  position: fixed;
  inset: 0;
  pointer-events: none !important;
  background-color: transparent;
}

slot {
  display: contents;
}

以下规则也预期适用,作为 表现提示

@namespace "http://www.w3.org/1999/xhtml";

pre[wrap] { white-space: pre-wrap; }

怪异模式 中,以下规则也预期适用

@namespace "http://www.w3.org/1999/xhtml";

form { margin-block-end: 1em; }

`center` 元素,以及 `div` 元素(当它具有一个 `align` 属性,且该属性的值与字符串“center”或“middle”进行 ASCII不区分大小写 匹配时),预期会在自身内部居中显示文本,就像它们在 表现提示 中将它们的 'text-align' 属性设置为“center”一样,并且将 后代元素 居中对齐。

`div` 元素,当它具有一个 `align` 属性,且该属性的值与字符串“left”进行 ASCII不区分大小写 匹配时,预期会在自身内部左对齐文本,就像它们在 表现提示 中将它们的 'text-align' 属性设置为“left”一样,并且将 后代元素 左对齐。

`div` 元素,当它具有一个 `align` 属性,且该属性的值与字符串“right”进行 ASCII不区分大小写 匹配时,预期会在自身内部右对齐文本,就像它们在 表现提示 中将它们的 'text-align' 属性设置为“right”一样,并且将 后代元素 右对齐。

`div` 元素,当它具有一个 `align` 属性,且该属性的值与字符串“justify”进行 ASCII不区分大小写 匹配时,预期会在自身内部两端对齐文本,就像它们在 表现提示 中将它们的 'text-align' 属性设置为“justify”一样,并且将 后代元素 左对齐。

15.3.4 短语内容

@namespace "http://www.w3.org/1999/xhtml";

cite, dfn, em, i, var { font-style: italic; }
b, strong { font-weight: bolder; }
code, kbd, samp, tt { font-family: monospace; }
big { font-size: larger; }
small { font-size: smaller; }

sub { vertical-align: sub; }
sup { vertical-align: super; }
sub, sup { line-height: normal; font-size: smaller; }

ruby { display: ruby; }
rt { display: ruby-text; }

:link { color: #0000EE; }
:visited { color: #551A8B; }
:link:active, :visited:active { color: #FF0000; }
:link, :visited { text-decoration: underline; cursor: pointer; }

:focus-visible { outline: auto; }

mark { background: yellow; color: black; } /* this color is just a suggestion and can be changed based on implementation feedback */

abbr[title], acronym[title] { text-decoration: dotted underline; }
ins, u { text-decoration: underline; }
del, s, strike { text-decoration: line-through; }

q::before { content: open-quote; }
q::after { content: close-quote; }

br { display-outside: newline; } /* this also has bidi implications */
nobr { white-space: nowrap; }
wbr { display-outside: break-opportunity; } /* this also has bidi implications */
nobr wbr { white-space: normal; }

以下规则也预期适用,作为 表现提示

@namespace "http://www.w3.org/1999/xhtml";

br[clear=left i] { clear: left; }
br[clear=right i] { clear: right; }
br[clear=all i], br[clear=both i] { clear: both; }

出于 CSS ruby 模型的目的,`ruby` 元素的子元素中,不是 `rt` 或 `rp` 元素的运行预期会被包装在匿名盒子里,这些盒子的 'display' 属性的值为 'ruby-base'[CSSRUBY]

当 ruby 的特定部分有多个注释时,应将这些注释分布在基本文本的两侧,以最大程度地减少 ruby 注释在一侧堆叠的情况。

当将来有可能这样做时,上述要求将更新为用 CSS ruby 来表达。(目前,CSS ruby 不处理嵌套的 `ruby` 元素或多个连续的 `rt` 元素,这就是此语义的表达方式。)

不支持正确 ruby 渲染的用户代理预期会在没有 `rp` 元素的情况下,在 `rt` 元素的文本周围渲染括号。


用户代理预期支持内联元素上的 'clear' 属性(为了以 CSS 中对此效果的非规范性说明中描述的方式渲染具有 `clear` 属性的 `br` 元素)。

'color' 属性的初始值预期为黑色。 'background-color' 属性的初始值预期为“transparent”。画布的背景预期为白色。


当一个 `font` 元素具有一个 color 属性时,其值预期会使用 解析传统颜色值的规则 进行解析,如果解析未返回错误,则用户代理预期将该属性视为一个 表现提示,将元素的 'color' 属性设置为结果颜色。

当一个 `font` 元素具有一个 face 属性时,用户代理预期将该属性视为一个 表现提示,将元素的 'font-family' 属性设置为该属性的值。

当一个 `font` 元素具有一个 size 属性时,用户代理预期将使用以下步骤(称为 解析传统字体大小的规则)将该属性视为一个 表现提示,设置元素的 'font-size' 属性。

  1. input 为属性的值。

  2. positioninput 中的一个指针,最初指向字符串的开头。

  3. 在给定 position 的情况下,跳过 input 中的 ASCII 空格。

  4. 如果 position 超过了 input 的末尾,则没有 表现提示。返回。

  5. 如果 position 处的字符是 U+002B 加号字符 (+),则令 moderelative-plus,并将 position 前移到下一个字符。否则,如果 position 处的字符是 U+002D 减号字符 (-),则令 moderelative-minus,并将 position 前移到下一个字符。否则,令 modeabsolute

  6. 在给定 position 的情况下,从 input收集 一系列 ASCII 数字,并将结果序列设为 digits

  7. 如果 digits 是空字符串,则没有 表现提示。返回。

  8. digits 解释为十进制整数。令 value 为结果数字。

  9. 如果 moderelative-plus,则将 value 增加 3。如果 moderelative-minus,则令 value 为从 3 中减去 value 的结果。

  10. 如果 value 大于 7,则将其设为 7。

  11. 如果 value 小于 1,则将其设为 1。

  12. 根据下表,将 'font-size' 设置为对应于 value 值的关键字。

    value 'font-size' 关键字
    1 'x-small'
    2 'small'
    3 'medium'
    4 'large'
    5 'x-large'
    6 'xx-large'
    7 'xxx-large'

15.3.5 双向文本

@namespace "http://www.w3.org/1999/xhtml";

[dir]:dir(ltr), bdi:dir(ltr), input[type=tel i]:dir(ltr) { direction: ltr; }
[dir]:dir(rtl), bdi:dir(rtl) { direction: rtl; }

address, blockquote, center, div, figure, figcaption, footer, form, header, hr,
legend, listing, main, p, plaintext, pre, summary, xmp, article, aside, h1, h2,
h3, h4, h5, h6, hgroup, nav, section, search, table, caption, colgroup, col,
thead, tbody, tfoot, tr, td, th, dir, dd, dl, dt, menu, ol, ul, li, bdi, output,
[dir=ltr i], [dir=rtl i], [dir=auto i] {
  unicode-bidi: isolate; 
}

bdo, bdo[dir] { unicode-bidi: isolate-override; } 

input[dir=auto i]:is([type=search i], [type=tel i], [type=url i],
[type=email i]), textarea[dir=auto i], pre[dir=auto i] {
  unicode-bidi: plaintext;
}
/* see prose for input elements whose type attribute is in the Text state */

/* the rules setting the 'content' property on br and wbr elements also has bidi implications */

当一个 `input` 元素的 `dir` 属性处于 auto 状态,并且它的 `type` 属性处于 Text 状态时,则用户代理预期会表现得好像它有一个用户代理级别的样式表规则,将 'unicode-bidi' 属性设置为“plaintext”。

输入字段(即 `textarea` 元素,以及 `input` 元素,当它们的 `type` 属性处于 TextSearchTelephoneURLEmail 状态时)预期会呈现一个编辑用户界面,其方向性与元素的 'direction' 属性匹配。

当文档的字符编码为 ISO-8859-8 时,以下规则也预期适用,遵循上述规则: [ENCODING]

@namespace "http://www.w3.org/1999/xhtml";

address, blockquote, center, div, figure, figcaption, footer, form, header, hr,
legend, listing, main, p, plaintext, pre, summary, xmp, article, aside, h1, h2,
h3, h4, h5, h6, hgroup, nav, section, search, table, caption, colgroup, col,
thead, tbody, tfoot, tr, td, th, dir, dd, dl, dt, menu, ol, ul, li, [dir=ltr i],
[dir=rtl i], [dir=auto i], *|* {
  unicode-bidi: bidi-override;
}
input:not([type=submit i]):not([type=reset i]):not([type=button i]),
textarea {
  unicode-bidi: normal;
}

15.3.6 节和标题

@namespace "http://www.w3.org/1999/xhtml";

article, aside, h1, h2, h3, h4, h5, h6, hgroup, nav, section {
  display: block;
}

h1 { margin-block: 0.67em; font-size: 2.00em; font-weight: bold; }
h2 { margin-block: 0.83em; font-size: 1.50em; font-weight: bold; }
h3 { margin-block: 1.00em; font-size: 1.17em; font-weight: bold; }
h4 { margin-block: 1.33em; font-size: 1.00em; font-weight: bold; }
h5 { margin-block: 1.67em; font-size: 0.83em; font-weight: bold; }
h6 { margin-block: 2.33em; font-size: 0.67em; font-weight: bold; }

在以下 CSS 代码块中,x 是以下选择器的简写::is(article, aside, nav, section)

@namespace "http://www.w3.org/1999/xhtml";

x h1 { margin-block: 0.83em; font-size: 1.50em; }
x x h1 { margin-block: 1.00em; font-size: 1.17em; }
x x x h1 { margin-block: 1.33em; font-size: 1.00em; }
x x x x h1 { margin-block: 1.67em; font-size: 0.83em; }
x x x x x h1 { margin-block: 2.33em; font-size: 0.67em; }

使用简写是为了使此代码块至少在一定程度上易于阅读。

15.3.7 列表

@namespace "http://www.w3.org/1999/xhtml";

dir, dd, dl, dt, menu, ol, ul { display: block; }
li { display: list-item; text-align: match-parent; }

dir, dl, menu, ol, ul { margin-block: 1em; }

:is(dir, dl, menu, ol, ul) :is(dir, dl, menu, ol, ul) {
  margin-block: 0;
}

dd { margin-inline-start: 40px; }
dir, menu, ol, ul { padding-inline-start: 40px; }

ol, ul, menu { counter-reset: list-item; }
ol { list-style-type: decimal; }

dir, menu, ul {
  list-style-type: disc;
}
:is(dir, menu, ol, ul) :is(dir, menu, ul) {
  list-style-type: circle;
}
:is(dir, menu, ol, ul) :is(dir, menu, ol, ul) :is(dir, menu, ul) {
  list-style-type: square;
}

以下规则也应适用,作为表现提示

@namespace "http://www.w3.org/1999/xhtml";

ol[type="1"], li[type="1"] { list-style-type: decimal; }
ol[type=a s], li[type=a s] { list-style-type: lower-alpha; }
ol[type=A s], li[type=A s] { list-style-type: upper-alpha; }
ol[type=i s], li[type=i s] { list-style-type: lower-roman; }
ol[type=I s], li[type=I s] { list-style-type: upper-roman; }
ul[type=none i], li[type=none i] { list-style-type: none; }
ul[type=disc i], li[type=disc i] { list-style-type: disc; }
ul[type=circle i], li[type=circle i] { list-style-type: circle; }
ul[type=square i], li[type=square i] { list-style-type: square; }

在渲染li元素时,非 CSS 用户代理应使用li元素的序数值来渲染列表项标记中的计数器。

对于 CSS 用户代理,渲染列表项的某些方面由CSS 列表规范定义。此外,以下属性映射应适用:[CSSLISTS]

li元素具有value属性,并且使用解析整数的规则解析该属性的值不会产生错误时,用户代理应使用解析后的值value作为表现提示,用于表单为list-item value'counter-set'属性。

ol元素具有start属性或reversed属性,或两者兼有时,用户代理应使用以下步骤将这些属性视为表现提示,用于'counter-reset'属性

  1. value为 null。

  2. 如果元素具有start属性,则将value设置为使用解析整数的规则解析该属性值的结果。

  3. 如果元素具有reversed属性,则

    1. 如果value是整数,则将value加 1 并返回reversed(list-item) value

    2. 否则,返回reversed(list-item)

      start属性不存在,或解析其值导致错误。

  4. 否则

    1. 如果value是整数,则将value减 1 并返回list-item value

    2. 否则,没有表现提示

15.3.8 表格

@namespace "http://www.w3.org/1999/xhtml";

table { display: table; }
caption { display: table-caption; }
colgroup, colgroup[hidden] { display: table-column-group; }
col, col[hidden] { display: table-column; }
thead, thead[hidden] { display: table-header-group; }
tbody, tbody[hidden] { display: table-row-group; }
tfoot, tfoot[hidden] { display: table-footer-group; }
tr, tr[hidden] { display: table-row; }
td, th { display: table-cell; }

colgroup[hidden], col[hidden], thead[hidden], tbody[hidden],
tfoot[hidden], tr[hidden] {
  visibility: collapse;
}

table {
  box-sizing: border-box;
  border-spacing: 2px;
  border-collapse: separate;
  text-indent: initial;
}
td, th { padding: 1px; }
th { font-weight: bold; }

caption { text-align: center; }
thead, tbody, tfoot, table > tr { vertical-align: middle; }
tr, td, th { vertical-align: inherit; }

thead, tbody, tfoot, tr { border-color: inherit; }
table[rules=none i], table[rules=groups i], table[rules=rows i],
table[rules=cols i], table[rules=all i], table[frame=void i],
table[frame=above i], table[frame=below i], table[frame=hsides i],
table[frame=lhs i], table[frame=rhs i], table[frame=vsides i],
table[frame=box i], table[frame=border i],
table[rules=none i] > tr > td, table[rules=none i] > tr > th,
table[rules=groups i] > tr > td, table[rules=groups i] > tr > th,
table[rules=rows i] > tr > td, table[rules=rows i] > tr > th,
table[rules=cols i] > tr > td, table[rules=cols i] > tr > th,
table[rules=all i] > tr > td, table[rules=all i] > tr > th,
table[rules=none i] > thead > tr > td, table[rules=none i] > thead > tr > th,
table[rules=groups i] > thead > tr > td, table[rules=groups i] > thead > tr > th,
table[rules=rows i] > thead > tr > td, table[rules=rows i] > thead > tr > th,
table[rules=cols i] > thead > tr > td, table[rules=cols i] > thead > tr > th,
table[rules=all i] > thead > tr > td, table[rules=all i] > thead > tr > th,
table[rules=none i] > tbody > tr > td, table[rules=none i] > tbody > tr > th,
table[rules=groups i] > tbody > tr > td, table[rules=groups i] > tbody > tr > th,
table[rules=rows i] > tbody > tr > td, table[rules=rows i] > tbody > tr > th,
table[rules=cols i] > tbody > tr > td, table[rules=cols i] > tbody > tr > th,
table[rules=all i] > tbody > tr > td, table[rules=all i] > tbody > tr > th,
table[rules=none i] > tfoot > tr > td, table[rules=none i] > tfoot > tr > th,
table[rules=groups i] > tfoot > tr > td, table[rules=groups i] > tfoot > tr > th,
table[rules=rows i] > tfoot > tr > td, table[rules=rows i] > tfoot > tr > th,
table[rules=cols i] > tfoot > tr > td, table[rules=cols i] > tfoot > tr > th,
table[rules=all i] > tfoot > tr > td, table[rules=all i] > tfoot > tr > th {
  border-color: black;
}

以下规则也应适用,作为表现提示

@namespace "http://www.w3.org/1999/xhtml";

table[align=left i] { float: left; }
table[align=right i] { float: right; }
table[align=center i] { margin-inline: auto; }
thead[align=absmiddle i], tbody[align=absmiddle i], tfoot[align=absmiddle i],
tr[align=absmiddle i], td[align=absmiddle i], th[align=absmiddle i] {
  text-align: center;
}

caption[align=bottom i] { caption-side: bottom; }
p[align=left i], h1[align=left i], h2[align=left i], h3[align=left i],
h4[align=left i], h5[align=left i], h6[align=left i] {
  text-align: left;
}
p[align=right i], h1[align=right i], h2[align=right i], h3[align=right i],
h4[align=right i], h5[align=right i], h6[align=right i] {
  text-align: right;
}
p[align=center i], h1[align=center i], h2[align=center i], h3[align=center i],
h4[align=center i], h5[align=center i], h6[align=center i] {
  text-align: center;
}
p[align=justify i], h1[align=justify i], h2[align=justify i], h3[align=justify i],
h4[align=justify i], h5[align=justify i], h6[align=justify i] {
  text-align: justify;
}
thead[valign=top i], tbody[valign=top i], tfoot[valign=top i],
tr[valign=top i], td[valign=top i], th[valign=top i] {
  vertical-align: top;
}
thead[valign=middle i], tbody[valign=middle i], tfoot[valign=middle i],
tr[valign=middle i], td[valign=middle i], th[valign=middle i] {
  vertical-align: middle;
}
thead[valign=bottom i], tbody[valign=bottom i], tfoot[valign=bottom i],
tr[valign=bottom i], td[valign=bottom i], th[valign=bottom i] {
  vertical-align: bottom;
}
thead[valign=baseline i], tbody[valign=baseline i], tfoot[valign=baseline i],
tr[valign=baseline i], td[valign=baseline i], th[valign=baseline i] {
  vertical-align: baseline;
}

td[nowrap], th[nowrap] { white-space: nowrap; }

table[rules=none i], table[rules=groups i], table[rules=rows i],
table[rules=cols i], table[rules=all i] {
  border-style: hidden;
  border-collapse: collapse;
}
table[border] { border-style: outset; } /* only if border is not equivalent to zero */
table[frame=void i] { border-style: hidden; }
table[frame=above i] { border-style: outset hidden hidden hidden; }
table[frame=below i] { border-style: hidden hidden outset hidden; }
table[frame=hsides i] { border-style: outset hidden outset hidden; }
table[frame=lhs i] { border-style: hidden hidden hidden outset; }
table[frame=rhs i] { border-style: hidden outset hidden hidden; }
table[frame=vsides i] { border-style: hidden outset; }
table[frame=box i], table[frame=border i] { border-style: outset; }

table[border] > tr > td, table[border] > tr > th,
table[border] > thead > tr > td, table[border] > thead > tr > th,
table[border] > tbody > tr > td, table[border] > tbody > tr > th,
table[border] > tfoot > tr > td, table[border] > tfoot > tr > th {
  /* only if border is not equivalent to zero */
  border-width: 1px;
  border-style: inset;
}
table[rules=none i] > tr > td, table[rules=none i] > tr > th,
table[rules=none i] > thead > tr > td, table[rules=none i] > thead > tr > th,
table[rules=none i] > tbody > tr > td, table[rules=none i] > tbody > tr > th,
table[rules=none i] > tfoot > tr > td, table[rules=none i] > tfoot > tr > th,
table[rules=groups i] > tr > td, table[rules=groups i] > tr > th,
table[rules=groups i] > thead > tr > td, table[rules=groups i] > thead > tr > th,
table[rules=groups i] > tbody > tr > td, table[rules=groups i] > tbody > tr > th,
table[rules=groups i] > tfoot > tr > td, table[rules=groups i] > tfoot > tr > th,
table[rules=rows i] > tr > td, table[rules=rows i] > tr > th,
table[rules=rows i] > thead > tr > td, table[rules=rows i] > thead > tr > th,
table[rules=rows i] > tbody > tr > td, table[rules=rows i] > tbody > tr > th,
table[rules=rows i] > tfoot > tr > td, table[rules=rows i] > tfoot > tr > th {
  border-width: 1px;
  border-style: none;
}
table[rules=cols i] > tr > td, table[rules=cols i] > tr > th,
table[rules=cols i] > thead > tr > td, table[rules=cols i] > thead > tr > th,
table[rules=cols i] > tbody > tr > td, table[rules=cols i] > tbody > tr > th,
table[rules=cols i] > tfoot > tr > td, table[rules=cols i] > tfoot > tr > th {
  border-width: 1px;
  border-block-style: none;
  border-inline-style: solid;
}
table[rules=all i] > tr > td, table[rules=all i] > tr > th,
table[rules=all i] > thead > tr > td, table[rules=all i] > thead > tr > th,
table[rules=all i] > tbody > tr > td, table[rules=all i] > tbody > tr > th,
table[rules=all i] > tfoot > tr > td, table[rules=all i] > tfoot > tr > th {
  border-width: 1px;
  border-style: solid;
}

table[rules=groups i] > colgroup {
  border-inline-width: 1px;
  border-inline-style: solid;
}
table[rules=groups i] > thead,
table[rules=groups i] > tbody,
table[rules=groups i] > tfoot {
  border-block-width: 1px;
  border-block-style: solid;
}

table[rules=rows i] > tr, table[rules=rows i] > thead > tr,
table[rules=rows i] > tbody > tr, table[rules=rows i] > tfoot > tr {
  border-block-width: 1px;
  border-block-style: solid;
}

怪异模式下,以下规则也应适用

@namespace "http://www.w3.org/1999/xhtml";

table {
  font-weight: initial;
  font-style: initial;
  font-variant: initial;
  font-size: initial;
  line-height: initial;
  white-space: initial;
  text-align: initial;
}

为了 CSS 表格模型的目的,col元素应被视为存在与其span属性指定的次数一样多。

为了 CSS 表格模型的目的,colgroup元素(如果它不包含col元素)应被视为具有与其span属性指定的一样多的子元素。

为了 CSS 表格模型的目的,tdth元素上的colspanrowspan属性应提供关于跨行跨列单元格的特殊知识

HTML 文档中,以下规则也应适用

@namespace "http://www.w3.org/1999/xhtml";

:is(table, thead, tbody, tfoot, tr) > form { display: none !important; }

table元素的cellspacing属性映射到像素长度属性'border-spacing'到该元素上。

table元素的cellpadding属性映射到像素长度属性'padding-top''padding-right''padding-bottom''padding-left',这些属性适用于任何tdth元素,这些元素在表格(对应于table元素)中具有对应的单元格

table元素的height属性映射到维度属性'height'table元素上。

table元素的width属性映射到维度属性(忽略零)'width'table元素上。

col元素的width属性映射到维度属性'width'col元素上。

theadtbodytfoot元素的height属性映射到维度属性'height'到该元素上。

tr元素的height属性映射到维度属性'height'tr元素上。

tdth元素的height属性映射到维度属性(忽略零)'height'到该元素上。

tdth元素的width属性映射到维度属性(忽略零)'width'到该元素上。


theadtbodytfoottrtdth元素,当它们具有一个align属性,其值与字符串“center”或字符串“middle”的ASCII 不区分大小写匹配时,应将其中的文本居中,就像它们在表现提示中将其'text-align'属性设置为'center'一样,并将后代元素对齐到中心。

theadtbodytfoottrtdth元素,当它们具有一个align属性,其值与字符串“left”的ASCII 不区分大小写匹配时,应将其中的文本左对齐,就像它们在表现提示中将其'text-align'属性设置为'left'一样,并将后代元素对齐到左侧。

theadtbodytfoottrtdth元素,当它们具有一个align属性,其值与字符串“right”的ASCII 不区分大小写匹配时,应将其中的文本右对齐,就像它们在表现提示中将其'text-align'属性设置为'right'一样,并将后代元素对齐到右侧。

theadtbodytfoottrtdth元素,当它们具有一个align属性,其值与字符串“justify”的ASCII 不区分大小写匹配时,应将其中的文本两端对齐,就像它们在表现提示中将其'text-align'属性设置为'justify'一样,并将后代元素对齐到左侧。

预期用户代理在其用户代理样式表中有一条规则,匹配th元素,这些元素的父节点的计算值对于'text-align'属性是其初始值,其声明块仅包含一个声明,该声明将'text-align'属性设置为值'center'。


当一个tabletheadtbodytfoottrtdth元素的background属性设置为非空值时,预期新值将相对于元素的节点文档进行编码解析和序列化,如果这不会返回失败,则预期用户代理将该属性视为表现提示,并将元素的'background-image'属性设置为返回值。

当一个tabletheadtbodytfoottrtdth元素具有设置的bgcolor属性时,预期新值将使用解析传统颜色值的规则进行解析,如果这不会返回错误,则预期用户代理将该属性视为表现提示,并将元素的'background-color'属性设置为结果颜色。

当一个table元素具有bordercolor属性时,预期其值将使用解析传统颜色值的规则进行解析,如果这不会返回错误,则预期用户代理将该属性视为表现提示,并将元素的'border-top-color''border-right-color''border-bottom-color''border-left-color'属性设置为结果颜色。


table元素的border属性映射到像素长度属性'border-top-width''border-right-width''border-bottom-width''border-left-width'在元素上。如果属性存在,但使用解析非负整数的规则解析属性值会生成错误,则预期将使用默认值1px代替该属性。

在上面的CSS块中标记为“仅当边框不等于零时”的规则,预期仅在规则的选择器中提到的border属性不仅存在,而且在使用解析非负整数的规则解析时,也发现其值不为零或生成错误时才应用。


怪异模式下,具有nowrap属性但同时具有width属性的td元素或th元素,其值在使用解析非零尺寸值的规则解析时被发现是长度(而不是错误或被归类为百分比的数字),预期将具有表现提示,将元素的'white-space'属性设置为'normal',覆盖上面CSS块中将其设置为'nowrap'的规则。

15.3.9 边距折叠怪异行为

如果节点是文本节点且不是元素间空白,或者如果它是元素节点,则该节点为实质性的。

如果节点是元素且不包含任何实质性节点,则该节点为空白的。

以下元素为具有默认边距的元素blockquotedirdlh1h2h3h4h5h6listingmenuolpplaintextpreulxmp

怪异模式下,任何作为bodytdth元素的子元素且没有实质性前置兄弟节点的具有默认边距的元素,预期将具有一个用户代理级样式表规则,该规则将其'margin-block-start'属性设置为零。

怪异模式下,任何作为bodytdth元素的子元素、没有实质性前置兄弟节点且为空白具有默认边距的元素,预期将具有一个用户代理级样式表规则,该规则也将将其'margin-block-end'属性设置为零。

怪异模式下,任何作为tdth元素的子元素、没有实质性后续兄弟节点且为空白具有默认边距的元素,预期将具有一个用户代理级样式表规则,该规则将其'margin-block-start'属性设置为零。

怪异模式下,任何作为tdth元素的子元素且没有实质性后续兄弟节点的p元素,预期将具有一个用户代理级样式表规则,该规则将其'margin-block-end'属性设置为零。

15.3.10 表单控件

@namespace "http://www.w3.org/1999/xhtml";

input, select, button, textarea {
  letter-spacing: initial;
  word-spacing: initial;
  line-height: initial;
  text-transform: initial;
  text-indent: initial;
  text-shadow: initial;
  appearance: auto;
}

input:not([type=image i], [type=range i], [type=checkbox i], [type=radio i]) {
  overflow: clip !important;
  overflow-clip-margin: 0 !important;
}

input, select, textarea {
  text-align: initial;
}

:autofill {
  field-sizing: fixed !important;
}

input:is([type=reset i], [type=button i], [type=submit i]), button {
  text-align: center;
}

input, button {
  display: inline-block;
}

input[type=hidden i], input[type=file i], input[type=image i] {
  appearance: none;
}

input:is([type=radio i], [type=checkbox i], [type=reset i], [type=button i],
[type=submit i], [type=color i], [type=search i]), select, button {
  box-sizing: border-box;
}

textarea { white-space: pre-wrap; }

怪异模式下,还预期以下规则适用。

@namespace "http://www.w3.org/1999/xhtml";

input:not([type=image i]), textarea { box-sizing: border-box; }

每种表单控件也在窗口部件部分进行了描述,该部分描述了控件的外观和感觉。

对于input元素,其中type属性不在隐藏状态或图像按钮状态中,并且正在呈现,预期其行为如下。

15.3.11 hr元素

@namespace "http://www.w3.org/1999/xhtml";

hr {
  color: gray;
  border-style: inset;
  border-width: 1px;
  margin-block: 0.5em;
  margin-inline: auto;
  overflow: hidden;
}

以下规则也应适用,作为表现提示

@namespace "http://www.w3.org/1999/xhtml";

hr[align=left i] { margin-left: 0; margin-right: auto; }
hr[align=right i] { margin-left: auto; margin-right: 0; }
hr[align=center i] { margin-left: auto; margin-right: auto; }
hr[color], hr[noshade] { border-style: solid; }

如果一个hr元素具有color属性或noshade属性,并且还具有size属性,并且使用非负整数解析规则解析该属性的值不会产生错误,则用户代理应将解析后的值除以二作为像素长度,用于元素的表现提示,用于属性'border-top-width''border-right-width''border-bottom-width''border-left-width'

否则,如果一个hr元素既没有color属性也没有noshade属性,但确实具有size属性,并且使用非负整数解析规则解析该属性的值不会产生错误,则:如果解析后的值为1,则用户代理应将该属性用作表现提示,将元素的'border-bottom-width'设置为0;否则,如果解析后的值大于1,则用户代理应将解析后的值减2作为像素长度,用于表现提示,用于元素的'height'属性。

width属性在hr元素上映射到维度属性'width'

hr元素具有color属性时,其值应使用传统颜色值解析规则进行解析,如果解析不返回错误,则用户代理应将该属性视为表现提示,将元素的'color'属性设置为结果颜色。

15.3.12 fieldsetlegend元素

@namespace "http://www.w3.org/1999/xhtml";

fieldset {
  display: block;
  margin-inline: 2px;
  border: groove 2px ThreeDFace;
  padding-block: 0.35em 0.625em;
  padding-inline: 0.75em;
  min-inline-size: min-content;
}

legend {
  padding-inline: 2px;
}

legend[align=left i] {
  justify-self: left;
}

legend[align=center i] {
  justify-self: center;
}

legend[align=right i] {
  justify-self: right;
}

fieldset元素,当它生成一个CSS 盒时,应按如下方式操作

fieldset元素的渲染图例(如果有)应按如下方式操作

一个fieldset元素的匿名 fieldset 内容框预期表现如下

fieldset's margin legend padding legend's margin padding anonymous fieldset content box content
图例渲染在上边框之上,上边框区域为图例保留垂直空间。fieldset 的上边距从图例的上边距边缘开始。图例的水平边距或'justify-self'属性决定其水平位置。匿名 fieldset 内容框出现在图例下方。

15.4 替换元素

以下元素可以是替换元素audiocanvasembediframeimginputobjectvideo

15.4.1 嵌入内容

预期embediframevideo元素被视为替换元素

canvas元素如果表示嵌入内容,则预期被视为替换元素;此类元素的内容是元素的位图(如果有),否则是具有与元素相同自然尺寸透明黑色位图。其他canvas元素预期在渲染模型中被视为普通元素。

object元素如果表示图像、插件或其内容可导航,则预期被视为替换元素。其他object元素预期在渲染模型中被视为普通元素。

audio元素,当它公开用户界面时,预期被视为大约一行高、宽度足以公开用户代理的用户界面功能的替换元素。当audio元素不公开用户界面时,预期用户代理会强制其'display'属性计算为'none',而不管 CSS 规则如何。

video元素是否公开用户界面预期不会影响渲染的大小;预期控件会覆盖在页面内容之上,而不会导致任何布局更改,并且预期在用户不需要时会消失。

video元素表示海报帧或视频帧时,预期海报帧或视频帧以最大尺寸渲染,该尺寸在不高于或宽于video元素本身的情况下保持该海报帧或视频帧的纵横比,并且预期在video元素中居中。

预期任何字幕或隐藏字幕会直接覆盖在其video元素之上,如相关渲染规则所定义;对于 WebVTT,这些是更新 WebVTT 文本轨道显示的规则[WEBVTT]

当用户代理开始为video元素公开用户界面时,用户代理应运行video元素文本轨道列表中每个文本轨道更新文本轨道渲染的规则,这些文本轨道正在显示,且其文本轨道类型subtitlescaptions(例如,对于基于 WebVTT 的文本轨道更新 WebVTT 文本轨道显示的规则)。[WEBVTT]

调整videocanvas元素的大小不会中断视频播放或清除画布。


预期以下 CSS 规则适用

@namespace "http://www.w3.org/1999/xhtml";

iframe { border: 2px inset; }
video { object-fit: contain; }

15.4.2 图像

预期用户代理会根据以下列表中的第一个适用规则渲染img元素和input元素(其type属性处于图像按钮状态)

如果元素表示图像
预期用户代理会将元素视为替换元素,并根据 CSS 中定义的规则渲染图像。
如果元素不表示图像,并且
预期用户代理会将元素视为替换元素,其内容为元素表示的文本(如果有),或者与表示正在获取图像的图标一起显示(如果适用)。对于input元素,预期元素将显示为按钮状,以指示该元素是一个按钮
如果元素是img元素,它表示一些文本,并且用户代理预计这种情况不会改变
预期用户代理会将元素视为非替换短语元素,其内容为该文本,或者与表示图像丢失的图标一起显示,以便用户可以请求显示图像或调查其未渲染的原因。在非图形上下文中,应省略此类图标。
如果元素是img元素,它表示无内容,并且用户代理预计这种情况不会改变

用户代理应将该元素视为一个替换元素,其自然尺寸为 0。(在没有其他样式的情况下,这会导致元素基本不渲染。)
如果该元素是input 元素,并且不表示图像,且用户代理预计这种情况不会改变
用户代理应将该元素视为一个替换元素,该元素由一个按钮组成,其内容为元素的替代文本。该按钮的自然尺寸 预计约为一行的高度,以及渲染一行文本所需的宽度。

上面提到的图标应相对较小,以免干扰大多数文本,但应易于点击。例如,在视觉环境中,图标可以是 16 像素乘 16 像素的正方形,或者如果图像可缩放,则为 1em 乘 1em。在音频环境中,图标可以是短暂的哔哔声。这些图标旨在向用户指示它们可以用来访问 UA 为图像提供的任何选项,并在适当情况下,预计将提供对上下文菜单的访问,如果用户与实际图像交互,则该菜单将出现。


所有具有相同绝对 URL 和相同图像数据的动画图像,预计将作为一组同步到相同的时间线上进行渲染,时间线从添加到组的最近时间开始。

换句话说,当第二个具有相同绝对 URL 和动画图像数据的图像插入文档时,它会跳转到第一个图像当前显示的动画循环中的点。

当用户代理需要重新开始动画 用于显示动画图像的img 元素时,所有具有相同绝对 URL 和相同图像数据的动画图像,在该img 元素的节点文档 中,预计将从头开始重新开始它们的动画。


预期以下 CSS 规则适用

@namespace "http://www.w3.org/1999/xhtml";

img:is([sizes="auto" i], [sizes^="auto," i]) {
  contain: size !important;
  contain-intrinsic-size: 300px 150px;
}

Document 处于怪异模式时,预计以下 CSS 规则将适用。

@namespace "http://www.w3.org/1999/xhtml";

img[align=left i] { margin-right: 3px; }
img[align=right i] { margin-left: 3px; }

15.4.3 嵌入内容和图像的属性

以下 CSS 规则预计将作为表现性提示 应用。

@namespace "http://www.w3.org/1999/xhtml";

iframe[frameborder='0'], iframe[frameborder=no i] { border: none; }

embed[align=left i], iframe[align=left i], img[align=left i],
input[type=image i][align=left i], object[align=left i] {
  float: left;
}

embed[align=right i], iframe[align=right i], img[align=right i],
input[type=image i][align=right i], object[align=right i] {
  float: right;
}

embed[align=top i], iframe[align=top i], img[align=top i],
input[type=image i][align=top i], object[align=top i] {
  vertical-align: top;
}

embed[align=baseline i], iframe[align=baseline i], img[align=baseline i],
input[type=image i][align=baseline i], object[align=baseline i] {
  vertical-align: baseline;
}

embed[align=texttop i], iframe[align=texttop i], img[align=texttop i],
input[type=image i][align=texttop i], object[align=texttop i] {
  vertical-align: text-top;
}

embed[align=absmiddle i], iframe[align=absmiddle i], img[align=absmiddle i],
input[type=image i][align=absmiddle i], object[align=absmiddle i],
embed[align=abscenter i], iframe[align=abscenter i], img[align=abscenter i],
input[type=image i][align=abscenter i], object[align=abscenter i] {
  vertical-align: middle;
}

embed[align=bottom i], iframe[align=bottom i], img[align=bottom i],
input[type=image i][align=bottom i], object[align=bottom i] {
  vertical-align: bottom;
}

embediframeimgobject 元素,或者input 元素的type 属性处于图像按钮状态时,具有一个 align 属性,其值与字符串“center”或字符串“middle”的ASCII 不区分大小写匹配,则用户代理应将其视为元素的'vertical-align' 属性设置为一个将元素的垂直中间与父元素的基线对齐的值。

embedimgobject 元素以及input 元素的hspace 属性,其type 属性处于图像按钮状态,映射到尺寸属性 'margin-left''margin-right' 在元素上。

embedimgobject 元素以及input 元素的vspace 属性,其type 属性处于图像按钮状态,映射到尺寸属性 'margin-top''margin-bottom' 在元素上。

img 元素、object 元素或input 元素的type 属性处于图像按钮状态时,具有一个 border 属性,其值使用解析非负整数的规则解析后,发现是一个大于零的数字,则用户代理应将解析后的值用于八个表现性提示:四个将解析后的值设置为元素的'border-top-width''border-right-width''border-bottom-width''border-left-width' 属性的像素长度,以及四个将元素的'border-top-style''border-right-style''border-bottom-style''border-left-style' 属性设置为值“solid”。

widthheight 属性在img 元素的尺寸属性源 映射到尺寸属性 'width''height' 分别在img 元素上。它们也类似地映射到纵横比属性(使用尺寸规则)img 元素上。

widthheight 属性在 embediframeobjectvideo 元素以及input 元素上,其type 属性处于图像按钮状态,并且要么表示图像,要么用户预计最终将表示图像,映射到尺寸属性 'width''height' 分别在元素上。

widthheight 属性映射到纵横比属性(使用尺寸规则)imgvideo 元素以及input 元素上,其type 属性处于图像按钮状态。

widthheight 属性映射到纵横比属性canvas 元素上。

15.4.4 图像地图

图像地图上的形状,预计在 CSS 级联的目的方面,将作为独立于原始area 元素的元素,碰巧匹配相同的样式规则,但继承自imgobject 元素。

出于渲染的目的,只有'cursor' 属性预计对形状有任何影响。

例如,如果一个area元素具有一个style属性,该属性将'cursor'属性设置为'help',那么当用户指定该形状时,光标将更改为帮助光标。

类似地,如果一个area元素具有一个CSS规则,该规则将其'cursor'属性设置为'inherit'(或者如果没有任何规则设置'cursor'属性匹配该元素),则形状的光标将从imgobject元素的图像映射继承,而不是从area元素的父元素继承。

15.5 部件

15.5.1 原生外观

《CSS基本用户界面》规范将可以具有原生外观的元素称为部件,并根据'appearance'属性定义是否使用该原生外观。该逻辑又取决于每个元素是否被分类为可降级部件不可降级部件。本节定义了哪些HTML元素匹配这些概念,它们的原生外观是什么,以及它们的降级状态或基本外观的任何特殊性。 [CSSUI]

以下元素可以具有用于CSS'appearance'属性的原生外观

15.5.2 书写模式

几个部件的渲染受'writing-mode' CSS属性控制。对于这些部件,我们有以下定义。

当解析控件的'writing-mode'属性的结果为计算值'horizontal-tb'时,为水平书写模式

当解析控件的'writing-mode'属性的结果为计算值'vertical-rl'、'vertical-lr'、'sideways-rl'或'sideways-lr'时,为垂直书写模式

15.5.3 按钮布局

当元素使用按钮布局时,它是一个可降级部件,并且它的原生外观是按钮的外观。

按钮布局如下所示

需要定义预期的基本外观

15.5.4 button元素

button元素在生成CSS框时,预期会描绘一个按钮并使用按钮布局,其匿名按钮内容框的内容(如果有匿名按钮内容框)是元素的框在其他情况下具有的子框。

15.5.5 detailssummary元素

@namespace "http://www.w3.org/1999/xhtml";

details, summary {
  display: block;
}
details > summary:first-of-type {
  display: list-item;
  counter-increment: list-item 0;
  list-style: disclosure-closed inside;
}
details[open] > summary:first-of-type {
  list-style-type: disclosure-open;
}

预期details元素具有一个包含三个子元素的内部影子树

  1. 第一个子元素是一个slot,预期它将获取details元素的第一个summary元素子元素(如果有)。此元素具有一个名为默认摘要的单个子summary元素,其文本内容是实现定义的(可能特定于区域设置)。

    此插槽表示summary元素预期允许用户请求显示或隐藏详细信息。

  2. 第二个子元素是一个slot,预期它将获取details元素的其余后代(如果有)。此元素没有内容。

    预期此元素匹配'::details-content'伪元素。

    预期此元素的style属性设置为"display: block; content-visibility: hidden;",当details元素没有open属性时。当它具有open属性时,预期style属性设置为"display: block;"。

    由于插槽隐藏在影子树中,因此此style属性对作者代码不可见。但是,其影响是可见的。值得注意的是,选择content-visibility: hidden而不是例如display: none会影响各种查询布局信息的API的结果。

  3. 第三个子元素要么是linkstyle元素,其中包含以下样式,用于默认摘要

    :host summary {
      display: list-item;
      counter-increment: list-item 0;
      list-style: disclosure-closed inside;
    }
    :host([open]) summary {
      list-style-type: disclosure-open;
    }

    此子元素相对于其他两个元素的位置不可观察。这意味着实现可能会将其相对于其同级元素以不同的顺序排列。实现甚至可能使用不是元素的机制将样式与影子树关联。

可以通过`details元素的子元素和'::details-content'伪元素对CSS样式的响应方式来观察此影子树的结构。

15.5.6 input 元素作为文本输入部件

一个input元素,其type属性处于文本电话URL电子邮件状态,是一个可降级部件。其预期原生外观是呈现为一个'inline-block'框,描绘一个单行文本控件。

一个input元素,其type属性处于搜索状态,是一个可降级部件。其预期原生外观是呈现为一个'inline-block'框,描绘一个单行文本控件。如果元素的计算值'appearance'属性不是'textfield',它可能具有独特的样式,表示它是一个搜索字段。

一个input元素,其type属性处于密码状态,是一个可降级部件。其预期原生外观是呈现为一个'inline-block'框,描绘一个模糊数据输入的单行文本控件。

对于input元素,其type属性处于上述状态之一,使用值'line-height'属性必须是长度值,其值不小于'line-height: normal'的使用值。

使用值不会是实际的关键字'normal'。此外,此规则不会影响计算值

如果这些文本控件提供文本选择,则当用户更改当前选择时,预期用户代理将在给定input元素的用户交互任务源排队一个元素任务,以触发一个名为select的事件,在元素上,并将bubbles属性初始化为true。

一个input元素,其type属性处于上述状态之一,是一个具有默认首选大小的元素,并且预期用户代理将'field-sizing' CSS 属性应用于该元素。预期用户代理将通过以下步骤确定其内在大小内联大小

  1. 如果元素上的'field-sizing'属性的计算值'content',则内联大小由元素显示的文本决定。文本可以是或由placeholder属性指定的简短提示。用户代理可能会在内联大小中考虑文本插入符号的大小。

  2. 如果元素具有size属性,并且使用解析非负整数的规则解析该属性的值不会生成错误,则返回从将将字符宽度转换为像素算法应用于属性的值获得的值。

  3. 否则,返回从将将字符宽度转换为像素算法应用于数字 20 获得的值。

将字符宽度转换为像素”算法返回(size-1)×avg + max,其中size是要转换的字符宽度,avg是正在为其运行算法的元素的主字体(以像素为单位)的平均字符宽度,max是相同字体的最大字符宽度(也以像素为单位)。(元素的'letter-spacing'属性不会影响结果。)

预期这些文本控件是滚动容器,并支持在内联轴上滚动,但不支持在块轴上滚动。

需要详细说明预期的原生外观基本外观

15.5.7 input 元素作为特定于域的部件

一个input元素,其type属性处于日期状态,是一个可降级部件,预期呈现为一个'inline-block'框,描绘一个日期控件。

一个input元素,其type属性处于月份状态,是一个可降级部件,预期呈现为一个'inline-block'框,描绘一个月份控件。

一个input元素,其type属性处于星期状态,是一个可降级部件,预期呈现为一个'inline-block'框,描绘一个星期控件。

一个input元素,其type属性处于时间状态,是一个可降级部件,预期呈现为一个'inline-block'框,描绘一个时间控件。

一个input元素,其type属性处于本地日期和时间状态,是一个可降级部件,预期呈现为一个'inline-block'框,描绘一个本地日期和时间控件。

一个input元素,其type属性处于数字状态,是一个预期呈现为描绘数字控件的可降级小部件,并以'inline-block'盒子的形式显示。

一个input元素,其type属性处于数字状态,是一个具有默认首选尺寸的元素,并且用户代理应将'field-sizing' CSS 属性应用于该元素。该块尺寸固有尺寸大约一行高。如果元素上的'field-sizing'属性的计算值'content',则内联尺寸固有尺寸预期大约与显示当前所需的宽度相同。否则,内联尺寸固有尺寸预期大约与显示可能的最大值所需的宽度相同。

一个input元素,其type属性处于日期月份星期时间本地日期和时间状态,预期大约一行高,并且大约与显示可能的最大值所需的宽度相同。

需要详细说明预期的原生外观基本外观

15.5.8 input元素作为范围控件

一个input元素,其type属性处于范围状态,是一个不可降级小部件。其预期的原生外观是呈现为描绘滑块控件的'inline-block'盒子。

当此控件具有水平书写模式时,预期此控件为水平滑块。如果'direction'属性的计算值为'rtl',则其最小值位于右侧,否则位于左侧。当此控件具有垂直书写模式时,预期此控件为垂直滑块。如果'direction'属性的计算值为'rtl',则其最小值位于底部,否则位于顶部。

预定义的建议值(由list属性提供)预期显示为滑块上的刻度标记,滑块可以捕捉到这些标记。

需要详细说明预期的基本外观

15.5.9 input元素作为颜色井

一个input元素,其type属性处于颜色状态,预期描绘一个颜色井,当激活时,为用户提供一个颜色选择器(例如,色轮或调色板),从中可以更改颜色。当该元素生成一个CSS 盒子时,预期使用按钮布局,该布局没有匿名按钮内容盒子的子盒子。匿名按钮内容盒子预期具有一个表现提示,将'background-color'属性设置为元素的

预定义的建议值(由list属性提供)预期显示在颜色选择器界面中,而不是颜色井本身。

需要详细说明预期的原生外观基本外观

15.5.10 input元素作为复选框和单选按钮小部件

一个input元素,其type属性处于复选框状态,是一个预期呈现为包含单个复选框控件(无标签)的'inline-block'盒子的不可降级小部件

需要详细说明预期的原生外观基本外观

一个input元素,其type属性处于单选按钮状态,是一个预期呈现为包含单个单选按钮控件(无标签)的'inline-block'盒子的不可降级小部件

需要详细说明预期的原生外观基本外观

15.5.11 input元素作为文件上传控件

一个input元素,其type属性处于文件上传状态,当它生成一个CSS 盒子时,预期呈现为一个包含一段文本的'inline-block'盒子,该文本给出所选文件(如果有)的文件名,后跟一个按钮,当激活时,为用户提供一个文件选择器,从中可以更改选择。预期该按钮使用按钮布局并匹配'::file-selector-button'伪元素。其匿名按钮内容盒子的内容预期为实现定义(并且可能是特定于语言环境的)文本,例如“选择文件”。

用户代理可能会将input元素(其type属性处于文件上传状态)处理为具有默认首选大小的元素,并且用户代理可能会将'field-sizing' CSS 属性应用于该元素。如果该元素上的'field-sizing'属性的计算值'content',则该元素的固有大小预计将取决于其内容,例如'::file-selector-button'伪元素和选定的文件名。

15.5.12 input 元素作为按钮

一个input元素,其type属性处于提交按钮重置按钮按钮状态,当它生成一个CSS 盒子时,预计会描绘一个按钮并使用按钮布局,并且匿名按钮内容框的内容预计是元素的value属性的文本(如果存在),或者如果不存在,则以实现定义的(可能特定于区域设置的)方式从元素的type属性派生的文本。

15.5.13 marquee 元素

@namespace "http://www.w3.org/1999/xhtml";

marquee {
  display: inline-block;
  text-align: initial;
  overflow: hidden !important;
}

marquee 元素在打开时,预计会根据其属性以动画方式呈现,如下所示

如果元素的behavior属性处于scroll状态

根据下面定义的direction属性描述的方向滑动元素的内容,使其从marquee的起始侧开始,并在内部结束侧与之齐平。

例如,如果direction属性为left(默认值),则内容将从其左边缘位于marquee内容区域右边缘之外开始,然后内容将滑动到内容的左边缘与marquee内容区域的左内边缘齐平。

动画结束后,用户代理预计会增加跑马灯当前循环索引。如果在此之后元素仍然打开,则用户代理预计会重新启动动画。

如果元素的behavior属性处于slide状态

根据下面定义的direction属性描述的方向滑动元素的内容,使其从marquee的起始侧开始,并在marquee的结束侧结束。

例如,如果direction属性为left(默认值),则内容将从其左边缘位于marquee内容区域右边缘之外开始,然后内容将滑动到内容的边缘与marquee内容区域的左内边缘齐平。

动画结束后,用户代理预计会增加跑马灯当前循环索引。如果在此之后元素仍然打开,则用户代理预计会重新启动动画。

如果元素的behavior属性处于alternate状态

跑马灯当前循环索引为偶数(或零)时,根据下面定义的direction属性描述的方向滑动元素的内容,使其从marquee的起始侧开始,并在marquee的结束侧结束。

跑马灯当前循环索引为奇数时,根据下面定义的direction属性描述的方向的反方向滑动元素的内容,使其从marquee的结束侧开始,并在marquee的起始侧结束。

例如,如果direction属性为left(默认值),则内容将从其右边缘与marquee内容区域的右内边缘齐平开始,然后内容将滑动到内容的边缘与marquee内容区域的左内边缘齐平。

动画结束后,用户代理预计会增加跑马灯当前循环索引。如果在此之后元素仍然打开,则用户代理预计会继续动画。

direction属性具有下表中描述的含义

direction 属性状态动画方向起始边缘结束边缘反方向
left ← 从右到左RightLeft→ 从左到右
right → 从左到右LeftRight← 从右到左
up ↑ 向上(从下到上)BottomTop↓ 向下(从上到下)
down ↓ 向下(从上到下)TopBottom↑ 向上(从下到上)

在任何情况下,动画都应以跑马灯滚动间隔给出的延迟在每一帧之间进行,并且内容在每一帧中最多移动跑马灯滚动距离给出的距离。

marquee元素设置了bgcolor属性时,预计会使用解析传统颜色值的规则解析该值,如果该值没有返回错误,则用户代理预计会将该属性视为表示性提示,并将元素的'background-color'属性设置为结果颜色。

marquee元素上的widthheight属性分别映射到元素上的维度属性'width''height'

marquee元素(其direction属性处于updown状态)的自然高度为 200CSS 像素

marquee元素的vspace属性映射到元素上的维度属性'margin-top''margin-bottom'marquee元素的hspace属性映射到元素上的维度属性'margin-left''margin-right'

15.5.14 meter 元素

@namespace "http://www.w3.org/1999/xhtml";

meter { appearance: auto; }

meter 元素是一个 可降级部件。其预期 原生外观 是呈现为一个 'inline-block' 盒子,其 'block-size' 为 '1em','inline-size' 为 '5em','vertical-align' 为 '-0.2em',并且其内容显示为一个仪表盘。

当此元素具有 水平书写模式 时,预期显示为水平仪表盘。如果 'direction' 属性的 计算值 为 'rtl',则其最小值在右侧,否则在左侧。当此元素具有 垂直书写模式 时,预期显示为垂直仪表盘。如果 'direction' 属性的 计算值 为 'rtl',则其最小值在底部,否则在顶部。

用户代理预期使用与平台仪表盘约定一致的呈现方式(如果存在)。

仪表盘中必须显示的内容的要求包含在 meter 元素的定义中。

需要详细说明预期的 基本外观

15.5.15 progress 元素

@namespace "http://www.w3.org/1999/xhtml";

progress { appearance: auto; }

progress 元素是一个 可降级部件。其预期 原生外观 是呈现为一个 'inline-block' 盒子,其 'block-size' 为 '1em','inline-size' 为 '10em',以及 'vertical-align' 为 '-0.2em'。

当此元素具有 水平书写模式 时,预期显示为水平进度条。如果此元素的 'direction' 属性的 计算值 为 'rtl',则起点在右侧,终点在左侧,否则起点在左侧,终点在右侧。当此元素具有 垂直书写模式 时,预期显示为垂直进度条。如果此元素的 'direction' 属性的 计算值 为 'rtl',则起点在底部,终点在顶部,否则起点在顶部,终点在底部。

用户代理预期使用与平台进度条约定一致的呈现方式。特别是,用户代理预期对确定性和不确定性进度条使用不同的呈现方式。用户代理还预期根据元素的尺寸改变呈现方式。

如何确定进度条是确定性还是不确定性,以及确定性进度条应该显示的进度,这些要求都包含在 progress 元素的定义中。

需要详细说明预期的 基本外观

15.5.16 select 元素

select 元素是一个 具有默认首选尺寸的元素,用户代理预期将 'field-sizing' CSS 属性应用于 select 元素。

select 元素要么是 列表框,要么是 下拉框,具体取决于其属性。

具有 multiple 属性的 select 元素预期呈现为多选 列表框

没有 multiple 属性并且 显示尺寸 大于 1 的 select 元素预期呈现为单选 列表框

当元素呈现为 列表框 时,它是一个 可降级部件,预期呈现为 'inline-block' 盒子。其 内在尺寸内联尺寸select 标签的宽度 加上滚动条的宽度。其 内在尺寸块尺寸 由以下步骤确定

  1. 如果元素的 'field-sizing' 属性的 计算值'content',则返回包含所有项目行所需的的高度。

  2. 如果 size 属性不存在或其值无效,则返回包含四行所需的高度。

  3. 否则,返回包含与元素 显示尺寸 所指定数量相同的项目行所需的高度。

没有 multiple 属性并且 显示尺寸 为 1 的 select 元素预期呈现为 'inline-block' 单行 下拉框。其 内在尺寸内联尺寸select 标签的宽度。如果元素的 'field-sizing' 属性的 计算值'content',则 内在尺寸内联尺寸 取决于显示的文本。显示的文本通常是 option 的标签,其 选中状态 设置为 true。

当元素呈现为 下拉框 时,它是一个 可降级部件。其在降级状态下的外观,以及元素 'appearance' 属性的 计算值'menulist-button' 时的外观,都是下拉框的外观,包括一个“下拉按钮”,但不一定使用主机操作系统的原生控件呈现。在这种状态下,CSS 属性(如 'color''background-color' 和 'border')不应被忽略(当根据元素的 原生外观 呈现元素时,通常允许忽略这些属性)。

无论哪种情况(列表框下拉框),元素的项目都预期为元素的 选项列表,其中元素的 optgroup 元素 子节点 在适用时提供选项组的标题。

optgroup 元素预期通过显示元素的 label 属性来呈现。

预期通过显示元素的标签来渲染option元素,如果该元素有optgroup元素,则将其缩进到该元素下方。

每个由一个或多个子hr元素兄弟节点组成的序列可以渲染为单个分隔符。

select标签的宽度是指渲染最宽的optgroup所需的宽度与渲染元素的选项列表中最宽的option元素所需的宽度(包括任何缩进)中的较大者。

如果select元素包含一个占位符标签选项,则用户代理预期以传达其为标签而非控件的有效选项的方式渲染该option。这可能包括阻止用户显式选择占位符标签选项。当占位符标签选项选中状态为真时,控件预期以指示当前未选择任何有效选项的方式显示。

用户代理预期以这样一种方式渲染select中的标签,即无论标签是在页面中显示还是在菜单控件中显示,任何对齐方式都保持一致。

需要详细说明预期的原生外观基本外观

15.5.17 textarea元素

textarea元素是一个可降级小部件,预期渲染为一个'inline-block'框,描绘一个多行文本控件。如果此多行文本控件提供选择,则当用户更改当前选择时,用户代理预期在给定textarea元素的用户交互任务源排队一个元素任务,以在元素上触发一个名为select的事件,并将bubbles属性初始化为true。

textarea元素是一个具有默认首选大小的元素,用户代理预期将'field-sizing' CSS 属性应用于textarea元素。

如果元素上的'field-sizing'属性的计算值'content',则内在大小由元素显示的文本确定。文本要么是原始值,要么是由placeholder属性指定的简短提示。用户代理可能会在内在大小中考虑文本插入符号的大小。否则,其内在大小textarea有效宽度textarea有效高度(如下所定义)计算得出。

textarea元素的textarea有效宽度size×avg + sbw,其中size是元素的字符宽度avg是元素主字体中字符的平均宽度,以CSS像素为单位,sbw是滚动条的宽度,以CSS像素为单位。(元素的'letter-spacing'属性不影响结果。)

textarea元素的textarea有效高度是以CSS像素为单位的元素字符高度指定的行数的高度,加上以CSS像素为单位的滚动条的高度。

用户代理预期将'white-space' CSS 属性应用于textarea元素。由于历史原因,如果元素具有wrap属性,其值与字符串“off”的ASCII不区分大小写匹配,则用户代理预期将该属性视为表现提示,将元素的'white-space'属性设置为'pre'。

需要详细说明预期的原生外观基本外观

15.6 框架和框架集

用户代理预期将frameset元素渲染为一个高度和宽度与视口相同、且表面根据以下布局算法渲染的框。

  1. colsrows变量是零个或多个由数字和单位组成的对的列表,单位是百分比相对绝对之一。

    如果存在,则使用解析尺寸列表的规则解析元素的cols属性的值。令cols为结果,如果不存在此类属性,则为一个空列表。

    如果存在,则使用解析尺寸列表的规则解析元素的rows属性的值。令rows为结果,如果不存在此类属性,则为一个空列表。

  2. 对于colsrows中任何具有数字零和单位相对的条目,将条目的数字更改为1。

  3. 如果cols没有条目,则向cols添加一个由值1和单位相对组成的单个条目。

    如果rows没有条目,则向rows添加一个由值1和单位相对组成的单个条目。

  4. 使用cols作为输入列表,以及frameset正在渲染到的表面的宽度(以CSS像素为单位)作为输入维度,调用下面定义的算法,以将尺寸列表转换为像素值列表。令sized cols为结果列表。

    使用rows作为输入列表,以及frameset正在渲染到的表面的高度(以CSS像素为单位)作为输入维度,调用下面定义的算法,以将尺寸列表转换为像素值列表。令sized rows为结果列表。

  5. 将表面分割成一个w×h矩形的网格,其中wsized cols中条目的数量,hsized rows中条目的数量。

    调整列的大小,以便网格中的每一列的宽度都与sized cols列表中对应的条目一样多CSS像素

    调整行的大小,以便网格中的每一行的高度都与sized rows列表中对应的条目一样多CSS像素

  6. childrenframeframeset元素的列表,这些元素是为其调用该算法的frameset元素的子节点

  7. 对于从上到下创建的矩形网格的每一行,运行以下子步骤。

    1. 对于行中的每个矩形,从左到右,运行以下子步骤。

      1. 如果children中还有任何元素,则取列表中的第一个元素,并将其分配给矩形。

        如果这是一个frameset元素,则对该frameset元素递归整个frameset布局算法,并将矩形作为表面。

        否则,它是一个frame元素;呈现其内容可导航部分,并将其定位和大小调整为适合矩形。

      2. 如果children中还有任何剩余元素,则从children中删除第一个元素。

  8. 如果frameset元素具有边框,则使用该元素的边框颜色在矩形周围绘制一组外部边框。

    对于每个矩形,如果有一个元素分配给该矩形,并且该元素具有边框,则使用该元素的边框颜色在该矩形周围绘制一组内部边框。

    对于每个(可见的)边框,如果它不与分配有frame元素且具有noresize属性的矩形相邻(包括嵌套更深的frameset元素中的矩形),则用户代理应允许用户移动边框,调整内部矩形的大小,同时保持任何嵌套的frameset网格的比例。

    framesetframe元素具有边框,如果以下算法返回true

    1. 如果元素具有frameborder属性,其值不是空字符串,并且其第一个字符是U+0031数字1(1)字符、U+0079拉丁小写字母y(y)字符或U+0059拉丁大写字母Y(Y)字符,则返回true。

    2. 否则,如果元素具有frameborder属性,则返回false。

    3. 否则,如果元素具有一个父元素,该父元素是frameset元素,则如果元素具有边框,则返回true,否则返回false。

    4. 否则,返回true。

    framesetframe元素的边框颜色是从以下算法获得的颜色

    1. 如果元素具有bordercolor属性,并且将解析传统颜色值的规则应用于该属性的值不会导致错误,则返回获得的颜色。

    2. 否则,如果元素具有一个父元素,该父元素是frameset元素,则返回该元素的边框颜色

    3. 否则,返回灰色。

尺寸列表转换为像素值列表的算法包括以下步骤

  1. 输入列表为传递给算法的数字和单位列表。

    输出列表为与输入列表长度相同的数字列表,所有值为零。

    输出列表中的条目对应于输入列表中具有相同位置的条目。

  2. 输入尺寸为传递给算法的大小。

  3. 百分比计数输入列表中单位为百分比的条目的数量。

    百分比总和输入列表中单位为百分比的所有数字的总和。

    相对计数输入列表中单位为相对的条目的数量。

    相对总和输入列表中单位为相对的所有数字的总和。

    绝对计数输入列表中单位为绝对的条目的数量。

    绝对总和输入列表中单位为绝对的所有数字的总和。

    剩余空间输入尺寸的值。

  4. 如果绝对总和大于剩余空间,则对于输入列表中单位为绝对的每个条目,将输出列表中对应的值设置为输入列表中条目的数字乘以剩余空间并除以绝对总和。然后,将剩余空间设置为零。

    否则,对于输入列表中单位为绝对的每个条目,将输出列表中对应的值设置为输入列表中条目的数字。然后,将剩余空间减去绝对总和

  5. 如果百分比总和乘以输入尺寸并除以100大于剩余空间,则对于输入列表中单位为百分比的每个条目,将输出列表中对应的值设置为输入列表中条目的数字乘以剩余空间并除以百分比总和。然后,将剩余空间设置为零。

    否则,对于输入列表中单位为百分比的每个条目,将输出列表中对应的值设置为输入列表中条目的数字乘以输入尺寸并除以100。然后,将剩余空间减去百分比总和乘以输入尺寸并除以100。

  6. 对于输入列表中单位为相对的每个条目,将输出列表中对应的值设置为输入列表中条目的数字乘以剩余空间并除以相对总和

  7. 返回输出列表

使用帧宽度的整数值的用户代理(与能够以亚像素精度布局帧的用户代理相反)应首先将余数分配给单位为相对的最后一个条目,然后平均(非按比例)分配给单位为百分比的每个条目,然后平均(非按比例)分配给单位为绝对的每个条目,最后,如果所有其他方法都失败,则分配给最后一个条目。


不具有frameset父元素的frame元素的内容应呈现为透明黑色;用户代理应在这种情况下不呈现其内容可导航部分,并且其内容可导航部分应具有宽度和高度均为零的视口

15.7 交互式媒体

15.7.1 链接、表单和导航

用户代理应允许用户控制超链接激活和表单提交的各个方面,例如要用于后续导航可导航内容。

用户代理应允许用户在触发导航之前发现超链接表单的目标。

用户代理应通知用户超链接是否包含超链接审核,并至少让他们知道哪些域名将在审核过程中被联系。

用户代理可以允许用户导航qblockquoteinsdel元素的cite属性指示的URL的可导航内容。

用户代理可以在其用户界面中显示由link元素创建的超链接,如之前所述。

15.7.2 title属性

用户代理应在用户请求时公开元素的建议信息,并让用户意识到此类信息的存在。

在用户可以使用指向设备的交互式图形系统中,这可以采取工具提示的形式。当用户无法使用指向设备时,用户代理应以其他方式提供内容,例如,使元素成为可聚焦区域并始终显示当前聚焦元素的建议信息,或者在用户在触摸设备上平移屏幕时显示用户手指下元素的建议信息

U+000A换行符(LF)字符应在工具提示中导致换行;U+0009字符制表符(tab)字符应呈现为非零水平偏移,该偏移使下一个字形与下一个制表位对齐,制表位出现在U+0020空格字符宽度的8倍的倍数点上。

例如,视觉用户代理可以使具有title属性的元素可聚焦,并且可以使任何聚焦的元素,如果具有title属性,则在元素具有焦点时在其下方显示其工具提示。这将允许用户在文档中四处切换标签以查找所有建议文本。

另一个示例是,屏幕阅读器可以在读取具有工具提示的元素时提供音频提示,并提供一个关联的键来读取播放了提示的最后一个工具提示。

15.7.3 编辑主机

如果存在文本编辑光标(即活动范围,如果它为空并且位于编辑宿主中),则它应被视为一个具有光标垂直尺寸和零宽度的内联替换元素,用于 CSS 渲染模型。

这意味着即使一个空块也可以包含光标,并且当光标位于此类元素中时,它可以防止边距折叠穿过该元素。

15.7.4 在原生用户界面中渲染的文本

预期用户代理会遵循在用户界面中显示的文本的 Unicode 语义,例如,支持在对话框、标题栏、弹出菜单和工具提示中显示的文本的双向算法。预期元素内容中的文本以遵守获取文本的元素的方向性的方式渲染。预期属性中的文本以遵守属性的方向性的方式渲染。

考虑以下标记,其中包含希伯来语文本,询问编程语言,这些语言的文本对于某些名称中的标点符号来说,从左到右的方向很重要

<p dir="rtl" lang="he">
 <label>
  בחר שפת תכנות:
  <select>
   <option dir="ltr">C++</option>
   <option dir="ltr">C#</option>
   <option dir="ltr">FreePascal</option>
   <option dir="ltr">F#</option>
  </select>
 </label>
</p>

如果select元素呈现为下拉框,则正确的渲染将确保标点符号在下拉框和显示当前选择的框中相同。

属性的方向性取决于属性和元素的dir属性,如下例所示。考虑以下标记

<table>
 <tr>
  <th abbr="(א" dir=ltr>A
  <th abbr="(א" dir=rtl>A
  <th abbr="(א" dir=auto>A
</table>

如果abbr属性被渲染(例如,在工具提示或其他用户界面中),第一个将具有左括号(因为方向为“ltr”),第二个将具有右括号(因为方向为“rtl”),第三个将具有右括号(因为方向根据属性值确定为“rtl”)。

但是,如果属性不是方向性功能属性,则结果将不同

<table>
 <tr>
  <th data-abbr="(א" dir=ltr>A
  <th data-abbr="(א" dir=rtl>A
  <th data-abbr="(א" dir=auto>A
</table>

在这种情况下,如果用户代理要在用户界面中(例如,在调试环境中)显示data-abbr属性,则最后一个情况将以括号渲染,因为方向将根据元素的内容确定。

脚本提供的字符串(例如,window.alert()的参数)在显示时,预期会被视为一个或多个双向算法段落的独立集合,如双向算法中定义的那样,包括例如支持 U+000A 换行符 (LF) 字符的段落换行行为。为了确定双向算法中此类文本的段落级别,本规范提供对规则 P2 和 P3 的更高级别的覆盖。 [BIDI]

如有必要,作者可以通过在段落开头使用 Unicode U+200E 左到右标记或 U+200F 右到左标记字符来强制执行特定方向。

因此,以下脚本

alert('\u05DC\u05DE\u05D3 HTML \u05D4\u05D9\u05D5\u05DD!')

…将始终导致消息显示为“למד LMTH היום!”(而不是“דמל HTML םויה!”),而不管用户代理界面的语言、页面方向或其任何元素的方向如何。

对于更复杂的示例,请考虑以下脚本

/* Warning: this script does not handle right-to-left scripts correctly */
var s;
if (s = prompt('What is your name?')) {
  alert(s + '! Ok, Fred, ' + s + ', and Wilma will get the car.');
}

当用户输入“Kitty”时,用户代理将提示“Kitty! Ok, Fred, Kitty, and Wilma will get the car.”。但是,如果用户输入“لا أفهم”,则双向算法将确定段落的方向为从右到左,因此输出将是以下意外的混乱:“لا أفهم! derF ,kO, لا أفهم, rac eht teg lliw amliW dna.

要强制以用户提供的文本(或其他未知方向性的文本)开头的警报从左到右渲染,可以在字符串前缀添加 U+200E 左到右标记字符

var s;
if (s = prompt('What is your name?')) {
  alert('\u200E' + s + '! Ok, Fred, ' + s + ', and Wilma will get the car.');
}

预期用户代理允许用户请求获得文档物理形式(或物理形式的表示)的机会。例如,选择打印页面或将其转换为 PDF 格式的选项。[PDF]

当用户实际获得文档的物理形式(或物理形式的表示)时,预期用户代理会为打印媒体创建文档的新渲染。

15.9 未设置样式的 XML 文档

HTML 用户代理在某些情况下可能会发现自己正在渲染非 HTML 文档,这些文档使用他们没有任何内置知识的词汇表。本节提供了一种用户代理以某种有用的方式处理此类文档的方法。

文档未设置样式的文档时,预期用户代理会渲染未设置样式的文档视图

文档在满足以下条件时为未设置样式的文档

未设置样式的文档视图是指 DOM 未根据 CSS 渲染(这由于在此上下文中没有适用的样式,只会导致一大段文本),而是以对开发人员有用的方式渲染。这可能包括仅显示文档对象的源代码(可能带有语法高亮),或者可能包括仅显示 DOM 树,或者只是显示一条消息,说明页面不是设置样式的文档。

如果文档不再是未设置样式的文档,则上述条件停止适用,因此遵循这些要求的用户代理将切换为使用常规 CSS 渲染。