HTML中a标签怎么用？超链接教程

在HTML中，`

这里的href（hypertext reference）属性是关键，它指定了链接的目标地址。可以是：

• 绝对URL： 指向互联网上任何地方的完整网址，比如 https://www.example.com/page.html。
• 相对URL： 指向同一网站内其他页面的地址，比如 ../images/picture.jpg 或 about.html。这在构建网站内部导航时特别方便，因为你不需要关心域名变动。
• 锚点链接： 指向当前页面或另一个页面中带有特定id属性的元素，格式是 #sectionID。
• 电子邮件链接： mailto:email@example.com，点击后会打开用户的默认邮件客户端。
• 电话链接： tel:+1234567890，在支持的设备上点击后可以直接拨打电话。

除了href，标签还有几个常用的属性，它们能让你的链接体验更好：

• target： 控制链接打开的方式。
  • _self（默认）：在当前窗口/标签页打开。
  • _blank：在新窗口或新标签页打开。这对于外部链接非常有用，可以避免用户离开你的网站。
  • _parent：在父框架中打开（主要用于框架集）。
  • _top：在整个浏览器窗口中打开，取消所有框架（也主要用于框架集）。
• title： 当鼠标悬停在链接上时，会显示这个属性的值作为工具提示。这对于用户体验和可访问性都很好。
• rel： 描述当前文档与目标文档之间的关系。例如，rel="noopener noreferrer" 常用在 target="_blank" 的链接上，以提高安全性，防止目标页面对来源页面进行恶意操作。

示例：

<!-- 链接到外部网站，在新标签页打开，并添加安全属性 -->
<p>访问我的<a href="https://www.example.com" target="_blank" rel="noopener noreferrer" title="前往示例网站">个人博客</a>。</p>

<!-- 链接到同一网站的另一个页面 -->
<p>了解更多关于<a href="about.html">我们</a>。</p>

<!-- 链接到当前页面内的某个部分 -->
<p><a href="#contact-info">跳到联系方式</a></p>

<!-- 电子邮件链接 -->
<p>给我发送邮件：<a href="mailto:info@example.com">info@example.com</a></p>

<!-- 电话链接 -->
<p>拨打我们的电话：<a href="tel:+1234567890">+123 456 7890</a></p>

<!-- 链接一张图片 -->
<a href="https://unsplash.com/photos/a-person-standing-on-top-of-a-mountain-at-sunset-Q0j-5a9m470">
  <img src="sunset.jpg" alt="美丽的日落景色" style="width:200px;">
</a>

a标签的href属性有哪些常用值和用法？

href属性是标签的灵魂，它决定了链接的“目的地”。它的值非常灵活，可以指向各种资源。从我个人的经验来看，最常用的无非就是几种模式：

首先是完整的网页地址，也就是我们常说的绝对URL。比如你想链接到Google，那就是Google。这种方式最直接，但缺点是如果你的网站域名变了，或者目标网站的URL结构调整了，你就得手动更新。不过，对于外部链接，这是唯一的选择。

其次是相对路径，这在构建网站内部导航时简直是神器。假设你的网站结构是这样的：

/
├── index.html
├── about/
│   └── about.html
└── assets/
    └── images/
        └── logo.png

如果你在index.html里想链接到about.html，可以直接写关于我们。如果你在about.html里想链接回index.html，可以写首页。这种方式的好处是，整个网站可以随意迁移到任何域名下，链接依然有效，因为它们是相对于文件系统而言的。我经常看到一些新手在内部链接上也用绝对路径，这其实给自己挖了个坑，未来维护起来会很麻烦。

再来是锚点链接，这在单页应用或者内容很长的页面里特别实用。比如你写了一篇很长的文章，想让读者能快速跳转到某个小节，你就可以在目标小节的某个元素上加上id属性，比如

引言

还有一些不那么常见的，但同样有用的href值。例如，邮件链接，href="mailto:your_email@example.com"，点击后会尝试打开用户的默认邮件客户端并预填收件人地址。这在联系方式页面很常见。类似地，电话链接href="tel:+1234567890"在移动设备上点击可以直接拨打电话。虽然这些不是传统意义上的“网页链接”，但它们同样利用了标签的跳转能力，极大地扩展了其应用场景。

如何控制超链接的打开方式？target属性的奥秘

target属性，这个小东西，在用户体验设计里扮演着一个微妙但重要的角色。它的“奥秘”在于，它能决定用户点击链接后，新的内容是在当前页面加载，还是在一个全新的浏览器标签页（或窗口）中打开。

最常见的，也是默认的行为，是target="_self"。这意味着链接会在当前浏览器标签页中打开，直接替换掉你正在看的页面。对于内部链接，这通常是最好的选择。用户在你的网站内部导航时，他们期望的是在一个连贯的环境中操作，而不是每点一个链接就跳出一个新标签页，那样会很快堆积起一堆标签，让人感到混乱和疲惫。

然而，当你的链接指向外部网站时，target="_blank"就显得非常必要了。它会强制链接在一个新的标签页中打开。这样一来，用户既能访问外部资源，你的网站页面也依然保留在原来的标签页中。这就像是给用户开了一扇通往外部世界的门，但同时又留住了他们在你“家”里的位置。设想一下，如果每次点外部链接都直接跳转了，用户可能就再也回不来了。但这里有个小陷阱，为了安全考虑，当使用target="_blank"时，最好同时加上rel="noopener noreferrer"。这能防止新打开的页面通过JavaScript访问或控制你的原始页面，避免一些潜在的安全漏洞（比如钓鱼攻击）。我见过不少网站因为忽略了这个，导致用户体验和安全都打了折扣。

至于_parent和_top，它们更多是历史遗留问题，主要用于早期的HTML框架（