HTML超链接如何做？

a标签是创建超链接的唯一标准方式，href值应按场景选相对路径（站内跳转）或绝对路径（跨域/CDN），target="_blank"必须配合rel="noopener noreferrer"以防范安全与性能风险，锚点跳转需确保目标元素有合法id且链接带#号。

a 标签是唯一标准方式，没有替代方案。用错标签（比如用 div + JavaScript 模拟）会导致语义缺失、SEO 降权、键盘导航失效。

href 值写相对路径还是绝对路径？

取决于部署环境和维护成本：

• 站内跳转优先用相对路径：href="about.html"、href="pages/contact.html"、href="../index.html" —— 移动整个站点时不用改链接
• 绝对路径只在跨子域或 CDN 资源时用：href="https://cdn.example.com/logo.png"，但硬编码域名会让本地测试失败
• href="/products/list.html"（以 / 开头）是根相对路径，从域名根目录开始算，适合多级目录但需确保服务器配置支持

target="_blank" 必须配 rel="noopener noreferrer"

不加 rel="noopener noreferrer" 会带来两个实际风险：

• 安全漏洞：新页面可通过 window.opener 访问并控制原页面，可能被用于钓鱼或跳转劫持
• 性能拖累：原页面的 JavaScript 执行会被新页面阻塞，尤其在低端设备上明显卡顿
• 正确写法只有这一种：<a href="https://example.com" target="_blank" rel="noopener noreferrer">外部链接</a>

锚点跳转失效的常见原因

页面内跳转（如回到顶部、目录导航）出问题，90% 是 id 冲突或格式错误：

• 目标元素必须有 id 属性，不能只靠 name（HTML5 已废弃 name）：<h2 id="faq">常见问题</h2>
• 链接中引用要带 #：href="#faq"，不是 href="faq" 或 href="id=faq"
• id 值不能含空格、中文、特殊符号（如 id="用户指南" 或 id="section 2" 都会失败），只允许字母、数字、-、_
• 如果目标元素是动态插入的（比如 Vue/React 渲染后才出现），需确保 DOM 已就绪再触发跳转

真正容易被忽略的是：浏览器对锚点滚动行为默认不平滑，且部分旧版 Safari 不支持 scroll-behavior: smooth。如果设计要求滚动动画，得手动加 CSS 或 JS 补丁，不能只依赖 href="#xxx"。