HTML 超链接简介

一、超链接介绍

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

二、创建超链接

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

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

a标签常用属性：

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

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

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

三、应用

1. 跳转到站外

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

2. 在指定的窗口打开

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

3. 站内跳转

创建锚点链接

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

创建锚点链接分为两步：

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

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

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

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

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

<h2>动物世界</h2>
<div class="box">
    <!-- div+class -->
    <div class="course">
        <!-- 可点击的图片链接 -->
        <a href=""><img src="dog.jpg" alt="dog" /></a>
        <!-- 可点击的文本链接 -->
        <a href="">今晚有狗肉吃了</a>
    </div>
    <div class="course">
        <!-- 可点击的图片链接 -->
        <a href=""><img src="cat.jpg" alt="cat" /></a>
        <!-- 可点击的文本链接 -->
        <a href="">猫就有点寂寞了</a>
    </div>
</div>

注意：

1. 外部链接：需添加 “http://”；
2. 内部链接：直接链接内部页面名称即可；如 ：< a href=”index.html”> 首页
3. 当没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href=”#”)，表示该链接暂时为一个空链接；
4. 不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。