避免404需确保相对路径起点正确：同目录用about.html，子目录回退用../index.html，带扩展名pages/contact.html；根路径本地双击失效，应起本地服务；注意大小写和#链接行为差异。
href 写相对路径时怎么避免 404
相对路径失效，八成是因为当前 HTML 文件位置和你写的路径对不上。不是“写得不对”，而是“算错了起点”。
-
about.html：只在同目录下有效；如果当前页是/blog/post.html，它会尝试加载/blog/about.html，不是网站根目录下的/about.html -
../index.html：必须确认当前文件真在子目录里；比如/blog/post.html才能用这个跳回/index.html，若当前页就在根目录，../就越界了，直接 404 -
pages/contact.html：注意扩展名不能省——contact不行，浏览器不会自动补.html；服务器默认行为不等于浏览器行为
href 写绝对路径时为什么本地双击打不开
/products/list.html 这类以 / 开头的路径叫“根相对路径”，部署到 Nginx/Apache 后完全正常，但双击用 file:// 协议打开时，浏览器会把它解析成系统根目录（如 C:/products/list.html），而不是你项目文件夹的根。
- 本地开发阶段，优先用相对路径，或起一个本地服务（比如
python3 -m http.server） - 不要写
file:///C:/xxx/index.html—— 浏览器禁用这种写法，现代浏览器直接忽略或报错 - CI/CD 或上线前，检查所有
href是否含大小写混用；Linux 服务器上About.html和about.html是两个文件
href="#" 和 href="#top" 的实际滚动行为差异
它们看起来都带 #，但触发逻辑和副作用完全不同，不是“差不多”。
-
href="#"：强制滚动到页面顶部，同时把 URL 哈希清空为#；Vue Router / React Router 可能监听到哈希变化并触发重载，导致意外刷新或路由跳转 -
href="#top"：只在页面存在<div id="top"></div>时才滚动；不存在该id，链接点击后完全无反应，也不改 URL，更可控 - 真正想要平滑回到顶部？去掉
href，用 JS：element.addEventListener('click', () => window.scrollTo({ top: 0, behavior: 'smooth' }))
mailto:、tel: 和 javascript:void(0) 这些非 URL 的 href 怎么写才安全
这些不是“伪协议”，而是标准支持的 URI scheme，但写法松散容易出问题。
-
mailto:admin@example.com?subject=反馈&body=内容：参数要用&（不是&），否则 HTML 解析失败；中文需 URL 编码，否则可能截断 -
tel:+8613800000000：加号和数字之间不要空格，tel:138 0000 0000在 iOS 上可能无法识别 -
href="javascript:void(0)"：仅当有 JS 绑定点击行为时才可用；没 JS 支持就是死链接，且 SEO 友好性差；更推荐用href="#"+event.preventDefault()，或直接用button标签
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
