介绍
HTML 中的 <template> 标签允许你创建可重用的内容，这些内容在页面加载时不会渲染。这对于那些在页面加载初期不需要，但稍后可以通过 JavaScript 访问的内容非常有用。本实验将引导你完成创建 HTML 模板的步骤。
注意：你可以在
index.html中练习编码，并学习如何在 Visual Studio Code 中编写 HTML。请点击右下角的 'Go Live' 以在端口 8080 上运行 Web 服务。然后，你可以刷新 Web 8080 标签以预览网页。
添加 标签
首先，创建一个名为 index.html 的 HTML 文件。
在你的 HTML 文件中添加 <template> 标签。该标签需要开始和结束标签，并应包含你稍后想要重用的内容。
<template id="myTemplate">
<h2>This is a template</h2>
<p>This is some text that can be reused.</p>
</template>注意：id 属性可以帮助你在 JavaScript 中稍后引用该模板。
创建占位区域
创建一个空区域，用于插入模板内容。为此，使用 <div> 标签并为其添加 id 属性。
<div id="placeholder"></div>使用 JavaScript 渲染模板
在你的 HTML 文件中添加一个 JavaScript 代码块，将模板内容渲染到占位区域。
<script>
const template = document.getElementById('myTemplate'); const placeholder =
document.getElementById('placeholder'); const clone =
template.content.cloneNode(true); placeholder.appendChild(clone);
</script>这段代码首先使用 getElementById 方法从 HTML 中获取模板，然后创建其内容的克隆。接着，这些内容会被附加到占位区域。
保存 index.html 文件并在浏览器中打开它。你应该会看到模板中的内容出现在占位区域。
总结
使用 HTML 的 <template> 标签是一种简单且有效的方式，可以在你的网页中创建可重用的内容。借助 JavaScript，你可以在需要时动态渲染这些内容。这有助于减少代码冗余，并使代码更易于维护。
