开启掘金成长之旅!这是我参与「掘金日新计划 · 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交互,效果和没有href的a标签一样
</a>
// 可以简写
<a href="javascript:;">
表示a标签用于Js交互,效果和没有href的a标签一样
</a>
4、刷新页面
当跳转链接时,默认就刷新页面,这也是a标签的默认事件,我们可以通过a标签实现刷新当前页面
<a href="">href为空的时候,可以刷新当前页面</a>
5、回到页面顶部
<a href="#">回到顶部</a>
href属性指定为#,表示回到当前页面的顶部,不会刷新页面。
二、a标签的特性
1、a标签既是块级元素,也是内联元素:
a标签可以定义宽高,但默认并不占据一行。
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后面