HTML模板是一种在Web应用程序中生成动态HTML内容的技术。它允许您使用标记语言和模板引擎来生成HTML代码，而无需手动编写大量的HTML代码。
## HTML模板的优点
使用HTML模板有以下几个优点：
- 可维护性：使用HTML模板可以轻松地分离应用程序逻辑和HTML代码，从而使应用程序更易于维护。
- 可重用性：使用HTML模板可以轻松地重用HTML代码，从而减少代码重复。
- 可扩展性：使用HTML模板可以轻松地扩展应用程序，从而使其更具可扩展性。
## HTML模板的示例
以下是一个简单的HTML模板示例，演示如何使用模板引擎来生成动态HTML内容：
```html
<!DOCTYPE html>
<html>
<head>
<title>HTML模板示例</title>
</head>
<body>
<h1>欢迎来到{{ title }}！</h1>
<ul>
{% for item in items %}
<li>{{ item }}</li>
{% endfor %}
</ul>
</body>
</html>
```
在上面的代码中，我们使用了两种不同的语法来生成动态HTML内容：
- 双大括号：使用双大括号来插入变量。在这个例子中，我们使用`{{ title }}`来插入一个名为`title`的变量。
- 模板标记：使用模板标记来生成循环和条件语句。在这个例子中，我们使用`{% for item in items %}`和`{% endfor %}`来生成一个循环，该循环遍历一个名为`items`的数组，并在每个项目上生成一个`<li>`元素。
要使用这个模板，我们需要一个模板引擎。以下是一个简单的Node.js示例，演示如何使用Mustache模板引擎来渲染上面的模板：
```javascript
var mustache = require("mustache");
var template = document.getElementById("my-template").innerHTML;
var data = {
title: "我的网站",
items: ["首页", "关于", "联系"]
};
var html = mustache.render(template, data);
document.body.innerHTML = html;
```
在上面的代码中，我们首先将模板存储在一个名为`template`的变量中。然后，我们创建一个名为`data`的JavaScript对象，其中包含要插入到模板中的变量。最后，我们使用Mustache的`render()`方法将数据渲染到模板中，并将结果插入到页面中。
