HTML 模板定义

HTMLHTMLBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

介绍

HTML 中的 <template> 标签允许你创建可重用的内容,这些内容在页面加载时不会渲染。这对于那些在页面加载初期不需要,但稍后可以通过 JavaScript 访问的内容非常有用。本实验将引导你完成创建 HTML 模板的步骤。

注意:你可以在 index.html 中练习编码,并学习如何在 Visual Studio Code 中编写 HTML。请点击右下角的 'Go Live' 以在端口 8080 上运行 Web 服务。然后,你可以刷新 Web 8080 标签以预览网页。



Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/LayoutandSectioningGroup(["`Layout and Sectioning`"]) html(("`HTML`")) -.-> html/AdvancedElementsGroup(["`Advanced Elements`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/LayoutandSectioningGroup -.-> html/doc_flow("`Document Flow Understanding`") html/AdvancedElementsGroup -.-> html/inter_elems("`Interactive and Dynamic Elements`") html/AdvancedElementsGroup -.-> html/custom_attr("`Custom Data Attributes`") html/AdvancedElementsGroup -.-> html/templating("`HTML Templating`") subgraph Lab Skills html/basic_elems -.-> lab-70858{{"`HTML 模板定义`"}} html/doc_flow -.-> lab-70858{{"`HTML 模板定义`"}} html/inter_elems -.-> lab-70858{{"`HTML 模板定义`"}} html/custom_attr -.-> lab-70858{{"`HTML 模板定义`"}} html/templating -.-> lab-70858{{"`HTML 模板定义`"}} end

添加 <template> 标签

首先,创建一个名为 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,你可以在需要时动态渲染这些内容。这有助于减少代码冗余,并使代码更易于维护。


您可能感兴趣的其他 HTML 教程