纯html站点的信息架构依赖文件路径、语义标签、链接关系和内容分层；目录须清晰（如pages/与根目录分离），语义标签需严格遵循规范（如唯一、仅含导航链接），导航应集中加载，响应式须以结构先行、html顺序决定焦点流。
纯 HTML 站点的信息架构（IA）不是靠 CMS 或路由配置，而是靠文件路径、语义标签、链接关系和内容分层这四样东西硬生生搭出来的。没后端，就靠结构说话。
目录结构怎么定：pages/ 和根目录的边界必须清晰
静态站点没有服务端路由兜底，pages/about.html 要能正确加载 js/nav-loader.js 和 css/style.css，全靠相对路径解析。一旦写错，页面就白屏或样式丢失。
-
https://www.php.cn/link/7812d18c11eba4daf3953e61cffd4028必须在根目录，它是唯一默认入口；其他内容页统一放进pages/，比如pages/contact.html -
css/、js/、images/都是根目录下的平行目录，不嵌套进pages/—— 否则pages/里的页面引用js/nav-loader.js就得写成../js/nav-loader.js，极易出错 - 所有内部链接用相对路径：
pages/about.html，不是/pages/about.html（后者在本地双击打开会失败） - 避免在
pages/下再建子目录，如pages/blog/2024/post.html—— 路径越深，../数量越难控制，维护成本指数上升
HTML语义标签怎么用：header/nav/main/article/section 不是装饰品
这些标签不是为了“看起来更现代”，而是浏览器、搜索引擎、屏幕阅读器理解你页面意图的唯一锚点。用错一个，整个信息流就断了。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 每个页面只允许一个
<main></main>，且不能嵌套在@#@#@#@#@#@#@#@#@#@0
<div id="nav-container"></div>，确保 ID 唯一且存在document.getElementById('nav-container').innerHTML = navHTML，**绝不用 document.write()**（已废弃，阻塞渲染）nav-loader.js 里读 localStorage 或检查 window.location.pathname，比在每个页面写 if 更可持续响应式不是加 media query 就完事：结构先行，布局后置
Flexbox 和 Grid 的 display: flex 或 display: grid 本身不触发响应式，它们只是布局工具。真正的响应式起点，是 HTML 结构是否支持不同断点下的内容重组。
- 导航栏在移动端必须能折叠，但
<nav></nav>标签本身不能被媒体查询“删掉”——它得始终存在，只是 CSS 控制显隐或重排 - 侧边栏（
<aside></aside>）在小屏下应该自然下沉到主内容之后，而不是靠position: absolute强行压到右边，否则语义流和可访问性全崩 - 不要用
<table> 或 <code>float做布局——它们无法随视口变化重构 DOM 顺序，响应式只是表面适配，内容逻辑早已僵死 - 测试时关掉 CSS，用键盘 Tab 导航走一遍：焦点顺序是否符合内容重要性？如果先跳到页脚再回到导航，说明 HTML 顺序写反了
最难的不是写对某个标签，而是让每个 <header></header>、每个 href、每个目录层级，都承载明确的信息权重和用户路径意图。静态 IA 没有运行时补救机会，写下去的每一行，都是最终用户看到的路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
