diff options
Diffstat (limited to 'files/zh-cn/web/html/element/template/index.html')
| -rw-r--r-- | files/zh-cn/web/html/element/template/index.html | 18 |
1 files changed, 9 insertions, 9 deletions
diff --git a/files/zh-cn/web/html/element/template/index.html b/files/zh-cn/web/html/element/template/index.html index 0bdb141ebb..a47cd42d6d 100644 --- a/files/zh-cn/web/html/element/template/index.html +++ b/files/zh-cn/web/html/element/template/index.html @@ -11,7 +11,7 @@ translation_of: Web/HTML/Element/template --- <p id="Summary">{{HTMLRef}}</p> -<p><strong>HTML内容模板（<code><template></code>）元素</strong>是一种用于保存客户端内容机制，该内容在加载页面时不会呈现，但随后可以(原文为 may be)在运行时使用JavaScript实例化。</p> +<p><strong>HTML 内容模板（<code><template></code>）元素</strong>是一种用于保存客户端内容机制，该内容在加载页面时不会呈现，但随后可以 (原文为 may be) 在运行时使用 JavaScript 实例化。</p> <p>将模板视为一个可存储在文档中以便后续使用的内容片段。虽然解析器在加载页面时确实会处理<strong><code><template></code></strong>元素的内容，但这样做只是为了确保这些内容有效；但元素内容不会被渲染。</p> @@ -48,11 +48,11 @@ translation_of: Web/HTML/Element/template <p>此元素仅包含<a href="/en-US/docs/Web/HTML/Global_attributes">全局属性</a>。</p> -<p>但， {{domxref("HTMLTemplateElement")}} 有个属性： {{domxref("HTMLTemplateElement.content", "content")}} , 这个属性是只读的{{domxref("DocumentFragment")}} 包含了模板所表示的DOM树。</p> +<p>但， {{domxref("HTMLTemplateElement")}} 有个属性： {{domxref("HTMLTemplateElement.content", "content")}} , 这个属性是只读的{{domxref("DocumentFragment")}} 包含了模板所表示的 DOM 树。</p> <h2 id="示例">示例</h2> -<p>首先我们从示例的HTML部分开始。</p> +<p>首先我们从示例的 HTML 部分开始。</p> <pre class="brush: html"><table id="producttable"> <thead> @@ -74,15 +74,15 @@ translation_of: Web/HTML/Element/template </template> </pre> -<p>首先，我们有一个表，稍后我们将使用JavaScript代码在其中插入内容。然后是模板，它描述了表示单个表行的HTML片段的结构。</p> +<p>首先，我们有一个表，稍后我们将使用 JavaScript 代码在其中插入内容。然后是模板，它描述了表示单个表行的 HTML 片段的结构。</p> -<p>既然已经创建了表并定义了模板，我们使用JavaScript将行插入到表中，每一行都是以模板为基础构建的。</p> +<p>既然已经创建了表并定义了模板，我们使用 JavaScript 将行插入到表中，每一行都是以模板为基础构建的。</p> -<pre class="brush:js;">// 通过检查来测试浏览器是否支持HTML模板元素 +<pre class="brush:js;">// 通过检查来测试浏览器是否支持 HTML 模板元素 // 用于保存模板元素的内容属性。 if ('content' in document.createElement('template')) { - // 使用现有的HTML tbody实例化表和该行与模板 + // 使用现有的 HTML tbody 实例化表和该行与模板 let t = document.querySelector('#productrow'), td = t.content.querySelectorAll("td"); td[0].textContent = "1235646565"; @@ -102,11 +102,11 @@ if ('content' in document.createElement('template')) { tb[0].appendChild(clone2); } else { - // 找到另一种方法来添加行到表，因为不支持HTML模板元素。 + // 找到另一种方法来添加行到表，因为不支持 HTML 模板元素。 } </pre> -<p>结果是原始的HTML表格，通过JavaScript添加了两行新内容：</p> +<p>结果是原始的 HTML 表格，通过 JavaScript 添加了两行新内容：</p> <div class="hidden"> <pre class="brush: css">table { |