HTML标签<a>的使用方法

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>

效果如下:

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

时间: 2024-10-11 18:02:07

HTML标签<a>的使用方法的相关文章

使用html &lt;a href=&quot;&quot;/&gt;标签连接action的方法

<a href="<s:url action="blogList"/>">XXXX</a>即可 更简单的写法是 <a href="blogDelete.action?id=XXX">直接写就行了 如果这个Action在struts里面声明的时候有命名空间如/user 那么写成<a href="user/blogDelete.action?id=XXX"> 使用stru

CSS实现pre标签中内容换行方法

CSS实现pre标签中内容换行方法技术 maybe yes 发表于2015-01-25 18:35 原文链接 : http://blog.lmlphp.com/archives/70  来自 : LMLPHP后院 HTML 中的 PRE 标签默认是不会换行的,即使声明了 word-wrap 和 word-break 属性也没有效果:DIV 标签可以很方便的换行,不会把页面撑破.因为这个原因,很多网站在显示代码的时候使用 DIV 来作为容器.使用 DIV 标签装载代码有个弊端,就是冗余内容太多,换

新闻标签提取的评价方法

新闻标签提取的评价方法 一.  目标: 用于评价不同的标签提取算法的优劣,以及算法中参数选取的效果评价. 二.  困难: 标签提取效果的好坏具有强烈的主观性,对一条新闻提取标签的价好坏,通过机器来做的话,比较困难. 三.  解决方案: 选取一定数量的新闻集,经过标签提取得到标签集,通过比较标签集的分布,来分析标签提取算法在不同评价指标上的表现.具体评价指标有: 覆盖率: 覆盖率 = 结果集标签的数目/系统标签集的数目 * 100% 准确率: 每条新闻的结果标签若与原标签重合一个便认为正确.按照这

获取body标签的两种方法

获取body标签的两种方法 引用body标签有两做法: 第一种:使用DOM Core 即引用某个给定文档的第一个(也是仅有的一个)body标签 代码如下: document.getElementsByTagName("body")[0] 第二种:使用HTML-DOM,即引用某个给定文档的body属性: 代码如下: doucumnet.body

关于自定义checkbox-radio标签的样式的方法(label 和 background-position理解)

label label标签有一个很好的作用就是扩大表单控件元素的点击区域. 一般有两种方法可以达到效果:(1)使用label标签包裹表单控件(2)设置label标签的for属性和表单的id属性一致 这意味着有三种方式可以实现 1 <label for="checkbox"></label><input type="checkbox" id="checkbox" /> 2 <label><inp

详解Dedecms各种形式的栏目调用标签,包括SQL调用方法

DedeCMS获取文档当前栏目所在目录链接URL DedeCMS内容页调用当前栏目其实用下来是调用不出来的,{dede:field.typename/}是有效的,可是 {dede:field.typeurl/}却调不出文档当前栏目所在目录链接URL.查了下网上有网友提供了解决的办法,贴出来大家分享: 方法一: {dede:type typeid='0′ row=1}[field:typelink /]{/dede:type} 方法二: 动手改装一下函数了,利用DEDECMS自定义函数的接口文件,

struts2 s:if标签以及 #,%{},%{#}的使用方法

<s:if>判断字符串的问题: 1.判断单个字符:<s:if test="#session.user.username=='c'"> 这样是从session中取出username的值,并且判断其是否为c,但是这样判断是不正确的,这样判断的话,根本判断不出来,要改成下面这样: <s:if test="#session.user.username=='c'.toString()"> 这样判断才能正确判断,至于原因我也不知道,在网上看到

Struts2中 radio标签的详细使用方法

首先在页面中引入struts标签库: <%@ taglib prefix="s" uri="/struts-tags"%> 在JSP页面中创建单选按钮radio的方法: <s:radio list="#{'1':'先生','0':'女士'}" name="gender" value="1"/> 其中list中的键值对表示所有的选项,value表示设置的默认值,如果这个默认值是从后台传

HTML5 Video标签的属性、方法和事件汇总介绍

<video>标签的属性 代码如下: src :视频的属性poster:视频封面,没有播放时显示的图片preload:预加载autoplay:自动播放loop:循环播放controls:浏览器自带的控制条width:视频宽度height:视频高度 html 代码 代码如下: <video id="media" src="http://www.jb51.net/test.mp4" controls width="400px" he