纯html网站可免服务器运行，关键在路径正确、用http服务替代file://协议、手动同步导航栏、注重语义化与lang属性。
直接用 HTML 就能搭出可访问、结构清晰、多页面联动的网站，不需要服务器、不用部署、不依赖框架——关键在于文件组织和超链接是否写对，而不是代码多复杂。
如何组织 HTML 文件结构避免 404 错误
浏览器打开 index.html 后点击链接却报错 “Not Found”，90% 是路径写错了。真实项目里必须手动维护相对路径，不能靠编辑器自动补全蒙混过关。
-
index.html和about.html在同一级目录，链接写@#@#@#@#@#@#@#@#@#@0 - 如果
about.html放在pages/子目录下，链接必须写@#@#@#@#@#@#@#@#@#@1，不能漏掉pages/ - CSS 和 JS 引入同理：
href="css/style.css"表示当前目录下有css/文件夹，里面放着style.css；路径错一个斜杠或大小写（Windows 不敏感但 Linux 敏感），就加载失败 - 图片路径也一样：
<img src="images/avatar.jpg">要求存在images/avatar.jpg，不是Images/avatar.JPG
为什么本地双击打开 index.html 会卡住 AJAX 或表单提交
因为浏览器出于安全限制，file:// 协议下默认禁用跨源请求（包括读取本地 JSON、提交表单到后端、调用 fetch()）。这不是你代码写错了，是协议本身不允许。
- 现象：点击“提交”没反应，控制台报
Access to fetch at 'data.json' from origin 'null' has been blocked - 解法一（推荐）：用 Python 快速起一个本地服务：
python3 -m http.server 8000，然后访问http://localhost:8000，所有相对路径和 AJAX 都正常 - 解法二：VS Code 安装插件 Live Server，右键
index.html→ “Open with Live Server”，自动打开http://127.0.0.1:5500 - 别用 Chrome 直接双击打开带 JS 的 HTML——除非你确认它完全静态、无任何异步操作
多页面共用导航栏时怎么避免重复写代码
HTML 本身不支持“模板复用”，所以每个页面都得手写一遍 <nav></nav>。但可以靠结构约定 + 手动同步来降低维护成本，而不是引入构建工具。
- 所有页面统一用相同结构：
<nav><ul> <li>@#@#@#@#@#@#@#@#@#@2</li> <li>@#@#@#@#@#@#@#@#@#@3</li> </ul></nav> - 当前页面的导航项加
class="active"（比如@#@#@#@#@#@#@#@#@#@4），再配简单 CSS 高亮，用户一眼知道在哪 - 不要幻想“写一次，到处引用”——纯 HTML 没
include，强行用 JS 动态加载反而增加首屏延迟和出错概率 - 如果页面超过 5 个，建议用文本替换工具（如 VS Code 的全局搜索替换）批量更新导航，比写脚本更稳
最容易被忽略的是：语义化标签（<header></header>、<main></main>、<footer></footer>）不影响功能，但决定了别人用屏幕阅读器能否正确理解你的页面结构；而 lang="zh" 属性缺失，会让语音朗读变成英文腔调——这些细节不报错，但一上线就被真实用户感知到。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
