温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

HTML超链接样式及写法

发布时间:2020-03-03 00:07:13 来源:网络 阅读:757 作者:孙翰 栏目:web开发

超链接的写法
<a href="" title="" target=""></a>
href为点击后连接的地址;
title为鼠标移到超链接上时出现的文字;
target:单击超链接打开网页方式
_self:在当前网页所在窗口打开(默认)
_blank:总是在新窗口打开
_new:同一个刚创建的窗口打开
<a></a>中也可以放img图片做成图片超链接

     <a href="http://www.baidu.com" title="百度一下你就知道" target="_new">百度</a>

HTML超链接样式及写法

瞄点链接:一般是点击之后跳到网页的一个地方。比如淘宝网站页面上的《返回到顶部》这个链接
  定义锚点:<a name=“锚点名称”>…</a>
  链接点:<a href=“#锚点名称”>…</a>

当然,我们还可以到别的页面:
定义瞄点:<a name=“锚点名称”>…</a>
链接锚点:<a href=“index.htm#锚点名称”>…</a>

    <a href="#aa">F1</a><br>
    <img src="../img2.png" id="aa">

功能性链接如邮箱链接、电话链接、qq推广

<a href="mailto:912216053@qq.com">给我发邮件</a>
<a href="tel:15888886666">给我打电话</a>             
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=912216053&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:912216053:51" alt="点击这里给我发消息" title="点击这里给我发消息"/></a>

HTML超链接样式及写法

拓展:css改变超链接的状态
link表示鼠标没有点击的效果
visited鼠标点击后效果
hover表示鼠标经过效果
active鼠标按下去的效果
hover和active也适用于其他元素

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        a:link{
            color: red;
            text-decoration: none;
        }
        a:visited{
            color: yellow;
        }
        a:hover{
            color: aqua;
            text-decoration: overline;
        }
        a:active{
            font-style: italic;
        }
        .box{
            width: 2000px;
            height: 200px;
            background: red;
        }
        .box:hover{
            background: #0000FF;
        }
        .img:active{
            float: right;
        }
    </style>
</head>
<body>
    <a href="http://baidu.com" target="_blank" title="百度一下,你就知道">baidu</a>
    <div class="box">
    </div>
    <img class="img" src="../2图片/images/book.jpg" >
</body>
</html>
向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI