a标签总结
一.<a>定义和用法
<a> 标签定义超链接,用于从一张页面链接到另一张页面。
<a> 元素最重要的属性是 href 属性,它指示链接的目标。
在所有浏览器中,链接的默认外观是:
- 未被访问的链接带有下划线而且是蓝色的
- 已被访问的链接带有下划线而且是紫色的
- 活动链接带有下划线而且是红色的
二.<a> 标签的 target 属性
<a> 标签的 target 属性规定在何处打开链接文档。
如果在一个 <a> 标签内包含一个 target 属性,浏览器将会载入和显示用这个标签的 href 属性命名的、名称与这个目标吻合的框架或者窗口中的文档。如果这个指定名称或 id 的框架或者窗口不存在,浏览器将打开一个新的窗口,给这个窗口一个指定的标记,然后将新的文档载入那个窗口。从此以后,超链接文档就可以指向这个新的窗口。
语法:
<a target="value">
值 | 描述 |
_blank | 在新窗口中打开被链接文档 |
_self | 默认。在相同的框架中打开被链接文档。 |
_parent | 在父框架集中打开被链接文档。 |
_top | 在整个窗口中打开被链接文档。 |
framename | 在指定的框架中打开被链接文档。 |
三.<a>伪类四种状态
伪类是CSS 用于向某些选择器添加特殊的效果。
a标签中有四个:link、visited、hover、active。
(1):link
说明:设置a对象在未被访问前的样式表属性。
(2) :visited
说明:设置a对象在其链接地址已被访问过时的样式表属性。
(3) :hover
说明:设置对象在其鼠标悬停时的样式表属性。
(4) :active
说明:设置对象在被用户激活(在鼠标点击与释放之间发生的事件)时的样式表属性。
定义CSS时候的顺序不同,会直接导致链接显示的效果不同,原因可能在于浏览器解释CSS时遵循的“就近原则”。
正确的顺序:a:link、a:visited、a:hover、a:active
一个便于记忆的“爱恨原则”(LoVe/HAte),即四种伪类的首字母:LVHA
解释:
- link:连接平常的状态
- visited:连接被访问过之后
- hover:鼠标放到连接上的时候
- active:连接被按下的时候
补充:
1.鼠标经过的“未访问链接”同时拥有a:link、a:hover两种属性,后面的属性会覆盖前面的属性定义。
2.鼠标经过的“已访问链接”同时拥有a:visited、a:hover两种属性,后面的属性会覆盖前面的属性定义。
a标签总结的更多相关文章
- a标签点击跳转失效--IE6、7的奇葩bug
一般运用a标签包含img去实现点击图片跳转的功能,这是前端经常要用到的东西. 今天遇到个神奇的bug:如果在img上再包裹一层div,而且div设置了width和height,则图片区域点击时,无任何 ...
- IE6、7下html标签间存在空白符,导致渲染后占用多余空白位置的原因及解决方法
直接上图:原因:该div包含的内容是靠后台进行print操作,输出的.如果没有输出任何内容,浏览器会默认给该空白区域添加空白符.在IE6.7下,浏览器解析渲染时,会认为空白符也是占位置的,默认其具有字 ...
- 百度MIP页规范详解 —— canonical标签
百度MIP的规范要求必须添加强制性标签canonical,不然MIP校验工具会报错: 强制性标签<link rel="/^(canonical)$/"> 缺失或错误 这 ...
- 【CSS进阶】伪元素的妙用--单标签之美
最近在研读 <CSS SECRET>(CSS揭秘)这本大作,对 CSS 有了更深层次的理解,折腾了下面这个项目: CSS3奇思妙想 -- Demo (请用 Chrome 浏览器打开,非常值 ...
- TODO:Laravel 使用blade标签布局页面
TODO:Laravel 使用blade标签布局页面 本文主要介绍Laravel的标签使用,统一布局页面.主要用到到标签有@yield,@ stack,@extends,@section,@stop, ...
- 最新 去掉 Chrome 新标签页的8个缩略图
chrome的新标签页的8个缩略图实在让人不爽,网上找了一些去掉这个略缩图的方法,其中很多已经失效.不过其中一个插件虽然按照原来的方法已经不能用了,但是稍微变通一下仍然是可以用的(本方法于2017.1 ...
- css-父标签中的子标签默认位置
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- xpath提取多个标签下的text
title: xpath提取多个标签下的text author: 青南 date: 2015-01-17 16:01:07 categories: [Python] tags: [xpath,Pyth ...
- 多个Img标签之间的间隙处理方法
1.多个标签写在一行 <img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/> ...
- html5标签canvas函数drawImage使用方法
html5中标签canvas,函数drawImage(): 使用drawImage()方法绘制图像.绘图环境提供了该方法的三个不同版本.参数传递三种形式: drawImage(image,x,y):在 ...
随机推荐
- SecureCRT sftp上传文件报错:put: failed to upload xxx 拒绝访问
1.问题 使用sftp上传文件时报错:put: failed to upload xxx 拒绝访问.类似下图所示: 2.原因 造成这个问题的原因可能有两个,一是要上到的那个目录剩余磁盘空间不足,二是打 ...
- 牛客网 PAT 算法历年真题 1009 : 1019. 数字黑洞 (20)
1019. 数字黑洞 (20) 时间限制 1000 ms 内存限制 32768 KB 代码长度限制 100 KB 判断程序 Standard (来自 小小) 题目描述 给定任一个各位数字不完全相同的4 ...
- paysoft 网关出现EntityRef:expecting;的错误。
paysoft 网关出现EntityRef:expecting;的错误. 原因是传进去的url里有&字符,之前是自动转义的,现在要手工改成& http://www.runoob.com ...
- python3.7 安装
python3.7 安装 下载安装 cd /usr/localwget https://www.python.org/ftp/python/3.7.2/Python-3.7.2.tgztar -xvf ...
- Spring整合Hystrix
1.添加maven依赖 <dependency> <groupId>com.netflix.hystrix</groupId> <artifactId> ...
- CentOS下安装mysql5.7和mysql8.x
5.7和8.15版本亲测.centos版本为:CentOS-7-x86_64-Minimal-1810. 1.下载mysql57-community-release-el7-9.noarch.rpm. ...
- body中的onload()函数和jQuery中的document.ready()有什么区别?
1.我们可以在页面中使用多个document.ready(),但只能使用一次onload(). 2.document.ready()函数在页面DOM元素加载完以后就会被调用,而onload()函数则要 ...
- linux:SSH最简单教程
1.简介 ssh是一种用于计算机之间的加密登录协议.用户从本地计算机用ssh协议登录另一台计算机就可以认为登录安全,中途截获密码也不会泄露. 2.原理 (1)用户发登录请求给远程主机 (2)远程主机发 ...
- oo作业总结报告
oo第一次博客 以前从未真正的写过Java代码,接触Java也只是寒假的时候简单的看了看语法,不懂该如何面向对象,但没事,心里不惧,想着什么都是可以学的(直到真正开始写工程的时候,才发现自己还是太天真 ...
- CentOS7安装cratedb
crate: 下载: https://crate.io/download/thank-you/?download=tar crash: 下载: https://crate.io/docs/client ...