HTML/CSS: 浅谈<a>标签及伪类选择器

1.基础知识

“超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。” —HTML链接

而对于超文本，简单的说便是通过一个特定的标识符，定位到文本所在的地方，然后将其链接到本页面中。详细请参考：什么是超文本

相对路径：就是指由这个文件所在的路径引起的跟其它文件（或文件夹）的路径关系。简单的说便是以当前文件为参考点而继续补充的路径。例如：在apple文件夹中有index.html、image文件夹，image文件夹下有apple.gif。那么，在index.html中apple.gif的相对路径即为
image/apple.gif而无需重复apple文件夹：/apple/image/apple.gif(绝对路径)。

绝对路径：绝对路径是指目录下的绝对位置，直接到达目标位置。

URL： Uniform Resource Locator，统一资源定位符，是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示，是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。URL主要包含三部分：协议、域名、路径.

在HTML中，<a>标签可以实现超链接，它的语法非常简单(不加属性)：

<a href="url">Link text</a>

href的键值可以是相对路径，可以是绝对路径，也可以是URL。

相对路径与绝对路径的区别由上文的定义便可轻易区分开来，显然是选择相对路径。也许你会有疑惑：服务器一般是通过绝对路径来获取相应文档，那么为什么相对路径也能实现这一目标呢？原因很简单，这是浏览器的功劳—浏览器在后台会根据相对路径和所单击页面的路径创建一个绝对路径。

搞明白了相对路径与绝对路线，又有一个问题出现了：是采取URL路径呢还是使用相对路径方便呢？

规则：在web中，相对路径只用来链接同一网站内的页面，而URL通常用来链接其它网站。

因为，如果全部是URL，会有以下问题：
(1)URL很长，不容易编辑，而且也会影响HTML的可读性；
(2)当以URL的形式链接A网站时，如果改变了A网站的地址，一旦有多处该链接，那么需要改动的地方就有很多，大大增加了工作量。但是如果使用的是相对路径，那么有些情况下对源代码的影响几乎为0.

接下来谈谈<a>标签的另一个属性：target
使用target属性可以实现在新窗口打开该链接:

<a href="url" target="_blank">

target的键值不一定是“_blank”，也可以是其他的内容。例如设置的键值是“page1”，那么所有设置target键值为“page1”的超链接都会在同一个窗口打开。

2.应用

了解完基础知识，我们来了解它的应用。在此处我主要是想阐述“把图片作为链接”的两种实现方法：

方法一：嵌套标签

<a href="url"><img src="xxx.gif" /></a>

方法二：设置背景(css)

a{
    display:block; // 将<a>标签变成块状元素,这样设置才能显示完整背景
    width:100px; // 宽度自定义
    height:100px; //高度自定义
    background-image: url("xxx.gif");
}

3.伪类选择器

什么是伪类？伪类就是与类一样能够定义样式，但却不是真正意义上的类。
不是真正意义上的类？也就是说你可以在css中定义它的样式，就像定义类一样，但是你在HTML中不能找到该伪类的踪影。
HTML中没有伪类的踪影，那它是如何实现样式的呢？浏览器会在后台向这些伪类增加和删除元素。

对于<a>元素，我们可以用“多重人格”来形容它。对于该标签，它一共有五种状态：:link, :visited, :hover, :focus, :active.

“:link”可以用于声明未访问状态链接的样式；
“:visited”可以用于声明已经访问链接的样式；
“:hover”可以用于声明鼠标悬停在链接上的样式；
“:focus”可以用于声明浏览器焦点悬停在链接上的样式(通过键盘选择链接)；
“:active”可以用于声明浏览器点击链接的样式。

注意：冒号前后不要出现空格。

---

以上内容皆为本人观点，欢迎大家提出批评和指导，我们一起探讨！

---