HTML5添加超链接的正确方法

文章不知道大家是否熟悉？今天我将给大家介绍《HTML5网页添加超链接方法详解》，这篇文章主要会讲到等等知识点，如果你在看完本篇文章后，有更好的建议或者发现哪里有问题，希望大家都能积极评论指出，谢谢！希望我们能一起加油进步！

HTML5中用标签加超链接必须带href属性，支持相对路径、绝对路径、完整URL及锚点跳转；新标签页打开需加target="_blank"和rel="noopener"；锚点跳转靠href="#id"与目标元素id匹配实现。

怎么用 标签加超链接

HTML5 里加链接只靠 标签，没有别的入口。它必须带 href 属性，否则不是有效链接，浏览器会忽略点击行为。

常见错误是写成 点我（没 href），或者误用 src（那是 用的）。

• href 值为相对路径（如 ./about.html、../index.html）时，按当前 HTML 文件所在目录计算
• 值为绝对路径（如 /contact.html）时，从网站根目录开始找
• 值为完整 URL（如 https://example.com）时，直接跳转到外部站点
• 想在新标签页打开，必须加 target="_blank"，同时建议加上 rel="noopener" 防安全风险

<a href="https://example.com" target="_blank" rel="noopener">访问官网</a>
<a href="./pages/help.html">帮助页面</a>
<a href="#section2">跳到本页第二节</a>

怎么实现页面内锚点跳转

锚点跳转本质是让浏览器滚动到同一页面中某个带 id 的元素位置，不需要 JS，纯 HTML 就能完成。

关键点：跳转链接的 href 必须以 # 开头，且后面的名字要和目标元素的 id 完全一致（区分大小写，不能有空格）。

• 目标元素可以是任意标签，比如

  常见问题

• 链接写成 去 FAQ 即可
• 如果目标 id 不存在，点击后地址栏会变（出现 #xxx），但页面不动，也不报错
• 注意：不要用中文或特殊符号作 id 值，容易因编码或解析出问题

href 常见错误值和后果

很多静态页链接失效，不是路径写错，而是用了不被浏览器识别的值。

• href="javascript:void(0)"：能阻止跳转，但语义错误，无障碍访问和 SEO 都不友好，静态页应避免
• href="#"：会跳到页面顶部，不是“无跳转”，慎用；如果真想空链接，至少加 onclick="return false;"
• href="file:///C:/xxx.html"：本地双击打开可能工作，但部署到服务器后必然失败，绝对不要用
• href="index.html?ref=1"：可以，但注意 URL 编码，参数含空格或中文时要用 %20、%E4%BD%A0 等

静态页链接要不要加 rel="nofollow"

对纯静态 HTML 网站，基本不用加 rel="nofollow"。

这个属性是给搜索引擎看的，意思是“别追踪这条链接的权重”。它只在以下场景有意义：

• 你链接了不可信的第三方网站（比如用户评论里提交的链接）
• 你做了广告合作，按协议需声明该链接不构成推荐
• 你用了自动生成的脚注或引用，且不想影响 SEO 权重分配

自己写的内部链接（如 ./about.html）、正规官网外链（如 https://github.com），都不需要加。加了反而可能让搜索引擎误解你的内容结构。

以上就是《HTML5添加超链接的正确方法》的详细内容，更多关于的资料请关注golang学习网公众号！