元素: 链接元素
属性
href
: 设置要跳转的HTML页面的路径(绝对路径和相对路径)
默认样式:
字体颜色是蓝色
文字具有下划线效果
鼠标在悬停在链接文字上时,鼠标样式改变
默认跳转方式: 在当前页面进行跳转
<a>
标签有设置href属性的话,显示效果就是普通文本(不再是链接)
如果你确实要使用链接,href属性是不能省略
将href属性的值设置为"#",称为伪链接
target
属性: 设置链接的跳转方式
_self
: 默认值,表示在当前窗口进行跳转
_blank
: 表示在新窗口/页签进行跳转
在老版本浏览器中存在的值(都是以窗口方式打开页面)
_parent
: 表示在父级窗口打开新页面
_top
: 表示在顶级窗口打开新页面
Email链接
<a>
元素可以作为一个Email链接
href属性值的格式: mailTo: Email地址
默认样式和普通的链接是一致的
当点击链接时,自动打开你操作系统中的邮件软件到发邮件的界面
前提: 你的操作系统必须要安装邮件软件
锚点
HTML页面中的锚点: 通过一个超链接指向当前HTML页面中的某个位置
- 在元素的href属性值的格式: #ID属性值(某个元素的)
- 在指定的元素中设置ID属性值,与元素的href属性值中的ID属性值保持一致
当点击锚点时,页面自动地跳转到当前页面中对应的元素显示位置
当前HTML页面的地址发生变化: 增加<a>
元素的href属性值
下载
<a>
元素实现下载功能
href
属性: 设置下载文件的路径
浏览器提供的功能:
如果能在浏览器中显示的,直接显示
如果不能在浏览器中显示的,提供下载
download
属性: 设置下载文件的路径
不能单独使用: <a>
元素如果不设置href属性的话,不是一个链接
浏览器会优先选择浏览器所支持的方式
单纯地提供了一个下载的功能
链接样式
a {
/* 设置颜色 */
color: lightcoral;css
/* 去掉下划线 */
text-decoration: none;
}
动态伪类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>目标伪类选择器</title>
<style>
p:target {
background-color: gold;
}
</style>
</head>
<body>
<h3>Table of Contents</h3>
<ol>
<li><a href="#p1">Jump to the first paragraph!</a></li>
<li><a href="#p2">Jump to the second paragraph!</a></li>
<li><a href="#nowhere">This link goes nowhere,
because the target doesn't exist.</a></li>
</ol>
<h3>My Fun Article</h3>
<p id="p1">You can target <i>this paragraph</i> using a
URL fragment. Click on the link above to try out!</p>
<p id="p2">This is <i>another paragraph</i>, also accessible
from the links above. Isn't that delightful?</p>
</body>
</html>