initial commit

1 files changed, 141 insertions, 0 deletions

diff --git a/files/zh-cn/web/html/element/rb/index.html b/files/zh-cn/web/html/element/rb/index.html
new file mode 100644
index 0000000000..b3404088d5
--- /dev/null
+++ b/files/zh-cn/web/html/element/rb/index.html
@@ -0,0 +1,141 @@
+---
+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>&lt;rb&gt;</code>）元素用于分隔{{HTMLElement("ruby")}}注释的基本文本组件（即正在注释的文本）。一个<code>&lt;rb&gt;</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")}}元素或其他元素，则可省略结束标记 &lt;rb&gt;元素，或者如果父元素中没有其他内容。</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>&lt;rb&gt;</code> 元素用于分隔出ruby基本文本的每个片段。</li>
+ <li>虽然 <code>&lt;rb&gt;</code> 不是一个空元素，但是在源码中通常只包括每个元素的开始标签。 因此ruby标记就不那么复杂，也更容易阅读。在渲染版本中，浏览器也可以填充完整的元素。</li>
+ <li>你需要为要注释的每个基本段（<code>&lt;rb&gt;</code>元素）包含一个{{htmlelement("rt")}}元素。</li>
+</ul>
+
+<h2 id="示例">示例</h2>
+
+<p>在此示例中，我们提供了与“hanzi”等效的原始字符的注释：</p>
+
+<pre class="brush: html">&lt;ruby&gt;
+  &lt;rb&gt;漢&lt;/rb&gt;字
+  &lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;han&lt;/rt&gt;zi&lt;rp&gt;)&lt;/rp&gt;
+&lt;/ruby&gt;</pre>
+
+<p>请注意我们如何包含两个<code>&lt;rb&gt;</code>元素，以分隔ruby基本文本的两个独立部分。 另一方面，注释由两个{{htmlelement("rt")}}元素分隔。</p>
+
+<p>请注意，我们也可以使用完全单独注释的两个基本文本部分来编写此示例。 在这种情况下，我们不需要包含<code>&lt;rb&gt;</code>元素：</p>
+
+<pre class="brush: html">&lt;ruby&gt;
+  漢 &lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;han&lt;/rt&gt;&lt;rp&gt;)&lt;/rp&gt;
+  字 &lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;zi&lt;/rt&gt;&lt;rp&gt;)&lt;/rp&gt;
+&lt;/ruby&gt;</pre>
+
+<div class="hidden">
+<div id="with-ruby">
+<pre class="brush: html">&lt;ruby&gt; &lt;rb&gt;漢&lt;rb&gt;字 &lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;han&lt;rt&gt;zi&lt;rp&gt;)&lt;/rp&gt; &lt;/ruby&gt;
+</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', '&lt;rb&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<div class="hidden">此页面中的兼容性表是根据结构化数据生成的。 如果您想为数据做出贡献，请查看<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>，并向我们发送拉取请求。</div>
+
+<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>