A标签讲解

2019-02-09 11:57:37 / 打印

今天我们来说一下A标签;在实际网页当中,A标签一般用来做跳转,有如下两种功能:1.跳转网页  2.跳转页面制定位置;

我们先来说一下跳转网页;

如图1所示,我们保存一个html文档,可以通过在A标签中利用href输入链接,来进行跳转。

接下来我们说一下跳转页面指定位置;这种跳转分两种,一种是利用A标签添加锚记,另外一种是跳转是ID选择器位置;

先来说A标签添加锚记

如图3所示,我们可以通过A标签的name属性来进行锚记添加,然后在直接用href跳转到指定位置即可。同时,如果没有添加任何地址,在href中添加#,则可以直接跳转至首页。

如图4所示,我们也可以通过ID选择器来进行A标签跳转,但是需要考虑浏览器兼容问题,大家可以用谷歌浏览器看一下效果;

再跟大家说一下A标签的四种伪类属性:link-未访问、visited-已访问、hover-鼠标经过、active-选中;

如图5所示,在书写当中,我们需要注意:hover必须在link及visited之后才能生效,active也必须在hover之后才能生效!

但是实际我们其实用的最多的就是hover,我们可以通过这个hover来添加一些简单交互效果,这个我们后续在说明;

最后在跟大家讲一下A标签布局;

大家仔细观察会发现我们四个A标签中间会有缝隙,这个是因为我们A标签书写过程中利用enter换行;针对这个效果,我们有几种解决法方案,我们今天跟大家讲一种比较常用的方式——浮动布局;

A标签默认是内联,我们可以通过display:block;转化成块级,然后在配合浮动让A标签横向排列,此时A标签可以拥有宽高属性,同时中间的缝隙也会被处理。

假期即将结束,各位小伙伴做好准备。