HTML 超链接<a>

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

2、当您把鼠标指针移动到网页中的某个链接上时,箭头会变为一只小手。

3、标签<a> 中使用了href属性来描述链接的地址。

默认情况下,链接将以以下形式出现在浏览器中:

  • 一个未访问过的链接显示为蓝色字体并带有下划线。
  • 访问过的链接显示为紫色并带有下划线。
  • 点击链接时,链接显示为红色并带有下划线。

注意:如果为这些超链接设置了 CSS 样式,展示样式会根据 CSS 的设定而显示

4个伪类

a:link       有链接属性的时候

a:visited   链接地址已被访问过

a:hover     鼠标悬停

a:active    被用户激活(在鼠标点击和释放之间的发生的事件)

不过这4种标签的写法有排序,写错会失效和错乱(以上的排序是正确的)

快速记忆原则:LoVe/HAte(link、visited、hover、active)

a:link、a:visited 这两个是持久形样式

a:hover、a:active 这两个是瞬间形样式

理解解释:

1、当我们不做任何操作时看到的样式为持久形(link、visited)样式控制的,有悬停或者点击操作时是由瞬间形(hover、active)样式控制的,所以,为防止有悬停或点击操作时样式被持久形的覆盖,瞬间样式的代码应该在持久样式的下面。

2、所有的链接都是a:link(有链接属性的),但不是所有的都被访问过a:visited(被访问过的链接),为避免样式覆盖,a:visited应该在a:link的下面。

3、同理,当链接被点击的时候一定是悬停的,所以当悬停时候用a:hover,当点击的时候a:active覆盖a:hover的代码。故a:activea放在最下面。

总结下来就是:

a:link —>a:visited —>a:hover —>a:active

当然a{}的样式不参与这几个伪类的排序,可以在上面也可以在下面。不影响效果。

常用属性:

New :HTML5 中的新属性。

属性 描述
download(New) filename 指定下载链接
href URL 规定链接的目标 URL。
name section_name HTML5 不支持。规定锚的名称。
rel alternate
author
bookmark
help
license
next
nofollow
noreferrer
prefetch
prev
search
tag
规定当前文档与目标 URL 之间的关系。仅在 href 属性存在时使用。
target _blank
_parent
_self
_top
framename
规定在何处打开目标 URL。仅在 href 属性存在时使用。
type(New) MIME_type 规定目标 URL 的 MIME 类型。仅在 href 属性存在时使用。
注:MIME = Multipurpose Internet Mail Extensions。

锚链接

之前的锚链接(现在已经不支持)

<a name="C4">第四章</a>

H5不再支持锚链接的名称使用name,改用id

<a id="C4">第四章</a>

引用方式不变

<a href="#c4"> 链接到第四章</a>

  

其他的等待更新......

