zoukankan      html  css  js  c++  java
  • <a>标签

    <a> 标签定义超链接,用于从一个页面链接到另一个页面。

    <a> 元素最重要的属性是 href 属性,它指定链接的目标。

    在所有浏览器中,链接的默认外观如下:

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

    提示:如果没有使用 href 属性,则不能使用 hreflang、media、rel、target 以及 type 属性。

    提示:通常在当前浏览器窗口中显示被链接页面,除非规定了其他 target。

    提示:请使用 CSS 来改变链接的样式。

    <a href="http://www.runoob.com">访问菜鸟教程!</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>

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

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

    创建超链接

    <body>
    
    <p> 
    这是一个网址链接 <a href="http://www.runoob.com/">菜鸟教程</a></p>
    
    <p>
    这是一个站内链接 <a href="/html/html-tutorial.html">HTML 教程</a></p>
    
    </body>

    为图像添加超链接

    <body>
    
    <p>
    图像作为链接: <a href="http://runoob.com">
    <img border="0" alt="w3cschool" src="logo.png" width="100" height="100">
    </a>
    </p>
    
    </body>

    在新的浏览器窗口打开链接

    <body>
    
    <a href="http://www.runoob.com/" target="_blank">访问菜鸟教程!</a>
    
    <p>如果你将 target 属性设置为 &quot;_blank&quot;, 链接将在新窗口打开。</p>
    
    </body>

    使用锚跳转到同一个页面的不同位置

    <p><a href="#C4">查看Chapter 4</a>
    <a href="#C8">查看 Chapter 8。</a>
    <a href="#C10">查看10</a>
    </p>
    
    <h2>Chapter 1</h2>
    <p>This chapter explains ba bla bla</p>
    
    <h2>Chapter 2</h2>
    <p>This chapter explains ba bla bla</p>
    
    <h2>Chapter 3</h2>
    <p>This chapter explains ba bla bla</p>
    
    <h2><a name="C4">Chapter 4</a><!--规定锚的名称--></h2>
    <p>This chapter explains ba bla bla</p>
    
    <h2>Chapter 5</h2>
    <p>This chapter explains ba bla bla</p>
    
    <h2>Chapter 6</h2>
    <p>This chapter explains ba bla bla</p>
    
    <h2>Chapter 7</h2>
    <p>This chapter explains ba bla bla</p>
    
    <h2 id="C8">Chapter 8</h2>
    <p>This chapter explains ba bla bla</p>
    
    <h2>Chapter 9</h2>
    <p>This chapter explains ba bla bla</p>
    
    <h2><a id="C10">Chapter 10</a></h2>
    <p>This chapter explains ba bla bla</p>
    
    <h2>Chapter 11</h2>
    <p>This chapter explains ba bla bla</p>
    
    <h2>Chapter 12</h2>
    <p>This chapter explains ba bla bla</p>
    
    <h2>Chapter 13</h2>
    <p>This chapter explains ba bla bla</p>
    
    <h2>Chapter 14</h2>
    <p>This chapter explains ba bla bla</p>
    
    <h2>Chapter 15</h2>
    <p>This chapter explains ba bla bla</p>
    
    <h2>Chapter 16</h2>
    <p>This chapter explains ba bla bla</p>
    
    <h2>Chapter 17</h2>
    <p>This chapter explains ba bla bla</p>

    创建电子邮件链接

    <body>
    
    <p>
    这是一个电子邮件链接:
    <a href="mailto:someone@example.com?Subject=Hello%20again" target="_top">
    发送邮件</a>
    </p>
    
    <p>
    <b>注意:</b>单词之间的空格需要使用%20来表示,以确保浏览器能真正解析空格。</p>
    
    </body>

    创建电子邮件链接2

    <body>
    
    <p>
    这是另一个电子邮件链接:
    <a href="mailto:someone@example.com?cc=someoneelse@example.com&bcc=andsomeoneelse@example.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!" target="_top">发邮件!</a>
    </p>
    
    <p>
    <b>注意:</b>单词之间的空格需要使用%20来表示,以确保浏览器能真正解析空格。</p>
    
    </body>
  • 相关阅读:
    Spring Aop实例之xml配置
    Spring execution 表达式
    JVM调优总结 -Xms -Xmx -Xmn -Xss
    springmvc整合redis架构搭建实例
    mysql权限操作(转)
    mybatis动态排序
    spring mvc重定向
    jquery中bind和on的区别
    在java项目中使用umeditor
    mybatis的基础Dao
  • 原文地址:https://www.cnblogs.com/lxx2014/p/9897142.html
Copyright © 2011-2022 走看看