html如何使用模板语法

HTML可以使用模板语法来动态生成内容，常见的模板语法有以下几种：

1. 使用Mustache.js：Mustache.js是一个简单的模板引擎，它可以在HTML中使用{{}}语法来引用变量，例如：

<div>
  <h1>{{title}}</h1>
  <p>{{content}}</p>
</div>

然后使用JavaScript动态替换变量，例如：

var data = { title: "Hello World", content: "This is a template example." };
var template = document.getElementById("template").innerHTML;
var html = Mustache.render(template, data);
document.getElementById("output").innerHTML = html;

2. 使用Vue.js：Vue.js是一个流行的JavaScript框架，它可以在HTML中使用{{}}语法和v-bind等指令来动态生成内容，例如：

<div id="app">
  <h1>{{title}}</h1>
  <p v-bind:class="{'red': isRed}">{{content}}</p>
</div>

然后使用Vue.js实例来绑定数据和操作，例如：

var app = new Vue({
  el: "#app",
  data: {
    title: "Hello World",
    content: "This is a template example.",
    isRed: true
  }
});

3. 使用AngularJS：AngularJS是另一个流行的JavaScript框架，它可以在HTML中使用{{}}语法和ng-bind等指令来动态生成内容，例如：

<div ng-app="myApp" ng-controller="myController">
  <h1>{{title}}</h1>
  <p ng-class="{red: isRed}">{{content}}</p>
</div>

然后使用AngularJS控制器来绑定数据和操作，例如：

var app = angular.module("myApp", []);
app.controller("myController", function($scope) {
  $scope.title = "Hello World";
  $scope.content = "This is a template example.";
  $scope.isRed = true;
});

以上三种方法都可以使用模板语法来动态生成HTML内容，可以根据具体情况选择使用。