initial commit

1 files changed, 160 insertions, 0 deletions

diff --git a/files/zh-cn/web/html/element/content/index.html b/files/zh-cn/web/html/element/content/index.html
new file mode 100644
index 0000000000..21f0f196cd
--- /dev/null
+++ b/files/zh-cn/web/html/element/content/index.html
@@ -0,0 +1,160 @@
+---
+title: <content>
+slug: Web/HTML/Element/content
+translation_of: Web/HTML/Element/content
+---
+<p>{{Deprecated_header}}</p>
+
+<p><strong>HTML <code>&lt;content&gt;</code> 元素</strong>— <a href="/en-US/docs/Web/Web_Components">Web 组件</a> 的技术套件的废弃部分 — 用于 <a href="/en-US/docs/Web/Web_Components/Shadow_DOM">Shadow DOM</a> 内部作为 {{glossary("insertion point")}}，并且不可用于任何正常的 HTML，现在已被 {{HTMLElement("slot")}} 元素代替，它在 DOM 中创建一个位置，Shadow DOM 会插入这里。 </p>
+
+<div class="note">
+<p><strong>注</strong>：虽然在规范的草案中出现，并且在多个浏览器中实现，这个元素依然会在规范的之后版本中移除。</p>
+</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories" title="HTML/Content_categories">内容分类</a></th>
+   <td><a href="/en-US/docs/Web/HTML/Content_categories#Transparent_content_model" title="HTML/Content_categories#Transparent_content_model">透明内容</a></td>
+  </tr>
+  <tr>
+   <th scope="row">允许的内容</th>
+   <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">流式内容</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Tag omission</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">允许的父元素</th>
+   <td>任何接受流式内容的元素</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 接口</th>
+   <td>{{domxref("HTMLContentElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attributes" name="Attributes">属性</h2>
+
+<p>这个元素包含 <a href="/en-US/docs/Web/HTML/Global_attributes">全局属性</a>。</p>
+
+<dl>
+ <dt><code>select</code></dt>
+ <dd>逗号分隔的选择器列表，它们和 CSS 选择器语法相同。它们选择要插入的内容，来替换为 <code>&lt;content&gt; </code>元素。</dd>
+</dl>
+
+<h2 id="示例">示例</h2>
+
+<p>这里是一个使用 <code>&lt;content&gt;</code> 元素的简单示例。它是个 HTML 文件，包含所有所需的东西。</p>
+
+<div class="note">
+<p><strong>注</strong>：为了使这个代码有效，你使用的浏览器必须支持 Web 组件，请见 <a href="/en-US/docs/Web/Web_Components#Enabling_Web_Components_in_Firefox">Enabling Web Components in Firefox</a>。</p>
+</div>
+
+<pre class="brush: html">&lt;html&gt;
+  &lt;head&gt;&lt;/head&gt;
+  &lt;body&gt;
+  &lt;!-- The original content accessed by &lt;content&gt; --&gt;
+  &lt;div&gt;
+    &lt;h4&gt;My Content Heading&lt;/h4&gt;
+    &lt;p&gt;My content text&lt;/p&gt;
+  &lt;/div&gt;
+
+  &lt;script&gt;
+  // Get the &lt;div&gt; above.
+  var myContent = document.querySelector('div');
+  // Create a shadow DOM on the &lt;div&gt;
+  var shadowroot = myContent.createShadowRoot();
+  // Insert into the shadow DOM a new heading and
+  // part of the original content: the &lt;p&gt; tag.
+  shadowroot.innerHTML =
+   '&lt;h2&gt;Inserted Heading&lt;/h2&gt; &lt;content select="p"&gt;&lt;/content&gt;';
+  &lt;/script&gt;
+
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>如果你在 Web 浏览器中展示，它应该是这样。</p>
+
+<p><img alt="content example" src="https://mdn.mozillademos.org/files/10077/content-example.png" style="height: 383px; width: 716px;"></p>
+
+<h2 id="规范">规范</h2>
+
+<table class="spec-table standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Shadow DOM', "#the-content-element", "content")}}</td>
+   <td>{{Spec2('Shadow DOM')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>35</td>
+   <td><span style="font-size: 12px; line-height: 18px;">{{CompatGeckoDesktop("28")}}</span> [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>26</td>
+   <td><span style="font-size: 12px; line-height: 18px;">{{CompatNo}}</span></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>37</td>
+   <td>{{CompatGeckoMobile("28")}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] 如果 Shadow DOM 在 Firefox 中没有开启， <code>&lt;content&gt; </code>元素会表现为<code> </code>domxref("HTMLUnknownElement")}}。Shadow DOM 首先在 Firefox 33 中实现，并且在首选项 <code>dom.webcomponents.enabled </code>背后，它默认是关闭的。</p>
+
+<h2 id="See_also" name="See_also">另见</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Web_Components">Web 组件</a></li>
+ <li>{{HTMLElement("shadow")}}, {{HTMLElement("slot")}}, {{HTMLElement("template")}}, {{HTMLElement("element")}}</li>
+</ul>
+
+<div>{{HTMLRef}}</div>