详解<a>标签
相信对于学前端的人而言<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>标签的更多相关文章
- meta标签详解(meta标签的作用)///////////////////////////转
meta标签详解(meta标签的作用) 很多人却忽视了HTML标签META的强大功效,一个好的META标签设计可以大大提高你的个人网站被搜索到的可能性,有兴趣吗,谁我来重新认识一下META标签吧 ...
- 详解shape标签
转载自:http://blog.csdn.net/harvic880925/article/details/41850723 一.简单使用 刚开始,就先不讲一堆标签的意义及用法,先简单看看shape标 ...
- 详解meta标签
Meta标签详解,在网上转的,希望对大家有用 引言 您的个人网站即使做得再精彩,在"浩瀚如海"的网络空间中,也如一叶扁舟不易为人发现,如何推广个人网站,人们首先想到的方法无外乎以下 ...
- 百度MIP页规范详解 —— canonical标签
百度MIP的规范要求必须添加强制性标签canonical,不然MIP校验工具会报错: 强制性标签<link rel="/^(canonical)$/"> 缺失或错误 这 ...
- html常用标签详解3-a标签
a标签 1.a标签的属性 a标签属于行内元素标签,双标签<a></a> href:a标签的跳转地址 target:打开方式(_self自身:_blank:新窗口) title: ...
- MyBatis的动态SQL详解-各种标签使用
MyBatis的动态SQL是基于OGNL表达式的,它可以帮助我们方便的在SQL语句中实现某些逻辑. MyBatis中用于实现动态SQL的元素主要有: if choose(when,otherwise) ...
- 网页设计:Meta标签详解
很多人忽视了HTML标签META的强大功效,一个好的META标签设计可以大大提高你的个人网站被搜索到的可能性,有兴趣吗,谁我来重新认识一下META标签吧! META标签是HTML语言HEAD区的一个辅 ...
- html标签详解
html标签详解 <!DOCTYPE> 标签 <!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前. <!DOCTYPE ...
- HTML5有语义的内联元素详解
HTML5有语义的内联元素详解 time标签 time 元素表示一个时间值,比如 5:35 P.M., EST, April 23, 2007.例如: Example Source Code:< ...
随机推荐
- Prince2是怎么考试的?
Prince2是怎么考试的? 在前几年,对于项目经理来讲关注的很多是单项目管理的工具技术模板,谈论最多的是,进度延期,成本超支,范围蔓延等等!有一个不成文的形态就是--去考个PMP吧!一时间PMP成为 ...
- String s ; 和 String s = null ; 和 String s = "" ; 的却别
String s ;该语句表示只是声明了一个引用变量,但是并没有初始化引用,所以对变量s的任何操作(除了初始化赋值外) 都将引发异常. String s=null; 表示未申请任何内存资源,即此语句表 ...
- [课程设计]Scrum 3.1 多鱼点餐系统开发进度(第三阶段项目构思与任务规划)
Scrum 3.1 多鱼点餐系统开发进度(第三阶段项目构思与任务规划) 1.团队名称:重案组 2.团队目标:长期经营,积累客户充分准备,伺机而行 3.团队口号:矢志不渝,追求完美 4.团队选题:餐厅到 ...
- c/s 与b/s构架
C/S架构是一种比较早的软件架构,主要应用于局域网内.在这之前经历了集中计算模式,随着计算机网络的进步与发展,尤其是可视化工具的应用,出现过两层C/S和三层C/S架构,不过一直很流行也比较经典的是我们 ...
- epoll实现压测工具
代码: /* * g++ -o stress_test ./stress_test.cpp */ #include <stdlib.h> #include <stdio.h> ...
- CocoaPods安装第三方出错:XCode7.3
错误[!] The dependency `Masonry (~> 0.6.1)` is not used in any concrete target. 在之前,我使用的版本是XCode7.0 ...
- 《BI那点儿事》数据流转换——OLE DB 命令转换
OLE DB命令对数据流中的数据行执行一个OLE DB命令.它针对数据表中的每一行进行更新操作,可以事先将要更新的数据存放在表中.或者针对一个有输入参数的存储过程,可以将这些参数存放在一个数据表中,不 ...
- Appium自动化测试1 - 安装部署
主要参考文章“虫师”自动化部署教程,不过结合自己的一些情况记录此博客~ 1.准备安装包 1)jdk; 下载及安装过程省略,我下载的是jdk1.7版本. 2) adt&SDK; SDK下载的是e ...
- STM32学习笔记(七) ADC模数转换测电平(普通和DMA模式)
嵌入式系统在微控制领域(温度,湿度,压力检测,四轴飞行器)中占据着重要地位,这些功能的实现是由微处理器cpu(如stm32)和传感器以及控制器共同完成的,而连接他们,使它们能够互相正常交流的正是本小节 ...
- javascript模仿php 函数 trim ltrim rtrim (原创)
javascript模仿php 函数 trim ltrim rtrim,去除字符串两边空格或其他符号 本文地址:js trim js php trim function trims(){ this. ...