<a> 元素 (或锚元素) 可以创建一个到其他网页、文件、同一页面内的位置、电子邮件地址或任何其他URL的超链接。
a是单词anchor(锚点)的简写.
网络上的页面不计其数, 我们可以方便的从一个网页跳转到其他网页, 都是<a>标签的功劳.
一. <a>标签基本用法
<a href="a.html">网页 A </a>
说明:
href称之为属性, 他的值是另外一个网页的地址. 这个地址可以是互联网上的任何一个资源.href是hypertext reference的简写, 表示超文本引用.href属性是必须属性.标签中的文本会在页面中展示出来, 点击文本就可以让页面跳转到新的页面.
<a>标签是文本级标签, 他内部一般只放: 文本或图片.
标签的属性(Attribute):
标签可以添加属性, 来对标签进一步的说明.
一个属性由属性值和属性名组成. 属性名和属性值之间使用
=来连接, 属性值通常用双引号"或者'来括起来, 但是在HTML5标准中, 双引号或单引号可以省略.一个标签也可以同时添加多个属性, 多个属性之间用空格隔开.
<a href="a.html" id="a1">点我呀</a>有些属性是全局属性.所谓的全局属性是指, 任何的标签都可以添加. 比如将来要学习的
id, class等属性就属于全局属性.
二. 相对路径和绝对路径
href属性的值是其他资源的地址. 这个地址可以是相对路径也可以是绝对路径.
2.1 相对路径
通过相对路径中的词语相对我们就应该知道, 相对路径肯定会有一个参考路径.
相对路径永远是: 相对于你正在看到的页面所在的路径.
使用相对路径的时候, 用 ./来表示文件的当前路径, ../表示上一层路径.
案例1: 同一目录下的 2 个文件:
a.html文件的内容:
<a href="./b.html">打开网页 B</a>
说明:
因为
a.html文件和b.html文件在同一目录下, 所以使用./b.html可以直接找到b.html文件通常情况下
./可以省略, 所以写成b.html也是正确的:<a href="./b.html">打开网页 B</a>
案例2: 2个文件的关系如下:
a.html文件的内容:
<a href="./hello/b.html">打开网页 B</a>
则可以正常打开b.html文件. 或者省掉./也可以.
案例3: 3个文件的关系如下:
要求:在a.html文件中,超链接到b.html和c.html:
a.html的内容:
<a href="../b.html">打开网页 B</a>
<a href="../world/c.html">打开网页 C</a>
说明:
../表示上层目录, 所以进入到a.html文件所在路面的上一层目录, 正好b.html就在这次目录下.../world/c.html找到c.html文件.
2.2 绝对路径
绝对路径有3种:
以
file:///开头, 后面跟上要打开的网页的在电脑上的真实路径(windows系统下会包含盘符, mac和linux下没有盘符.) 这种情况在实际开发中从来不会使用.通常情况下我们的网页都是部署在服务器上, 相对于当前网站的根目录, 这种情况下也是一种绝对路径用
/开头来表示. 等后面学习了服务器相关知识再学习.可以使用诸如带网络协议的绝对路径:
http://www.atguigu.com,https://www.baidu.com等
在目前我们只使用相对路径和使用诸如带网络协议的绝对路径
三. 打开页面中的锚点
如果我们点击一个超链接的时候不想打开新的页面, 而只是想跳转当前页面中的某个位置, 我们的<a>也可以完成这样的功能.
我们只需要在我们想去的位置抛下个锚点就可以了.
只要给一个
<a>标签添加一个name属性那个这个<a>标签就会成为一个锚点.锚点不必添加href属性href属性的值使用#name属性值来指向锚点:#a1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width : 200px;
height : 1000px;
background-color : linen;
}
</style>
</head>
<body>
<a href="#a1">去锚点 a1</a>
<div></div>
<h1><a id="a1">此处是a1锚点:欢迎过来</a></h1>
<div></div>
</body>
</html>
多学几招:
可以用
id属性去替换name属性同样可以起到锚点的作用. 在HTML5中name属性已经标记为过时, 建议使用id替换掉name属性.其实任何标签添加上
id属性之后都可以作为锚点使用.利用:
<a href="b.html#b1">去B 页面的 b1锚点</a>, 则可以直接到达b.html的b1锚点.可以使用
href="#top" 或者 href="#"返回到页面的顶部.
四. <a>标签的其他常用属性
<a>标签还有一些其他有用的属性.
4.1 target属性
该属性指定在何处显示链接的资源。
_self: 当前页面加载。如果没有添加target属性, 则此值是默认值._blank: 新窗口打开._parent: 加载响应到当前框架的HTML4父框架或当前的HTML5浏览上下文的父浏览上下文。如果没有parent框架或者浏览上下文，此选项的行为方式相同_self。_top: HTML4中：加载的响应成完整的，原来的窗口，取消所有其它frame。 HTML5中：加载响应进入顶层浏览上下文（即，浏览上下文，它是当前的一个的祖先，并且没有parent）。如果没有parent框架或者浏览上下文，此选项的行为方式相同_self
4.2 title属性
title属性其实是一个全局属性, 也就是任何的标签都可以添加这个属性.
他的表现形式: 当鼠标在这个元素上悬停(不需要点击)时间超过一定时间(2s?), 则会显示出来属性的值. 移走之后会自动消失.
<a href="#a1" title="我是一个超级链接, 我是title的值">去锚点 a1</a>
<div title="我是一个快乐的div"></div>
