pages/下页面引用js/nav-loader.js必须用src="js/nav-loader.js"，因路径始终相对于当前html文件位置；写src="/js/..."本地双击会404，且嵌套层级越深，../越易出错、维护成本越高。
纯HTML站点没有路由层或CMS兜底，信息架构（IA）完全靠文件路径、语义标签、链接关系和内容分层四样东西硬搭出来——写错一个<main></main>或路径多一个../，SEO就掉坑，屏幕阅读器就读断，本地双击打开直接白屏。
pages/目录下页面怎么引用js/nav-loader.js才不失败
静态站点所有资源路径都是相对于当前HTML文件位置解析的，不是相对于根目录。https://www.php.cn/link/35b07af7d3ff07f8d3a4403e3c302808里写src="js/nav-loader.js"就能加载成功；写src="/js/nav-loader.js"在服务器上可能行，但本地双击打开会404。
- 根目录放
index.html、404.html、css/、js/、images/、pages/，五者平级 -
pages/里所有HTML文件（如pages/contact.html）引用js/下的脚本，一律用src="js/xxx.js"，不要加/ - 避免
pages/blog/2024/post.html这种嵌套——每深一层，../数量翻倍，手写极易出错，维护成本指数上升
为什么必须唯一且不能嵌套在里
<main></main>是浏览器、爬虫、屏幕阅读器识别“当前页核心内容”的唯一锚点。它不是视觉容器，而是语义指令：这里开始，才是用户真正该看的东西。
- 每个页面只允许一个
<main></main>，且不能出现在<header></header>、<nav></nav>、<footer></footer>或<section></section>内部 - 如果把博客正文包在
<section><main>...</main></section>里，辅助技术会认为“这部分只是个区块”，跳过不读 @#@#@#@#@#@#@#@#@#@0
<div id="nav-container"></div>，位置在<header></header>内或紧贴其后<script src="js/nav-loader.js"></script> + <script>document.getElementById('nav-container').innerHTML = navHTML;</script>
https://www.php.cn/link/35b07af7d3ff07f8d3a4403e3c302808），别写https://yoursite.com/https://www.php.cn/link/35b07af7d3ff07f8d3a4403e3c302808——否则换域名全挂DOM嵌套超过4层为什么会让滚动卡顿
浏览器构建DOM树是深度优先遍历，每多一层，解析耗时增加；CSS选择器匹配也得逐层回溯，比如.a .b .c .d p要从p一直往上找四层父级。
- 实测单个
<section></section>下子元素超50个，滚动时重排（reflow）明显卡顿 - 用
DocumentFragment批量插入动态列表，避免每加一项都触发一次重排 - Flex/Grid能直接替代2–3层
<div class="row"><div class="col"></div></div>包裹，结构扁平化是性能底线 - 开发者工具按
Ctrl+Shift+C定位深层节点，重点查<div><div><div>套娃区域 <p>最容易被忽略的不是语法对不对，而是路径和语义的耦合性——<code>https://www.php.cn/link/35b07af7d3ff07f8d3a4403e3c302808里一个src="../js/nav-loader.js"写错，整页JS失效；<main></main>被塞进<section></section>，屏幕阅读器就跳过正文。结构不是装饰，是运行时契约。
