学习html中超链接的4个基础属性和点击状态简单概述

原创已于 2022-06-18 23:10:21 修改 · 3.3k 阅读

本内容遵循CC 4.0 BY-SA版权协议

于 2022-06-16 16:00:41 首次发布

前言：本人是新生小白，如有错误之处欢迎指出

这是一个最初状态的超链接

 <a href=""></a>

这是a链接的相关属性

 <a href="" title="" target=""></a>

其中href="" 是指这个超链接想到链接的地方可以是相对链接也可以是绝对链接

title是鼠标悬浮到超链接上会显示的内容

target是指这个超链接的打开方式

 <a href="#" title="你好" target="_blank"></a>   <!-- 这种代表在原界面的基础上创建打开一个新界面 -->    
    <a href="#" title="你好" target="_self"></a>    <!-- 这种代表在原界面的基础跳转到另一个界面-->

超链接a还有4种点击状态，分别是


        a:link{
            color: yellow           /* 这个是超链接创建后未进行操作的状态 */
        }

        a:hover{
            color: brown;            /* 这个是超链接创建后鼠标悬停于链接上的状态 */
        }

        a:active{
            color: chocolate;        /* 这个是超链接创建后鼠标按下但未松开的状态 */
        }


        a:visited{
            color: blueviolet;        /* 这个是超链接创建后鼠标点击操作后的状态 */  
        }

还有就是超链接下划线的处理

样式：text-decoration:none;

a标签属性属性内设置上方属性即可去除下划线

样式：text-decoration:underline ；　

a标签属性属性内设置上方属性即添加下划线（默认有下划线）

样式：text-decoration:line-through ；　贯穿线

a标签属性属性内设置上方属性即可添加贯穿线

样式：text-decoration:overline ；上划线

a标签属性属性内设置上方属性即可添加上划线

最后示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>

        body{
            font-size: 3px;
        }

        div{
            width: 140px;
        }

        p:hover{
            background-color: gray;
        }

        a:link{/* 这个是超链接创建后未进行操作的状态 */
            color: rgb(241, 142, 225);
        }

        a:hover{/* 这个是超链接创建后鼠标悬停于链接上的状态 */
            color: brown;
        }

        a:active{ /* 这个是超链接创建后鼠标按下但未松开的状态 */
            color: chocolate;
        }


        a:visited{ /* 这个是超链接创建后鼠标点击操作后的状态 */
            color: blueviolet;
        }

        a{
            text-decoration: none;
            
        }
    </style>
</head>
<body>
    <div>
        <p><a href="http:/1">家用电器</a></p>
        <p><a href="http:/1"><span>手机</span></a>/<a href="http:/1"><span>运营商</span></a>/<a href="http:/1"><span>数码</span></a></p>
        <p><a href="http:/1"><span>电脑</span></a>/<a href="http:/1"><span>办公</span></a></p>
        <p><a href="http:/1"><span>家居</span></a>/<a href="http:/1"><span>家具</span></a>/<a href="http:/1"><span>家装</span></a>/<a href="http:/1"><span>厨具</span></a></p>
        <p><a href="http:/1"><span>男装</span></a>/<a href="http:/1"><span>女装</span></a>/<a href="http:/1"><span>童装</span></a>/<a href="http:/1"><span>内衣</span></a></p>
        <p><a href="http:/1"><span>美妆</span></a>/<a href="http:/1"><span>个护清洁</span></a>/<a href="http:/1"><span>宠物</span></a></p>
        <p><a href="http:/1"><span>女鞋</span></a>/<a href="http:/1"><span>箱包</span></a>/<a href="http:/1"><span>钟表</span></a>/<a href="http:/1"><span>珠宝</span></a></p>
        <p><a href="http:/1"><span>男鞋</span></a>/<a href="http:/1"><span>运动</span></a>/<a href="http:/1"><span>户外</span></a></p>
        <p><a href="http:/1"><span>房产</span></a>/<a href="http:/1"><span>汽车</span></a>/<a href="http:/1"><span>汽车用品</span></a></p>

</body>
</html>

标签

#学习 #前端 #css #html #webview