HTML 链接

前言

  • HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。
标签 描述 备注 🔗
<a> </a> 定义一个超级链接 🔗
<link /> 定义文档与外部资源的关系 🔗
<main> </main> 定义文档的主体部分 🔗
<nav> </nav> 定义导航链接 H5 新加 🔗
  • 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
    14
    <!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、属性

3.1 < a > 标签属性

属性 描述 备注 🔗
charset char_encoding HTML5 不支持。规定目标 URL 的字符编码 🔗
coords coordinates HTML5 不支持。规定链接的坐标 🔗
download filename 指定下载链接 H5 新加 🔗
href URL 规定链接的目标 URL 🔗
hreflang language_code 规定目标 URL 的基准语言。仅在 href 属性存在时使用 🔗
media media_query 规定目标 URL 的媒介类型。默认值:all。仅在 href 属性存在时使用 H5 新加 🔗
name section_name HTML5 不支持。规定锚的名称 🔗
rel alternate
author
bookmark
help
license
next
nofollow
noreferrer
prefetch
prev
search
tag
规定当前文档与目标 URL 之间的关系。仅在 href 属性存在时使用 🔗
rev text HTML5 不支持。规定目标 URL 与当前文档之间的关系 🔗
shape default
rect
circle
poly
HTML5 不支持。规定链接的形状 🔗
target _blank
_parent
_self
_top
framename
规定在何处打开目标 URL。仅在 href 属性存在时使用。
       _blank:新窗口打开。
       _parent:在父窗口中打开链接。
       _self:默认,当前页面跳转。
       _top:在当前窗体打开链接,并替换当前的整个窗体(框架页)。
       framename:在指定的框架中打开被链接文档。
🔗
type MIME_type 规定目标 URL 的 MIME 类型。仅在 href 属性存在时使用。
注:MIME = Multipurpose Internet Mail Extensions
H5 新加 🔗
属性 描述 备注 🔗
charset char_encoding HTML5 不支持。定义被链接文档的字符编码方式 🔗
href URL 定义被链接文档的位置 🔗
hreflang language_code 定义被链接文档中文本的语言 🔗
media media_query 规定被链接文档将显示在什么设备上 🔗
rel alternate
archives
author
bookmark
external
first
help
icon
last
license
next
nofollow
noreferrer
pingback
prefetch
prev
search
sidebar
stylesheet
tag
up
必需。定义当前文档与被链接文档之间的关系。
rel 是 relationship 的英文缩写
🔗
rev reversed relationship HTML5 不支持。定义被链接文档与当前文档之间的关系 🔗
sizes HeightxWidth
any
定义了链接属性大小,只对属性 rel=”icon” 起作用 H5 新加 🔗
target _blank
_self
_top
_parent
frame_name
HTML5 不支持。定义在何处加载被链接文档 🔗
type MIME_type 规定被链接文档的 MIME 类型 🔗

3.3 < nav > 标签属性

4、target 属性

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

5、id 属性

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

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

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

6、其它链接

  • 图片链接

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

    1
    2
    3
    4
    <!-- 注意:单词之间空格使用 %20 代替,以确保浏览器可以正常显示文本 -->
    <a href="mailto: contact@qianchia.com" target="_top">
    发送邮件到 contact@qianchia.com
    </a>
  • 效果

    发送邮件到 contact@qianchia.com

7、HTML 实例

文章目录
  1. 1. 前言
  2. 2. 1、语法
  3. 3. 2、实例
  4. 4. 3、属性
    1. 4.1. 3.1 < a > 标签属性
    2. 4.2. 3.2 < link > 标签属性
    3. 4.3. 3.3 < nav > 标签属性
  5. 5. 4、target 属性
  6. 6. 5、id 属性
  7. 7. 6、其它链接
  8. 8. 7、HTML 实例
隐藏目录