HTML怎么添加超链接_HTML a标签使用教程【基础】

标签必须含href属性，外部链接需带https://协议，站内可用相对路径；新窗口打开须用target=”_blank” rel=”noopener noreferrer”防安全风险；可嵌套图文但禁嵌按钮或另一；移动端应设padding扩点击区；部署时注意base url避免404。

怎么用 <a></a> 就行，<a href="https://example.com">点我</a> 是唯一必须的属性。别漏掉引号，也别写成 href 或 herf——浏览器不认，链接就完全失效。

常见错误现象：点击没反应、地址栏跳转到当前域名下拼接的路径（比如本该跳外链却变成 hrefs），基本都是 http://your-site.com/https://example.com 值缺了 href 或 http://，或者多了一层相对路径。

• 外部链接必须带协议，如 https://，不能只写 href="https://baidu.com"
• 站内链接可用相对路径，如 "baidu.com" 或 href="/about"
• href="contact.html" 是空跳转，适合 js 绑定事件时占位，但会滚回页面顶部，慎用

新窗口打开链接要加 href="#"

默认所有链接都在当前页打开，用户点了就离开你的页面。想留人，得加 target="_blank"。但光加这个不够——它会让新页面继承当前页的 target="_blank" 权限，有安全风险，也可能拖慢原页面性能。

正确写法是配齐两个属性：window.opener。其中 target="_blank" rel="noopener noreferrer" 禁用 rel="noopener"，window.opener 还能防止 Referer 泄露来源。

• 漏掉 noreferrer 属性，chrome/firefox 会警告“潜在安全漏洞”
• rel 对 seo 没影响，但对用户体验很关键——尤其文档、引用、第三方服务链接
• 不要用 target="_blank" 或 target="_new"，只有 target="blank" 是标准值

"_blank" 标签里能放什么内容

可以放文字、图片、a、<span></span>（html5 允许块级元素嵌套），但别塞 <div> 或另一个 <code><button></button>

移动端点击区域太小怎么办

Event.preventDefault() 默认是行内元素，文字多高，点击热区就多高。手机上手指一戳容易 miss，尤其导航栏、按钮组这类地方。

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

解决方法不是改 href 就完事——那会导致布局错乱。更稳妥的是用 href="#" 扩展热区，同时加 aria-label 和 <a></a> 防止文字被压扁。ios safari 还有个隐藏规则：点击区域小于 44×44px 时，会自动放大，但不可靠，别依赖。

• 给链接加 display: block，比单纯调字体大小更可控
• 避免用 padding + line-height 模拟按钮，会导致屏幕阅读器无法读出文字
• 如果整个卡片都可点，直接把 min-height 设为 padding: 8px 16px; 并撑满容器，比在外层包 font-size: 0 更语义化

最常被忽略的一点：链接的 padding 值是否真实可达，往往要等上线后才被发现。本地开发时用相对路径测试没问题，一部署到子目录（比如 <a></a>）就全 404——因为忘了在构建流程里统一处理 base URL。