<template> 标签可以在 HTML 页面中定义可复用的内容模板，这些模板不会被渲染出来，只有在 JavaScript 脚本中被引用时才会被实例化。使用 <template> 标签可以提高页面的性能，避免不必要的 DOM 操作，同时也可以增强代码的可读性和可维护性。
在 HTML 中，使用 <template> 标签定义模板的方法如下：
<template id="my-template">
<h1>这是一个模板</h1>
<p>这是模板的内容</p>
</template>在 JavaScript 中，使用 content.cloneNode(true) 方法可以复制模板的内容，并生成实例化的节点。例如：
const template = document.querySelector('#my-template');
const instance = template.content.cloneNode(true);
document.body.appendChild(instance);在上面的代码中，template 变量获取到了模板节点，instance 变量则是通过 template.content.cloneNode(true) 方法复制出来的实例化节点。最后，使用 appendChild 方法将实例化节点添加到文档中。
需要注意的是，使用 <template> 标签定义的模板是不可见的，也不会被解析为 DOM 元素。如果要在 JavaScript 中获取模板的内容，需要使用 content 属性。例如：
const template = document.querySelector('#my-template');
const content = template.content;
console.log(content); // #document-fragment上述代码中，content 变量获取到了模板的内容，类型为 #document-fragment，可以通过 querySelector 方法获取到模板中的子元素。
总之，使用 <template> 标签可以方便地定义可复用的内容模板，并在 JavaScript 中动态地生成实例化节点，提高页面的性能和代码的可维护性。