HTML超連接樣式及寫法

時間 2019-12-29

標籤 html 連接樣式寫法欄目 HTML 简体版

原文原文鏈接

超連接的寫法
<a href="" title="" target=""></a>
href爲點擊後鏈接的地址；
title爲鼠標移到超連接上時出現的文字；
target:單擊超連接打開網頁方式
_self:在當前網頁所在窗口打開（默認）
_blank:老是在新窗口打開
_new:同一個剛建立的窗口打開
<a></a>中也能夠放img圖片作成圖片超連接 css

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

瞄點連接：通常是點擊以後跳到網頁的一個地方。好比淘寶網站頁面上的《返回到頂部》這個連接
　　定義錨點：<a name=「錨點名稱」>…</a>
　　連接點：<a href=「#錨點名稱」>…</a>html

固然，咱們還能夠到別的頁面：
定義瞄點：<a name=「錨點名稱」>…</a>
連接錨點：<a href=「index.htm#錨點名稱」>…</a>ide

<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>

拓展：css改變超連接的狀態
link表示鼠標沒有點擊的效果
visited鼠標點擊後效果
hover表示鼠標通過效果
active鼠標按下去的效果
hover和active也適用於其餘元素ui

<!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>