内部链接优先用相对路径，外部资源必须用绝对url；锚点跳转需确保目标id存在且唯一；mailto:/tel:链接须加文字降级兜底；target="_blank"必须配rel="noopener"防安全风险。
内部链接优先用相对路径，外部资源必须用绝对 URL；锚点跳转要确保目标 id 存在且唯一；mailto: 和 tel: 链接需做降级兜底。
相对路径 vs 绝对路径怎么选
站内页面跳转（如从 /blog/index.html 到 /blog/post.html）一律用相对路径：href="post.html" 或 href="../about.html"。它不依赖部署路径，本地预览和上线后行为一致。
以下情况必须用绝对 URL：
- 指向第三方网站（
href="https://api.example.com/docs"） - 资源跨子域（
href="https://cdn.example.com/assets/logo.svg"） - 需要明确协议避免混合内容警告（HTTP 页面里不能用
http://加载资源）
根相对路径（href="/assets/css/main.css"）适合静态资源，但要注意：如果站点部署在子路径（如 https://example.com/myapp/），/ 会指向域名根，而非应用根，此时反而该用相对路径或动态拼接。
target="_blank" 的安全写法
加了 target="_blank" 却没配 rel，现代浏览器会报 Unsafe attempt to initiate navigation，甚至阻断跳转。
正确组合只有两种：
-
rel="noopener"：最常用，切断新页对原页window.opener的访问，防钓鱼和性能拖累 -
rel="noreferrer"：额外屏蔽Referer头，但会丢失来源统计；若需分析流量来源，别用这个
别写 rel="nofollow" 来“应付”控制台警告——它只影响 SEO 权重传递，跟 opener 安全完全无关。
锚点链接失效的常见原因
点击 href="#section-2" 却没滚动？先检查三件事：
- 目标元素是否存在且
id值完全匹配（大小写、连字符、空格都算不同） - 该
id在整个页面中是否唯一（重复id会导致浏览器取第一个） - 目标元素是否被
display: none或visibility: hidden隐藏——隐藏元素无法滚动定位
动态生成的内容（如 JS 渲染后插入的 id）要等 DOM 就绪后再触发跳转，否则可能找不到节点。
邮件与电话链接的兼容性处理
href="mailto:contact@example.com?subject=Hi" 和 href="tel:+8613800138000" 在桌面端依赖系统默认程序，在移动端基本可用，但有明显限制：
- 部分邮件客户端不支持
body参数里的换行或特殊字符，建议只传简单文本 - 没有安装对应 App 的设备（如某些 Linux 桌面环境）会直接失败，无任何提示
- 应提供文字说明作为降级，例如：
@#@#@#@#@#@#@#@#@#@0（如无法打开，请复制邮箱地址手动发送）
切勿把用户输入直接拼进 mailto: 或 tel: 的 URL 中——容易触发 XSS，务必先做 URL 编码或白名单校验。
最容易被忽略的是：相对路径在构建工具（如 Vite、Webpack）中可能被自动重写，而本地双击 HTML 文件时又不走 HTTP 服务，file:// 协议下很多路径规则会失效。开发阶段用本地服务器预览，比双击打开更贴近真实环境。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
