HTML5 模板不是「改完就能上线」的套娃工程，多数人卡在结构不熟、路径错乱、CSS 作用域失效这三步上。
怎么快速定位要改的 HTML 文件
模板包里常有多个 index.html、home.html、template.html，别直接改根目录下那个——它可能只是占位文件。先打开浏览器开发者工具（F12），刷新页面，看 Network 面板里实际加载的是哪个 HTML；再对照模板文档里的「入口说明」或 README.md，找真正被 Web 服务器（如 Apache/Nginx）或构建工具（如 Vite）识别为首页的那个文件。
- 常见坑：改了
pages/about.html却没配路由，访问/about404 - 静态模板通常靠文件名映射 URL，
contact.html→/contact.html，不是/contact - 如果用了
gulp或webpack构建，实际编辑的是src/下的文件，不是dist/
CSS 样式改了但没生效？先查这三处
HTML5 模板普遍用 BEM 或 Utility-First 类名（比如 btn-primary、section-hero），直接在 style.css 末尾加 .header { color: red; } 很可能被前面更具体的规则覆盖。打开 DevTools 的 Elements 面板，选中元素，看右侧 Styles 标签页里哪些样式被划掉、哪些生效、权重来自哪条 CSS 规则。
- 优先检查是否启用了 CSS 预处理器（
main.scss或theme.less），改源文件后要重新编译 - 留意
!important是否被模板自带样式滥用，导致你改的值被忽略 - 部分模板用
data-*属性控制状态（如data-theme="dark"），样式可能依赖 JS 动态切换，纯改 CSS 不起作用
JavaScript 功能不响应？重点盯 DOMContentLoaded 和路径
很多模板把初始化逻辑写在 main.js 或 scripts.js 里，但如果你删了某段 HTML 结构（比如移除了 id="slider" 的轮播容器），对应 JS 就会因 document.getElementById('slider') 返回 null 而中断执行，后续所有功能全挂。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 打开 Console，看是否有
TypeError: Cannot read property 'addEventListener' of null这类错误 - 确认 JS 文件是否真的加载成功（Network 面板查状态码，不是 404 就是 200）
- 路径问题高频：模板里写
src="js/main.js"，你把文件挪到assets/js/下却没同步改src，浏览器根本不会加载 - 避免在
<head>里直接写内联脚本调用尚未定义的函数——等 DOM 解析完再执行才是安全的
图片和字体路径错乱的典型表现与修复
本地双击打开 index.html 能看到图，扔到服务器就全变叉，基本是相对路径惹的祸。HTML5 模板常用 ../images/logo.png 或 img/logo.svg，但浏览器解析路径时，是以当前 HTML 文件位置为基准，不是以 CSS 或 JS 文件位置为准。
- 统一用根相对路径最稳：
/images/logo.png（开头带/），前提是网站部署在域名根目录 - 若部署在子目录（如
https://example.com/my-site/），需在所有路径前加my-site/，或改用构建时注入的公共路径变量（如 Vite 的import.meta.env.BASE_URL） - 字体文件（
@font-face）容易被忽略：CSS 里写的url('../fonts/roboto.woff2')，路径必须相对于该 CSS 文件位置，不是 HTML 位置
真正麻烦的从来不是“怎么改”，而是改一处牵出三处隐性依赖——比如动个 class 名，可能同时影响 CSS、JS 选择器、甚至后端 CMS 的模板钩子。动手前先花两分钟通读 README.md 和目录结构，比边试边猜快得多。
