主题
  • 默认模式
  • 浅蓝色模式
  • 淡红色模式
  • 深夜模式

什么是 HTML 链接?

在 HTML 中,链接是用于在网页中,创建超链接的 HTML 元素。

允许用户点击后跳转到其他页面、文件、电子邮件地址或页面内的特定位置。


外部链接

指向其他网站的链接,当用户点击该链接时,会跳转到外部网站。

实例代码 运行代码
复制
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>开创者教程(kaicz.com)</title>
</head>
<body>
      <!-- 这是一个指向开创者教程的外部链接 -->
      <a href="https://www.kaicz.com">访问开创者教程</a>
</body>
</html>

在上述代码中,<a>标签是超链接标签,href属性指定了链接的目标地址,即用户点击链接后要跳转的页面。


内部链接

指向同一网站内其他页面的链接,可帮助用户在网站内部进行导航。

实例代码 运行代码
复制
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>开创者教程(kaicz.com)</title>
</head>
<body>
      <!-- 假设当前页面为 index.html,点击链接会跳转到 about.html 页面 -->
      <a href="about.html">关于我们</a>
</body>
</html>

这里的<href>属性值是相对路径,指向同一目录下的 about.html 页面。


锚点链接

用于在同一页面内跳转到指定位置,通常用于长页面的导航。

实例代码 运行代码
复制
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>开创者教程(kaicz.com)</title>
</head>
<body>
    <!-- 跳转到页面中 id 为 section2 的元素位置 -->
    <a href="#section2">跳转到第二部分</a>

    <h2 id="section1">第一部分</h2>
    <p>这是第一部分的内容。</p>

    <h2 id="section2">第二部分</h2>
    <p>这是第二部分的内容。</p>
</body>
</html>

在这个例子中,<href>属性值以 # 开头,后面跟着目标元素的 id 值。当用户点击链接时,页面会滚动到具有相应 id 的元素位置。


电子邮件链接

用于创建一个可以直接打开邮件客户端并填写收件人地址的链接。

实例代码 运行代码
复制
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>开创者教程(kaicz.com)</title>
</head>
<body>
      <!-- 点击链接会打开邮件客户端并填写收件人地址 -->
      <a href="mailto:example@example.com">发送邮件</a>
</body>
</html>

mailto:是电子邮件链接的协议,后面跟着收件人的电子邮件地址。


下载链接

指向一个文件,用户点击链接后可以下载该文件。

实例代码 运行代码
复制
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>开创者教程(kaicz.com)</title>
</head>
<body>
      <!-- 点击链接会下载 example.pdf 文件 -->
      <a href="example.pdf" download>下载 PDF 文件</a>
</body>
</html>

download属性是 HTML5 新增的属性,用于指示浏览器下载链接指向的文件,而不是在浏览器中打开。




评论区 0
发表评论