掌握HTML中超链接属性配置

时间：2026-06-07 10:12:46 编辑：袖梨来源：一聚教程网

超链接需严格遵循规范：href必须存在且格式正确，外部链接须带协议，相对路径需按文件位置计算，锚点跳转依赖大小写敏感的id，target="_blank"须配rel="noopener"防安全风险，mailto:/tel:链接需注意协议格式与客户端支持。

超链接不是加个 <a> 就完事的；href 必须有，否则它根本不是链接，只是个空标签。

浏览器只认合法 URL 格式，href 值缺失、拼错或漏协议都会让链接“点不动”：

外部网址必须带 https:// 或 http://，写成 href="www.example.com" 会被当作相对路径，实际请求的是当前域下的 /www.example.com
相对路径要按当前 HTML 文件位置算，比如页面在 /blog/post.html，想链到同级的 index.html，就得写 href="../index.html"，不是 href="/index.html"
href="#" 是合法的，但会跳到页面顶部；href="" 或 href="javascript:void(0)" 虽然常见，但语义错误、无障碍不友好，应避免

新窗口打开链接时，window.opener 允许新页面控制原页面。恶意站点可借此重定向你的页面甚至窃取信息：

必须配对使用：target="_blank" rel="noopener"（rel="noreferrer" 可选，会隐藏 Referer）
单独写 target="_blank" 而不加 rel，现代浏览器控制台会报 warning，且 Chrome/Firefox 已默认启用 noopener 行为，但不能依赖
如果链接目标可控（如 CMS 后台用户输入），还要过滤掉 javascript: 协议，防止 XSS

页面内跳转靠的是 href="#xxx" 匹配目标元素的 id="xxx"，不是 class 或其他属性：

立即学习“前端免费学习笔记（深入）”；

目标元素必须有 id，且值与 href 中 # 后面的部分**完全一致**（包括大小写、连字符、下划线）
id 值不能以数字开头（如 id="1section" 合法但部分旧浏览器兼容性差，推荐 id="section1"）
滚动行为可优化：加 scroll-behavior: smooth 到 <html> 或 <body> CSS 中，但这是样式层，不影响 href 本身有效性

这类协议链接不走 HTTP，而是调用系统默认应用，但格式错一个字符就失败：

mailto: 后跟邮箱地址，支持参数：href="mailto:[email protected]?subject=反馈&body=内容"，注意 & 是 HTML 实体，不是 &
tel: 后只能是数字、+、-、()、空格，如 href="tel:+86-138-8888-8888"；国际号码建议带 + 和国家码，避免歧义
没有客户端时点击无效，且无法用 JavaScript 捕获失败——它根本不发网络请求，所以别在 onclick 里做 fallback

最容易被忽略的是：href 的值是否被动态生成时意外截断、编码错误或未转义特殊字符；尤其是从后端模板或 JS 拼接时，&、"、空格这些会让整个属性提前结束。