1、超链接使用

基本语法

功能

标签定义超链接。它用于从一个页面连接到另一个页面。

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
</head>
<body>
    <a href="https://www.baidu.com" target="_blank">百度</a>
    <a href="https://www.sina.com.cn" target="_blank">新浪</a>
</body>
</html>

a标签属性讲解

1、href 属性

链接的目标url地址。
目标url地址：可以是绝对路径。也可以是相对路径。

2、target 属性

属性的作用就是专门用于控制如何跳转

在何处打开目标 URL。仅在 href 属性存在时使用。值为：_blank、_self、_parent、_top

self：用于在当前选项卡中跳转，也就是不新建页面跳转，默认就是self
_blank ：用于在新的选项卡中跳转，也就是新建页面跳转
_parent：在父框架集中打开被链接文档
_top：在整个窗口中打开被链接文档

百度
 百度

3、tiele

a标签中的title和img标签中title一样，都是用来控制鼠标悬停时显示的提示文本内容的
百度

注意点：
1.a标签不仅可以让文字可以点击，还可以让图片也能够被点击。
2.一个a标签必须有一个href属性，否则a标签不知道要跳转到什么地方
3.如果通过a标签的href属性指定一个URL地址，那么必须在地址前面加上http://或https://。
4.a标签的href属性除了可以绑定一个网络地址以外，还可以指定一个本地的地址

2、锚点链接

作用：

链接到当前页面的某个位置

执着锚点

定义锚点：

超链接：

图片 | 文字

3、超链接样式

基本语法

a{
样式名:值;
}

功能

设置超链接点击前、点击后的样式。

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <style type="text/css">
        a:link {
              color:red;
              text-decoration:underline;
            }
            a:visited {
              color:green;
              text-decoration:none;
            }
            a:hover {
              color:black;
              text-decoration:none;
            }
            a:active {
              color: white;
              text-decoration:none;
            }
    </style>
</head>
<body>
    <a href="https://www.baidu.com" target="_blank">百度</a>
    <a href="https://www.sina.com.cn" target="_blank">新浪</a>
</body>
</html>

css样式讲解

下面的鼠标悬停效果也可以使用在别的标签

1、a:link定义正常链接的样式

a:link {
color:red;
font-size:20px;
text-decoration:underline;
}
color:red; 颜色为红色
font-size; 设置字体大小
text-decoration:underline; 下划线

2、a:visited 定义已访问过链接的样式

a:visited {
color:green;
text-decoration:none;
}
color:black; 颜色为绿色
text-decoration:none; 无下划线

3、a:hover 定义鼠标悬浮在链接上时的样式

a:hover {
color:black;
text-decoration:none;
}
color:black; 颜色为黑色
text-decoration:none; 无下划线

4、a:active 定义鼠标点击链接时的样式

a:active {
color: white;
text-decoration:none;
}
color: white; 颜色为白色
text-decoration:none; 无下划线