标签之超文本链接

一.超链接的描述

HTML使用标签a(两端要加上<>)来设置超文本链接超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。链接文本。大致的代码如下:

<a href ="url">链接文本</a>

二.超链接的属性

在标签a中使用了 href 属性来描述链接的地址,默认情况下，链接将以，以下形式出现在浏览器中:
1.一个未访问过的链接显示为蓝色字体并带有下划线
2.访问过的链接显示为紫色并带有下划线。
3.点击链接时，链接显示为红色并带有下划线
在这里需要注意的是后续我们将通过CSS来修改掉这些效果。下面我将展示一些效果图：
未点击时候的情况:

当鼠标在链接之上的时候:

当点击过之后则会变成:

在这里我们需要注意的是url填写的是需要跳转的地址,例如下面我所展示的代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href ="https://www.baidu.com/s?tn=49055317_30_hao_pg&ie=utf-8&wd=%E5%B0%8F%E7%B1%B3">我是是超链接</a>
</body>
</html>

跳转的地方是小米的官网：

在这里我们需要注意的是如何地址url不填写的话，那么就和普通的文本是一样的效果.

三.跳转的方式

1.可以通过文字跳转
2.可以通过图片跳转
下面我将展示跳转的代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href ="https://www.baidu.com/s?tn=49055317_30_hao_pg&ie=utf-8&wd=%E5%B0%8F%E7%B1%B3">
        <img src = "https://pic1.zhimg.com/v2-93c38ec06109423595e12d7ba5e7b832_r.jpg?source=1940ef5c" alt = "没有其他的信息" width="300px" height="600px" title="小姐姐">
    </a>
</body>
</html>

上述图片的访问途径是网络地址，我们点击图片就可以再次跳转到所需要的界面了。

四.超链接的表现

当我们点击链接的文本的时候，我们的鼠标会改变形状:

五.个人总结

通过对超链接的学习,我们可以实现多个网页界面之间的跳转，能够将各个网页的信息能够有效的结合起来。

小白零基础入门HTML5第五天