HTML应按业务模块拆分为pages/下的独立文件，共享组件用动态加载或服务端include复用；资源路径统一用根相对路径（如/js/main.js），避免相对路径解析错误导致404。
中大型项目里，HTML 页面资源一旦放任自流，404 Not Found 就不是报错，是日常；Uncaught ReferenceError: $ is not defined 也不是脚本问题，是路径失控的征兆。必须用结构约束行为，而不是靠人肉检查。
怎么拆 HTML 文件才不翻车
纯静态多页应用（MPA）不能只靠 index.html 一统天下——页面一过 5 个，导航改一次就得开十几个文件硬改，SEO 和状态保持也全崩。必须按业务模块拆，比如 dashboard.html、settings.html、profile.html，全部放进 pages/ 目录。
- 所有页面共享的
<header>、<nav>、<footer>绝对不能复制粘贴，否则改一个 logo 就要手动同步 20 个文件 - 服务端 includes（如 PHP
include）最稳，但没后端时可用fetch()+insertAdjacentHTML()动态加载，注意加id="nav-container"做唯一挂载点 - 别用
document.write()注入导航——已废弃、阻塞渲染、无法调试
资源路径怎么写才不会本地能跑线上炸
浏览器解析 <script src="js/main.js"> 是以当前 HTML 文件位置为基准，不是以网站根目录。所以 pages/about.html 里写 "js/main.js"，实际找的是 pages/js/main.js，不是你想要的 js/main.js。
- 统一用根相对路径：
<link rel="stylesheet" href="/css/main.css">、<script src="/js/main.js"> -
dist/是构建产物目录，禁止手动修改；src/存源码，public/存favicon.ico这类不参与构建的资源 - 开发时如果用本地服务器（如
python -m http.server），确保服务根目录指向dist/，否则控制台看到的404很可能只是服务没配对，不是路径写错了
CSS/JS 怎么避免在 HTML 里“野蛮生长”
一个 index.html 里塞 5 个 <script>、3 个 <link rel="stylesheet">、还混着内联 <style>，等于把整个依赖关系焊死在视图层。改个打包输出路径？全手动搜 dist/css/main.css 替换为 assets/css/v2.1.0/main.css。
立即学习“前端免费学习笔记（深入）”；
-
<link rel="preload">只用于首屏关键资源（如核心 CSS、字体），预加载太多反而拖慢主资源发现 - 所有
<meta name="viewport">、<link rel="icon">必须抽到模板层，不是“能跑就行”，是后续加 CDN、换主题、做暗色模式的前置条件 - ES6 模块、Sass、Nunjucks 这类工具一上，
src/和dist/分离就不是可选项，是生存线——否则上线后 CSS 路径全错、变量改三处、别人接手第一件事就是重写目录
最容易被忽略的其实是“路径基准点”这个概念：它由 HTML 文件所在 URL 决定，不是你想象中的项目根目录。很多 404 不是写错了，是没意识到 pages/about.html 和 index.html 的相对路径解析起点完全不同。
