initial commit

1 files changed, 156 insertions, 0 deletions

diff --git a/files/zh-cn/web/html/element/template/index.html b/files/zh-cn/web/html/element/template/index.html
new file mode 100644
index 0000000000..0bdb141ebb
--- /dev/null
+++ b/files/zh-cn/web/html/element/template/index.html
@@ -0,0 +1,156 @@
+---
+title: <template>：内容模板元素
+slug: Web/HTML/Element/template
+tags:
+  - HTML
+  - Web
+  - Web Components
+  - Web 组件
+  - 元素
+translation_of: Web/HTML/Element/template
+---
+<p id="Summary">{{HTMLRef}}</p>
+
+<p><strong>HTML内容模板（<code>&lt;template&gt;</code>）元素</strong>是一种用于保存客户端内容机制，该内容在加载页面时不会呈现，但随后可以(原文为 may be)在运行时使用JavaScript实例化。</p>
+
+<p>将模板视为一个可存储在文档中以便后续使用的内容片段。虽然解析器在加载页面时确实会处理<strong><code>&lt;template&gt;</code></strong>元素的内容，但这样做只是为了确保这些内容有效；但元素内容不会被渲染。</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th>
+   <td><a href="/en-US/docs/Web/HTML/Content_categories#Metadata_content">Metadata content</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a>, <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content">phrasing content</a>, script-supporting element</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted content</th>
+   <td>No restrictions</td>
+  </tr>
+  <tr>
+   <th scope="row">Tag omission</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted parents</th>
+   <td>{{HTMLElement("body")}}, {{HTMLElement("frameset")}}, {{HTMLElement("head")}}, {{HTMLElement("dl")}} and {{HTMLElement("colgroup")}} without a <code>span</code> attribute</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted ARIA roles</th>
+   <td>None</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM interface</th>
+   <td>{{domxref("HTMLTemplateElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attributes" name="Attributes">属性</h2>
+
+<p>此元素仅包含<a href="/en-US/docs/Web/HTML/Global_attributes">全局属性</a>。</p>
+
+<p>但， {{domxref("HTMLTemplateElement")}} 有个属性： {{domxref("HTMLTemplateElement.content", "content")}} , 这个属性是只读的{{domxref("DocumentFragment")}} 包含了模板所表示的DOM树。</p>
+
+<h2 id="示例">示例</h2>
+
+<p>首先我们从示例的HTML部分开始。</p>
+
+<pre class="brush: html">&lt;table id="producttable"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;td&gt;UPC_Code&lt;/td&gt;
+      &lt;td&gt;Product_Name&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;!-- 现有数据可以可选地包括在这里 --&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+
+&lt;template id="productrow"&gt;
+  &lt;tr&gt;
+    &lt;td class="record"&gt;&lt;/td&gt;
+    &lt;td&gt;&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/template&gt;
+</pre>
+
+<p>首先，我们有一个表，稍后我们将使用JavaScript代码在其中插入内容。然后是模板，它描述了表示单个表行的HTML片段的结构。</p>
+
+<p>既然已经创建了表并定义了模板，我们使用JavaScript将行插入到表中，每一行都是以模板为基础构建的。</p>
+
+<pre class="brush:js;">// 通过检查来测试浏览器是否支持HTML模板元素
+// 用于保存模板元素的内容属性。
+if ('content' in document.createElement('template')) {
+
+  // 使用现有的HTML tbody实例化表和该行与模板
+  let t = document.querySelector('#productrow'),
+  td = t.content.querySelectorAll("td");
+  td[0].textContent = "1235646565";
+  td[1].textContent = "Stuff";
+
+  // 克隆新行并将其插入表中
+  let tb = document.getElementsByTagName("tbody");
+  let clone = document.importNode(t.content, true);
+  tb[0].appendChild(clone);
+
+  // 创建一个新行
+  td[0].textContent = "0384928528";
+  td[1].textContent = "Acme Kidney Beans";
+
+  // 克隆新行并将其插入表中
+  let clone2 = document.importNode(t.content, true);
+  tb[0].appendChild(clone2);
+
+} else {
+  // 找到另一种方法来添加行到表，因为不支持HTML模板元素。
+}
+</pre>
+
+<p>结果是原始的HTML表格，通过JavaScript添加了两行新内容：</p>
+
+<div class="hidden">
+<pre class="brush: css">table {
+  background: #000;
+}
+table td {
+  background: #fff;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample("示例", 500, 120)}}</p>
+
+<h2 id="Specifications" name="Specifications">标准</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','/scripting-1.html#the-template-element','template element')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C','/scripting-1.html#the-template-element','template element')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2>
+
+<p>{{Compat("html.elements.template")}}</p>
+
+<h2 id="See_also" name="See_also">参见</h2>
+
+<ul>
+ <li>Web components: {{HTMLElement("slot")}} (and historical: {{HTMLElement("shadow")}})</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots">Using templates and slots</a></li>
+</ul>
+
+<div></div>