码迷,mamicode.com
首页 > Web开发 > 详细

HTML标签<a>的使用方法

时间:2014-06-22 11:54:08      阅读:305      评论:0      收藏:0      [点我收藏+]

标签:标签   target   title   parent   blank   


1.普通用法:

  <a href="">this is a link</a>

 a标签中的属性:

  ·href:值为URL

  ·target:说明在何处打开目标URL,取值为:_blank ;_parent;_self ;_top ;framename 

  ·name:规定锚的名称 ,用href=#name可以跳转到指定的地方

  ·onclick:指定点击响应函数

2.特殊用法:

  ·实现下载功能

    <a href="要下载的文件的路径"></a>

  ·鼠标移到链接上显示说明文字

    通过设置title属性实现这种效果

    <a href="" title="this a introduce">introduce</a>

  ·鼠标移到一个链接上弹出一个窗口

    通过设置onmouseover属性实现这种效果

    <a href=""  over it‘)">mouse over</a>

  ·链接到本页的指定内容或者其它页面的指定位置

    通过设置name属性来指定位置

    在href中使用定义的name值

    1)链接到本页中的某处

       href="#name"

    2)链接到其他页的某处

       href="URL#name"

  ·链接到E-mail

3.a标签与CSS伪类的结合

  了解伪类的语法:selector : pseudo-class {property: value}

  锚伪类:

  a:link {color: #FF0000}/* 未访问的链接 */

  a:visited {color: #00FF00}/* 已访问的链接 */

  a:hover {color: #FF00FF}/* 鼠标移动到链接上 */

  a:active {color: #0000FF}/* 选定的链接 */

  注意:

       在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。

       在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。

  

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>a标签</title>
<style type="text/css">
  a{
	  text-decoration:none;
  }
  a:link{color:blue;}
  a:visited{color:green;}
  a:hover{color:yellow;}
  a:active{color:red;}
  
  a.cl:link{color:green;}
  a.cl:visited{color:blue;}
  a.cl:hover{color:red;}
  a.cl:active{color:yellow;}
</style>
</head>

<body>
<a href="">this is a link</a>
<br/>
<a href="" class="cl">this is a link</a>
</body>
</html>

4.a标签与ul标签结合

  

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>a标签</title>
<style type="text/css">
  a{
	  text-decoration:none;
  }
  a.cl:link{color:blue;}
  a.cl:visited{color:green;}
  a.cl:hover{color:yellow;}
  a.cl:active{color:red;}
  
  ul{
	  margin:0;
	  background:lightblue;
	  width:300px;
	  height:20px;
  }
  li{
	  width:100px;
	  float:left;
	  list-style:none;
  }
</style>
</head>

<body>
<ul>
 <li><a href="" class="cl">first</a></li>
 <li><a href="" class="cl">second</a></li>
 <li><a href="" class="cl">three</a></li>
</ul>
</body>
</html>

效果如下:

bubuko.com,布布扣



HTML标签<a>的使用方法,布布扣,bubuko.com

HTML标签<a>的使用方法

标签:标签   target   title   parent   blank   

原文地址:http://7613943.blog.51cto.com/7603943/1429360

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!