Warning:
This wiki has been archived and is now read-only.

HTML5/rendering

From HTML5 Chinese Interest Group Wiki

Jump to: navigation, search

渲染

用户代理不需用任何特定方式呈现HTML文档。然而本节内容提供了一个渲染HTML文档的建议，如果服从这个建议，很可能引导用户体验一致，且非常接近文档作者的意图。为了避免混淆本节内容的规范性，RFC2119中的术语都没有被使用，相反的“预期”这个术语是用来表示引导一致用户体验的象征行为。对于指定为支持建议默认渲染的用户代理，术语“预期”在本节中具有和 RFC2119 定义的术语“必须”相同的一致性含义。

介紹

English

本規範預期一般的使用者代理支援 CSS，也因此本章節給的所有建議都使用 CSS 用語。使用其他表象機制的使用者代理可以由本章節提供的 CSS 規則導出其他機制的規則。

反之，若沒有樣式層的規則（例如網頁作者樣式）時，本規範預期使用者代理按照本規範描述的渲染各元素，以將元素代表的概念呈現給使用者。

本章節的各項建議一般假設使用者代理有解析度大於 96dpi 的視覺輸出媒介，但 HTML 適用於多媒介（它是個「不分媒介」的語言），因此本規範鼓勵使用者代理就目標媒介調整本章節的各項建議。

本規範定義「使用者代理渲染一個元素」為，該元素在 Document 裡，且它是一個 Document 節點或屬性使用者代理渲染它的父節點，而且以下三個方法沒有阻止該元素的渲染過程：

CSS 的 'display' 屬性設為 'none' 值
不被解釋成 'hidden' 的 'visibility' 屬性的 'collapse' 值
其他樣式語言的類似機制

注：就算一個元素在畫面外也不代表使用者代理未渲染該元素。使用者代理一般不會渲染一個具有 hidden 屬性的元素，但是樣式表可以覆蓋這個設定。

CSS 使用者代理樣式表與表象呈現提示

介紹

除非特別註明，本規範預期使用者代理將這幾個小節的 CSS 規則作為對於含有 HTML 元素文件的預設使用者代理層樣式表的一部分。

有些規則是作為 CSS 層疊作者層無特異性的表象呈現提示的部份，本規範會註明這些規則為表象呈現提示。

有些跟左右邊界相關的規則僅對於 'direction' 屬性為 'ltr' 的元素適用，在碰到 'direction' 屬性為 'rtl' 的元素時，本規範預期使用者代理將這些規則翻過來。這些規則以「ltr 限定」註明。

注：這些註解只影響屬性值的處理，而不影響屬性名稱或元素名稱。

Error creating thumbnail: Unable to save thumbnail to destination

非置換元素

隱藏的元素

English

