如何在HTML中添加超链接|极客教程

如何在HTML中添加超链接

超链接是HTML中常用的一个标签，用于实现页面之间的跳转。在本文中，我们将详细介绍如何在HTML中添加超链接，包括常见的超链接语法和属性，以及不同类型的超链接。

1. 创建基本超链接

在HTML中，使用<a>标签可以创建超链接。其中，href属性用于指定链接的目标地址，即点击链接后要跳转到的页面或资源。

<!DOCTYPE html>
<html>
<head>
  <title>基本超链接示例</title>
</head>
<body>

<a href="https://www.how2html.com">点击跳转至how2html网站</a>

</body>
</html>

Output:

如何在HTML中添加超链接

2. 为超链接添加标题

可以使用title属性为超链接添加鼠标悬停时显示的提示信息。

<!DOCTYPE html>
<html>
<head>
  <title>超链接标题示例</title>
</head>
<body>

<a href="https://www.how2html.com" title="学习HTML">点击跳转至how2html网站</a>

</body>
</html>

Output:

如何在HTML中添加超链接

3. 使用文本作为超链接

除了直接在<a>标签中添加文本内容作为链接，还可以使用其他标签内的文本内容作为链接。

<!DOCTYPE html>
<html>
<head>
  <title>文本超链接示例</title>
</head>
<body>

<p>访问<a href="https://www.how2html.com">how2html网站</a>获取更多HTML学习资源。</p>

</body>
</html>

Output:

如何在HTML中添加超链接

4. 在新标签页中打开超链接

通过在超链接中添加target="_blank"属性，可以指定链接在新标签页中打开。

<!DOCTYPE html>
<html>
<head>
  <title>新标签页超链接示例</title>
</head>
<body>

<a href="https://www.how2html.com" target="_blank">在新标签页打开how2html网站</a>

</body>
</html>

Output:

如何在HTML中添加超链接

5. 添加锚点链接

在HTML中，可以使用锚点链接实现页面内的跳转。通过在目标位置添加id属性，并在超链接中使用#符号+id值，即可快速跳转至目标位置。

<!DOCTYPE html>
<html>
<head>
  <title>锚点链接示例</title>
</head>
<body>

<a href="#section1">跳转至第一节</a>
<a href="#section2">跳转至第二节</a>

<h3 id="section1">第一节内容</h3>
<p>这是第一节的内容。</p>

<h3 id="section2">第二节内容</h3>
<p>这是第二节的内容。</p>

</body>
</html>

Output:

如何在HTML中添加超链接

6. 添加邮箱链接

使用mailto协议可以创建邮箱链接，点击链接后将自动打开用户默认邮件客户端，填写目标邮箱地址。

<!DOCTYPE html>
<html>
<head>
  <title>邮箱链接示例</title>
</head>
<body>

<a href="mailto:example@email.com">给我们发邮件</a>

</body>
</html>

Output:

如何在HTML中添加超链接

7. 添加电话链接

在移动端网页中，可以使用tel协议创建电话链接，点击链接后将自动拨打电话号码。

<!DOCTYPE html>
<html>
<head>
  <title>电话链接示例</title>
</head>
<body>

<a href="tel:1234567890">拨打我们的联系电话</a>

</body>
</html>

Output:

如何在HTML中添加超链接

8. 添加下载链接

通过设置download属性，可以为链接指定文件下载。点击链接将自动下载指定文件，而非在浏览器中打开。

<!DOCTYPE html>
<html>
<head>
  <title>下载链接示例</title>
</head>
<body>

<a href="https://www.how2html.com/example.pdf" download>下载示例PDF文件</a>

</body>
</html>

Output:

如何在HTML中添加超链接

9. 添加图像链接

在<a>标签内部添加<img>标签，即可创建图像链接，点击图像将跳转至指定链接。

<!DOCTYPE html>
<html>
<head>
  <title>图像链接示例</title>
</head>
<body>

<a href="https://www.how2html.com">
  <img src="https://how2html.com/wp-content/themes/dux/img/logo.png" alt="图片链接">
</a>

</body>
</html>

Output:

如何在HTML中添加超链接

10. 绝对路径与相对路径

在href属性中，除了可以使用绝对路径指定完整的URL外，还可以使用相对路径指定相对于当前页面的URL。

<!DOCTYPE html>
<html>
<head>
  <title>路径链接示例</title>
</head>
<body>

<!-- 绝对路径 -->
<a href="https://www.how2html.com">绝对路径链接</a>

<!-- 相对路径 -->
<a href="page2.html">相对路径链接</a>

</body>
</html>