Warning:
This wiki has been archived and is now read-only.
HTML5/text-level-semantics
文本级语意
a元素
- 分类:
- 流式内容。
当元素只包含段落式内容: 段落式内容。
交互式内容。
- 使用场景:
- 当元素只包含段落式内容: 期望出现段落式内容处。
其它情况: 期望出现流式内容处。
- 内容模型:
- 透明内容模型,但不能有交互式内容出现。
- 允许的属性:
- 全局属性
hreftargetrelmediahreflangtype
- 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元素
strong元素
small元素
s元素
cite元素
q元素
dfn元素
- 分类:
- 流式内容。
段落式内容。
- 使用场景:
- 需要段落式内容处。
- 内容模型:
- 段落式内容, 但不能有
dfn元素出现。
- 允许的属性:
- 全局属性
此外, 此元素的title属性有特别语义。
- DOM接口:
- 使用
HTMLElement。
dfn元素用于展现一个定义实例的术语。与该dfn元素最近的段落、定义列表或区块必须包含dfn元素指定的术语的定义。
定义术语:如果dfn有title属性,则从该属性提取的值将作为定义的术语。否则,如果该元素仅包含一个子元素且不包含Text节点,同时该子元素是一个abbr元素并且其拥有title属性,则从该属性提取的值将作为定义的术语。否则,从该dfn元素提取的textContent值将作为定义的术语。
如果dfn上有title属性,则该属性必须只包含被定义的术语。
如果一个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元素
time元素
- 分类:
- 流式内容。
段落式内容。
- 使用场景:
- 需要段落式内容处。
- 内容模型:
- 段落式内容
- 允许的属性:
- 全局属性
datetime
- DOM接口:
- interface HTMLTimeElement : HTMLElement { attribute DOMString dateTime; };
time 元素代表其內容並以 datetime 屬性帶著其內容的機械可讀表示。內容的種類,如下面所述,可以是不同種類的日期、時間、時區偏移與時間長度。
網頁作者可使用 datetime 屬性。若網頁作者欲設定此屬性,則屬性值必須是元素內容的在機械可讀格式下的表示。
不具有內容屬性 datetime 的 time 元素必不可有任何元素子嗣。
time 元素的時間日期值為內容屬性 time 的取值(若 time 元素具有該屬性)或是元素的 textContent。
<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元素
var元素
samp元素
kbd元素
sub和sup元素
i元素
b元素
u元素
mark元素
ruby元素
- 分类:
- 流式内容。
段落式内容。
- 使用场景:
- 需要段落式内容处。
- 内容模型:
- 以下組合一個以上:段落式内容后跟一个
rt元素或者一个rp元素,一个rt元素,以及另一个rp元素。
- 允许的属性:
- 全局属性
- DOM接口:
- 使用
HTMLElement。
ruby 元素可以用來標示一個以上的段落式內容區段的旁註標記。旁註標記是基底文字旁邊的一小段文字,主要給予東亞排版中標示發音或是其他註解之用。在日文中,這種排版也叫做「振假名」。
ruby 元素代表其包含的段落式內容區段,扣掉 rt 與 rp 元素的子節點與他們的子嗣。這些段落式內容區段有由 rt 元素創建的對應註解文字。
...
<ruby>漢<rt>かん</rt>字<rt>じ</rt></ruby>
...
瀏覽器可能渲染為

<ruby>漢<rt>ㄏㄢˋ</rt>字<rt>ㄗˋ</rt></ruby>
瀏覽器可能渲染為

...<ruby>汉<rt>hàn</rt>字<rt>zì</rt></ruby>...
瀏覽器可能渲染為

rt元素
- 分类:
- 无。
- 使用场景:
- 做为
ruby元素的子元素。
- 内容模型:
- 段落式内容。
- 允许的属性:
- 全局属性
- DOM接口:
- 使用
HTMLElement。
rt 元素可以用來標示旁註標記的旁註文字部份。
作為 ruby 元素子節點的 rt 元素代表在 ruby 元素中,略過 rp 元素後 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元素
bdo元素
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 |