手动写标签最稳妥：href必须双引号包裹、用相对路径；target="_blank"必须配rel="noopener noreferrer"；锚点id须唯一且严格匹配；href=""会刷新页面，href="#"跳顶部。
直接写 @#@#@#@#@#@#@#@#@#@0
href="pages/contact.html" 或 href="../index.html"
href="/assets/js/app.js"
target="_blank" 必须搭配 rel="noopener noreferrer"
只写 target="_blank" 在 Chrome 119+、Firefox 120+、Safari 16.4+ 中大概率被拦截或强制在当前页跳转——这不是 bug，是浏览器主动安全策略。
为什么必须加 rel="noopener noreferrer"：
-
noopener：阻止新页面通过window.opener修改原页面 URL（tabnabbing 攻击） -
noreferrer：不发送 Referer 头，避免泄露来源页地址 - 漏掉任意一项，
target="_blank"就形同虚设
正确写法只有一种：
<a href="https://example.com" target="_blank" rel="noopener noreferrer">外部链接</a>
动态生成时（比如 JS 拼字符串），容易漏掉 rel。更稳妥的做法是：
- 用
document.createElement('a')创建元素 - 依次设置：
link.href = url、link.target = '_blank'、link.rel = 'noopener noreferrer' - 插入前检查
link.outerHTML是否三项齐全
锚点跳转失效？先查 id 是否严格匹配
锚点跳转静默失败是最难排查的问题之一：没报错、没提示，只是点下去没反应。核心原因几乎全是 id 不匹配。
目标元素必须满足：
- 有
id属性（不是class或name）：<h2 id="faq-1">常见问题</h2> -
id值只能含字母、数字、短横线（-）、下划线（_）：id="section_2"✅，id="section 2"❌ - 大小写敏感：
href="#FAQ-1"对不上id="faq-1" - 不能重复：同一页面中
id必须唯一
跳转写法必须用 # + 完全一致的 id 值：
<a href="#faq-1">跳到第一个问题</a>
如果要跳转到其他页面的锚点，路径和 id 要一起写：
<a href="help.html#troubleshoot">查看故障排除</a>
href 值为空字符串或 # 时的行为差异
这两个值看起来都“不跳转”，但实际效果完全不同，容易误用。
href=""：
- 点击后刷新当前页面（等效于
location.reload()） - 不是“无动作”，尤其在表单内可能意外提交
href="#"：
- 跳转到页面顶部（
scrollTop = 0） - URL 地址栏末尾多一个
#，影响 history 记录 - 若页面没滚动，看起来像没反应，但其实执行了滚动
真正想实现“占位但不跳转”的场景（比如配合 JS 的下拉菜单），应该：
- 用
href="javascript:void(0)"（兼容性好） - 或更现代的做法：
href="#"+event.preventDefault()在 JS 中拦截 - 避免用
href=""，除非你明确需要刷新
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
