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

来源：互联网发布：网络怎么开发客户编辑：程序博客网时间：2024/06/06 13:14

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

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

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

属性名称说明href指定<a>元素所指资源的URLhreflang指向的链接资源所使用的语言media说明所连接资源用于哪种设备rel说明文档和所链接资源的关系类型target指定用以打开所有链接资源的浏览环境type说明所链接资源的MIME类型(比如text/html)

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>

0 0