HTML模板页本身不执行逻辑，需通过本地服务器加载或服务端渲染才生效；纯HTML不支持include语法，动态内容需构建工具、框架或服务端模板（如PHP/EJS）配合实现。
HTML 模板页不是靠“调用”运行的，它本身不执行逻辑，直接打开或由服务端/构建工具加载才生效。 所谓“调用”，其实是你混淆了静态 HTML、服务端模板（如 PHP、EJS）、前端框架组件（如 Vue 的 .vue）这三类东西。下面按真实使用场景拆解。
直接双击打开 index.html 为什么样式/数据没出来？
这是最常见误解：把模板当成可执行程序。实际它只是纯文本文件，浏览器只负责解析 HTML/CSS/JS，不会自动拉接口、不会渲染服务端变量、也不会处理 {{name}} 这类占位符。
- 如果模板里写了
{{user.name}}或<?php echo $title; ?>—— 浏览器原样显示，不解释 - 如果引用了
./js/app.js但路径错了，控制台报Failed to load resource: net::ERR_FILE_NOT_FOUND - 本地双击打开时，
fetch('./data.json')会因跨域被浏览器拦截（file://协议限制） - 正确做法：用本地服务器启动，比如
npx serve、python3 -m http.server或 VS Code 的 Live Server 插件
include 语法在纯 HTML 里根本不存在
很多人搜“HTML 模板 include”，然后往 index.html 里写 <!--#include file="header.html"--> 或 <include src="header.html"></include> —— 这两种都无效，前者是 SSI（需 Apache/Nginx 开启），后者是自定义标签（需 JS 解析）。
- 纯 HTML 原生不支持任何模板复用语法
- 真想复用：用构建工具（Vite、Webpack）配
html-webpack-plugin+ejs模板；或前端框架（React/Vue）的组件机制 - 临时调试可用 JS 动态加载：
fetch('header.html').then(r => r.text()).then(html => document.getElementById('header').innerHTML = html)，但注意 CSP 和路径问题
用 PHP / EJS / Jinja 等服务端模板时，“调用”的本质是服务端渲染
这类文件（如 index.ejs、page.php）不能直接双击打开，必须经对应环境处理后输出纯 HTML，再交给浏览器。
立即学习“前端免费学习笔记（深入）”；
- PHP 文件要走
php -S localhost:8000，否则浏览器下载源码或报 500 - EJS 需配合 Node.js 服务（如 Express）：
res.render('index', { title: 'Home' })，不是直接open index.ejs - Jinja 模板在 Flask/Django 中同理，
render_template()是关键入口，不是文件路径引用 - 路径里的
./templates/是服务端配置的查找目录，和浏览器看到的 URL 路径无关
真正卡住人的从来不是“怎么写模板”，而是没分清当前文件由谁解析、在哪一环生效。本地预览失败？先看地址栏是 file:// 还是 http://；动态内容不渲染？查控制台报错是 404 还是 SyntaxError；变量没替换？确认你跑的是 PHP 服务，不是用记事本双击打开的 .php 文件。
