网页设计与开发——HTML、CSS、JavaScript实例教程第5章超级链

来源：网络收集时间：2026-09-08

导读：网页设计与开发——HTML、CSS、JavaScript实例教程 WEB编程基础清华大学出版社第5章超级链接 Company name 网页设计与开发——HTML、CSS、JavaScript实例教程主要内容为网页添加超链接添加书签链接、电子邮件超链接、 FTP链接建立图像映射网页设计与

网页设计与开发——HTML、CSS、JavaScript实例教程

WEB编程基础清华大学出版社

第5章超级链接

Company name

网页设计与开发——HTML、CSS、JavaScript实例教程

主要内容

为网页添加超链接添加书签链接、电子邮件超链接、 FTP链接建立图像映射

网页设计与开发——HTML、CSS、JavaScript实例教程

5.1超链接简介

网页文件的最大魅力是超越各个文件的空间，通过超链接相互连接构成一个纷繁复杂的互联网世界。超链接 (hyperlink)是一个网站的精髓，超链接在本质上属于一个网页的一部分，它是一种允许一个网页同其他网页或站点之间进行链接的元素。各个网页链接在一起后，才能真正构成一个网站。超文本具有的链接能力，层层链接相关文件，这种具有超级链能力的特性，即称为超链接。超链接除了可链接文本外，也可链接各种媒体，如声音、图像和动画等，通过它们可以将网站建设成一个丰富多彩的多媒体世界。

网页设计与开发——HTML、CSS、JavaScript实例教程

5.1超链接简介

网页设计与开发——HTML、CSS、JavaScript实例教程

5.1超链接简介

网页设计与开发——HTML、CSS、JavaScript实例教程

5.2创建超链接

建立超链接的标记是a(anchor,锚),以<a>开始，以 </a>结束，锚可以指向网络上的任何资源：一张HTML页面，一幅图像，一个声音或视频文件等。基本语法： <a href="url" title="指向链接显示的文字" target=" 窗口名称">超链接名称</a>

网页设计与开发——HTML、CSS、JavaScript实例教程

5.2创建超链接<!—程序5-1--> <html> <head> <title>创建链接</title> </head> <body> <center> <h2>创建链接</h2> <hr> <p><a href="http://doc.guandang.net" title="打开新浪首页">新浪</a>  <br> <a href="http://doc.guandang.net" target=_blank>百度</a>  <br> <a href="http://doc.guandang.net">北京大学</a>  </p> </center> </body> </html>

网页设计与开发——HTML、CSS、JavaScript实例教程

5.2创建超链接

网页设计与开发——HTML、CSS、JavaScript实例教程

5.2.1设置超链接路径

建立链接时，属性“href”定义了这个链接所指的目标地址，也就是路径。理解一个文件到要链接的那个文件之间的路径关系是创建链接的根本。每一个网站都具有独一无二的地址，英文中被称作URL(Uniform Resource Locator),即统一资源定位器，同一个网站下的每一个网页都有不同的地址，但是在创建一个网站的网页时，不需要为每一个链接都输入完整的地址，我们只需要确定当前文档同站点根目录之间的相对路径关系就可以了。

网页设计与开发——HTML、CSS、JavaScript实例教程

5.2.2内部链接

所谓内部链接，指的是在同一个网站内部，不同的html页面之间的链接关系，在建立网站内部链接的时候，要明确哪个是主链接文件(即当前页),哪个是被链接文件。内部链接一般采用相对路径链接比较好。根据图5-4所示的某班级网站站点目录结构，表5-2所示的是内部链接语句中相对路径的写法。

网页设计与开发——HTML、CSS、JavaScript实例教程

5.2.2内部链接

网页设计与开发——HTML、CSS、JavaScript实例教程

5.2.3外部链接

所谓外部链接，指的是跳转到当前网站外部，与其它网站中页面或其它元素之间的链接关系。这种链接的URL地址一般要用绝对路径，要有

完整的URL地址。

网页设计与开发——HTML、CSS、JavaScript实例教程

5.3.1图片链接

可以为一个图片指定链接。基本语法： <a href="url" target="目标窗口的打开方式"><img src="图片地址"></a>

网页设计与开发——HTML、CSS、JavaScript实例教程

5.3.1图片链接

<html> <head> <title>建立图片链接</title> </head> <body> <center> <h2>图片链接</h2> <hr> <a href="http://doc.guandang.net" target="_blank"><img src= "images/baidu_logo.gif" /></a> </center> </body> </html>

网页设计与开发——HTML、CSS、JavaScript实例教程

5.3.1图片链接

网页设计与开发——HTML、CSS、JavaScript实例教程

5.3.2书签链接

在浏览页面时，如果页面篇幅很长，要不断的拖动滚动条，给浏览带来不便，要是浏览者既可以从头阅读到尾，又可以很快寻找到自己感兴趣的特定内容进行部分阅读，这个时候就可以通过书签链接来实现。当浏览者单击页面上的某一“标签”,就能自动跳到网页相应的位置进行阅读，给浏览者带来方便。

…… 此处隐藏：295字，全部文档内容请下载后查看。喜欢就下载吧 ……

网页设计与开发——HTML、CSS、JavaScript实例教程第5章超级链.doc 将本文的Word文档下载到电脑，方便复制、编辑、收藏和打印

下载这篇word文档

本文链接：https://www.jiaowen.net/wenku/1707607.html（转载请注明文章来源）

上一篇：三年级奥数简单的周期问题
下一篇：VMware vSphere服务器虚拟化测试方案模板v3.0

网页设计与开发——HTML、CSS、JavaScript实例教程 第5章 超级链

网页设计与开发——HTML、CSS、JavaScript实例教程第5章超级链