href支持的协议包括http:、https:、mailto:、tel:、ftp:、file:等，其中http/https默认启用且安全可控，mailto和tel用于触发邮件客户端与拨号界面，ftp已基本弃用，file在http环境被完全阻止；data:、javascript:等协议受限于csp策略或浏览器禁用，不推荐生产使用。
href 支持哪些协议？不是所有字符串都能当值用
浏览器对 href 值的协议有明确白名单，超出范围会被静默忽略或触发安全拦截。比如 javascript:alert(1) 虽然历史上能执行，但现代浏览器（尤其 Chromium 120+ 和 Safari 17+）默认禁用，除非页面显式启用 unsafe-eval CSP 策略——这本身就不该在生产环境开。
被广泛支持且无额外策略要求的协议只有这几个：
-
http:/https:—— 标准网页跳转，最安全、最可控 -
mailto:—— 触发邮件客户端，注意邮箱地址需符合 RFC 5322，中文需先encodeURIComponent() -
tel:—— 移动端拨号，号码必须不含空格、括号、破折号，只保留数字和+（如+8613800138000） -
ftp:—— 已基本弃用，主流浏览器默认禁用或弹出警告 -
file:—— 本地文件协议，仅在本地 HTML 文件双击打开时可能生效；HTTP(S) 环境下完全被阻止（CORS + 协议限制）
像 data:、blob:、about: 这类协议，<a></a> 标签不支持直接跳转（<iframe src="data:..."></iframe> 可以，但 <a href="data:..."></a> 不会下载或导航）。
为什么 href="javascript:void(0)" 在 iOS Safari 上点不动
这不是 bug，是 Safari 对非标准协议的主动降级：它把 javascript: 视为“无操作链接”，既不执行 JS，也不触发点击事件，甚至可能跳过 click 监听器。更糟的是，某些 iOS 版本还会把这类链接识别为“无效 href”，导致 a 元素失去焦点能力，影响键盘可访问性。
替代方案不是加更多兼容写法，而是换思路：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 纯交互用途（如展开菜单、触发动画）——改用
<button type="button"></button>，语义正确，无障碍友好，无协议限制 - 需要保留链接样式又得响应点击——用
href="#"+event.preventDefault()，但必须确保 JS 执行成功；SPA 场景下建议配合hashchange或框架路由 API - 动态生成链接且含用户输入内容——务必校验协议头，拒绝除
http:、https:、mailto:、tel:外的任何协议，防止 XSS 注入
href 值为空或空白时，浏览器到底在干什么
href=""、href=" "、href="\t" 这些看似“没写目标”的写法，浏览器不会报错，也不会当无效链接忽略。它会把当前页面 URL 当作跳转目标——等价于刷新当前页。
这在表单提交后重定向、或某些旧版 CMS 模板里很常见，但极易引发意外行为：
- 用户点击后页面闪一下，以为没点上，反复点击造成重复提交
- SPA 应用中，
href=""会触发完整页面 reload，绕过前端路由，丢失当前状态 - SEO 角度：搜索引擎把空
href当作指向首页的链接，可能稀释内链权重
真正想“禁用”链接，应该：aria-disabled="true" + tabindex="-1" + CSS pointer-events: none，而不是靠空 href“假装不可点”。
相对路径 vs 绝对路径：部署阶段最容易翻车的地方
路径问题从来不是语法错误，而是运行时 404。关键差异不在写法，而在解析时机和上下文绑定：
-
href="about.html"（普通相对路径）：从当前 HTML 文件所在目录开始找，移动 HTML 文件位置就断链 -
href="/about.html"（根相对路径）：从域名根目录开始找，适合部署在根路径（如https://example.com/），但若部署在子路径（如https://example.com/myapp/），就会 404 -
href="https://cdn.example.com/app.js"（绝对 URL）：完全绕过路径解析，但硬编码域名会让本地开发无法加载资源，CI/CD 中需配合环境变量替换
真实项目里最稳的做法是：构建工具（如 Webpack/Vite）自动注入 BASE_URL，模板中写 href="about.html" 或 href="${import.meta.env.BASE_URL}about.html"。手写路径等于把部署逻辑耦合进 HTML，改一次路径就得全量测试。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
