6.超链接-HTML基础 - 码农教程

一、何为超链接

1.a标签

在HTML中，使用a标签来实现超链接。

（1）语法格式

<a href="链接地址">文本或图片</a>

① 说明

href表示想要跳转到的那个页面的路径，可以是相对路径，也可以是绝对路径。我们可以将文本设置为超链接，即文本超链接；也可以将图片设置为超链接，即图片超链接。

（2）示例

① 例1-文本超链接

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8">      <!--必须放在title标签及其它meta标签前-->
        <title>超链接</title>
        <style type="text/css">
        </style>
    </head>
    <body>
        <a href="http://www.baidu.com/">文本超链接</a>                       
    </body>
</html>

文本超链接.png

② 例2-图片超链接

图片超链接1.png

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8">      <!--必须放在title标签及其它meta标签前-->
        <title>超链接</title>
        <style type="text/css">
        </style>
    </head>
    <body>
        <a href="http://www.baidu.com/">
            <img src="./img/毛毛.jpg" alt="我的毛毛吖!">
        </a>                        
    </body>
</html>

图片超链接.png

2.target属性

默认情况下，超链接都是在当前浏览器窗口打开新页面。在HTML中，我们可以通过target属性来定义超链接在窗口中的打开方式。

（1）语法格式

<a href="链接地址" target="打开方式">文本或图片</a>

（2）target的4种属性值

属性值	说明
_self	默认值，在原来窗口打开链接。
_blank	在新窗口打开链接。
_parent	在父窗口打开链接。
_top	在顶层窗口打开链接。

① 实际开发

一般情况下，只会用到_blank这一个值，其它三个值不需深究。

（3）示例

① 例1

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8">      <!--必须放在title标签及其它meta标签前-->
        <title>超链接</title>
        <style type="text/css">
        </style>
    </head>
    <body>
        <a href="http://www.baidu.com/" target="_blank">
            見贤思齊
        </a>                        
    </body>
</html>

<!--
    若不加target="_blank"，也就是target采用默认值_self，会将超链接变成百度。
    加target="_blank"，则会保留超链接这个网页，在新增一个页面，如下图。
-->

超链接target属性_blank.png

二、内部链接

1.外部链接和内部链接

在HTML中，超链接有两种：

外部链接
内部链接

（1）外部链接

指向的是外部网站的页面。

（2）内部链接

指向的是自身网站的页面。

2.怎么做?

（1）示例

① 例1

内部链接示例1-1.png

<!--first.html-->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <a href="second.html">要穿梭到页面2啦</a>
        <br/>
        <a href="子页面/third.html">要穿梭到页面3啦</a>
    </body>
</html>

<!--second.html-->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <h3>这是页面2呀呀呀呀</h3>
        <p>
            人生若只如初见，何事秋风悲画扇。
        </p>
    </body>
</html>

<!--third.html-->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <h3>这是页面3呦呦呦呦</h3>
        <p>
            见贤思齐焉，见不贤而内自省也。
        </p>
    </body>
</html>

内部链接示例1.png

三、锚点链接

当我们的页面内容较多页面过长时，会导致用户需要不停地拖动浏览器的滚动条才可以查看内容。为了简化用户操作，我们可以使用锚点链接来优化用户体验。

1.何为锚点链接?

在HTML中，锚点链接其实是内部链接的一种，它的链接地址（href属性）指向的是当前页面的某个部分。也就是说，点击页面中的某一个超链接，然后它就会跳到“当前页面”的某一部分。

2.怎么做?

想要实现锚点链接，得满足 2 个条件：

目标元素的id
a标签的href属性指向该id

（1）示例

① 例1

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8">      <!--必须放在title标签及其它meta标签前-->
        <title>锚点超链接</title>
    </head>
    <body>
        <div>
            <a href="#hero">历史人物</a>
            <br/>
            <a href="#places">中华</a>
        </div>
        ......<br/>
        ......<br/>
        ......<br/>
        ......<br/>
        ......<br/>
        <div id="hero">
            <h3>历史人物</h3>
            <ul>
                <li>秦始皇</li>
                <li>项羽</li>
                <li>白居易</li>
                <li>李清照</li>
            </ul>
        </div>
        ......<br/>
        ......<br/>
        ......<br/>
        ......<br/>
        ......<br/>     
        
        <div id="places">
            <h3>中华</h3>
            <ul>
                <li>辽宁</li>
                <li>丹东</li>
                <li>大连</li>
                <li>沈阳</li>
            </ul>
        </div>
        
    </body>
</html>

<!--
    当鼠标点击 历史人物、中华 时，浏览器滚动条会自动滚动到相应的位置。
-->

锚点超链接示例1.png