相信对于学前端的人而言<a>标签并不陌生,我们先把他所有的属性列出来

一.主要属性

  一般来说,a标签有着四种状态,分别是link,hover,active,visited,接下来我会仔细讲述这些状态

  1. link  这是未访问的链接的状态,一般来说就是我们打开网页不进行任何操作时a标签的状态。

  2. hover 这是鼠标划过链接出现的状态,比如字体变大变小 ,颜色变化之类。个人认为与js中onmouseover事件类似。

  3. active 这是点击鼠标之后会出现的状态,但是是点击鼠标左键才会出现效果。个人认为与js中onclick事件类似。

  4. visited 这是点击被鼠标访问过后出现的样式状态。

二.元素性质

  <a>为行内元素,只可嵌套非a的inline类元素,比如我们最常用的<a href="#"><img src=" " alt=" "></a>  -->图片链接。不可嵌套<div></div>.

  因为a为行内元素,不能对他设置宽和高。

  <head>
  <title></title>
  <style type="text/css">
  a{
  width: 100px;
  height: 100px;
  }
  </style>
  </head>
  <body>
  <a href="#">abc</a>
  </body>

由代码可看出我们对a设置了宽100px,高100px,但是我们看他的结构图

他是默认值的,所以设置宽高无效。

如果一定要对他设置一个宽 高,那么给他加一个属性 display:block,把他显示为块级元素即可。

a{
width: 100px;
height: 100px;
display: block;
}

详解<a>标签的更多相关文章

  1. meta标签详解(meta标签的作用)///////////////////////////转

    meta标签详解(meta标签的作用) 很多人却忽视了HTML标签META的强大功效,一个好的META标签设计可以大大提高你的个人网站被搜索到的可能性,有兴趣吗,谁我来重新认识一下META标签吧   ...

  2. 详解shape标签

    转载自:http://blog.csdn.net/harvic880925/article/details/41850723 一.简单使用 刚开始,就先不讲一堆标签的意义及用法,先简单看看shape标 ...

  3. 详解meta标签

    Meta标签详解,在网上转的,希望对大家有用 引言 您的个人网站即使做得再精彩,在"浩瀚如海"的网络空间中,也如一叶扁舟不易为人发现,如何推广个人网站,人们首先想到的方法无外乎以下 ...

  4. 百度MIP页规范详解 —— canonical标签

    百度MIP的规范要求必须添加强制性标签canonical,不然MIP校验工具会报错: 强制性标签<link rel="/^(canonical)$/"> 缺失或错误 这 ...

  5. html常用标签详解3-a标签

    a标签 1.a标签的属性 a标签属于行内元素标签,双标签<a></a> href:a标签的跳转地址 target:打开方式(_self自身:_blank:新窗口) title: ...

  6. MyBatis的动态SQL详解-各种标签使用

    MyBatis的动态SQL是基于OGNL表达式的,它可以帮助我们方便的在SQL语句中实现某些逻辑. MyBatis中用于实现动态SQL的元素主要有: if choose(when,otherwise) ...

  7. 网页设计:Meta标签详解

    很多人忽视了HTML标签META的强大功效,一个好的META标签设计可以大大提高你的个人网站被搜索到的可能性,有兴趣吗,谁我来重新认识一下META标签吧! META标签是HTML语言HEAD区的一个辅 ...

  8. html标签详解

    html标签详解   <!DOCTYPE> 标签 <!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前. <!DOCTYPE ...

  9. HTML5有语义的内联元素详解

    HTML5有语义的内联元素详解 time标签 time 元素表示一个时间值,比如 5:35 P.M., EST, April 23, 2007.例如: Example Source Code:< ...

随机推荐

  1. NumberToChineseConverter.cs

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.W ...

  2. 《R语言实战》读书笔记-- 第六章 基本图形

    首先写第二部分的前言. 第二部分用来介绍获取数据基本信息的图形技术和统计方法. 本章主要内容 条形图.箱型图.点图 饼图和扇形图 直方图和核密度图 分析数据第一步就是要观察它,用可视化的方式是最好的. ...

  3. Windows下Eclipse连接hadoop

    2015-3-27 参考: http://www.cnblogs.com/baixl/p/4154429.html http://blog.csdn.net/u010911997/article/de ...

  4. java 字符串split有很多坑,使用时请小心!!

    System.out.println(":ab:cd:ef::".split(":").length);//末尾分隔符全部忽略 System.out.print ...

  5. storm-kafka组件中KafkaOffsetMetric相关统计指标说明

    storm-kafka组件中KafkaOffsetMetric相关统计指标说明 storm-kafka是storm提供的一个读取kakfa的组件,用于从kafka队列中消费数据.KafkaOffset ...

  6. 01 Node.js简介, 安装&配置

    Node.js 简介 Node.js 是什么 Node.js 有着强大而灵活的包管理器(node package manager,npm) 目前, 已经有强大第三方工具模块, 例如数据库连接, 网站开 ...

  7. Action<>和Func<> 委托【代理】

    C#中的Action<>和Func<> 其实他们两个都是委托[代理]的简写形式. 一.[action<>]指定那些只有输入参数,没有返回值的委托 Delegate的 ...

  8. js 监听窗口变化

    window.onresize = function () {.....}jquery $(window).resize(function)

  9. Linux 磁盘管理

    Linux磁盘管理好坏管理直接关系到整个系统的性能问题. Linux磁盘管理常用三个命令为df.du和fdisk. df:列出文件系统的整体磁盘使用量 du:检查磁盘空间使用量 fdisk:用于磁盘分 ...

  10. high-frequency words and phases

    abide by(=be faithful to ; obey vt)忠于:遵守. a) Plese feel assured we will abide by our promise. 2. be ...