HTML超链接之伪类注意事项

简介: 今天在复习html相关知识的时候发现了一个很常用,却经常被人们所忽略的知识点。那就是超链接伪类的使用。下面我就直接用代码来说明这一切。伪类的相关代码 超链接伪类的使用 a:link{...

今天在复习html相关知识的时候发现了一个很常用,却经常被人们所忽略的知识点。那就是超链接伪类的使用。下面我就直接用代码来说明这一切。


伪类的相关代码


<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>超链接伪类的使用</title>
    </head>
    <style type="text/css">
        a:link{
            color: gray;
        }
        a:visited{
            color: purple;
        }
        a:hover{
            color: red;
        }
        a:active{
            color: green;
        }
    </style>

    <body>
        伪类,说是标签的四种控制方式,其实也可以认为是四种不同的状态的显示,如下
        <hr />
        <br />
        <br />
        <br />
        <a href="#">这里是一个超链接</a>
        <br></br>
        <ul>
            <li>注意在style中的顺序必须是LVHA,否则界面刷新出来的时候会打散你的想象的!</li>
            <li>LVHA分别代表:Link初始化的状态;Visited浏览过超链接的状态;Hover鼠标划上超链接时候的状态;Active表示正在点击超链接时刻的状态</li>
            <li>一般来说,这四种状态我们最为常用的是HV,而AC基本上不怎么用。</li>
            <li>注意对超链接的合理的使用!否则会产生超链接泛滥的负面效果!</li>
        </ul>
    </body>

</html>

在代码中我已经对伪类的使用做了一个小的总结,所以就不再进行总结了。


结果展示


这里写图片描述

目录
相关文章
|
1月前
如何在HTML文件中添加超链接
如何在HTML文件中添加超链接
21 0
|
1月前
|
移动开发 前端开发 HTML5
【基于HTML5的网页设计及应用】——实现个人简历表格和伪类选择器应用
【基于HTML5的网页设计及应用】——实现个人简历表格和伪类选择器应用
49 0
|
4月前
|
前端开发
HTML超链接大致分为以下7类
HTML超链接大致分为以下7类
98 1
|
1月前
|
前端开发
HTML 超链接
HTML 超链接。
80 32
|
1月前
|
移动开发 前端开发 HTML5
【基于HTML5的网页设计及应用】——链接伪类选择器和伪元素选择器
【基于HTML5的网页设计及应用】——链接伪类选择器和伪元素选择器
36 2
|
6月前
|
前端开发
前端第二课,HTML,alt,title,width/heigh,border,<a>超链接,target,tr,td,th
前端第二课,HTML,alt,title,width/heigh,border,<a>超链接,target,tr,td,th
|
3月前
|
移动开发 UED HTML5
如何像人类一样写HTML之图像标签,超链接标签与多媒体标签
如何像人类一样写HTML之图像标签,超链接标签与多媒体标签
|
4月前
|
前端开发
HTML图片音频视频标签、超链接标签、列表标签和布局标签示例
HTML图片音频视频标签、超链接标签、列表标签和布局标签示例
47 0
|
9月前
|
前端开发
HTML与CSS实现网页的超链接及美化
HTML与CSS实现网页的超链接及美化
150 0
HTML与CSS实现网页的超链接及美化