网页设计与制作 网页基本标签（三） 北京农业职业学院刘丽霞
超链接 超链接标签 锚点链接 邮箱链接 其他功能性链接
超链接---实现页面间的导航 超链接将文档连接到 同一文档的特定部分 另一文档 另一文档的特定部分 其他文件 – 图像、音频、视频剪辑 页面 2 超链接简介 超链接将文档连接到 同一文档的特定部分 另一文档 另一文档的特定部分 其他文件 – 图像、音频、视频剪辑 转到页面 1 页面 1 单击此处以链接页面 2 单击此处以链接页面 1 上的部分 页面 1 这是页面 1 的“其他”部分 超链接---实现页面间的导航 转到页面 1 的顶部
<a href="链接地址" target="目标窗口位置"> 链接热点文本或图像</a> …… <a href=“http://www.baidu.com” target=“_blank”>百度一下</a>
1、要链接的文件的完整地址或 URL； 要创建超链接，必须指定： 2、提供链接的热点。热点可以是一行文字，甚至一个图像。 <html> <head> <title>超链接练习</title> </head> <body> <h1>创建链接</H1> <br> <p>本页面是关于创建到文档的链接。 <a href = “article.htm"> 单击此处转到“文章”</a> </body> </html> article.htm ... <a href = “index.htm"> 退回“主页” </a> 标准url： https://www.taobao.com/market/ index.htm 5
相对路径名 绝对路径名 C:\html C:\example 绝对路径和相对路径 test1.htm test2.htm test3.htm test4.htm 相对路径名 要链接到同一目录 (C:\html) 中的页面，请编写 <a href =“test3.htm"> 或 <a href = "C:\html\test3.htm"> 要链接到另一目标 (C:\example) 中的页面，请编写 <a href =" ..\example\test2.htm"> 或 <a href =" C:\example\test2.htm"> 绝对路径名
2 1 4 3 超链接打开方式target属性 <a href=“链接目标” target=“目标窗口的打开方式”> _self:在当前页面中打开链接 1 _top:在顶层框架中打开链接 4 target 3 _blank:在全新的空白窗口打开链接 _parent:在当前框架的上一层打开链接
超链接提示title属性 <a href=“链接文件” title=“链接的提示文字”> <div id=“box”>欢迎光临我的网站 <a href=“#” title=“欢迎光临我的网站”> <img src=“images/01.png”width=“50”height=“50”/> </a> </div> title属性
锚点链接 实现锚链接 1、定义标记（锚）： <a name="标记名">目标位置</a> 2、设置链接到标记位置：<a href="#标记名">当前位置</a> 适用于页面内容较多，超过一屏的场合 A.页面内的锚链接 设置链接到标记位置 …… <a href=“#show”>[介绍专区]</a> <a name=“show”>介绍专区内容</a> 定义标记
邮箱链接 <a href=“mailto:邮件地址>发送电子邮件</a> …… <a href="mailto: 158308808@qq.com">站长信箱</a>
其他功能性链接 1.使用超链接可以提供下载功能 2.可以实现FTP链接 <body> <a href=“CSS(二).pptx">点击下载课件</a> </body>