HTML a 标签超链接锚点链接伪类

最新推荐文章于 2023-11-30 15:36:13 发布

昨夜太平长安888

最新推荐文章于 2023-11-30 15:36:13 发布

阅读量2k

点赞数 1

分类专栏： HTML 文章标签： HTML 伪类锚点链接

本文链接：https://blog.csdn.net/HelloWord176/article/details/100537833

版权

HTML 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

a 标签超链接双标签

<a href = “” target = "_blank / _self"> 我是超链接标签 </a>

href：表示链接的地址，可以是在线的地址，也可以是本地的html文件。

target：表示页面打开方式；

_blank：表示在新的窗口打开；

_self：表示在当前窗口打开（默认）；

如果 href="#" ，表示为空链接。

a 标签里面不光可以写文字，可以加图片，当用户直接点击图片就可以跳转到相关页面！

<a href="地址" targer="_blank">

<img src="图片的路径" alt=" 图片不显示时展现的文字" title="当鼠标悬停时出现的文字">

</a>

<a href="https://detail.meizu.com/item/meizu16spro.html" target="_blank">
            <img src="../img/01.jpg" alt="">
</a>

二、 a 标签伪类

：link 未点击时的状态；

：visited 当鼠标点击之后的状态；

：hover 当鼠标悬停或者划过时的状态；

：active 当鼠标点击时出现的状态；

注意：前面的冒号一定不能少，一定要按照这个顺序写→LoVe hate！！！

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>a标签之伪类标签练习</title>
    <style>
        a:link {  /* 未点击时的状态 */
            color: aquamarine;
        }
        a:visited {    /*当鼠标点击后的状态 */
            color: red;
        }
        a:hover {  /*当鼠标悬停时、划过时所表现的状态*/
            color: blueviolet
        }
        a:active {  /*当鼠标点击时、按住时的状态*/
            color: #ff912f;
        }
    </style>
</head>
<body>
    <a href="https://www.meizu.com">追求源于热爱</a>
</body>
</html>

三、锚点链接

锚点链接适用于快速跳转到顶部或者底部时可以用！

1. 再要链接的位置命名 id 名字；如 <p id="title">顶部</p>

2. 要在建立链接的对象上添加 a 标签 <a href="#title">底部</a> 一定不能忘了 href 中的 # 号！

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>a标签之锚点链接的练习</title>
</head>
<body>
    <p id="top">我是顶部</p>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <a href="#top">我是底部</a>
</body>
</html>

昨夜太平长安888

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
HTML a 标签超链接锚点链接伪类

a 标签超链接双标签<a href = “” target = "_blank / _self"> 我是超链接标签 </a>href：表示链接的地址，可以是在线的地址，也可以是本地的html文件。target：表示页面打开方式；_blank：表示在新的窗口打开；_self：表示在当前窗口打开（默认）；如果 href="#" ...
复制链接

扫一扫