HTML5模板是符合标准的静态HTML文件，不可import或require；应直接打开或用本地服务器访问，注意路径、script加载属性、viewport标签及id/class命名规范。
HTML5 模板不是 npm 包，不能 import 或 require
很多人搜“HTML5模板怎么用”，第一反应是像框架组件一样引入——行不通。html5 本身是标记语言规范，所谓“HTML5模板”只是符合 HTML5 标准的静态 HTML 文件，没有运行时逻辑，也不带打包机制。
常见错误现象：Uncaught SyntaxError: Cannot use import statement outside a module，本质是把纯 HTML 当成 JS 模块了。
- 使用场景：新建项目起手、邮件签名页、单页营销页、原型演示
- 正确做法：直接用浏览器打开
index.html，或丢进本地服务器（如python3 -m http.server）访问 - 注意路径：模板里
css/style.css、js/main.js等引用必须和文件实际位置一致；相对路径失效常因没启服务，而是双击打开file://协议
模板里的 <script> 标签要区分 defer 和 async
多数 HTML5 模板自带 <script> 引用，但加载时机错位会导致 DOM 操作失败，比如 document.getElementById('app') 返回 null。
-
defer：脚本按顺序下载，等 DOM 解析完再执行，适合操作 DOM 的逻辑 -
async：下载完立刻执行，不保证顺序，适合分析统计、广告等无依赖脚本 - 没加任何属性：脚本阻塞解析，DOM 还没建完就执行，极易报错
- 示例：
<script src="js/app.js" defer></script>比<script src="js/app.js"></script>更安全
响应式失效？检查模板是否漏了 <meta name="viewport">
这是最常被删又最致命的一行。没有它，移动端会以桌面宽度渲染，字体小、按钮挤、缩放失灵，所有 CSS 媒体查询形同虚设。
立即学习“前端免费学习笔记（深入）”；
- 必须存在且位置靠前：
<head>内第一或第二行，早于任何<link rel="stylesheet"> - 标准写法：
<meta name="viewport" content="width=device-width, initial-scale=1.0"> - 兼容性影响：iOS Safari、Android Chrome 严格依赖此标签；旧版微信内置浏览器也认这个
- 容易踩的坑：复制模板时手动删了这行，以为“精简”，结果在手机上完全不可用
自定义内容时，别动 id 和 class 的命名结构
很多 HTML5 模板配了配套 CSS 或 JS，它们靠特定 id（如 header、hero-section）或 class（如 btn-primary、nav-toggle）触发样式或交互。改名等于断联。
- 修改文字、图片、链接没问题，但不要重命名已有
id/class - 新增功能可加新类名，但避免和模板原有类冲突（比如模板用
.container，你就别自己再写一个同名但样式不同的.container） - 调试技巧：用浏览器 DevTools 选中元素，看
Styles面板右侧是否显示对应 CSS 文件来源；如果样式灰掉，说明选择器没命中
事情说清了就结束。真正麻烦的从来不是“怎么套模板”，而是改到一半发现某个 data-* 属性被 JS 监听了，而你刚删掉它。
