HTML/CSS: 浅谈a标签及伪类选择器
1.基础知识
“超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。” —HTML链接
而对于超文本,简单的说便是通过一个特定的标识符,定位到文本所在的地方,然后将其链接到本页面中。详细请参考:什么是超文本
相对路径:就是指由这个文件所在的路径引起的跟其它文件(或文件夹)的路径关系。简单的说便是以当前文件为参考点而继续补充的路径。例如:在apple文件夹中有index.html、image文件夹,image文件夹下有apple.gif。那么,在index.html中apple.gif的相对路径即为
而无需重复apple文件夹:
image/apple.gif/apple/image/apple.gif(绝对路径)
。
绝对路径:绝对路径是指目录下的绝对位置,直接到达目标位置。
URL: Uniform Resource Locator,统一资源定位符,是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示,是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL,它包含的信息指出文件的位置以及浏览器应该怎么处理它。URL主要包含三部分:协议、域名、路径.
在HTML中,<a>
标签可以实现超链接,它的语法非常简单(不加属性):
<a href="url">Link text</a>
href的键值可以是相对路径,可以是绝对路径,也可以是URL。
相对路径与绝对路径的区别由上文的定义便可轻易区分开来,显然是选择相对路径。也许你会有疑惑:服务器一般是通过绝对路径来获取相应文档,那么为什么相对路径也能实现这一目标呢?原因很简单,这是浏览器的功劳—浏览器在后台会根据相对路径和所单击页面的路径创建一个绝对路径。
搞明白了相对路径与绝对路线,又有一个问题出现了:是采取URL路径呢还是使用相对路径方便呢?
规则:在web中,相对路径只用来链接同一网站内的页面,而URL通常用来链接其它网站。
因为,如果全部是URL,会有以下问题:
(1)URL很长,不容易编辑,而且也会影响HTML的可读性;
(2)当以URL的形式链接A网站时,如果改变了A网站的地址,一旦有多处该链接,那么需要改动的地方就有很多,大大增加了工作量。但是如果使用的是相对路径,那么有些情况下对源代码的影响几乎为0.
接下来谈谈<a>
标签的另一个属性:target
使用target
属性可以实现在新窗口打开该链接:
<a href="url" target="_blank">
target
的键值不一定是“_blank”,也可以是其他的内容。例如设置的键值是“page1”,那么所有设置target键值为“page1”的超链接都会在同一个窗口打开。
2.应用
了解完基础知识,我们来了解它的应用。在此处我主要是想阐述“把图片作为链接”的两种实现方法:
方法一:嵌套标签
<a href="url"><img src="xxx.gif" /></a>
方法二:设置背景(css)
a{display:block; // 将<a>标签变成块状元素,这样设置才能显示完整背景width:100px; // 宽度自定义height:100px; //高度自定义background-image: url("xxx.gif");
}
3.伪类选择器
什么是伪类?伪类就是与类一样能够定义样式,但却不是真正意义上的类。
不是真正意义上的类?也就是说你可以在css中定义它的样式,就像定义类一样,但是你在HTML中不能找到该伪类的踪影。
HTML中没有伪类的踪影,那它是如何实现样式的呢?浏览器会在后台向这些伪类增加和删除元素。
对于<a>
元素,我们可以用“多重人格”来形容它。对于该标签,它一共有五种状态::link, :visited, :hover, :focus, :active.
“:link”可以用于声明未访问状态链接的样式;
“:visited”可以用于声明已经访问链接的样式;
“:hover”可以用于声明鼠标悬停在链接上的样式;
“:focus”可以用于声明浏览器焦点悬停在链接上的样式(通过键盘选择链接);
“:active”可以用于声明浏览器点击链接的样式。
注意:冒号前后不要出现空格。
以上内容皆为本人观点,欢迎大家提出批评和指导,我们一起探讨!
HTML/CSS: 浅谈a标签及伪类选择器相关推荐
- 【a】标签的伪类选择器
今天我们来学习一下a标签的4个伪类选择器: ①a:link选择器:修改从未被访问过的a标签样式. ②a:visited选择器:修改已经被访问过的a标签样式. ③a:active选择器:修改链接被长按时 ...
- 超链接a标签的伪类选择器问题,Link标签与visited标签的失效问题(问题介绍与解决方法)。以下全部内容跟可通过鼠标左键选取后,复制到编辑器中直接运行。
超链接a标签的伪类选择器问题,Link标签与visited标签的失效问题(问题介绍与解决方法).以下全部内容跟可通过鼠标左键选取后,复制到编辑器中直接运行. 参考文章: (1)超链接a标签的伪类选择器 ...
- html中p标签的伪类选择器,表单标签和css伪类选择器
一.表单标签和input标签 1.表单标签:form 这个标签作为一个容器,来收集和提交这个标签中其他相关标签的数据,一般不单独使用 active属性:设置提交路径(接口) method属性:设置请求 ...
- 谈谈一些有趣的CSS题目(十)-- 结构性伪类选择器
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- CSS新增的属性、结构伪类选择器,帮你快速找到那个对的人
文章目录 前言 一.属性选择器 二.结构伪类选择器 总结 前言 今天学会了这几个新的选择器会为我们节省很多代码,简化HTML结构,对于起名困难户也会有很大的帮助. 提示:以下是本篇文章正文内容,下面案 ...
- html伪类选择器代码,CSS3中结构性伪类选择器—:first-of-type实现名言标签(代码实例 )...
本文目标: 1.掌握CSS中结构性伪类选择器-nth-child的用法 问题: 1.实现以下效果,且使用纯DIV+CSS,必须使用结构性伪类选择器-first-of-type 附加说明: 1.整体宽为 ...
- css布局,伪类选择器练习
css伪类选择器练习 为了熟练掌握css各种选择器,还是需要多加练习 完成以下布局: 要求:掌握好类名的使用,伪类选择器使用正确,并活用以学习的标签及标签特性. 分析:此次练习中出现大量的a标签(均需 ...
- 03-高级选择器,属性选择器,伪类选择器
高级选择器分为: 后代选择器 子代选择器 并集选择器 交集选择器 后代选择器 使用空格表示后代选择器.顾名思义,父元素的后代(包括儿子,孙子,重孙子) .container p{color: red; ...
- css 选择器(标签选择器、类选择器、层级选择器、id选择器、组选择器、伪类选择器、通配符选择器)
css 选择器的定义 css 选择器是用来选择标签的,选出来以后给标签加样式. css 选择器的种类 标签选择器 类选择器 层级选择器(后代选择器) id选择器 组选择器 伪类选择器 通配符选择器 标 ...
最新文章
- python实现简单的api接口-用python写一个restful API
- 使用Dockerfile制作镜像
- R语言:rep函数解析
- 第一个SpringBoot入门级项目(超详细步骤)
- python如何记录运行时间_Python如何测量脚本运行时间
- 开启MyBatis日志Sql打印
- mysql 实时性能_Mysql 实时查看性能
- Matlab数据插值-内插、外插
- 1600802038
- php inqude函数,Python匿名函数(lambda函数)
- [置顶]C++求平面最近点对
- Python之爬取58同城在售楼盘房源信息
- 关于可计算、图灵机及CPU性能
- Python之龟兔赛跑
- 歌单助手:一键导出网易云音乐歌单列表,推荐你喜爱的专辑
- python爬去新浪微博_!如何通过python调用新浪微博的API来爬取数据
- XManager5连接CentOS7
- 等保(公安部82号令)
- mysql查询所有图书信息_PHP+MySQL使用mysql_num_rows实现模糊查询图书信息功能
- sso单点登录与Jsonp