zoukankan      html  css  js  c++  java
  • html中的a标签(超链接)的使用

    a标签即超链接,用于从一张页面链接到另一张页面。其最重要的属性是href属性,它指示链接的目标。

    例如:

    <a href="http://www.baidu.com/">这是a标签</a>

    1、样式:

    a标签的默认外观是:

    • 未被访问的链接带有下划线而且是蓝色的
    • 已被访问的链接带有下划线而且是紫色的
    • 活动链接带有下划线而且是红色的

    当然我们可以通过CSS样式自定义其外观,还有a标签的一些状态,分别是link、visited、hover、active,但是他们使用是有一定的顺序的,否则可能有些会没有出现预期的效果,下面是显示正确的顺序实例:

    <style type="text/css">
        a:link {color: #000;} /* 未访问的链接 */
        a:visited {color: #F00;} /* 已访问的链接 */
        a:hover{color: #0F0;} /* 鼠标在链接上 */ 
        a:active {color: #00F;} /* 点击激活链接:在你点击该链接后,页面正在转向新地址的时候,链接显示此颜色 */
    </style>

    下面是一个错误顺序的实例,这个顺序不能正常显示active的颜色:

    <style type="text/css">
        /* 这个顺序不能正常显示active的颜色*/
        a:link{color:#000;}   
        a:active{color:#f00;}   
        a:visited{color:#0ff;}   
        a:hover{color:#0f0;} 
    </style>
    View Code

    还有其他的错误顺序就不一一列举了。

    如果想去掉下划线,可以使用设置"text-decoration"属性为"none" :

    <style type="text/css">
        /* 去掉a标签的下划线 */
        a{text-decoration:none;}
    </style>

    2、实例:

    (1) 创建超级链接

    <!DOCTYPE html>
    <html>
    <head>
        <title>a标签测试</title>
        <meta charset="utf-8">
    </head>
    <body>
        <a href="index.html">指向本网站中的一个html页面</a>
        <br>
        <a href="http://www.baidu.com/">指向其他网站中的一个页面</a>
    </body>
    </html>

    (2) 为图像添加超链接

    <!DOCTYPE html>
    <html>
    <head>
        <title>a标签测试</title>
        <meta charset="utf-8">
    </head>
    <body>
        使用a标签给图像做超链接:<br>
        <a href="https://www.baidu.com/">
            <img src="https://www.baidu.com/img/bd_logo1.png" />
        </a>
    </body>
    </html>

    (3) 跳到当前页面内的指定位置

    <!DOCTYPE html>
    <html>
    <head>
        <title>a标签测试</title>
        <meta charset="utf-8">
        <style type="text/css">
            p {margin-top: 80px; }
        </style>
    </head>
    <body>
        <a href="#p6">跳到p6</a>
        <p>p1</p>
        <p>p2</p>
        <p>p3</p>
        <p>p4</p>
        <p>p5</p>
        <p><a name="p6"></a>p6</p>
        <p>p7</p>
        <p>p8</p>
        <p>p9</p>
        <p>p10</p>
        <p>p11</p>
        <p>p12</p>
    </body>
    </html>

    (4) 在新窗口打开链接

    <!DOCTYPE html>
    <html>
    <head>
        <title>a标签测试</title>
        <meta charset="utf-8">
    </head>
    <body>
        <a href="https://www.baidu.com/" target="_blank">将target属性设为"_blank",该链接会在新窗口中打开</a> 
    </body>
    </html>

    (5) 创建电子邮件链接

    <!DOCTYPE html>
    <html>
    <head>
        <title>a标签测试</title>
        <meta charset="utf-8">
    </head>
    <body>
        <p>这是邮件链接:<a href="mailto:someone@microsoft.com?subject=Hello%20again">发送邮件</a></p>
        <p><b>注意:</b>应该使用 %20 来替换单词之间的空格,这样浏览器就可以正确地显示文本了。</p>
    </body>
    </html>

    (6) 创建电子邮件链接2

    <!DOCTYPE html>
    <html>
    <head>
        <title>a标签测试</title>
        <meta charset="utf-8">
    </head>
    <body>
    <p>这是另一个 mailto 链接:
        <a href="mailto:someone@microsoft.com?cc=someoneelse@microsoft.com&bcc=andsomeoneelse2@microsoft.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!">发送邮件!</a>
    </p>
    <p><b>注意:</b>应该使用 %20 来替换单词之间的空格,这样浏览器就可以正确地显示文本了。</p>
    </body>
    </html>

     

  • 相关阅读:
    【Python基础知识】【语法】【入门】
    linux-记录一次VMWare安装linux的问题
    mysql-记录一次CentOS7压缩包安装mysql的过程
    java-记录一次新服务器搭建网站过程
    docker-mysql-记录一次中文乱码的问题。
    spring-事务总结
    spring-aop总结
    maven-spring-boot-first-version-learn编译运行的问题
    maven-导入4.0.0.BOOTSTRAP-SNAPSHOT遇到的问题。
    maven-添加spring-express snapshot版本依赖问题
  • 原文地址:https://www.cnblogs.com/wuqianling/p/5682686.html
Copyright © 2011-2022 走看看