a标签是唯一合法的超链接实现方式，必须用href正确书写协议头与路径，target="_blank"需配rel="noopener noreferrer"，锚点id仅支持字母数字短横线下划线，且需确保目标元素可见。
a 标签不是“插入超链接”的可选方案，而是唯一合法方式。所有跳转、锚点、邮件、下载行为都必须通过它实现，其他写法（比如用 div + onclick）属于降级或增强手段，不具语义、无 SEO 支持、键盘导航失效。
href 写错协议头就 404
外部链接必须带 https:// 或 http://，漏掉就会被当成相对路径。浏览器去当前目录找 www.baidu.com 这个文件，自然 404。
-
href="https://www.baidu.com"✅ -
href="www.baidu.com"❌（变成 ./www.baidu.com） -
href="//cdn.example.com/js/app.js"✅（协议相对，但仅适用于资源链接，不推荐用于跳转）
内部页面跳转不用协议头，但路径必须和文件系统一致：当前页在 /blog/index.html，要链到 /blog/about.html，就写 href="about.html"；若目标在 /team/profile.html，就得写 href="../team/profile.html"。
target="_blank" 必须配 rel="noopener noreferrer"
不加 rel 属性时，新页面可通过 window.opener 访问原页面的 document 和 location，存在安全风险，且影响性能（原页面无法被浏览器优化卸载）。
- 正确写法：
<a href="https://example.com" target="_blank" rel="noopener noreferrer">外部链接</a> - 如果只想要新标签页但不关心安全（如内网测试），至少保留
rel="noopener"；noreferrer会额外阻止Referer头发送 -
target="_self"是默认行为，无需显式写出
锚点 id 命名有硬限制
锚点靠 id 匹配，而 HTML id 的合法性直接决定跳转是否生效。浏览器对非法字符（空格、中文、点号、括号等）会静默忽略或截断，导致 href="#faq-1" 找不到 <div id="faq.1">。
- 只用小写字母、数字、短横线
-、下划线_，例如：id="contact-form"、id="section_2" - 避免以数字开头：
id="1st-section"合法但部分旧环境兼容性差，建议改用id="first-section" - 跨页锚点写法是
href="help.html#troubleshoot"，注意中间没有斜杠，也不是help.html/#troubleshoot
锚点滚动体验要手动优化
原生锚点跳转是瞬移，用户体验生硬。CSS 中加一行就能变平滑：
html {
scroll-behavior: smooth;
}
但要注意两点：
- 这个声明必须作用在
html或body上，写在div里无效 - 动态渲染的内容（如 Vue/React 组件挂载后才出现的
id元素），首次点击可能因 DOM 尚未就位而跳转失败；需等元素mounted后再触发element.scrollIntoView({ behavior: 'smooth' })
最易被忽略的是：锚点目标元素如果被 display: none 或 visibility: hidden 遮盖，跳转仍会发生，但用户看不到——因为浏览器只管滚动，不管是否可见。
