HTML5/text-level-semantics

From HTML5 Chinese Interest Group Wiki
Jump to: navigation, search

文本级语意

a元素

分类:
流式内容
当元素只包含段落式内容: 段落式内容
交互式内容
使用场景:
当元素只包含段落式内容: 期望出现段落式内容处。
其它情况: 期望出现流式内容处。
内容模型:
透明内容模型,但不能有交互式内容出现。
允许的属性:
全局属性
href
target
rel
media
hreflang
type
DOM接口:
interface HTMLAnchorElement : HTMLElement { stringifier attribute DOMString href; attribute DOMString target; attribute DOMString rel; readonly attribute DOMTokenList relList; attribute DOMString media; attribute DOMString hreflang; attribute DOMString type; attribute DOMString text; // URL 分解 IDL 屬性 attribute DOMString protocol; attribute DOMString host; attribute DOMString hostname; attribute DOMString port; attribute DOMString pathname; attribute DOMString search; attribute DOMString hash; };

em元素

分类:
流式内容
段落式内容
使用场景:
需要段落式内容处。
内容模型:
段落式内容
允许的属性:
全局属性
DOM接口:
使用HTMLElement

strong元素

分类:
流式内容
段落式内容
使用场景:
需要段落式内容处。
内容模型:
段落式内容
允许的属性:
全局属性
DOM接口:
使用HTMLElement

small元素

分类:
流式内容
段落式内容
使用场景:
需要段落式内容处。
内容模型:
段落式内容
允许的属性:
全局属性
DOM接口:
使用HTMLElement

s元素

分类:
流式内容
段落式内容
使用场景:
需要段落式内容处。
内容模型:
段落式内容
允许的属性:
全局属性
DOM接口:
使用HTMLElement

cite元素

分类:
流式内容
段落式内容
使用场景:
需要段落式内容处。
内容模型:
段落式内容
允许的属性:
全局属性
DOM接口:
使用HTMLElement

q元素

分类:
流式内容
段落式内容
使用场景:
需要段落式内容处。
内容模型:
段落式内容
允许的属性:
全局属性
cite
DOM接口:
使用HTMLQuoteElement

dfn元素

分类:
流式内容
段落式内容
使用场景:
需要段落式内容处。
内容模型:
段落式内容, 但不能有dfn元素出现。
允许的属性:
全局属性
此外, 此元素的title属性有特别语义。
DOM接口:
使用HTMLElement

dfn元素用于展现一个定义实例的术语。与该dfn元素最近的段落定义列表区块必须包含dfn元素指定的术语的定义。

定义术语:如果dfntitle属性,则从该属性提取的值将作为定义的术语。否则,如果该元素仅包含一个子元素且不包含Text节点,同时该子元素是一个abbr元素并且其拥有title属性,则从该属性提取的值将作为定义的术语。否则,从该dfn元素提取的textContent值将作为定义的术语。

如果dfn上有title属性,则该属性必须只包含被定义的术语。

注:其祖先元素的title属性不会影响到dfn元素。

如果一个a元素的链接指向一个dfn元素,则该a元素表示该dfn元素定义的术语的一个实例。

在以下片段中,术语“Garage Door Opener”最初在第一段中定义,并随后在第二段中使用。在这2个案例中,真正显示出来的均是其缩写。

<p>The <dfn><abbr title="Garage Door Opener">GDO</abbr></dfn>
is a device that allows off-world teams to open the iris.</p>
<!-- ... later in the document: -->
<p>Teal'c activated his <abbr title="Garage Door Opener">GDO</abbr>
and so Hammond ordered the iris to be opened.</p>

加之以一个a元素,则可以使引用更加明显:

<p>The <dfn id=gdo><abbr title="Garage Door Opener">GDO</abbr></dfn>
is a device that allows off-world teams to open the iris.</p>
<!-- ... later in the document: -->
<p>Teal'c activated his <a href=#gdo><abbr title="Garage Door Opener">GDO</abbr></a>
and so Hammond ordered the iris to be opened.</p>

abbr元素

分类:
流式内容
段落式内容
使用场景:
需要段落式内容处。
内容模型:
段落式内容
允许的属性:
全局属性
此外,此元素的title属性有特别语义。
DOM接口:
使用HTMLElement

time元素

分类:
流式内容
段落式内容
使用场景:
需要段落式内容处。
内容模型:
段落式内容
允许的属性:
全局属性
datetime
DOM接口:
interface HTMLTimeElement : HTMLElement { attribute DOMString dateTime; };

time 元素代表其內容並以 datetime 屬性帶著其內容的機械可讀表示。內容的種類,如下面所述,可以是不同種類的日期、時間、時區偏移與時間長度。

網頁作者可使用 datetime 屬性。若網頁作者欲設定此屬性,則屬性值必須是元素內容的在機械可讀格式下的表示。

不具有內容屬性 datetimetime 元素必不可有任何元素子嗣。

time 元素的時間日期值為內容屬性 time 的取值(若 time 元素具有該屬性)或是元素的 textContent

time 元素的時間日期值必須批配下面其中一種語法。

合法月份字串

<time>2011-11</time>

合法的無年日期字串

<time>11-12</time>

合法日期字串

<time>2011-11-12</time>

合法時間字串

<time>14:54</time>
<time>14:54:39</time>
<time>14:54:39.92922</time>

合法的本地日期與時間字串

<time>2011-11-12T14:54</time>
<time>2011-11-12T14:54:39</time>
<time>2011-11-12T14:54:39.92922</time>

合法的日期偏差字串

<time>Z</time>
<time>+0000</time>
<time>+00:00</time>
<time>-0800</time>
<time>-08:00</time>

合法的全球日期與時間字串

<time>2011-11-12T14:54Z</time>
<time>2011-11-12T14:54:39Z</time>
<time>2011-11-12T14:54:39.92922Z</time>
<time>2011-11-12T14:54+0000</time>
<time>2011-11-12T14:54:39+0000</time>
<time>2011-11-12T14:54:39.92922+0000</time>
<time>2011-11-12T14:54+00:00</time>
<time>2011-11-12T14:54:39+00:00</time>
<time>2011-11-12T14:54:39.92922+00:00</time>
<time>2011-11-12T06:54-0800</time>
<time>2011-11-12T06:54:39-0800</time>
<time>2011-11-12T06:54:39.92922-0800</time>
<time>2011-11-12T06:54-08:00</time>
<time>2011-11-12T06:54:39-08:00</time>
<time>2011-11-12T06:54:39.92922-08:00</time>

合法週字串

<time>2011-W46</time>

代表年份的合法非負整數

<time>2011</time>

合法日期字串

<time>PT4H18M3S</time>
<time>4h 18m 3s</time>

IDL 屬性 datetime 必須反映同樣名稱的內容屬性。

code元素

分类:
流式内容
段落式内容
使用场景:
需要段落式内容处。
内容模型:
段落式内容
允许的属性:
全局属性
DOM接口:
使用HTMLElement

var元素

分类:
流式内容
段落式内容
使用场景:
需要段落式内容处。
内容模型:
段落式内容
允许的属性:
全局属性
DOM接口:
使用HTMLElement

samp元素

分类:
流式内容
段落式内容
使用场景:
需要段落式内容处。
内容模型:
段落式内容
允许的属性:
全局属性
DOM接口:
使用HTMLElement

kbd元素

分类:
流式内容
段落式内容
使用场景:
需要段落式内容处。
内容模型:
段落式内容
允许的属性:
全局属性
DOM接口:
使用HTMLElement

subsup元素

分类:
流式内容
段落式内容
使用场景:
需要段落式内容处。
内容模型:
段落式内容
允许的属性:
全局属性
DOM接口:
使用HTMLElement

i元素

分类:
流式内容
段落式内容
使用场景:
需要段落式内容处。
内容模型:
段落式内容
允许的属性:
全局属性
DOM接口:
使用HTMLElement

b元素

分类:
流式内容
段落式内容
使用场景:
需要段落式内容处。
内容模型:
段落式内容
允许的属性:
全局属性
DOM接口:
使用HTMLElement

u元素

分类:
流式内容
段落式内容
使用场景:
需要段落式内容处。
内容模型:
段落式内容
允许的属性:
全局属性
DOM接口:
使用HTMLElement

mark元素

分类:
流式内容
段落式内容
使用场景:
需要段落式内容处。
内容模型:
段落式内容
允许的属性:
全局属性
DOM接口:
使用HTMLElement

ruby元素

分类:
流式内容
段落式内容
使用场景:
需要段落式内容处。
内容模型:
以下組合一個以上:段落式内容后跟一个rt元素或者一个rp元素,一个rt元素,以及另一个rp元素。
允许的属性:
全局属性
DOM接口:
使用HTMLElement

ruby 元素可以用來標示一個以上的段落式內容區段的旁註標記。旁註標記是基底文字旁邊的一小段文字,主要給予東亞排版中標示發音或是其他註解之用。在日文中,這種排版也叫做「振假名」。

ruby 元素代表其包含的段落式內容區段,扣掉 rtrp 元素的子節點與他們的子嗣。這些段落式內容區段有由 rt 元素創建的對應註解文字。

在這個例子中,日文「漢字」裡的每一個漢字都有平假名讀法標示。
...
<ruby>漢<rt>かん</rt>字<rt>じ</rt></ruby>
...

瀏覽器可能渲染為

sample-ruby-ja.png
在這個例子中,繁體中文「漢字」裡的每一個漢字都有注音(ㄅㄆㄇㄈ)標示。
<ruby>漢<rt>ㄏㄢˋ</rt>字<rt>ㄗˋ</rt></ruby>

瀏覽器可能渲染為

sample-ruby-bopomofo.png
在這個例子中,簡體中文「汉字」裡的每一個漢字都有拼音標示。
...<ruby>汉<rt>hàn</rt>字<rt>zì</rt></ruby>...

瀏覽器可能渲染為

sample-ruby-pinyin.png

rt元素

分类:
无。
使用场景:
做为ruby元素的子元素。
内容模型:
段落式内容
允许的属性:
全局属性
DOM接口:
使用HTMLElement

rt 元素可以用來標示旁註標記的旁註文字部份。

作為 ruby 元素子節點的 rt 元素代表ruby 元素中,略過 rp 元素後 rt 元素前面的零個以上的段落式内容節點對應的旁註(旁註內容由其子節點決定)。

不是 ruby 元素子節點的 rt 元素代表其子節點。

rp元素

分类:
无。
使用场景:
做为ruby元素的子元素,或者在一个rt元素之前。
内容模型:
段落式内容
允许的属性:
全局属性
DOM接口:
使用HTMLElement

rp 元素可以用來指定旁註標記的旁註文字部份周圍的誇號,以給不支援旁註標記的使用者代理使用。

作為 ruby 元素子節點的 rp 元素不代表任何東西,且使用者代理必須忽略其內容。不是 ruby 元素子節點的 rp 元素代表其子節點。

在上面「漢字」的例子中,網頁作者可以進一步使用 rp 以讓老舊使用者代理顯示帶有誇號的文字讀法。
...
<ruby>漢<rp>(</rp><rt>かん</rt><rp>)</rp>字<rp>(</rp><rt>じ</rt><rp>)</rp></ruby>
...

符合規範的使用者代理的渲染結果會跟上面的一樣,但是在不支援旁註文字的使用者代理下渲染結果可能是:

... 漢 (かん) 字 (じ) ...

bdi元素

分类:
流式内容
段落式内容
使用场景:
需要段落式内容处。
内容模型:
段落式内容
允许的属性:
全局属性
此外,dir全局属性在此元素上有特殊语义。
DOM接口:
使用HTMLElement

bdo元素

分类:
流式内容
段落式内容
使用场景:
需要段落式内容处。
内容模型:
段落式内容
允许的属性:
全局属性
此外,dir全局属性在此元素上有特殊语义。
DOM接口:
使用HTMLElement

span元素

分类:
流式内容
段落式内容
使用场景:
需要段落式内容处。
内容模型:
段落式内容
允许的属性:
全局属性
DOM接口:
interface HTMLSpanElement : HTMLElement {};

br元素

分类:
流式内容
段落式内容
使用场景:
需要段落式内容处。
内容模型:
空。
允许的属性:
全局属性
DOM接口:
interface HTMLBRElement : HTMLElement {};

wbr元素

分类:
流式内容
段落式内容
使用场景:
需要段落式内容处。
内容模型:
空。
允许的属性:
全局属性
DOM接口:
使用HTMLElement

使用方式小结

本章节不具有规范性。


元素 意图 示例
a 超链接 访问我的<a href="drinks.html">饮料</a>页面。
em 强调 我不得不说,我<em>超爱</em>柠檬水。
strong 重要的事务 这茶<strong>很烫</strong>。
small 侧记 这些葡萄会用来酿酒。<small>含酒精的饮料会使人上瘾</small>
s 不准确的,错误的文本 报价:<s>¥4.50</s> ¥2.00!
cite 作品的标题 <cite>Hugo v. Danielle</cite>这个案例在这儿很切题。
q 引用,引述 法官说过,<q>你可以从鱼缸里喝水</q>,不过建议你不要这么做。
dfn 定义实例 术语<dfn>有机食品</dfn>适用于那些不是使用化学制品而生成的食物。
abbr 缩写体 在爱尔兰,有机食物是符合<abbr title="Irish Organic Farmers and Growers Association">IOFGA</abbr>公制标准的。
time 日期或时间 它发表于<time>2009-10-21</time>。
code 计算机代码 <code>fruitdb</code>程式能用于跟踪水果的出产。
var 变量 如果碗里有<var>n</var>种水果,那么至少<var>n</var>-2种会是熟的。
samp 计算机输出 计算机输出:<samp>Unknown error -3</samp>。
kbd 用户输入 按<kbd>F1</kbd>继续…
sub 下标 水的分子式是H<sub>2</sub>O。
sup 上标 氢在重水中通常是<sup>2</sup>H。
i 另类意见 柠檬水的主要成份是<i>柑橘属柠檬</i>
b 关键词 拿个<b>柠檬</b>,然后用<b>果汁机</b>榨汁。
u 注解 苹果汁和<u class="spelling">接骨木花</u>汁混在一起感觉很赞。
mark 高亮 接骨木花茶,由一<mark>份</mark>汁,十<mark>份</mark>水勾兑而成。
ruby, rt, rp 印刷标注 <ruby> 橙汁 <rp>(<rt>鲜橙果汁</rt>)</rp></ruby>
bdi 文本定向隔离 推荐这家餐厅<bdi lang="">My Juice Café (At The Beach)</bdi>。
bdo 文本定向格式化 建议写英文,不过要按相反的顺序。比如,"Juice"要变成"<bdo dir=rtl>Juice</bdo>"。
span 其他 在法国,我们称它为<span lang="fr">sirop de sureau</span>。
br 换行 简单的橙汁公司<br>Apopka, FL 32703<br>U.S.A
wbr 换行良机 www.simply<wbr>orange<wbr>juice.com