HTML a标签、4个伪类、常用属性(下载)、锚链接(待扩展:邮件、电话、短信、GPS)的更多相关文章

  1. 超链接标签的CSS伪类link,visited,hover,active

    CSS伪类,是一种特殊的类,它针对到CSS选择器起作用,使选中的标签或元素产生特定的效果. CSS伪类的语法就是: 选择器 : 伪类名 { 属性 : 属性值 } 用的最多的伪类就是超链接a的伪类,有: ...

  2. 清除系统默认样式,文本样式,高级选择器(权重),边界圆角,a标签的四大伪类,背景图片

    清除系统默认样式 大多系统预定义标签,有默认样式,不满足实际开发需求,反倒影响布局通常清除系统样式,利于开发 body,h1-h6,p,table { margin:; } ul { margin:; ...

  3. 盒子总结,文本属性操作,reset操作,高级选择器,高级选择器优先级,边界圆角(了解),a标签的四大伪类,背景图片操作,背景图片之精灵图

    盒子总结 ''' block: 设置宽高 1.没有设置宽,宽自适应父级的宽(子级的border+padding+width=父级的width) 2.没有设置高,高由内容撑开 设置了宽高 一定采用设置的 ...

  4. Selectivizr-让IE6~8支持CSS3伪类和属性选择器

    一.下载和demo 下载: 您可以狠狠地点击这里:selectivizr-1.0.0.zip(右键-[目标|链接另存为] 9.24K) demo: 您可以狠狠地点击这里:Selectivizr部分属性 ...

  5. Delphi中TStringList类常用属性方法详解

    TStrings是一个抽象类,在实际开发中,是除了基本类型外,应用得最多的. 常规的用法大家都知道,现在来讨论它的一些高级的用法. 先把要讨论的几个属性列出来: 1.CommaText 2.Delim ...

  6. Java初学者作业——定义客户类(Customer),客户类的属性包括:姓名、年龄、电话、余额、账号和密码;方法包括:付款。

    返回本章节 返回作业目录 需求说明: 定义客户类(Customer),客户类的属性包括:姓名.年龄.电话.余额.账号和密码:方法包括:付款. 实现思路: 定义 Customer 类,并添加姓名.余额. ...

  7. HTML5新标签和CSS伪类

    HTML5提供了很多新的标签,由于HTML5的兼容性比较差,HTML5的标签常用于手机端 <nav> <footer> <section> <header&g ...

  8. 第49天学习打卡(CSS 层次选择器 结构伪类选择器 属性选择器 美化网页元素 盒子模型)

    推荐书籍:码出高效: Java 开发手册 2.2 层次选择器 idea里代码规范是按:ctrl +alt+L快捷键 注释快捷键:ctrl+/ 1.后代选择器:在某个元素的后面 祖爷爷 爷爷 爸爸 你 ...

  9. HTML[2种特殊选择器]_伪类选择器&属性选择器

    本文介绍两种特殊的选择器 1.伪类选择器 2.属性选择器 1.伪类选择器 ...: nth-of -type (x) x为同类型兄弟元素中的排名 例如: <body> <ul> ...

随机推荐

  1. CentOS系统 yum 安装 iftop实时流量监控工具

    一. 不多说其他的无用话题.直接看步骤: 1.要安装某个工具,首先得知道这个工具需要依赖包. eg:iftop 就依赖 以下这几个依赖包(不清楚工具依赖什么包“Google.百度”). flex   ...

  2. Python进阶【第二篇】多线程、消息队列queue

    1.Python多线程.多进程 目的提高并发 1.一个应用程序,可以有多进程和多线程 2.默认:单进程,单线程 3.单进程,多线程 IO操作,不占用CPU python的多线程:IO操作,多线程提供并 ...

  3. Python基础之面向对象

    一.面向对象概述 面向对象编程——Object Oriented Programming,简称OOP,是一种程序设计思想.OOP把对象作为程序的基本单元,一个对象包含了数据和操作数据的函数. 面向过程 ...

  4. RPM包制作教程

    一.RPM介绍 RPM 前是Red Hat Package Manager 的缩写,本意是Red Hat 软件包管理,顾名思义是Red Hat 贡献出来的软件包管理:现在应为RPM Package M ...

  5. 找不到mysql.sock,mysql.sock丢失问题解决方法

    Can 't connect to local MySQL server through socket '/var/lib/mysql/mysql.sock '(2) "; 是你的mysql ...

  6. Sql server2012 常见异常处理

    网络相关 无法通过IP(127.0.0.1 或者其他本机)连接 确保TCP/IP功能开启 打开1433端口 权限相关 代理的权限,通过更改有最高权限的用户,或者给该用户指定的权限 给域用户开通SQLS ...

  7. 对象比较器:Comparable和Comparator

    在进行对象数组排序的过程中需要使用到比较器,比较器有两个:Comparable和Comparator ①.java.lang.Comparable:是在类定义是时候默认实现好的接口,里面提供有一个co ...

  8. 自定义UICollectionLayout布局 —— UIKit之学习UICollectionView记录一《瀑布流》

    一.思路 思路一:比较每一行所有列的cell的高度,从上到下(也就是从第一行开始),从最短的开始计算,(记录下b的高度和索引,从开始计算,依次类推) 思路二:设置上.下.左.右间距和行间距.列间距及列 ...

  9. __definedGetter\Setter__的一些想法

    __definedGetter\Setter__ 是JS5在创建对象后内置的方法,用于在读写对象属性的时候执行的方法. zhangmingzhi.__defineSetter__('age',func ...

  10. 为什么Java不支持多继承?

    没想过面试的时候,会遇到语言设计上的问题.现场答得并不好因为一直没思考过,经过了点搜索,渐渐有点思路. 1. 避免“钻石型”多继承问题:有两个类B和C继承自A.假设B和C都继承了A的方法并且进行了覆盖 ...