“HTML 模板”这个词在日常使用里至少指三种东西：可复用的页面骨架文件、后端渲染用的模板引擎语法、以及前端框架里的组件模板。搞清属于哪一类，才不会在找资源时下载一堆用不上的 .html。本文把三者拆开说明，并给出可直接抄的最小模板。

一、三种“模板”分别是什么

• 静态页面骨架（HTML5 Boilerplate 类）：一份写好 doctype、meta、viewport、CSS/JS 引用位置的空页面，拿来改内容。Bootstrap 官方“Get started”给的就是这种（https://getbootstrap.com/docs/5.3/getting-started/introduction/ ）。
• 后端模板引擎的文件：带占位符、循环与条件的 .tpl/.html/.twig/.blade.php/.ftl，运行时把数据填进去生成 HTML。Smarty、Twig、Blade、Thymeleaf、FreeMarker 都属于这一类。
• 前端组件模板：Vue 的 <template>、Angular 的 HTML 模板、React 的 JSX。它们在浏览器或构建阶段渲染。

共同点是把“结构”和“数据/样式”分离。搜“html模板下载”时看到的大多是第一类成品皮（整站视觉稿），适合快速上线，但代码质量与版权要逐个确认。

二、可直接用的最小骨架

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>页面标题</title>
  <meta name="description" content="80~120字的SEO描述">
  <link rel="canonical" href="https://example.com/">
  <link rel="icon" href="/favicon.ico">
  <link rel="stylesheet" href="/css/style.css">
  <meta property="og:title" content="页面标题">
  <meta property="og:image" content="https://example.com/cover.jpg">
</head>
<body>
  <header><nav>…</nav></header>
  <main>
    <article>
      <h1>文章标题</h1>
      <p>导语……</p>
      <h2>小标题</h2>
    </article>
  </main>
  <footer>© 2024</footer>
  <script src="/js/app.js" defer></script>
</body>
</html>

几个硬性要求：Bootstrap 5 明确要求 HTML5 doctype，否则样式异常；<meta name="viewport"> 缺失会导致移动端按 980px 宽渲染；defer 让脚本不阻塞解析。box-sizing 方面 Bootstrap 全局改成了 border-box，接第三方组件（如 Google 地图容器）时可能要单独写回 content-box。

三、模板引擎里的“模板”长什么样

以 Thymeleaf（Spring 生态主流）为例，模板就是合法的 HTML，靠属性指令注入数据，浏览器直接打开也能预览：

<ul>
  <li th:each="it : ${list}" th:text="${it.name}">占位</li>
</ul>

Blade 则是双大括号加指令：@foreach($list as $it) <li>{{ $it->name }}</li> @endforeach。Twig/Smarty 用 {% for %}。关键差异：Thymeleaf 是自然模板（原型即代码），Blade/Twig 的标签不是合法 HTML，直接在浏览器里打开会露出原始标记。

纯前端方案可用 <template> 标签：

<template id="row">
  <tr><td class="n"></td><td class="v"></td></tr>
</template>
<script>
  const t = document.getElementById('row').content.cloneNode(true);
  t.querySelector('.n').textContent = '数量';
  document.querySelector('table tbody').appendChild(t);
</script>

<template> 内的内容不会被渲染也不会执行脚本，这是它区别于隐藏 div 的地方。