重新认识a标签

69 阅读3分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第26天,点击查看活动详情

浏览器打开的页面称之为文档,网页通常通过A标签(超链接)实现网页的跳转。

HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。

a标签(超链接)的内容可以是一个字,一个词,或者一组词,也可以是一幅图像,可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

一、A标签基本用法:

1、跳转网页

<a href="http://www.baidu.com">跳转</a>

a标签之间必须有内容,否则标签不能显示,内容可以是文字、图像、标签等

// 图片链接 
<a href="http://www.baidu.com">
    <img src="../test.png"/>
</a> 

// 内容为其他标签
<a href="http://www.baidu.com">
    <h1>标题<h1/>
</a> 

2、锚点链接

A标签可以跳转到当前页面中的某一位置,该链接成为锚点链接。

<a href="#title">跳往标题</a> 

<div style="height: 800px" />

<h1 id="title">标题</h1>

当页面高度足够高时才能实现锚点的跳转,锚点链接的跳转时通过id属性进行跳转的。

3、作为普通元素进行使用

页面中有很多链接并不需要进行跳转,而是使用JS进行一系列操作,为了保持语义化和代码习惯,很多地方还是使用A标签进行布局。

<a>单纯的a标签,没有href属性,失去a标签的功能</a>

// href表示交给js处理
<a href="javascript:void(0)">
    表示a标签用于Js交互,效果和没有hrefa标签一样
</a>

// 可以简写
<a href="javascript:;">
    表示a标签用于Js交互,效果和没有hrefa标签一样
</a>

4、刷新页面

当跳转链接时,默认就刷新页面,这也是a标签的默认事件,我们可以通过a标签实现刷新当前页面

<a href="">href为空的时候,可以刷新当前页面</a>

5、回到页面顶部

<a href="#">回到顶部</a>

href属性指定为#,表示回到当前页面的顶部,不会刷新页面。

二、a标签的特性

1、a标签既是块级元素,也是内联元素:

a标签可以定义宽高,但默认并不占据一行。

clipboard.png

2、a标签默认事件为:刷新当前页面

可以通过JS组织A标签的默认事件。

3、链接打开方式:

a标签有个特有属性target,该属性规定了被链接的文本以什么形式打开

a标签默认在原窗口打开,设置 target = "_blank" 可以在新窗口打开链接

属性值:

   _blank 在新窗口打开链接页面
   _parent 在上一级窗口打开链接页面
   _self 在当前窗口打开链接页面
   _top
   framename 在指定frame中打开链接页面

三、a标签的状态

可以通过css为这些状态添加不同的样式。

a.link  /* 未访问链接*/  
a.visited  /* 已访问链接*/  
a:hover  /* 鼠标移入链接*/  
a:active  /* 链接被点击的那一瞬间*/

注意事项:在设置样式的时候,需要注意先后顺序。

  • a:hover 必须跟在 a:link 和 a:visited后面
  • a:active 必须跟在 a:hover后面