@namespace url(http://www.w3.org/1999/xhtml);

[hidden], area, base, basefont, command, datalist, head,
input[type=hidden i], link, menu[type=context i], meta, noembed, noframes, 
param, rp, script, source, style, track, title {
  display: none;
}

不管 CSS 規則為何，本規範預期使用者代理強制將腳本啟用的 noscript 元素的 'display' 屬性計算為 'none'

Error creating thumbnail: Unable to save thumbnail to destination

。

頁面

@namespace url(http://www.w3.org/1999/xhtml);

html, body { display: block; }

流式內容

English

@namespace url(http://www.w3.org/1999/xhtml);

address, blockquote, center, div, figure, figcaption, footer, form,
header, hr, legend, listing, p, plaintext, pre, summary, xmp {
  display: block; unicode-bidi: isolate;
}

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

blockquote, figure { margin-left: 40px; margin-right: 40px; }

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

作為表象呈現提示，以下規則也適用：

@namespace url(http://www.w3.org/1999/xhtml);

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

在怪癖模式中，以下規則也適用：

@namespace url(http://www.w3.org/1999/xhtml);

form { margin-bottom: 1em; }

段落式內容

@namespace url(http://www.w3.org/1999/xhtml);

cite, dfn, em, i, var { font-style: italic; }
b, strong { font-weight: bold; }
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, :visited { text-decoration: underline; }
a:link[rel~=help], a:visited[rel~=help],
area:link[rel~=help], area:visited[rel~=help] { cursor: help; }

:focus { 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; }
blink { text-decoration: blink; }

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

br { content: '\A'; white-space: pre; }
nobr { white-space: nowrap; }
wbr { content: '\200B'; }
nobr wbr { white-space: normal; }

English

作為表象呈現提示，以下規則也適用：

@namespace url(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; }

雙向文字

@namespace url(http://www.w3.org/1999/xhtml);

:dir(ltr) { direction: ltr; }
:dir(rtl) { direction: rtl; }
[dir] { unicode-bidi: embed; }
bdi, bdi[dir], output, output[dir], [dir=auto i] { unicode-bidi: isolate; }
bdo, bdo[dir] { unicode-bidi: bidi-override; }
bdo[dir=auto i] { unicode-bidi: bidi-override isolate; }
textarea[dir=auto i], pre[dir=auto i] { unicode-bidi: plaintext; }

引號

English

以下區塊從 Unicode Common Locale Data Repository 自動生成。[CLDR]

@namespace url(http://www.w3.org/1999/xhtml);

:root                { quotes: '\201c' '\201d' '\2018' '\2019'; } /* “ ” ‘ ’ */
:lang(af)            { quotes: '\201c' '\201d' '\2018' '\2019'; } /* “ ” ‘ ’ */
:lang(agq)           { quotes: '\201e' '\201d' '\201a' '\2019'; } /* „ ” ‚ ’ */
:lang(ak)            { quotes: '\201c' '\201d' '\2018' '\2019'; } /* “ ” ‘ ’ */
:lang(am)            { quotes: '\00ab' '\00bb' '\2039' '\203a'; } /* « » ‹ › */
:lang(ar)            { quotes: '\201d' '\201c' '\2019' '\2018'; } /* ” “ ’ ‘ */
:lang(asa)           { quotes: '\201c' '\201d' '\2018' '\2019'; } /* “ ” ‘ ’ */
:lang(az)            { quotes: '\00ab' '\00bb' '\2039' '\203a'; } /* « » ‹ › */
:lang(az-Cyrl)       { quotes: '\00ab' '\00bb' '\2039' '\203a'; } /* « » ‹ › */
:lang(bas)           { quotes: '\00ab' '\00bb' '\201e' '\201c'; } /* « » „ “ */
:lang(be)            { quotes: '\00ab' '\00bb' '\2039' '\203a'; } /* « » ‹ › */
:lang(bem)           { quotes: '\201c' '\201d' '\2018' '\2019'; } /* “ ” ‘ ’ */
:lang(bez)           { quotes: '\201c' '\201d' '\2018' '\2019'; } /* “ ” ‘ ’ */
:lang(bg)            { quotes: '\201e' '\201c' '\201a' '\2018'; } /* „ “ ‚ ‘ */
:lang(bm)            { quotes: '\00ab' '\00bb' '\201c' '\201d'; } /* « » “ ” */
:lang(bn)            { quotes: '\201c' '\201d' '\2018' '\2019'; } /* “ ” ‘ ’ */
:lang(br)            { quotes: '\00ab' '\00bb' '\2039' '\203a'; } /* « » ‹ › */
:lang(brx)           { quotes: '\201c' '\201d' '\2018' '\2019'; } /* “ ” ‘ ’ */
:lang(bs)            { quotes: '\2018' '\2019' '\201c' '\201d'; } /* ‘ ’ “ ” */
:lang(ca)            { quotes: '\00ab' '\00bb' '\201c' '\201d'; } /* « » “ ” */
:lang(cgg)           { quotes: '\201c' '\201d' '\2018' '\2019'; } /* “ ” ‘ ’ */
:lang(chr)           { quotes: '\201c' '\201d' '\2018' '\2019'; } /* “ ” ‘ ’ */
:lang(cs)            { quotes: '\201e' '\201c' '\201a' '\2018'; } /* „ “ ‚ ‘ */
:lang(cy)            { quotes: '\2018' '\2019' '\201c' '\201d'; } /* ‘ ’ “ ” */
:lang(da)            { quotes: '\00bb' '\00ab' '\203a' '\2039'; } /* » « › ‹ */
:lang(dav)           { quotes: '\201c' '\201d' '\2018' '\2019'; } /* “ ” ‘ ’ */
:lang(de)            { quotes: '\201e' '\201c' '\201a' '\2018'; } /* „ “ ‚ ‘ */
:lang(de-CH)         { quotes: '\00ab' '\00bb' '\2039' '\203a'; } /* « » ‹ › */
:lang(dje)           { quotes: '\201c' '\201d' '\2018' '\2019'; } /* “ ” ‘ ’ */
:lang(dua)           { quotes: '\00ab' '\00bb' '\2018' '\2019'; } /* « » ‘ ’ */
:lang(dyo)           { quotes: '\00ab' '\00bb' '\201c' '\201d'; } /* « » “ ” */
:lang(dz)            { quotes: '\0022' '\0022' '\0027' '\0027'; } /* " " ' ' */
:lang(ebu)           { quotes: '\201c' '\201d' '\2018' '\2019'; } /* “ ” ‘ ’ */
:lang(ee)            { quotes: '\201c' '\201d' '\2018' '\2019'; } /* “ ” ‘ ’ */
:lang(el)            { quotes: '\00ab' '\00bb' '\201c' '\201d'; } /* « » “ ” */
:lang(el-POLYTON)    { quotes: '\00ab' '\00bb' '\201b' '\201d'; } /* « » ‛ ” */
:lang(en)            { quotes: '\201c' '\201d' '\2018' '\2019'; } /* “ ” ‘ ’ */
:lang(en-GB)         { quotes: '\2018' '\2019' '\201c' '\201d'; } /* ‘ ’ “ ” */
:lang(es)            { quotes: '\00ab' '\00bb' '\201c' '\201d'; } /* « » “ ” */
:lang(et)            { quotes: '\201e' '\201c' '\201a' '\2018'; } /* „ “ ‚ ‘ */
:lang(eu)            { quotes: '\00ab' '\00bb' '\2039' '\203a'; } /* « » ‹ › */
:lang(ewo)           { quotes: '\00ab' '\00bb' '\201c' '\201d'; } /* « » “ ” */
:lang(fa)            { quotes: '\00ab' '\00bb' '\2039' '\203a'; } /* « » ‹ › */
:lang(ff)            { quotes: '\201e' '\201d' '\201a' '\2019'; } /* „ ” ‚ ’ */
:lang(fi)            { quotes: '\201d' '\201d' '\2019' '\2019'; } /* ” ” ’ ’ */
:lang(fil)           { quotes: '\201c' '\201d' '\2018' '\2019'; } /* “ ” ‘ ’ */
:lang(fo)            { quotes: '\201d' '\201d' '\2019' '\2019'; } /* ” ” ’ ’ */
:lang(fr)            { quotes: '\00ab' '\00bb' '\2039' '\203a'; } /* « » ‹ › */
:lang(fr-CH)         { quotes: '\00ab' '\00bb' '\2039' '\203a'; } /* « » ‹ › */
:lang(fur)           { quotes: '\2018' '\2019' '\201c' '\201d'; } /* ‘ ’ “ ” */
:lang(gaa)           { quotes: '\0027' '\0027' '\0022' '\0022'; } /* ' ' " " */
:lang(gd)            { quotes: '\201c' '\201d' '\2018' '\2019'; } /* “ ” ‘ ’ */
:lang(gl)            { quotes: '\201c' '\201d' '\2018' '\2019'; } /* “ ” ‘ ’ */
:lang(gsw)           { quotes: '\00ab' '\00bb' '\2039' '\203a'; } /* « » ‹ › */
:lang(gu)            { quotes: '\201c' '\201d' '\2018' '\2019'; } /* “ ” ‘ ’ */
:lang(guz)           { quotes: '\201c' '\201d' '\2018' '\2019'; } /* “ ” ‘ ’ */
:lang(ha)            { quotes: '\201c' '\201d' '\2018' '\2019'; } /* “ ” ‘ ’ */
:lang(he)            { quotes: '\0022' '\0022' '\0027' '\0027'; } /* " " ' ' */
:lang(hi)            { quotes: '\201c' '\201d' '\2018' '\2019'; } /* “ ” ‘ ’ */
:lang(hr)            { quotes: '\201e' '\201c' '\201a' '\2018'; } /* „ “ ‚ ‘ */
:lang(hu)            { quotes: '\201e' '\201d' '\00bb' '\00ab'; } /* „ ” » « */
:lang(ia)            { quotes: '\2018' '\2019' '\201c' '\201d'; } /* ‘ ’ “ ” */
:lang(id)            { quotes: '\201c' '\201d' '\2018' '\2019'; } /* “ ” ‘ ’ */
:lang(ig)            { quotes: '\201c' '\201d' '\2018' '\2019'; } /* “ ” ‘ ’ */
:lang(is)            { quotes: '\201e' '\201c' '\201a' '\2018'; } /* „ “ ‚ ‘ */
:lang(it)            { quotes: '\00ab' '\00bb' '\201c' '\201d'; } /* « » “ ” */
:lang(it-CH)         { quotes: '\00ab' '\00bb' '\2039' '\203a'; } /* « » ‹ › */
:lang(ja)            { quotes: '\300c' '\300d' '\300e' '\300f'; } /* 「 」 『 』 */
:lang(jmc)           { quotes: '\201c' '\201d' '\2018' '\2019'; } /* “ ” ‘ ’ */
:lang(ka)            { quotes: '\201e' '\201c' '\201a' '\2018'; } /* „ “ ‚ ‘ */
:lang(kab)           { quotes: '\00ab' '\00bb' '\201c' '\201d'; } /* « » “ ” */
:lang(kam)           { quotes: '\201c' '\201d' '\2018' '\2019'; } /* “ ” ‘ ’ */
:lang(kde)           { quotes: '\201c' '\201d' '\2018' '\2019'; } /* “ ” ‘ ’ */
:lang(kea)           { quotes: '\201c' '\201d' '\2018' '\2019'; } /* “ ” ‘ ’ */
:lang(khq)           { quotes: '\201c' '\201d' '\2018' '\2019'; } /* “ ” ‘ ’ */
:lang(ki)            { quotes: '\201c' '\201d' '\2018' '\2019'; } /* “ ” ‘ ’ */
:lang(kl)            { quotes: '\00bb' '\00ab' '\203a' '\2039'; } /* » « › ‹ */
:lang(kln)           { quotes: '\201c' '\201d' '\2018' '\2019'; } /* “ ” ‘ ’ */
:lang(km)            { quotes: '\0027' '\0027' '\0022' '\0022'; } /* ' ' " " */
:lang(kn)            { quotes: '\201c' '\201d' '\2018' '\2019'; } /* “ ” ‘ ’ */
:lang(ko)            { quotes: '\201c' '\201d' '\2018' '\2019'; } /* “ ” ‘ ’ */
:lang(ksb)           { quotes: '\201c' '\201d' '\2018' '\2019'; } /* “ ” ‘ ’ */
:lang(ksf)           { quotes: '\00ab' '\00bb' '\2018' '\2019'; } /* « » ‘ ’ */
:lang(ksh)           { quotes: '\201e' '\201c' '\201a' '\2018'; } /* „ “ ‚ ‘ */
:lang(lag)           { quotes: '\201d' '\201d' '\2019' '\2019'; } /* ” ” ’ ’ */
:lang(lg)            { quotes: '\201c' '\201d' '\2018' '\2019'; } /* “ ” ‘ ’ */
:lang(ln)            { quotes: '\201c' '\201d' '\2018' '\2019'; } /* “ ” ‘ ’ */
:lang(lo)            { quotes: '\0027' '\0027' '\0022' '\0022'; } /* ' ' " " */
:lang(lt)            { quotes: '\201e' '\201c' '\201a' '\2018'; } /* „ “ ‚ ‘ */
:lang(lu)            { quotes: '\201c' '\201d' '\2018' '\2019'; } /* “ ” ‘ ’ */
:lang(luo)           { quotes: '\201c' '\201d' '\2018' '\2019'; } /* “ ” ‘ ’ */
:lang(luy)           { quotes: '\201e' '\201c' '\201a' '\2018'; } /* „ “ ‚ ‘ */
:lang(lv)            { quotes: '\00ab' '\00bb' '\201e' '\201c'; } /* « » „ “ */
:lang(mas)           { quotes: '\201c' '\201d' '\2018' '\2019'; } /* “ ” ‘ ’ */
:lang(mer)           { quotes: '\201c' '\201d' '\2018' '\2019'; } /* “ ” ‘ ’ */
:lang(mfe)           { quotes: '\201c' '\201d' '\2018' '\2019'; } /* “ ” ‘ ’ */
:lang(mg)            { quotes: '\00ab' '\00bb' '\201c' '\201d'; } /* « » “ ” */
:lang(mk)            { quotes: '\201e' '\201c' '\201a' '\2018'; } /* „ “ ‚ ‘ */
:lang(ml)            { quotes: '\201c' '\201d' '\2018' '\2019'; } /* “ ” ‘ ’ */
:lang(mn)            { quotes: '\2018' '\2019' '\201c' '\201d'; } /* ‘ ’ “ ” */
:lang(mr)            { quotes: '\201c' '\201d' '\2018' '\2019'; } /* “ ” ‘ ’ */
:lang(ms)            { quotes: '\201c' '\201d' '\2018' '\2019'; } /* “ ” ‘ ’ */
:lang(mt)            { quotes: '\201c' '\201d' '\2018' '\2019'; } /* “ ” ‘ ’ */
:lang(mua)           { quotes: '\00ab' '\00bb' '\201c' '\201d'; } /* « » “ ” */
:lang(my)            { quotes: '\201c' '\201d' '\2018' '\2019'; } /* “ ” ‘ ’ */
:lang(naq)           { quotes: '\201c' '\201d' '\2018' '\2019'; } /* “ ” ‘ ’ */
:lang(nb)            { quotes: '\00ab' '\00bb' '\2018' '\2019'; } /* « » ‘ ’ */
:lang(nd)            { quotes: '\201c' '\201d' '\2018' '\2019'; } /* “ ” ‘ ’ */
:lang(nds)           { quotes: '\201e' '\201c' '\201a' '\2018'; } /* „ “ ‚ ‘ */
:lang(ne)            { quotes: '\201c' '\201d' '\2018' '\2019'; } /* “ ” ‘ ’ */
:lang(nl)            { quotes: '\201c' '\201d' '\2018' '\2019'; } /* “ ” ‘ ’ */
:lang(nmg)           { quotes: '\201e' '\201d' '\00ab' '\00bb'; } /* „ ” « » */
:lang(nn)            { quotes: '\00ab' '\00bb' '\2018' '\2019'; } /* « » ‘ ’ */
:lang(nr)            { quotes: '\2018' '\2019' '\201c' '\201d'; } /* ‘ ’ “ ” */
:lang(nso)           { quotes: '\2018' '\2019' '\201c' '\201d'; } /* ‘ ’ “ ” */
:lang(nus)           { quotes: '\201c' '\201d' '\2018' '\2019'; } /* “ ” ‘ ’ */
:lang(nyn)           { quotes: '\201c' '\201d' '\2018' '\2019'; } /* “ ” ‘ ’ */
:lang(pa)            { quotes: '\0027' '\0027' '\0022' '\0022'; } /* ' ' " " */
:lang(pl)            { quotes: '\201e' '\201d' '\00ab' '\00bb'; } /* „ ” « » */
:lang(pt)            { quotes: '\201c' '\201d' '\2018' '\2019'; } /* “ ” ‘ ’ */
:lang(pt-PT)         { quotes: '\00ab' '\00bb' '\201c' '\201d'; } /* « » “ ” */
:lang(rm)            { quotes: '\00ab' '\00bb' '\2039' '\203a'; } /* « » ‹ › */
:lang(rn)            { quotes: '\201d' '\201d' '\2019' '\2019'; } /* ” ” ’ ’ */
:lang(ro)            { quotes: '\201e' '\201d' '\00ab' '\00bb'; } /* „ ” « » */
:lang(rof)           { quotes: '\201c' '\201d' '\2018' '\2019'; } /* “ ” ‘ ’ */
:lang(ru)            { quotes: '\00ab' '\00bb' '\201e' '\201c'; } /* « » „ “ */
:lang(rw)            { quotes: '\00ab' '\00bb' '\2018' '\2019'; } /* « » ‘ ’ */
:lang(rwk)           { quotes: '\201c' '\201d' '\2018' '\2019'; } /* “ ” ‘ ’ */
:lang(saq)           { quotes: '\201c' '\201d' '\2018' '\2019'; } /* “ ” ‘ ’ */
:lang(sbp)           { quotes: '\201c' '\201d' '\2018' '\2019'; } /* “ ” ‘ ’ */
:lang(se)            { quotes: '\201d' '\201d' '\2019' '\2019'; } /* ” ” ’ ’ */
:lang(seh)           { quotes: '\201c' '\201d' '\2018' '\2019'; } /* “ ” ‘ ’ */
:lang(ses)           { quotes: '\201c' '\201d' '\2018' '\2019'; } /* “ ” ‘ ’ */
:lang(sg)            { quotes: '\00ab' '\00bb' '\201c' '\201d'; } /* « » “ ” */
:lang(shi)           { quotes: '\00ab' '\00bb' '\201e' '\201d'; } /* « » „ ” */
:lang(shi-Tfng)      { quotes: '\00ab' '\00bb' '\201e' '\201d'; } /* « » „ ” */
:lang(sk)            { quotes: '\201e' '\201c' '\201a' '\2018'; } /* „ “ ‚ ‘ */
:lang(sl)            { quotes: '\201e' '\201c' '\201a' '\2018'; } /* „ “ ‚ ‘ */
:lang(sn)            { quotes: '\201d' '\201d' '\2019' '\2019'; } /* ” ” ’ ’ */
:lang(so)            { quotes: '\201c' '\201d' '\2018' '\2019'; } /* “ ” ‘ ’ */
:lang(sq)            { quotes: '\201e' '\201c' '\201a' '\2018'; } /* „ “ ‚ ‘ */
:lang(sr)            { quotes: '\201e' '\201c' '\201a' '\2018'; } /* „ “ ‚ ‘ */
:lang(sr-Latn)       { quotes: '\201e' '\201c' '\201a' '\2018'; } /* „ “ ‚ ‘ */
:lang(ss)            { quotes: '\2018' '\2019' '\201c' '\201d'; } /* ‘ ’ “ ” */
:lang(st)            { quotes: '\2018' '\2019' '\201c' '\201d'; } /* ‘ ’ “ ” */
:lang(sv)            { quotes: '\201d' '\201d' '\2019' '\2019'; } /* ” ” ’ ’ */
:lang(sw)            { quotes: '\201c' '\201d' '\2018' '\2019'; } /* “ ” ‘ ’ */
:lang(swc)           { quotes: '\201c' '\201d' '\2018' '\2019'; } /* “ ” ‘ ’ */
:lang(ta)            { quotes: '\201c' '\201d' '\2018' '\2019'; } /* “ ” ‘ ’ */
:lang(te)            { quotes: '\201c' '\201d' '\2018' '\2019'; } /* “ ” ‘ ’ */
:lang(teo)           { quotes: '\201c' '\201d' '\2018' '\2019'; } /* “ ” ‘ ’ */
:lang(tg)            { quotes: '\00ab' '\00bb' '\00ab' '\201e'; } /* « » « „ */
:lang(th)            { quotes: '\201c' '\201d' '\2018' '\2019'; } /* “ ” ‘ ’ */
:lang(ti-ER)         { quotes: '\2018' '\2019' '\201c' '\201d'; } /* ‘ ’ “ ” */
:lang(tn)            { quotes: '\2018' '\2019' '\201c' '\201d'; } /* ‘ ’ “ ” */
:lang(to)            { quotes: '\201c' '\201d' '\2018' '\2019'; } /* “ ” ‘ ’ */
:lang(tr)            { quotes: '\201c' '\201d' '\2018' '\2019'; } /* “ ” ‘ ’ */
:lang(trv)           { quotes: '\201c' '\201d' '\2018' '\2019'; } /* “ ” ‘ ’ */
:lang(ts)            { quotes: '\2018' '\2019' '\201c' '\201d'; } /* ‘ ’ “ ” */
:lang(twq)           { quotes: '\201c' '\201d' '\2018' '\2019'; } /* “ ” ‘ ’ */
:lang(tzm)           { quotes: '\201c' '\201d' '\2018' '\2019'; } /* “ ” ‘ ’ */
:lang(uk)            { quotes: '\00ab' '\00bb' '\201e' '\201c'; } /* « » „ “ */
:lang(ur)            { quotes: '\201d' '\201c' '\2019' '\2018'; } /* ” “ ’ ‘ */
:lang(vai)           { quotes: '\201c' '\201d' '\2018' '\2019'; } /* “ ” ‘ ’ */
:lang(vai-Latn)      { quotes: '\201c' '\201d' '\2018' '\2019'; } /* “ ” ‘ ’ */
:lang(ve)            { quotes: '\2018' '\2019' '\201c' '\201d'; } /* ‘ ’ “ ” */
:lang(vi)            { quotes: '\201c' '\201d' '\2018' '\2019'; } /* “ ” ‘ ’ */
:lang(vun)           { quotes: '\201c' '\201d' '\2018' '\2019'; } /* “ ” ‘ ’ */
:lang(wae)           { quotes: '\00ab' '\00bb' '\2039' '\203a'; } /* « » ‹ › */
:lang(xh)            { quotes: '\2018' '\2019' '\201c' '\201d'; } /* ‘ ’ “ ” */
:lang(xog)           { quotes: '\201c' '\201d' '\2018' '\2019'; } /* “ ” ‘ ’ */
:lang(yav)           { quotes: '\00ab' '\00bb' '\00ab' '\00bb'; } /* « » « » */
:lang(yo)            { quotes: '\201c' '\201d' '\2018' '\2019'; } /* “ ” ‘ ’ */
:lang(zh)            { quotes: '\201c' '\201d' '\2018' '\2019'; } /* “ ” ‘ ’ */
:lang(zh-Hant)       { quotes: '\300c' '\300d' '\300e' '\300f'; } /* 「 」 『 』 */
:lang(zu)            { quotes: '\201c' '\201d' '\2018' '\2019'; } /* “ ” ‘ ’ */

章節與段落

English

@namespace url(http://www.w3.org/1999/xhtml);

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

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

本規範預期 article、aside、nav 與 section 元素影響 h1 元素的邊界與字體大小。若 x 是選取 article、aside、nav 或 section 其一的選擇器，則以下規則表示了本規範預期的結果：

@namespace url(http://www.w3.org/1999/xhtml);

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

列表

English

@namespace url(http://www.w3.org/1999/xhtml);

dir, dd, dl, dt, menu, ol, ul { display: block; unicode-bidi: isolate; }
li { display: list-item; unicode-bidi: isolate; }

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

dir dir, dir dl, dir menu, dir ol, dir ul,
dl dir, dl dl, dl menu, dl ol, dl ul,
menu dir, menu dl, menu menu, menu ol, menu ul,
ol dir, ol dl, ol menu, ol ol, ol ul,
ul dir, ul dl, ul menu, ul ol, ul ul {
  margin-top: 0; margin-bottom: 0;
}

dd { margin-left: 40px; } /* ltr 限定：rtl 元素會用 'margin-right' */
dir, menu, ol, ul { padding-left: 40px; } /* ltr 限定：rtl 元素會用 'padding-right' */

ol { list-style-type: decimal; }

dir, menu, ul { list-style-type: disc; }

dir dl, dir menu, dir ul,
menu dl, menu menu, menu ul,
ol dl, ol menu, ol ul,
ul dl, ul menu, ul ul {
  list-style-type: circle;
}

dir dir dl, dir dir menu, dir dir ul,
dir menu dl, dir menu menu, dir menu ul,
dir ol dl, dir ol menu, dir ol ul,
dir ul dl, dir ul menu, dir ul ul,
menu dir dl, menu dir menu, menu dir ul,
menu menu dl, menu menu menu, menu menu ul,
menu ol dl, menu ol menu, menu ol ul,
menu ul dl, menu ul menu, menu ul ul,
ol dir dl, ol dir menu, ol dir ul,
ol menu dl, ol menu menu, ol menu ul,
ol ol dl, ol ol menu, ol ol ul,
ol ul dl, ol ul menu, ol ul ul,
ul dir dl, ul dir menu, ul dir ul,
ul menu dl, ul menu menu, ul menu ul,
ul ol dl, ul ol menu, ul ol ul,
ul ul dl, ul ul menu, ul ul ul {
  list-style-type: square;
}

作為表象呈現提示，以下規則也適用：

@namespace url(http://www.w3.org/1999/xhtml);

ol[type=1], li[type=1] { list-style-type: decimal; }
ol[type=a], li[type=a] { list-style-type: lower-alpha; }
ol[type=A], li[type=A] { list-style-type: upper-alpha; }
ol[type=i], li[type=i] { list-style-type: lower-roman; }
ol[type=I], li[type=I] { list-style-type: upper-roman; }
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 元素的時候使用 li 元素的序數來渲染列表項目標記裡的計數器。

表格

English

@namespace url(http://www.w3.org/1999/xhtml);

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

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

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

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

table, td, th { border-color: gray; }
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 url(http://www.w3.org/1999/xhtml);

table[align=left i] { float: left; }
table[align=right i] { float: right; }
table[align=center i], table[align=abscenter i],
table[align=absmiddle i], table[align=middle i] {
  margin-left: auto; margin-right: 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; } /* 僅當邊框不等同於零的時候 */
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 {
  /* 僅當邊框不等同於零的時候 */
  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-style: none 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-left-width: 1px;
  border-left-style: solid;
  border-right-width: 1px;
  border-right-style: solid;
}
table[rules=groups i] > thead,
table[rules=groups i] > tbody,
table[rules=groups i] > tfoot {
  border-top-width: 1px;
  border-top-style: solid;
  border-bottom-width: 1px;
  border-bottom-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-top-width: 1px;
  border-top-style: solid;
  border-bottom-width: 1px;
  border-bottom-style: solid;
}

在怪癖模式中，以下規則也適用：

@namespace url(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 區塊中標注為「僅當邊框不等同於零的時候」的規則僅在選擇器到的 border 屬性有被指定，且對取值使用非負整數解析規則後得到非零的結果或是產生錯誤。

表單控制項

English

@namespace url(http://www.w3.org/1999/xhtml);

input, select, option, optgroup, button, textarea, keygen {
  text-indent: initial;
}

textarea { white-space: pre-wrap; }

在怪癖模式中，以下規則也適用：

@namespace url(http://www.w3.org/1999/xhtml);

input { box-sizing: border-box; }

接下來的章節會描述呈現各個表單控制項長相的預設榜定。

`hr` 元素

@namespace url(http://www.w3.org/1999/xhtml);

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

作為表象呈現提示，以下規則也適用：

@namespace url(http://www.w3.org/1999/xhtml);

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

`fieldset` 元素

@namespace url(http://www.w3.org/1999/xhtml);

fieldset {
  margin-left: 2px; margin-right: 2px;
  border: groove 2px ThreeDFace;
  padding: 0.35em 0.625em 0.75em;
}

置換元素

綁定

框架與框架集

互動媒介

印刷媒介

Retrieved from "https://www.w3.org/html/ig/zh/wiki/index.php?title=HTML5/rendering&oldid=1637"

HTML5/rendering

渲染

介紹

CSS 使用者代理樣式表與表象呈現提示

介紹

非置換元素

隱藏的元素

頁面

流式內容

段落式內容

雙向文字

引號

章節與段落

列表

表格

表單控制項

`hr` 元素

`fieldset` 元素

置換元素

綁定

框架與框架集

互動媒介

印刷媒介

Navigation menu

Personal tools

Namespaces

Variants

Views

More

Navigation

Tools

HTML5/rendering

渲染

介紹

CSS 使用者代理樣式表與表象呈現提示

介紹

非置換元素

隱藏的元素

頁面

流式內容

段落式內容

雙向文字

引號

章節與段落

列表

表格

表單控制項

hr 元素

fieldset 元素

置換元素

綁定

框架與框架集

互動媒介

印刷媒介

Navigation menu

`hr` 元素

`fieldset` 元素