href值写错协议或路径前缀会导致404，因浏览器字面解析不补协议、不猜路径；如href="www.example.com"被当作站内相对路径请求，而外链必须用完整协议如https://example.com。
href 值写错协议或路径前缀，页面直接 404
浏览器对 href 的解析是字面级的，不补协议、不猜路径。常见错误包括：
-
href="www.example.com"❌ —— 实际请求http://current-domain.com/www.example.com，变成站内相对路径 -
href="about.html"✅ —— 当前 HTML 所在目录下找 -
href="/about.html"✅ —— 从域名根目录开始找，适合全站统一结构 -
href="https://example.com"✅ —— 外链必须带完整协议；http://已被多数浏览器标记为不安全 -
href="#"❌ —— 无对应id时强制滚动到顶部，语义不清；占位建议用href="javascript:void(0)"或配合onclick="return false"
target="_blank" 不配 rel 属性，现代浏览器直接标红
只写 target="_blank" 是线上高频安全漏洞。Chrome、Edge、Firefox 均会拦截或报 Unsafe attempt to initiate navigation。
- 必须同时写
rel="noopener noreferrer"，缺一不可 -
noopener切断window.opener引用，防止新开页控制原页跳转或 DOM 操作 -
noreferrer阻止Referer头泄露来源 URL（尤其登录页、支付页） - Lighthouse、Chrome DevTools Security Panel 会明确标出未配
rel的链接
download 属性对跨域资源无效，行为完全失控
download 和锚点跳转都靠 href，但语义和处理逻辑完全不同：
- 下载链接必须指向同源文件路径，如
href="files/report.pdf"；加download="年度报告.pdf"可指定保存名 -
download对跨域资源无效（如href="https://cdn.example.com/file.zip"），浏览器忽略该属性，改为导航而非下载 - 邮件/电话链接要严格格式：
href="mailto:support@example.com"、href="tel:+8613800138000"；tel:中+和数字间不能有空格或短横
图片或块级元素做链接，可访问性和语义容易翻车
<a></a> 可以包裹 <img>、<div> 甚至 <code><button></button>，但不是包了就完事：
- 包裹
<img>时，<img>必须有alt属性，否则屏幕阅读器无法传达链接意图 - 包裹纯
<div> 时，需加 <code>tabindex="0"并监听Enter键，否则键盘用户无法激活 - 禁止嵌套
<button></button>——<a><button></button></a>是 HTML 无效结构，解析异常 - 本地
file://路径（如file:///D:/project/index.html）在 HTTP 服务下会被浏览器拦截，报Not allowed to load local resource；开发阶段必须走本地服务器（如 VS Code Live Server）
真正卡住线上项目的，往往不是“会不会写”，而是
href 路径层级混乱导致的 404，和 target="_blank" 漏掉 rel="noopener noreferrer" 引发的跨页控制风险。这两个点不检查，链接就算能点，也不算真正“可用”。
