本文深入讲解HTML中的超链接元素<a>，包括如何创建基本链接、指定目标窗口、使用锚点进行内部链接，以及链接的相对和绝对路径。通过实例解析，帮助读者掌握超链接在网页导航中的应用。
<!--
超链接
——让各个独立的网站有机地连接在一起
2018.01.04
-->
<html>
<head>
<meta charset="UTF-8" />
<title>超链接学习与使用</title>
</head>
<body>
<!--
5.1 超链接概述
5.2 超链接语法、路径及分类
5.2.1 超链接语法
<a></a> (Anchor标记创建超链接)
<a href="url" name="" title="提示信息" target="窗口名称">超链接标题</a>
href:链接指向的目标文件
name:规定anchor的名称
title:指向链接的提示信息
target:指定打开的目标窗口
——_self:在当前框架中打开链接
——_blank:在一个全新的空白窗口打开链接
——_top:在顶层框架中打开链接
——_parent:在当前框架的上一层打开连接
——framename:在指定的框架或浮动框架内打开链接
-->
<h3>超链接的导航</h3>
<a href="http://www.baidu.com" name="Baidu" title="百度">百度</a><br />
<a href="http://www.qq.com" name="qq" title="腾讯">腾讯</a><br />
<p>在当前框架中打开链接</p>
<a href="http://www.baidu.com" name="Baidu" title="百度" target="_self">百度</a><br />
<p>在一个全新的空白窗口打开链接</p>
<a href="http://www.baidu.com" name="Baidu" title="百度" target="_blank">百度</a><br />
<p>在顶层框架中打开链接</p>
<a href="http://www.baidu.com" name="Baidu" title="百度" target="_top">百度</a><br />
<p>在当前框架的上一层打开连接</p>
<a href="http://www.baidu.com" name="Baidu" title="百度" target="_parent">百度</a><br />
<br />
<hr width="100%" size="50" color="#000" align="right" noshade />
<br />
<!--
5.2.2 超链接的路径
URL 统一资源定位符
绝对路径：指文件的完整路径；
相对路径：指相对于当前文件的路径；
根路径：指从网站的最底层开始起；（一般用于创建内部链接）
5.2.3 超链接分类
内部链接：网站内部文件之间的链接；
外部链接：网站内的文件链接到站点内容外的文件；
-->
<h3>内部链接与外部链接</h3>
<h4>内部链接</h4>
<p><a href="4.html" name="第四章内容" title="第四章内容" target="_blank">第四章内容</a></p>
<h4>外部链接</h4>
<p><a href="http://www.baidu.com" name="Baidu" title="百度" target="_blank">百度</a></p>
<br />
<hr width="100%" size="50" color="#000" align="right" noshade />
<br />
<!--
5.3 超链接的使用
5.3.1 创建HTTP文件下载超链接
<a href="hello.ppt">课件下载</a>
5.3.2 创建页面书签链接
书签：指到文章内部的链接，实现段落之间的任意跳转；
先定义一个书签作为目标端点，再定义到书签的链接；
分链接到同一页面中的书签和连接到不同页面中的书签。
1.定义书签
<a name="书签名">书签标题</a>
2.定义书签链接
<a href="#书签名">书签标题</a>(同一页面)
<a href="URL#书签名">书签标题</a>(不同页面)
-->
<h3><a name="software">书签链接的应用</a></h3>
<ul>
<li><a href="#dw">Dreamweaver MX [同页]</a></li>
<li><a href="#f1">Flash MX [同页]</a></li>
<li><a href="#fw">Firework MX [同页]</a></li>
<li><a href="4.html#EditPlus">EditPlus [异页] </a></li>
</ul>
<h4><a name="dw">Dreamweaver MX</a></h4>
<p> Dreamweaver是美国Macromedia公司（现已经被Adobe公司收购，成为Adobe Dreamweaver）开发的集网页制作和管理网站于一身的所见即所得网页编辑器，他是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨平台限制和跨平台和跨越浏览器限制的充满动感的网页。</p>
<h4 align="center"><a href="#software">返回</a></h4>
<h4><a name="f1">Flash MX</a></h4>
<p> Flash MX是美国Macromedia公司（现已经被Adobe公司收购，成为Adobe Flash MX）开发的集网页制作和管理网站于一身的所见即所得网页编辑器，他是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨平台限制和跨平台和跨越浏览器限制的充满动感的网页。</p>
<h4 align="center"><a href="#software">返回</a></h4>
<h4><a name="fw">Firework MX</a></h4>
<p> Firework MX是美国Macromedia公司（现已经被Adobe公司收购，成为Adobe Firework MX）开发的集网页制作和管理网站于一身的所见即所得网页编辑器，他是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨平台限制和跨平台和跨越浏览器限制的充满动感的网页。</p>
<h4 align="center"><a href="#software">返回</a></h4>
<br />
<hr width="100%" size="50" color="#000" align="right" noshade />
<br />
<!--
5.3.3 创建FTP站点访问超链接
<a href="ftp://..."></a>
5.3.4 创建图像超链接
<a href="URL"><img src=""></a>
-->
<h3>图像超链接的使用</h3>
<h4>单击图像进入Baidu搜索引擎</h4>
<a href="http://www.baidu.com"><img src="https://www.baidu.com/img/bd_logo1.png"></a>
<br />
<hr width="100%" size="50" color="#000" align="right" noshade />
<br />
<!--
5.3.5 创建电子邮件超链接
<a href="mailto:E-mail地址[?subject=邮件主体[&参数=参数值]]">链接内容</a>
参数：cc(抄送)、bcc(密送)、subject(主题)、body；
多个收件人用“；”分号分割；
-->
<h3>电子邮件使用</h3>
<a href="mailto:abc@123.com;efg@123.com?cc=111@163.com&bcc=123@qq.com&subject=Hello%20again">发送邮件</a>
</body>
</html>
HTML基础——超链接
最新推荐文章于 2025-03-10 14:08:26 发布
扫一扫
1343
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
