详解<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;
}