a标签必须带href属性才可点击跳转；href为空会刷新当前页；有效值仅相对路径（如about.html）和绝对url（如https://example.com）；本地文件路径无效；外链须带协议；target="_blank"必须配rel="noopener"防安全风险；锚点跳转依赖合法id且大小写敏感。
a 标签必须带 href 属性才真正可点击跳转，不写或写空字符串（href=""）会导致刷新当前页，不是“无动作”。
href 值写什么才有效
浏览器只认两种路径格式：相对路径（如 href="about.html"）和绝对 URL（如 href="https://example.com/contact"）。本地文件路径（href="C:\project\index.html" 或 href="/home/user/index.html"）在网页中必然失效。
- 开发时双击 HTML 文件打开（
file://协议）→ 只能用相对路径，/xxx会指向系统根目录，直接 404 - 部署到 Nginx/Apache 后 → 可放心用根相对路径（
href="/assets/js/main.js"），它始终从网站域名根目录解析 - 链接外部站点 → 必须带协议，
href="https://github.com"不能简写为href="github.com"
target="_blank" 必须配 rel="noopener"
只写 target="_blank" 会让新页面通过 window.opener 访问原页面的 window 对象，存在安全风险（比如被恶意脚本重定向原页面）。现代写法必须成对出现：
<a href="https://example.com" target="_blank" rel="noopener">打开外链</a>
- 漏掉
rel="noopener"不影响跳转，但审计工具会报高危 -
rel="noreferrer"效果类似，还会隐藏Referer头，但部分旧版 Safari 不支持 - 如果需要新页面能调用
opener（极少见），应明确评估风险并改用rel="opener"
锚点跳转失效的常见原因
页面内跳转（如 href="#section2"）依赖目标元素的 id，不是 name（HTML5 已废弃）。失效往往不是代码写错，而是细节没对齐：
- 目标元素确实有
id="section2"，但拼写大小写不一致（id="Section2"不匹配） -
id值含空格、中文、点号（如id="常见问题?"或id="faq.1"），浏览器解析失败 - CSS 设置了
position: absolute或transform，导致锚点定位偏移（可用scroll-margin-top修正） - 单页应用（Vue/React）中，路由库可能拦截了
#变化，需检查是否启用了 hash 模式且未正确注册锚点逻辑
按钮实现跳转，别滥用 onclick
想让 button 具备跳转能力，优先用语义化方案：button 套 a，而不是写 onclick="window.location.href=..."：
<a href="/dashboard" style="display: inline-block;"><button>进入后台</button></a>
- 前者天然支持右键“在新标签打开”、浏览器历史回退、无障碍阅读器识别
- 后者无法被右键菜单操作，
Ctrl+Click会触发 JS 而非新开页，还绕过浏览器默认导航机制 - 若必须用 JS 控制（比如带参数校验），至少用
location.assign()替代直接赋值href，避免意外触发页面卸载
最容易被忽略的是：锚点 ID 的合法性 —— 它不是随便起个名字就行，必须符合 CSS 选择器对标识符的要求（字母开头，只含字母、数字、短横线、下划线），否则连 document.getElementById() 都拿不到，更别说浏览器自动滚动了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
