HTML template 标签

HTML template 语法

在 HTML 中，template 标签用于定义一段可重复使用、但默认不显示的 HTML 代码片段。它的内容在页面加载时不会立即渲染，而是通过 JavaScript 在需要时将其 “激活”，再插入到页面中。

template 标签可以大大提高代码的复用性和可维护性，使得我们更灵活地控制页面结构。

语法：

<template id="模板ID">
    <!-- 可复用的 HTML 代码 -->
</template>

说明：

template 标签具有以下的特性。

template 标签内部可以使用任何 HTML 元素，比如 div、li、p 等。
页面加载时，不会显示 template 的内容。
必须使用 JavaScript 才能将其插入到页面中。
同一个页面中可以定义多个 template。

template 标签特别适合用来创建动态内容，比如：

列表项模板。
卡片组件。
弹窗内容。
动态表单行。

注意: 每个 template 标签都应该加上唯一的 id 属性，以方便通过 JavaScript 获取使用。

HTML template 摘要

属于	HTML 标签
使用频率	中
兼容性	查看
官方文档	查看
MDN	查看

HTML template 示例

接下来，我们通过一个简单的例子来讲解一下 HTML template 标签是如何使用的。

示例：template 标签的基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <template id="user-template">
        <div class="user">
            <p>姓名：{{ name }}</p>
            <p>年龄：{{ age }}</p>
        </div>
    </template>

    <div id="user-list"></div>

    <script>
        // 获取元素
        const template = document.getElementById("user-template");
        const userList = document.getElementById("user-list");

        // 模拟数据
        const user = {
            name: "Jack",
            age: 20
        };

        // 使用了 innerHTML 替换字符串
        const html = template.innerHTML
            .replace("{{ name }}", user.name)
            .replace("{{ age }}", user.age);
        
        // 将处理好的 HTML 插入到列表中
        userList.innerHTML += html;
    </script>
</body>
</html>

页面效果如下图所示。

HTML template标签示例

“HTML 中的 template” 与 “Vue 中的 template”

“HTML 中的 template 标签” 与 “Vue 中的 template 标签” 虽然有相同的名称，但它们是完全不同的概念。

	HTML 中的 template 标签	Vue 中的 template 标签
语法	HTML 代码	Vue 特定的语法
用途	定义可重复使用的 HTML 代码片段	定义 Vue 组件的 DOM 结构
使用方式	使用 JavaScript 插入到文档中	在 Vue 组件中使用
数据绑定	不支持	支持

1. HTML 中的 template 标签

HTML 中的 template 标签用于定义可重复使用的 HTML 代码片段，但这些代码片段在页面加载时不会被渲染，只有在使用 JavaScript 将其插入到文档中时才会显示。它主要用于提高代码的可重用性和可维护性。

2. Vue 中的 template 标签

Vue 中的 template 标签是 Vue 组件的核心部分，用于定义组件的 DOM 结构。它使用 Vue 特定的语法来描述组件的 UI 元素和数据绑定。Vue 会解析 template 标签并将生成的 DOM 结构插入到页面中。