链接失效主因是href路径错误：本地路径或含空格/中文的相对路径非法；浏览器仅认绝对URL或合规相对路径；锚点ID须合法，target="_blank"必配rel="noopener"防安全风险。
href 属性写错路径，链接就失效
链接失效最常见原因不是代码漏写，而是 href 值写成了本地文件路径（如 href="C:\project\index.html"）或带空格/中文的相对路径（如 href="关于我们.html"）。浏览器只认两种合法格式：含协议的绝对 URL（https://example.com/page）或符合当前文件位置的相对路径（href="pages/contact.html"）。
- 本地双击打开 HTML 文件时，
/开头的路径会指向系统根目录，导致 404；此时必须用相对路径（如../assets/css/style.css）或完整 HTTP 地址 -
href=""不是“不跳转”，而是刷新当前页；真要禁用链接，得加href="javascript:void(0)"或用 JS 阻止默认行为 - 锚点链接必须匹配目标元素的
id，且id只能含字母、数字、短横线和下划线（id="faq-1"✅，id="常见问题?"❌）
target="_blank" 必须配 rel="noopener"
单独写 target="_blank" 会让新页面通过 window.opener 访问原页面的 window 对象，存在安全风险。这不是理论漏洞，而是实际可被利用的攻击面。
- 正确写法必须是：
@#@#@#@#@#@#@#@#@#@0 - 如果还要告诉搜索引擎不追踪该链接，可以叠加：
rel="noopener noreferrer nofollow" -
rel="noreferrer"会移除 Referer 头，但可能影响某些依赖 Referer 的统计或权限校验逻辑
图片当链接时，alt 和语义不能丢
把 <img> 嵌在 @#@#@#@#@#@#@#@#@#@1 中的 alt 必须描述链接目的，而不是图片本身（“耳机照片” ❌，“进入无线蓝牙耳机详情页” ✅）
alt="" 并确保父级 <a></a> 的文本已说明用途<a><div></div></a> 包裹纯视觉内容——语义错误，屏幕阅读器可能跳过或误读mailto: 和 tel: 链接要注意平台兼容性
mailto: 和 tel: 看似简单，但在不同环境表现差异大。
-
href="mailto:admin@example.com?subject=反馈&body=内容"中的subject和body参数，部分邮件客户端（如 Outlook Desktop）会忽略或截断；建议只用于基础收件人传递 -
tel:+8613800138000格式必须带国家码（+86），否则 iOS 可能识别失败；Android 一般更宽容 - 在非移动设备上点击
tel:链接会无响应，不要依赖它做唯一联系方式；应同时提供文字号码
真实项目里最容易被跳过的，是锚点 ID 的命名约束和 rel="noopener" 的强制搭配——它们不报错，但要么跳转失败，要么埋下安全隐患。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
