标签必须带正确href属性才有效：需完整协议（如https://）、根路径（/开头）、相对路径或锚点（#），禁用无协议网址和单独#；外链须加rel="noopener noreferrer"防安全漏洞；下载用download属性但跨域无效；图片链接需href和alt，title不替代aria-label。
<a></a> 标签必须带 href 属性才有效，不写或写错协议（比如只写 www.example.com）会导致链接变成相对路径，点开是 404 或跳到错误地址。
href 值怎么填才不会跳错
常见错误是把网址当字符串抄，漏掉协议或路径前缀。浏览器对 href 的解析非常严格：
-
href="https://example.com"✅ 完整协议 + 域名，外部链接首选 -
href="/about.html"✅ 以/开头，从根目录算起，适合全站统一路径结构 -
href="about.html"✅ 同级目录，当前 HTML 文件和目标文件在同一层 -
href="pages/contact.html"✅ 相对子目录，注意路径是相对于当前 HTML 文件位置，不是相对于项目根目录 -
href="#"❌ 不要单独用，会跳到页面顶部且触发默认滚动，想占位就用href="javascript:void(0)"或加onclick="return false" -
href="www.example.com"❌ 缺https://，实际请求变成http://current-domain.com/www.example.com
target="_blank" 必须配 rel="noopener noreferrer"
只写 target="_blank" 是线上项目高频安全漏洞。新打开的页面可通过 window.opener 访问原页面 DOM，甚至执行跳转、窃取信息。
正确写法只有这一种：
<a href="https://example.com" target="_blank" rel="noopener noreferrer">外部链接</a>
其中：
-
noopener切断window.opener引用，防止恶意页面控制原页 -
noreferrer阻止Referer头泄露来源 URL（尤其敏感页面） - 漏掉任意一个，现代浏览器审计工具（如 Lighthouse、Chrome DevTools Security Panel）都会标红警告
锚点链接和下载链接的写法差异
两者都用 href，但语义和行为完全不同，不能混用：
- 锚点跳转：
href="#section2"，目标元素必须有对应id="section2"，且不能加协议或路径 - 文件下载：直接指向文件路径即可，如
href="files/report.pdf"；若想强制下载并指定文件名，加download="年度报告.pdf"属性 - 邮件/电话链接：
href="mailto:support@example.com"或href="tel:+8613800138000"，注意tel:中的+和数字间不能有空格或短横 -
download属性对跨域资源无效（比如href="https://cdn.example.com/file.zip"），浏览器会忽略该属性，直接导航而非下载
图片链接和 title 提示的实用细节
把 <img> 放进 <a></a> 里就能让图片可点击，但有两个易忽略点：
- 图片链接仍需
href，否则只是普通图片，没有手型光标和下划线样式 -
title属性不是装饰：它在鼠标悬停时显示提示，对可访问性（screen reader）和 SEO 有实际作用，别省略 - 如果链接内容是纯图片（无文字），务必补上
alt属性，否则屏幕阅读器无法描述该链接用途 - 不要用
title替代aria-label做无障碍说明，前者仅悬停可见，后者才是标准可访问方案
真正麻烦的从来不是怎么写，而是路径层级、协议缺失、rel 属性遗漏、跨域 download 失效这些细节——它们往往在上线后才暴露，而且一出就是线上事故。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
