直接用模板不等于提效，关键在“可维护的复用”；w3-include-html 需本地服务器运行、引入 w3.js 库且路径相对；handlebars 报错多因模板未挂载或未正确编译；vs code 片段需 html 专属配置、缩写匹配并用 tab 触发；模板必须处理数据空状态防 ui 塌陷。
直接用模板不等于提效，关键在“可维护的复用”——模板一旦散落、硬编码、无法局部更新，反而拖慢迭代速度。
用 include 或 w3-include-html 加载外部 HTML 文件时，为什么页面空白？
浏览器原生不支持 file:// 协议下的同步文件加载，直接双击打开含 w3-include-html="navbar.html" 的 HTML 会失败，控制台报错 Access to fetch at 'xxx.html' from origin 'null' has been blocked。
- 必须通过本地服务器运行（如 VS Code 的 Live Server 插件、
npx http-server） -
w3-include-html依赖 W3.JS 库，需提前引入：<script src="https://www.w3schools.com/lib/w3.js"></script> - HTML 文件路径必须相对且可访问，比如
./components/header.html，不能是../outside/header.html（跨目录易 404） - 不建议用于生产环境——无错误降级、无缓存控制、无构建时校验
Handlebars 渲染时 template(userData) 报 TypeError: template is not a function
常见于未正确编译模板：要么 DOM 中没找到对应 <script id="user-template" type="text/x-handlebars-template"></script>，要么 Handlebars.compile() 执行时机早于模板节点挂载。
- 确保模板 script 标签在调用前已存在于 DOM 中（放在
底部，或用DOMContentLoaded包裹） - 检查
document.getElementById('user-template')是否为null，可用console.log验证 - 若用模块化打包（Webpack/Vite），
Handlebars需显式 import，且模板字符串不能写在<script></script>标签里（会被忽略） - 简单替代方案：改用
lit-html的html标签函数，无需预编译，更轻量
VS Code 里写 html5-boilerplate 片段，为什么按 Tab 没反应？
代码片段（snippets）默认只对当前语言生效，且缩写名需完全匹配。常见失效点不是语法错，而是配置位置或作用域不对。
- 必须在「HTML」语言专属片段中定义（不是「Global」或「JavaScript」）
- 缩写名如
boil，输入后要按Tab（不是Enter或空格） - 检查
html.json片段文件是否保存在正确路径：~/.vscode/extensions/.../snippets/html.json或用户片段目录 - 片段 body 中的换行和缩进要用
\n和\t显式表示，否则生成格式错乱 - 推荐优先用内置 emmet：输入
!+Tab就能生成完整 HTML5 结构，比自定义片段更稳定
最常被忽略的是模板的数据边界——所有动态内容都该有 fallback 或空状态处理，比如 {{name}} 在数据为空时不该留白，而应渲染 <span class="empty">-</span>；否则上线后某个字段突然缺失，UI 就会塌一块。模板不是“写一次就完”，它得经得起数据波动的考验。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
