HTML 链接

前言

  • HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。
标签 描述
<a> </a> 定义一个超级链接
  • HTML使用标签 <a> 来设置超文本链接。
  • 超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
  • 当您把鼠标指针移动到网页中的某个链接上时,箭头会变为一只小手。
  • 在标签 <a> 中使用了 href 属性来描述链接的地址。

  • 默认情况下,链接将以以下形式出现在浏览器中:

    • 一个未访问过的链接显示为蓝色字体并带有下划线。
    • 访问过的链接显示为紫色并带有下划线。
    • 点击链接时,链接显示为红色并带有下划线。
    • 注意:如果为这些超链接设置了 CSS 样式,展示样式会根据 CSS 的设定而显示。

1、链接语法

  • 语法

    1
    <a href="url">链接文本</a>
    • href 属性描述了链接的目标。
    • “链接文本” 不必一定是文本,图片或其他 HTML 元素都可以成为链接。
  • 注意:请始终将正斜杠添加到子文件夹。

    • 假如这样书写链接:href="https://www.qianchia.com/html",就会向服务器产生两次 HTTP 请求。
    • 这是因为服务器会添加正斜杠到这个地址,然后创建一个新的请求,就像这样:href="https://www.qianchia.com/html/"

2、链接实例

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <!DOCTYPE html>
    <html>

    <head>
    <meta charset="utf-8">
    <title>Qian Chia 工作室</title>
    </head>

    <body>
    <a href="https://www.qianchia.com/">欢迎访问 Qian Chia 工作室</a>
    </body>

    </html>
  • 效果

3、链接 target 属性

  • target 属性规定在何处打开链接文档,所有主流浏览器都支持 target 属性。
描述
_blank 在新窗口中打开被链接文档
_self 默认。在相同的框架中打开被链接文档
_parent 在父框架集中打开被链接文档
_top 在整个窗口中打开被链接文档
framename 在指定的框架中打开被链接文档

4、链接 id 属性

  • id 属性可用于创建在一个HTML文档书签标记。
  • 书签是不以任何特殊的方式显示,在 HTML 文档中是不显示的,所以对于读者来说是隐藏的。

    1
    2
    3
    4
    5
    6
    7
    <a id="tips">有用的提示部分</a>

    <!-- 在 HTML 文档中创建一个链接到"有用的提示部分(id="tips")" -->
    <a href="#tips">访问有用的提示部分</a>

    <!-- 或者,从另一个页面创建一个链接到"有用的提示部分(id="tips")" -->
    <a href="https://www.runoob.com/html/html-links.html#tips">访问有用的提示部分</a>

5、其它链接

  • 图片链接

    1
    2
    3
    <a href="https://blog.qianchia.com/img/avatar.png">
    <img src="smiley.gif" alt="HTML" width="32" height="32">
    </a>
  • 邮件链接

    1
    2
    3
    4
    <!-- 注意:单词之间空格使用 %20 代替,以确保浏览器可以正常显示文本 -->
    <a href="mailto:someone@example.com?Subject=Hello%20again&cc=someoneelse@example.com" target="_top">
    发送邮件
    </a>
文章目录
  1. 1. 前言
  2. 2. 1、链接语法
  3. 3. 2、链接实例
  4. 4. 3、链接 target 属性
  5. 5. 4、链接 id 属性
  6. 6. 5、其它链接
隐藏目录