博客列表 >HTML 超链接简介

HTML 超链接简介

Lon
Lon原创
2021年09月18日 23:58:483213浏览

一、超链接介绍

超链接是网站中使用比较频繁的元素,是各个网页之间的桥梁,它能够让浏览者在各个独立的页面之间方便的跳转。除了指向一个网页之外,超链接还可以用于指向图片、文件、邮箱地址等

二、创建超链接

在HTML中创建超链接非常简单!只需用标签环绕需被链接的对象即可,基本语法格式如下:

  1. <a href="跳转目标” target=“目标窗口的弹出方式”>文本或图像</a>

a标签常用属性:

1. href:用于指定链接目标的url地址,当给标签应用href属性时,它就具有了超链接的功能。

2. target:用于指定链接页面的打开方式,其取值有self和blank两种。

  • _self:默认值,表示目标窗口的弹出方式为在原窗口上;
  • _blank:表示目标窗口的弹出方式为,创建一个新的窗口。(当内容较多时,此方法就显得较麻烦,此时就可以使用标签来进行简化,具体使用方法见文末~)。

三、应用

1. 跳转到站外

  1. <a href="https://www.jd.com">京东</a>

2. 在指定的窗口打开

  1. <a href="https://tmall.com" target="tmall">天猫</a>
  2. <!-- iframe 元素会创建包含另外一个文档的内联框架(即行内框架)。 -->
  3. <iframe frameborder="2" name="tmall"></iframe>

3. 站内跳转

创建锚点链接

锚点链接可以链接到本页面的特定位置,也可以链接到另一个页面的特定位置。其实现方式是添加锚标记。通过创建锚点链接,用户能够快速定位到目标内容。

创建锚点链接分为两步:

1.当跳转到当前页面的指定位置时,直接将锚标记设置为href属性值。

  1. <!-- 使用锚点/书签来实现 -->
  2. <a href="#hello">我要找到你</a>

使用相应的id名标注跳转目标的位置。

  1. <h2 id="hello" style="margin-top: 1000px">你发现我了吗</h2> -->

4.可点击的图片/文本跳转链接

  1. <h2>动物世界</h2>
  2. <div class="box">
  3. <!-- div+class -->
  4. <div class="course">
  5. <!-- 可点击的图片链接 -->
  6. <a href=""><img src="dog.jpg" alt="dog" /></a>
  7. <!-- 可点击的文本链接 -->
  8. <a href="">今晚有狗肉吃了</a>
  9. </div>
  10. <div class="course">
  11. <!-- 可点击的图片链接 -->
  12. <a href=""><img src="cat.jpg" alt="cat" /></a>
  13. <!-- 可点击的文本链接 -->
  14. <a href="">猫就有点寂寞了</a>
  15. </div>
  16. </div>

注意:

  1. 外部链接:需添加 “http://”;
  2. 内部链接:直接链接内部页面名称即可;如 :< a href=”index.html”> 首页
  3. 当没有确定链接目标时,通常将链接标签的href属性值定义为“#”(即href=”#”),表示该链接暂时为一个空链接;
  4. 不仅可以创建文本超链接,在网页中各种网页元素,如图像、表格、音频、视频等都可以添加超链接。
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议