blob: 7b56ce687fc4555f156ff939ca0359b083269d14 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
|
---
title: '<rb>: The Ruby Base element'
slug: Web/HTML/Element/rb
translation_of: Web/HTML/Element/rb
---
<div>{{HTMLRef}}</div>
<p><span class="seoSummary"><strong>HTML Ruby Base</strong>（<code><rb></code>）元素用于分隔{{HTMLElement("ruby")}}注释的基本文本组件（即正在注释的文本）。一个<code><rb></code>元素应该包装基本文本的每个单独的原子段。</span></p>
<div class="hidden">\{{EmbedInteractiveExample("pages/tabbed/rb.html", "tabbed-standard")}}</div>
<table class="properties">
<tbody>
<tr>
<th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">内容范畴</a></th>
<td>无</td>
</tr>
<tr>
<th scope="row">允许内容</th>
<td>作为 {{htmlelement("ruby")}} 元素的子元素。</td>
</tr>
<tr>
<th scope="row">标签省略</th>
<td>如果元素紧跟{{HTMLElement("rt")}}、{{HTMLElement("rtc")}}或{{HTMLElement("rp")}}元素或其他元素，则可省略结束标记 <rb>元素，或者如果父元素中没有其他内容。</td>
</tr>
<tr>
<th scope="row">允许的父元素</th>
<td>{{HTMLElement("ruby")}}元素。</td>
</tr>
<tr>
<th scope="row">允许的 ARIA 角色</th>
<td>任意</td>
</tr>
<tr>
<th scope="row">DOM 接口</th>
<td>{{domxref("HTMLElement")}}</td>
</tr>
</tbody>
</table>
<h2 id="属性">属性</h2>
<p>这个元素仅仅支持 <a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes">全局属性</a>。</p>
<h2 id="用法注解">用法注解</h2>
<ul>
<li>Ruby 注解用于展示东亚文字的发音，例如使用日语罗马音和汉语拼音的文字。 <code><rb></code> 元素用于分隔出ruby基本文本的每个片段。</li>
<li>虽然 <code><rb></code> 不是一个空元素，但是在源码中通常只包括每个元素的开始标签。 因此ruby标记就不那么复杂，也更容易阅读。在渲染版本中，浏览器也可以填充完整的元素。</li>
<li>你需要为要注释的每个基本段（<code><rb></code>元素）包含一个{{htmlelement("rt")}}元素。</li>
</ul>
<h2 id="示例">示例</h2>
<p>在此示例中，我们提供了与“hanzi”等效的原始字符的注释：</p>
<pre class="brush: html"><ruby>
<rb>漢</rb>字
<rp>(</rp><rt>han</rt>zi<rp>)</rp>
</ruby></pre>
<p>请注意我们如何包含两个<code><rb></code>元素，以分隔ruby基本文本的两个独立部分。 另一方面，注释由两个{{htmlelement("rt")}}元素分隔。</p>
<p>请注意，我们也可以使用完全单独注释的两个基本文本部分来编写此示例。 在这种情况下，我们不需要包含<code><rb></code>元素：</p>
<pre class="brush: html"><ruby>
漢 <rp>(</rp><rt>han</rt><rp>)</rp>
字 <rp>(</rp><rt>zi</rt><rp>)</rp>
</ruby></pre>
<div class="hidden">
<div id="with-ruby">
<pre class="brush: html"><ruby> <rb>漢<rb>字 <rp>(</rp><rt>han<rt>zi<rp>)</rp> </ruby>
</pre>
<pre class="brush: css">body {
font-size: 22px;
}</pre>
</div>
</div>
<p>输出看起来像这样：</p>
<p>{{EmbedLiveSample("with-ruby", "100%", 60)}}</p>
<p>当在不支持ruby的浏览器中呈现时，上面的HTML可能看起来像这样：</p>
<div id="without-ruby">
<div class="hidden">
<pre class="brush: html">漢字 (han zi)</pre>
<pre class="brush: css">body {
font-size: 22px;
}
</pre>
</div>
</div>
<p>{{EmbedLiveSample("without-ruby", "100%", 60)}}</p>
<div class="note">
<p><strong>提示</strong>: 有关更多示例，请参阅有关{{HTMLElement("ruby")}}元素的文章。</p>
</div>
<h2 id="规范">规范</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-rb-element', '<rb>')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<p>{{Compat("html.elements.rb")}}</p>
<h2 id="另见">另见</h2>
<ul>
<li>{{HTMLElement("ruby")}}</li>
<li>{{HTMLElement("rt")}}</li>
<li>{{HTMLElement("rp")}}</li>
<li>
<p>{{HTMLElement("rtc")}}</p>
</li>
</ul>
|
