04 HTML中的超链接标签和路径

最新推荐文章于 2024-02-15 17:19:58 发布

原创最新推荐文章于 2024-02-15 17:19:58 发布 · 1.2k 阅读

CC 4.0 BY-SA版权

9 篇文章

订阅专栏

本文介绍了HTML中超链接的基本属性及使用方法，包括href、target等，并详细解释了相对路径和绝对路径的区别。此外，还提供了锚点设置的示例，帮助读者更好地理解和运用超链接。

听 51CTO李炎恢老师课程笔记

最重要的一个文本元素-----超链接
本身的属性以及路径访问

一、超链接的属性 私有属性

href属性：设置百度网页链接：

<a href="http://www.baidu.com">百度的链接</a>

如果属性值是http://开头的URL,意味着点击跳转到指定的外部网站

target属性:

<a href="http://www.baidu.com" target="_blank">百度的链接</a>

target属性告诉浏览器希望将所链接的资源显示在哪里

属性名称	说明
_blank	在新窗口或标签页中打开文档
_parent	框架用的但是框架已经废弃在父窗框组（frameset）中打开文档
_self	在当前窗口打开文档（默认）
_top	(基于框架界面使用但是框架已经废弃)，在顶层窗口打开文档

HTML5已经将框架废弃，只能使用<iframe>元素，且以后大量结合JavaScript和PHP等语言配合使用

二、相对录几个和绝对路径

相对路径：就是相对于链接页面而言的另一个页面的路径

绝对路径：从file：///磁盘符开始的完整路径

同级目录：只需要指定html文件 的名称如a.html

子目录：文件名/a.html

孙子目录：文件名1/文件名2/a.html

父亲目录：../a.html

爷爷目录：../../a.html

三锚点设置

超链接也可用来将同一个文档中的另一个元素移入视野，通过熟悉感id或name实现锚点定位

<!DOCTYPE HTML>

<html>

<head>

<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></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></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></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></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>

</ody>

</html>