在博客文章里插入一个可以点击的链接，是HTML最基础也是最常用的功能。不管是引导读者跳转到另一篇文章、一个外部网站，还是页面内的某个位置，靠的都是同一个东西：超链接。不少刚接触HTML的朋友面对编辑器的源代码模式时，经常卡在不知道这段链接代码该怎么敲，其实核心语法只有一行，掌握之后稍微变一变就能应付博客里几乎所有的跳转需求。下面把完整写法、常见场景和容易踩的坑一次性讲清楚。
基础语法：一个a标签就能搞定
HTML里的链接由<a>标签实现，它的标准结构是：开头写<a href="网址">，中间放你想让读者看到的文字，最后以</a>收尾。href是必须的属性，用来告诉浏览器点击之后要跳到哪里去；夹在中间的文字叫做锚文本，通常会以蓝色下划线的默认样式显示在页面上，具体外观取决于博客主题的CSS设置。整行代码写完之后，读者点击这段文字，浏览器就会加载href里填的那个地址。
<a href="https://www.ipipp.com">点击这里访问网站</a>
把上面这一行粘到博客编辑器的源代码模式（有的编辑器叫HTML模式或者文本模式）里，发布后就能看到一个可点击的链接。href的值必须用英文双引号包起来，网址部分要写完整，尤其是跳转到别人网站时，开头的https://不能省，否则浏览器会把它当成你博客站内的一个页面路径去寻找，结果自然是404。
另外要注意，<a>是成对出现的标签，结尾的</a>千万别漏。漏掉之后浏览器会把后面的整段文字都当成链接内容，页面会出现一大片蓝色可点击区域，视觉效果非常奇怪。这是新手最容易犯的错误之一，遇到页面文字全部变蓝的情况，第一时间检查最近的链接代码有没有正常闭合。
博客里最常见的四种链接场景
真实写博客时，链接的指向对象通常分几类，写法上各有细微差别，但骨架完全一样，都是href属性换个值的事。
第一种是外部链接，也就是跳到别的网站。href里直接写完整的网址，包含协议部分，这是最标准的写法：
<a href="https://www.ipipp.com">推荐一个不错的网站</a>
第二种是站内链接，指向自己博客的另一篇文章或页面。这时可以用相对路径，省去域名部分，写起来更短，而且以后换域名也不用批量修改。假设你的博客目录下有一个articles文件夹，里面放了旧文章：
<a href="/articles/html-tutorial.html">上一篇：HTML入门教程</a>
路径开头的斜杠表示从网站根目录算起。如果目标文件和当前文章在同一个目录下，直接写文件名就行，比如href="about.html"。相对路径的逻辑一时搞不清楚也没关系，有个偷懒办法：先在浏览器里打开目标文章，把地址栏的完整网址复制进href，虽然长一点但绝对不会错。
第三种是锚点链接，点击后不跳转页面，而是滚动到当前页面的某个位置，长文章里做目录导航特别好用。做法是先给目标元素加一个id，然后让href的值以井号开头加上这个id：
<h2 id="section-3">第三节：进阶用法</h2> <p><a href="#section-3">直接跳到第三节</a></p>
第四种是邮箱链接，点击后调起访问者的邮件客户端，把href的值换成mailto:开头加邮箱地址即可：
<a href="mailto:contact@ipipp.com">有问题给我发邮件</a>
顺带补充一个也常用的变体：图片链接。把<img>标签整个放进<a>标签中间，图片本身就变成了可点击的入口，很多博客的banner图就是这么做的：
<a href="https://www.ipipp.com"> <img src="banner.png" alt="横幅图片"> </a>
target和rel属性：新窗口打开与安全细节
默认情况下，点击链接后浏览器会在当前标签页直接跳转，读者就离开了你的博客。写博客的人通常更希望外部链接在新标签页打开，这样读者看完外部内容回来时你的页面还在。这就需要给<a>标签加上target属性，值为_blank：
<a href="https://www.ipipp.com" target="_blank" rel="noopener noreferrer">在新窗口打开</a>
上面代码里同时出现了rel属性，这不是多余的。当target为_blank时，老一点的浏览器存在一个安全隐患：新打开的页面可以通过window.opener拿到前一个页面的控制权，理论上能被恶意页面利用去做钓鱼跳转。加上rel="noopener noreferrer"之后，这个通道就被切断了。现代浏览器的新标签页默认已经隔离了opener，但显式写上依然是推荐做法，兼容性更稳。
rel还有一个博客作者很在意的值：nofollow。如果你在文章里引用了不想传递权重的链接，比如纯粹用来举例的站点，写成rel="nofollow"可以告诉搜索引擎不要追踪这个链接，对SEO的权重分配更可控。多个rel值可以写在同一个属性里，用空格隔开，例如rel="nofollow noopener"。
新手最容易踩的坑与排查方法
链接代码看起来简单，但实际敲的时候翻车的频率不低，下面这几个问题占了绝大多数。
第一是引号问题。href的值必须用英文双引号包裹，中文输入法打出来的引号是不行的，浏览器无法识别会导致整个链接失效或者渲染错乱。切换输入法到英文状态再敲引号，或者写完后肉眼检查一遍引号形状：英文引号是笔直的，中文引号是弯的，一眼就能分辨。
第二是标签没闭合，前面已经提过。症状是链接后面的文字跟着变蓝，检查</a>是否遗漏即可。
第三是路径写错，尤其是相对路径。症状是点击链接后出现404页面。排查方法是看浏览器地址栏实际跳到的地址，和服务器上文件的真实位置对比，多半是少写或者多写了一层目录。
第四是网址里混入了多余空格或者换行。从别处复制网址时偶尔会带上看不见的空格，href的值中间一旦断开，链接就会失效。复制后手动检查一遍值的首尾是稳妥的习惯。
最后给一个可以直接跑的完整小例子，把本文讲的几个要点都串了起来，复制到本地的html文件里用浏览器打开就能测试：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>链接练习页</title> </head> <body> <h1>我的博客文章</h1> <p>延伸阅读请看<a href="/articles/old-post.html">这篇旧文</a>。</p> <p>外部参考<a href="https://www.ipipp.com" target="_blank" rel="noopener noreferrer">点击新窗口打开</a>。</p> <p><a href="#bottom">跳到页尾</a></p> <p>正文内容，可以写很多很多段。</p> <p id="bottom">这里是页尾。</p> </body> </html>
掌握这些内容之后，博客里百分之九十的链接需求都能自己手写解决。剩下的高级玩法，比如用CSS改变链接的悬停颜色、给链接加小图标，都是在<a>标签的基础上做样式层的事，语法本身不会再变。先把这一行标准结构练熟，后面的扩展都是水到渠成。