标签必须含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" -
href="#"是空跳转，适合 JS 绑定事件时占位，但会滚回页面顶部，慎用
新窗口打开链接要加 target="_blank"
默认所有链接都在当前页打开，用户点了就离开你的页面。想留人，得加 target="_blank"。但光加这个不够——它会让新页面继承当前页的 window.opener 权限，有安全风险，也可能拖慢原页面性能。
正确写法是配齐两个属性：target="_blank" rel="noopener noreferrer"。其中 rel="noopener" 禁用 window.opener，noreferrer 还能防止 Referer 泄露来源。
立即学习“前端免费学习笔记（深入）”；
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 漏掉
rel属性，Chrome/Firefox 会警告“潜在安全漏洞” -
target="_blank"对 SEO 没影响，但对用户体验很关键——尤其文档、引用、第三方服务链接 - 不要用
target="_new"或target="blank"，只有"_blank"是标准值
a 标签里能放什么内容
可以放文字、图片、<span></span>、<div>（HTML5 允许块级元素嵌套），但别塞 <code><button></button> 或另一个 <a></a>——语义冲突，部分浏览器会静默忽略内层链接，或触发可访问性报错。
使用场景上，按钮式链接（比如“立即下载”）建议用 <a></a> + CSS 样式，而不是套个 <button></button> 再 JS 跳转——前者天然支持右键另存、中键新标签、SEO 抓取，后者全是补丁。
- 含图标+文字的链接，推荐
<a href="..."><img src="icon.png" alt="HTML怎么添加超链接_HTML a标签使用教程【基础】" > 下载 PDF</a> - 如果必须用 JS 控制跳转（比如权限校验后才放行），保留
href值并用event.preventDefault()拦截，别删掉href - 空链接（
href="#"）务必加上aria-label，否则读屏器会念“井号”，毫无意义
移动端点击区域太小怎么办
<a></a> 默认是行内元素，文字多高，点击热区就多高。手机上手指一戳容易 miss，尤其导航栏、按钮组这类地方。
解决方法不是改 display: block 就完事——那会导致布局错乱。更稳妥的是用 padding 扩展热区，同时加 line-height 和 min-height 防止文字被压扁。iOS Safari 还有个隐藏规则：点击区域小于 44×44px 时，会自动放大，但不可靠，别依赖。
- 给链接加
padding: 8px 16px;，比单纯调字体大小更可控 - 避免用
font-size: 0+padding模拟按钮，会导致屏幕阅读器无法读出文字 - 如果整个卡片都可点，直接把
<a></a>设为display: block并撑满容器，比在外层包<div> 更语义化 <p>最常被忽略的一点：链接的 <code>href值是否真实可达，往往要等上线后才被发现。本地开发时用相对路径测试没问题，一部署到子目录（比如https://site.com/blog/）就全 404——因为忘了在构建流程里统一处理 base URL。
