• 小清新 时光.记录模板 http://www.lmlblog.com/time/

web前端开发系列课程之HTML超级链接

maolai 874次浏览 0个评论

.标签<a> 双标签,行间元素

.href属性是其最重要的属性,用来定义链接的目标地址,实现超级链接的功能

.如果没有href属性,<a>标签仅仅是超链接的一个占位符。

基础代码:<a href="url">链接文本元素</a>

html链接的常见形式:

1、锚点(anchor),用来在网页内部跳转

》锚点链接主要用来跳转到页面中的特定位置。通过设置href属性的值#+id名,可以定位到具有特定id属性的HTML元素所在位置。

》例子:<a href="#footer"> 可以链接到前页面中的<div id="footer">元素。百度百科内容中的[1]、[2]....用的比较多,点击会链接到下面的参考资料。

2、相对路径ulr,用来在网站内部跳转。

》相对路径主要用于同一个站点内的不同页面或文件跳转,相对指的是相对于当前页面本身。

》相对url的概念基于网站服务器上的文件目录结构,每个网站都有一个文档根目录,相对url就是基于这个根目录的HTML文件路径。

》相对路径中的斜杠/代表文件夹的分隔,../表示的是上一级的文件夹。

3、绝对路径url,通常用来在不同网站页面之间进行跳转。

》绝对url主要用来在不同网站资源之间进行跳转。

》实际上就是在上述url之前添加网站域名(或IP)以及访问协议。

》一个完整的绝对URL包含3个部分:①协议:http:// ②域名domain.com ③文件的路径/hello.html

4、空链接

》空链接用#号来替代未指定的具体URL。通常在页面制作和调试的阶段,常常会使用到空链接。<a href="#">

5、邮箱链接(mailto:) 很少用

》当用户点击邮箱链接时,会启动电脑上的邮件客户端程序,向指定的邮箱地址发送邮件。如果用户电脑上未安装邮件客户端程序,那么邮箱链接无法工作。<a href="mailto:lml85320@163.com">

.target属性规定在何处打开链接文档

_self 默认值,当前窗口打开链接

_blank 在新窗口(标签页)打开链接

如果需要页面中所有的超链接都在新窗口打开,可以直接在页面的<head>区域加上以下代码:

<base target="_blank"> <!--<base>标签为页面上的所有链接规定默认地址或默认目标。-->

超级链接的样式设置(css:伪类)

超级链接的交互状态有以下4种

.未被点击的状态(默认状态)

.已被访问过的状态

.鼠标悬停的状态(鼠标移动到链接之上)

.激活状态(鼠标点击时)

使用css的伪类选择符可以设定超级链接的各种交互状态效果

什么是伪类?》一种动态的类选择符,不是预先创建而是动态形成。》当HTML元素具有不同的状态或特征时,伪类可以设定该元素不同状态或特征下的样式效果。

伪类的写法:

》在常用选择符后面追加一个冒号“:”,然后加上伪类的名称。

a{color:blue;}<!--超级链接为蓝色-->

a:hover{color:red;}<!--当鼠标处于悬停状态,超级链接变为红色-->

常用的伪类

伪类 主要作用对象 说明
:link <a> 未被访问的链接状态
:visited <a> 已被访问的链接状态
:hover 所有html元素 鼠标悬停时的状态
:active <a> 被激活时的状态(在鼠标点击与释放之间)比较少用
:focus 表单控件 获得焦点时的状态

超级链接的伪类应用:

.直接设定<a>标签,等同于同时设定了<a>的4种伪类状态

.如要分开描述<a>的4种状态,需按顺序来编写,否则容易失效

:link>:visited>:hover:>:active

》实际应用中,通常都是直接设定<a>标签对象,再独设置:hover一种状态即可。


本文由MAOLAI博客编辑整理发布,欢迎分享,转载请注明出处!
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址