html中直接写{% include %}会报错，因其是模板引擎（如jinja2、django）的编译指令，非html标准，浏览器原生不识别，仅能在服务端渲染或构建时预处理环境中执行。
HTML里直接写{% include %}会报错？先看执行环境
浏览器原生不识别{% include "header.html" %}这类语法——它不是HTML标准，而是模板引擎（如Jinja2、Django、Nunjucks）的编译指令。直接扔进.html文件双击打开，只会原样显示甚至触发解析错误。
常见错误现象：
- 页面上直接看到
{% include "xxx.html" %}文本 - Chrome控制台报
Uncaught SyntaxError或Failed to load resource - 本地
file://协议下完全无反应
适用场景只有两种：
- 后端服务运行时渲染（如FastAPI + Jinja2、Express + EJS）
- 构建时预处理（Webpack +
html-loader+html-webpack-plugin）
别指望纯前端静态托管平台（Vercel/Netlify）自动执行这些指令——它们没模板引擎 runtime。
import一个HTML字符串？ES模块不支持直接import HTML文件
ES6模块规范只允许import JS、JSON，或通过插件扩展支持其他类型。直接写import header from "./header.html"会报Module not found错误，除非你配了html-loader或raw-loader。
正确做法分两步：
- Webpack配置中加规则：
{ test: /\.html$/, use: ["html-loader"] } - JS里用
import获取字符串：import headerHtml from "./components/header.html";
注意点：
- 加载的是字符串，不是DOM节点，需手动
innerHTML或insertAdjacentHTML插入 - 里面含
<script></script>标签不会自动执行，得自己eval或appendChild新创建的script元素 - 路径是相对于
import语句的位置，不是服务器URL路径
用<template></template>做轻量模块化，但cloneNode(true)不能漏
<template id="header"><header>...</header></template>本身不渲染，适合前端纯静态复用。但很多人直接document.body.appendChild(template)，结果第二次调用就失效——因为DOM节点被移走了。
必须用：
-
template.content.cloneNode(true)，否则复用失败 - 如果模板里有
<style></style>或<script></script>，cloneNode(true)只复制结构，不执行脚本、不生效样式 - 动态填数据得靠
querySelector逐个赋值，不支持{{name}}这种绑定
它轻量、零依赖，但仅适合结构固定、数据量小的片段，比如页头、按钮组、弹窗壳。
fetch + innerHTML组合最灵活，但跨域和CSP常踩坑
运行时加载HTML片段最通用的方式是fetch("header.html").then(r => r.text()).then(html => ...)，然后插入到目标容器。
容易忽略的问题：
- 本地
file://协议下fetch会因CORS失败，必须起一个本地服务器（npx serve或python -m http.server） - 若站点启用了CSP（Content-Security-Policy），
innerHTML = html可能被拦截，需配unsafe-inline或改用DOMParser - HTML字符串里含
<script></script>，默认不会执行；要执行得提取script标签内容并eval或appendChild
真正麻烦的从来不是“怎么加载”，而是“怎么让加载进来的东西安全、可维护、能带逻辑”。模板引擎管编译，<template></template>管复用，fetch管动态，选哪个取决于你控制不了服务器，还是控制不了构建流程，还是连本地开发服务器都不想开。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
