正确使用<a>标签需注意：href必须加引号并带协议（如https://），相对路径以当前HTML文件位置为基准，target="_blank"必须配rel="noopener"，图片链接须用<a>包裹<img>，所有链接上线前须真实访问验证。
直接用 <a> 标签加 href 属性就能跳转，但写错路径、漏引号、乱用 target="_blank" 是导致链接失效或被拦截的最常见原因。
href 值必须带引号且协议不能少
浏览器会把没引号的 href=https://example.com 当成属性名，现代浏览器直接忽略；href="example.com" 会被当成相对路径，实际请求的是 http://当前域名/example.com，不是你想去的地方。
-
href必须用双引号或单引号包裹，例如href="about.html"或href='https://site.com' - 外部链接必须带协议：用
https://，别写www.example.com或//example.com（后者虽能工作但不保险） - 本地测试时
file:///开头的路径上线必挂，生产环境一律禁用 - 相对路径以当前 HTML 文件所在目录为基准，不是编辑器打开的文件夹，也不是浏览器地址栏显示的路径
相对路径怎么写才不 404
路径算错是静态页上线后链接大面积失效的主因。关键看当前 HTML 文件位置，而不是你“觉得”它在哪。
- 同级跳转：当前页是
/blog/index.html，想跳about.html→href="about.html" - 上一级跳转：跳
/contact.html→href="../contact.html"（不是../contact或contact/） - 子目录跳转：跳
/blog/post1.html→href="post1.html"；跳/assets/pdf/report.pdf→href="../assets/pdf/report.pdf" - 根相对路径（以
/开头）在file://协议下打不开，只适合部署到 HTTP(S) 服务器后使用
target="_blank" 不配 rel="noopener" 就别用
加了 target="_blank" 却不加 rel="noopener"，新页面可通过 window.opener 修改原页面 DOM，这是明确的安全漏洞，不是“建议修复”，而是必须堵住。
立即学习“前端免费学习笔记（深入）”；
- 正确写法只有这一种：
<a href="https://example.com" target="_blank" rel="noopener">外部链接</a> -
rel="noreferrer"可选，它额外阻止 Referer 头发送，但noopener已解决核心风险 - 移动端 Safari 对
_blank支持不稳定，部分场景静默降级为当前页跳转，别依赖它保证体验 - 纯站内跳转（如
./product.html）完全没必要开新标签页，反而增加用户负担
图片当链接时只能用 <a> 包裹 <img>
<img href="..."> 是无效写法，浏览器根本不识别；onclick="location.href=..." 看似能跳，但会破坏右键菜单、键盘 Tab 焦点、屏幕阅读器语义，还可能被 CSP 或广告拦截器阻断。
- 唯一合规做法：
<a href="product.html"><img src="p1.jpg" alt="iPhone 15 Pro 详情页"></a> -
alt必须描述链接目标，不是图片内容本身；功能型图片（导航图标、商品图）不能写alt=""或alt="图片" - 如果要动态换图+换链接，改元素属性（
linkEl.href、imgEl.src），别用innerHTML重写整段，否则事件监听器和焦点状态全丢
所有跳转链接上线前，必须在真实浏览器地址栏里手动访问一遍目标 URL，不能只靠“代码看起来对”。路径大小写、末尾斜杠、查询参数编码、<base> 标签影响——这些细节本地开发时往往不暴露问题，一上生产就集体失效。
