HTML a标签、4个伪类、常用属性(下载)、锚链接(待扩展:邮件、电话、短信、GPS)
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)的更多相关文章
- 超链接标签的CSS伪类link,visited,hover,active
CSS伪类,是一种特殊的类,它针对到CSS选择器起作用,使选中的标签或元素产生特定的效果. CSS伪类的语法就是: 选择器 : 伪类名 { 属性 : 属性值 } 用的最多的伪类就是超链接a的伪类,有: ...
- 清除系统默认样式,文本样式,高级选择器(权重),边界圆角,a标签的四大伪类,背景图片
清除系统默认样式 大多系统预定义标签,有默认样式,不满足实际开发需求,反倒影响布局通常清除系统样式,利于开发 body,h1-h6,p,table { margin:; } ul { margin:; ...
- 盒子总结,文本属性操作,reset操作,高级选择器,高级选择器优先级,边界圆角(了解),a标签的四大伪类,背景图片操作,背景图片之精灵图
盒子总结 ''' block: 设置宽高 1.没有设置宽,宽自适应父级的宽(子级的border+padding+width=父级的width) 2.没有设置高,高由内容撑开 设置了宽高 一定采用设置的 ...
- Selectivizr-让IE6~8支持CSS3伪类和属性选择器
一.下载和demo 下载: 您可以狠狠地点击这里:selectivizr-1.0.0.zip(右键-[目标|链接另存为] 9.24K) demo: 您可以狠狠地点击这里:Selectivizr部分属性 ...
- Delphi中TStringList类常用属性方法详解
TStrings是一个抽象类,在实际开发中,是除了基本类型外,应用得最多的. 常规的用法大家都知道,现在来讨论它的一些高级的用法. 先把要讨论的几个属性列出来: 1.CommaText 2.Delim ...
- Java初学者作业——定义客户类(Customer),客户类的属性包括:姓名、年龄、电话、余额、账号和密码;方法包括:付款。
返回本章节 返回作业目录 需求说明: 定义客户类(Customer),客户类的属性包括:姓名.年龄.电话.余额.账号和密码:方法包括:付款. 实现思路: 定义 Customer 类,并添加姓名.余额. ...
- HTML5新标签和CSS伪类
HTML5提供了很多新的标签,由于HTML5的兼容性比较差,HTML5的标签常用于手机端 <nav> <footer> <section> <header&g ...
- 第49天学习打卡(CSS 层次选择器 结构伪类选择器 属性选择器 美化网页元素 盒子模型)
推荐书籍:码出高效: Java 开发手册 2.2 层次选择器 idea里代码规范是按:ctrl +alt+L快捷键 注释快捷键:ctrl+/ 1.后代选择器:在某个元素的后面 祖爷爷 爷爷 爸爸 你 ...
- HTML[2种特殊选择器]_伪类选择器&属性选择器
本文介绍两种特殊的选择器 1.伪类选择器 2.属性选择器 1.伪类选择器 ...: nth-of -type (x) x为同类型兄弟元素中的排名 例如: <body> <ul> ...
随机推荐
- 安装Ubuntu的那些事儿(续)
由于我的第一篇Blog并没有给出完全解决进Ubuntu系统时显卡所造成的问题,至于那个装显卡驱动的方法本人也没有去做,感兴趣的朋友可以在网上教程试一试. 至于我的那个在高系选项中进行配置也不是好的方法 ...
- shell中各种括号的作用()、(())、[]、[[]]、{}
一.小括号,圆括号() 1.单小括号 () ①命令组.括号中的命令将会新开一个子shell顺序执行,所以括号中的变量不能够被脚本余下的部分使用.括号中多个命令之间用分号隔开,最后一个命令可以没有 ...
- 编程中Foo, Bar 到底什么意思?
1 前言 在很多国外计算机书本和一些第三份开源软件的Demo中经常用到两个英文单词Foo,Bar.这到底是什么意思呢?从步入屌丝界的IT生活见到这两个单词到现在我还是不知道这两个单词的真正含义,今天有 ...
- 开源一个windows下的定时任务框架,简单粗暴好用。
这里是你想要的功能: 支持插件,将你要执行的任务编译成程序集放到框架的根目录下,再进行简单的配置就行了. 支持Corn表达式.想让任务在什么时候执行就在什么时候执行. 支持安装成windows ser ...
- Postgresql 数据库维护
删除数据库 sudo -u postgres dropdb $DB_NAME 创建数据库 sudo -u postgres psql CREATE DATABASE $DB_NAME WITH ENC ...
- .NET 缩略图服务器 ResizingServer
之前写过一篇文章 .NET 响应式自动缩略图服务器 之后对此Image Server又进行了基于ImageResizer的改写 基于.NET 图片服务器 支持缩略图格式 基于 ImageResizer ...
- hadoop.home.dir is not set
今天遇到一个错误,JAVA堆栈如下: 是在获取文件系统对象的时候出错,没有找到环境变量 HADOOP_HOME or hadoop.home.dir ,但是在本地一直没有重现这个问题. 这个问题是一个 ...
- Android APP 读取 AndroidManifest.xml 中的版本信息详解
APP都会涉及到版本的问题,Android APP的版本信息保存在AndroidManifest.xml文件的顶部.如下图: 有2个属性表示,“android:versionCode”和“androi ...
- JS入门学习,写一个简单的图片库
<!-- 新手刚开始学JS,每天坚持写点东西 坚持下去,希望能有所进步 . 加油~~ --> <!DOCTYPE html> ...
- 俄罗斯方块(Java实现)
程序效果: 代码: //Box.java 1 package tetris; public class Box { private final int M = 30, N = 12; private ...