a标签必须添加href属性，否则仅为占位符、不可点击且不被屏幕阅读器识别；正确写法为href="#"或href="javascript:void(0)"，并注意协议类型、target="_blank"需配rel="noopener noreferrer"及路径规范。
href 属性必须填，否则 a 标签不是链接
没加 href 的 <a> 标签在 HTML5 中只是个占位符，点击无效，也不被屏幕阅读器识别为可交互元素。浏览器不会给它默认的蓝色+下划线样式，CSS 伪类（如 a:link、a:hover）也失效。
常见错误现象：
- 写了
<a>点击跳转</a>，但点不动 - 加了 CSS 却发现
a:hover不生效 - SEO 工具提示“链接缺失目标”，搜索引擎不抓取该节点
正确写法必须带 href 值，哪怕只是临时占位，也要写成 href="#" 或 href="javascript:void(0)"（后者更安全，避免页面跳顶）。
href 支持的协议类型和典型值
href 不只是填网址那么简单，它的值决定浏览器行为。不同前缀触发完全不同的动作：
-
https://example.com：标准网页跳转（推荐用https，http在现代浏览器可能被拦截） -
./about.html或../assets/file.pdf：相对路径，依赖当前 HTML 文件位置解析 -
#section2：页面内锚点跳转，要求目标元素有对应id="section2" -
mailto:support@example.com：唤起默认邮件客户端，可附加主题和正文：mailto:support@example.com?subject=反馈&body=内容 -
tel:+8613800138000：在移动端唤起拨号界面（注意加国际区号，+不能省略） -
javascript:alert('hello')：执行 JS（不推荐，有 XSS 风险；优先用onclick+href="#"）
特别注意：file:// 协议在多数现代浏览器中被禁用（出于安全限制），本地双击打开 HTML 时可能失效。
target="_blank" 必须配 rel="noopener noreferrer"
单独写 target="_blank" 会带来两个实际风险：
- 新页面可通过
window.opener访问原页面的window对象，存在安全隐患 - 新页面未关闭前，原页面 JavaScript 执行可能被阻塞（尤其在低端设备）
正确写法是：
<a href="https://example.com" target="_blank" rel="noopener noreferrer">外部链接</a>
rel="noopener" 切断 window.opener 引用；noreferrer 还能阻止 Referer 头泄露来源 URL。两者缺一不可——漏掉 noopener 就等于没防护。
相对路径 vs 绝对路径：部署时最容易翻车的地方
开发时用 href="page.html" 看起来没问题，但上线后常 404，原因在于路径解析规则：
- 相对路径以当前 HTML 文件所在目录为基准，不是以项目根目录
- 如果页面 URL 是
https://site.com/blog/post/2024/，那么href="index.html"实际请求的是/blog/post/2024/index.html，而非根目录下的/index.html - 使用
/about.html（开头带斜杠）才是从根目录开始的“根相对路径”，比纯相对路径更可控
建议策略：
- 站内导航统一用根相对路径：
href="/products"、href="/contact" - 静态资源（图片/CSS/JS）可用相对路径，但确保构建工具（如 Webpack/Vite）已正确处理 public 目录
- 避免混用：
href="../css/style.css"和href="/api/data.json"容易让人误判层级
路径问题往往只在部署到子目录（如 https://site.com/app/）时暴露，本地开发服务器通常不模拟这种结构，所以测试阶段容易忽略。
