【HTML5学习笔记】3：超链接和路径

最新推荐文章于 2022-06-29 11:32:12 发布

大桔骑士v

最新推荐文章于 2022-06-29 11:32:12 发布

阅读量1.6k

点赞数 1

分类专栏： HTML 文章标签： HTML 超链接路径锚点

本文链接：https://blog.csdn.net/shu15121856/article/details/70188569

版权

HTML 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<a>标签的href属性用于指定URL，target属性用于指定打开方式，默认的打开方式是在当前窗口打开文档(_self)。

target属性还有一个常用的值为_blank，它使得点击超链接的时候将在新窗口打开。

相对路径：相对于页面而言的另一个页面的路径，可以自动识别当前目录。

绝对路径(很少用)：从file:///磁盘符开始的完整路径。

*使用相对路径

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="utf-8">
	<title>超链接和路径</title>
</head>
<body>
	<a href="index2.html" target="_blank">进入上次写的index2</a> <!-- 在当前文件(index3.html)中去寻找index2.html -->
</body>
</html>

运行结果：

单击超链接后弹出：

相对路径的文件如果在同一个目录下，直接属性就是被链接的文件名.后缀名，如果在同一个主目录下，有多个子目录层次，那就要使用目录结构语法。

目录结构语法：

同一目录下：直接文件名.后缀名或./文件名.后缀名。

子目录下：xxx/文件名.后缀名。

孙子目录下：xxx/xxx/文件名.后缀名。

父目录下：../文件名.后缀名。

爷爷目录下：../../文件名.后缀名。

锚点可以在文档中设置标记，这些标记通常放在文档的特定主题处或顶部。然后可以创建到这些命名锚记的链接，这些链接可快速将访问者带到指定位置。

*锚点的测试(不分页的小说的定位)：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="utf-8">
	<title>超链接和路径</title>
</head>
<body>
	<a href="#1">第一章</a> <a href="#2">第二章</a> <a href="#3">第三章</a><br>
	小说前言：
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<a name="1"></a>第一章内容：
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<a id="2"></a>第二章内容：
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<a name="3"></a>第三章内容：
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>

运行结果：