有效href需用相对路径或绝对URL：同目录用"about.html"，子目录用"pages/contact.html"，上级用"../index.html"，外链必须带协议如"https://example.com"，根路径"/assets/js/main.js"仅部署后可靠；锚点跳转需id完全匹配且合法，固定头部需加scroll-margin-top修正；target="_blank"必须配rel="noopener"防攻击；禁用onclick跳转，应使用addEventListener并e.preventDefault()。
直接用 <a></a> 标签配 href 就能跳转，不需要 JS、不写 href 或写空值会刷新当前页，不是“没反应”。
href 值怎么写才有效
浏览器只认两种格式：相对路径和绝对 URL。其他写法基本都失效。
-
href="about.html"：同目录下的文件，最常用 -
href="pages/contact.html"：子目录里的页面，路径基于当前 HTML 文件位置解析 -
href="../index.html"：上一级目录，../每多一个就往上退一层 -
href="https://example.com"：外链必须带协议（https://或http://），href="example.com"会变成当前域下的子路径，404 -
href="/assets/js/main.js"：根相对路径，部署到服务器后才可靠；双击打开 HTML 文件时，/指向系统根目录，必然失败 -
href=""或href="#"：前者刷新页面，后者滚动到顶部，都不是“无动作”
锚点跳转为什么点不动
页面内跳转靠 href="#xxx" 匹配目标元素的 id，大小写、拼写、字符合法性必须完全一致。
- 目标元素得有
id="section2"，不是name="section2"（HTML5 已废弃） -
id="Section2"和href="#section2"不匹配 -
id不能含空格、中文、点号、问号等（如id="常见问题?"或id="faq.1"） - 固定头部（
position: sticky/fixed）会遮住锚点内容，加scroll-margin-top: 60px修正 - Vue/React 等单页应用中，路由库可能拦截了
#变化，需确认是否启用 hash 模式且锚点已注册
target="_blank" 必须配 rel="noopener"
只写 target="_blank" 会让新页面通过 window.opener 控制原页面，存在重定向攻击风险。
立即学习“前端免费学习笔记（深入）”；
- 正确写法：
<a href="https://example.com" target="_blank" rel="noopener">外链</a> -
rel="noreferrer"效果类似，但会隐藏 Referer 头，部分旧版 Safari 不支持 - 如果真需要
window.opener（极少见），应显式评估风险并改用rel="opener" - 没配
rel="noopener"不影响跳转，但现代审计工具会标为高危
别用 onclick="location.href=..." 伪装跳转
这种写法绕过浏览器原生导航机制，后果比看起来严重得多。
- 不记录 history，按返回键无效
- 右键菜单里没有“在新标签页打开”选项
- 不会触发
beforeunload，用户关页前无法弹确认框 - 路径拼错或变量未定义时静默失败，控制台也不报错
- CSP 策略可能直接拦截内联 JS，导致跳转完全失效
- 真要加逻辑，用
<a></a>+addEventListener，先e.preventDefault()再跳转
最易被忽略的是路径解析时机——开发阶段双击打开 HTML 文件（file:// 协议）和上线后走 HTTP 协议，对 / 开头路径的处理完全不同；还有锚点定位被 CSS transform 或 fixed 头部吃掉的问题，往往调半天才发现是 scroll-margin-top 没设。这些细节不提前踩一遍，上线后就是线上 bug。
