一.<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标签总结的更多相关文章

  1. a标签点击跳转失效--IE6、7的奇葩bug

    一般运用a标签包含img去实现点击图片跳转的功能,这是前端经常要用到的东西. 今天遇到个神奇的bug:如果在img上再包裹一层div,而且div设置了width和height,则图片区域点击时,无任何 ...

  2. IE6、7下html标签间存在空白符,导致渲染后占用多余空白位置的原因及解决方法

    直接上图:原因:该div包含的内容是靠后台进行print操作,输出的.如果没有输出任何内容,浏览器会默认给该空白区域添加空白符.在IE6.7下,浏览器解析渲染时,会认为空白符也是占位置的,默认其具有字 ...

  3. 百度MIP页规范详解 —— canonical标签

    百度MIP的规范要求必须添加强制性标签canonical,不然MIP校验工具会报错: 强制性标签<link rel="/^(canonical)$/"> 缺失或错误 这 ...

  4. 【CSS进阶】伪元素的妙用--单标签之美

    最近在研读 <CSS SECRET>(CSS揭秘)这本大作,对 CSS 有了更深层次的理解,折腾了下面这个项目: CSS3奇思妙想 -- Demo (请用 Chrome 浏览器打开,非常值 ...

  5. TODO:Laravel 使用blade标签布局页面

    TODO:Laravel 使用blade标签布局页面 本文主要介绍Laravel的标签使用,统一布局页面.主要用到到标签有@yield,@ stack,@extends,@section,@stop, ...

  6. 最新 去掉 Chrome 新标签页的8个缩略图

    chrome的新标签页的8个缩略图实在让人不爽,网上找了一些去掉这个略缩图的方法,其中很多已经失效.不过其中一个插件虽然按照原来的方法已经不能用了,但是稍微变通一下仍然是可以用的(本方法于2017.1 ...

  7. css-父标签中的子标签默认位置

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  8. xpath提取多个标签下的text

    title: xpath提取多个标签下的text author: 青南 date: 2015-01-17 16:01:07 categories: [Python] tags: [xpath,Pyth ...

  9. 多个Img标签之间的间隙处理方法

    1.多个标签写在一行 <img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/> ...

  10. html5标签canvas函数drawImage使用方法

    html5中标签canvas,函数drawImage(): 使用drawImage()方法绘制图像.绘图环境提供了该方法的三个不同版本.参数传递三种形式: drawImage(image,x,y):在 ...

随机推荐

  1. nginx反向代理配置相对路径

    需求: 在公司内部搭建了一个php的网站,想用花生壳映射到外网. 一.反向代理解决直接映射不成功问题 直接用把花生壳的"域名+端口"指向此php网站并竟然不生效.但是不加网站名可以 ...

  2. vul/0day/shellcode/payload/poc/exp

    vul--泛指漏洞 0day--未公开或虽已公开但还没有修复方法的漏洞 shellcode--远程溢出后执行的那段代码 payload--攻击载荷,送到远端机器执行的整段代码 poc--Proof o ...

  3. 使用MongoDB数据库(1)(三十五)

    MongoDB简介 MongoDB是一个基于分布式文件存储的数据库,它是一个介于关系数据库和非关系数据库之间的产品,其主要目标是在键/值存储方式(提供了高性能和高度伸缩性)和传统的RDBMS系统(具有 ...

  4. @Configuration的使用 和作用

    1从spring4.0以后,@Spring boot Application就包含了@ComponentScan,@ComponentScan就不用写了 2@MapperScan(basePackag ...

  5. 字符串和数组----vector

    vector能容纳绝大多数类型的对象作为其元素,但是因为引用不是对象,所以不存在包含引用的vector. 使用vector需要包含头文件vector. 1.初始化vector对象的方法 1)vecto ...

  6. ci框架多语言切换

    1.多语言切换首先配置config文件默认语言 2.创建自己的语言包:language chinese english目录下的语言包文件名必须以  xx_lang.php 可根据自己的需求创建数组: ...

  7. react之传递数据的几种方式props传值、路由传值、状态提升、redux、context

    react之传递数据的几种方式 1.父子传值 父传值:<子的标签 value={'aaa'} index={'bbb'}></子的标签> 子接值:<li key={thi ...

  8. Entrust - Laravel 用户权限系统解决方案

    Zizaco/Entrust 是 Laravel 下 用户权限系统 的解决方案, 配合 用户身份认证 扩展包 Zizaco/confide 使用, 可以快速搭建出一套具备高扩展性的用户系统. Conf ...

  9. [POJ3416]Crossing

    Problem 给你n个点,m个询问,每个询问有x, y 问以(x,y)为原点建立的平面直角坐标系分割的第一象限和第三象限的点数和减去第二象限和第四象限的点数和 Solution 用2个树状数组维护一 ...

  10. vue-3-Class 与 Style 绑定

    对象语法: <div v-bind:class="{ active: isActive }"></div> <div class="stat ...