第5章 超链接

1、第5章 超链接 超链接是一个网站的精髓，是网站中使用最为频繁的元素 之一，同样，是HTML 文件中最核心的应用之一，互联 网上的所有Web页面都是可以互相链接的，通过点击建有 超链接的文本或图像就可以链接到指定的Web页面。有了 超链接我们才可以在各个网页或是站点之间进行遨游。 5.1 超链接概述超链接概述 超链接在本质上属于一个网页的一部分，它是一种允许我们同 其它网页或资源之间进行连接的元素，它使网络世界构成一个 有机的整体。各个相关网页链接在一起后，才能真正构成一个 网站。 所谓的超链接是指从一个网页指向一个目标的连接关系，这个 目标可以是另一个网页，也可以是相同网页上的不同位置，还 可

2、以是一个图片，一个电子邮件地址，一个文件，甚至是一个 应用程序。 而在一个网页中用来超链接的对象，可以是一段文本或者是一 个图片等。 超链接由源地址文件和目标地址文件构成，当访问者单击 超链接时，链接目标将显示在浏览器上，并且根据目标的 类型来打开或运行。 链接由以下3个部分组成： 链接标记文本或图片,将文本或图片标识为链接源点。 属性href=，标记的最基本属性。 路径地址（URL）,要链接的目标。 5.2 超链接的路径 每一个文件都有自己的存放位置和路径，理解从一个文件 链接到另外一个文件之间的路径关系是创建超链接的根本。 URL的英文全称是Uniform Resouce Locator，

3、中文翻译 为统一资源定位器。指的就是每一个文件都具有的路径 地址。超链接的路径可以分三种： 5.2.1 绝对路径绝对路径 http:/ http:/ 5.2.2相对路径对路径 相对路径也叫文档相对路径，是以当前文件所在位置为起 点，进行相对文件的查找。相对路径不包括协议和主机地 址信息，表示它的路径与当前文档的访问协议和主机名相 同，甚至有相同的目录路径。通常只包含文件夹名和文件 名，甚至只有文件名。 相对路径是站点内容最常用的方法，具体方法是利用站点 内文件夹层次结构，指定从当前文档到所链接的文档的路 径。 相对路径举例对路径举例 1. 如果链接到同一目

4、录下，则只需输入要链接文件的名称。 例如： 文件info.html和link.html位于同一个文件夹内，则 link.html相对于info.html的路径就是“info.html”。 相对路径举例对路径举例 2. 如果要链接到下级目录中的文件。只需先输入目录名，然后加/， 再输入文件名。 例如：info.html的路径为d:mysiteinfo.html,图像文件flower.jpg路 径是d:mysiteimagesflower.jpg，则flower.jpg相对info.html的相 对路径是“images/flower.jpg”。 例如：info.html的路径为d:mysitein

5、fo.html,图像文件flower.jpg路 径是d:mysitenewsimagesflower.jpg，则flower.jpg相对info.html 的相对路径是“news/images/flower.jpg”。 相对路径举例对路径举例 3. 如果要链接到上一级目录中文件，则先输入./，再输 入文件名。 例如：info.html文件的路径是d:mysitenewsinfo.html， index.html的路径是d:mysiteindex.html。index.html相 对与info.html的路径为“./index.html”。 5.2.3 根路径根路径 根路径也叫根相对路径，目录地

6、址同样可用于创建内部链 接，但一般情况不用。根路径目录地址的书写也很简单， 首先以一个斜杠开头，代表根目录，然后书写文件夹名， 最后书写文件名。例如：/web/news/index.html。 在链接站点内文件时，我们通常采用相对路径而不使用根 跟径和绝对路径。后两者在发生了文件夹改名或者移动的 情况后，所有的链接都会失败，并且一旦将此文夹件移到 网络服务器上时，同样需要重做大量的更改。而使用相对 路径，不仅在本地机器环境下适合，上传到网络或其他系 统下也不需要进行多少更改就能够做准确链接。 三种路径总结 链接元素链接元素 5.3 超链接的建立超链接的建立 5.3.1 插入外部链接插入外部链接

7、 不论是文字或是图像，都可以创建链接到绝对地址的外部 链接。创建外部链接通常要使用绝对的链接路径。最常用 的外部链接格式为： 链接显示名 注意网址中的http不可省略。 网站直通车 常用 百度 google hao123 新闻 新浪 搜狐 网易 购物 淘宝网 当当网 京东商城 5-1.html 5.3.2 插入内部链接插入内部链接 所谓内部链接，就是一 个网站内部不同文件之 间的链接，创建内部链 接通常采用相对路径。 内部链接 点击这里链接到“网站直通车”页面即5-1.html 5-2.html 5.3.3 以图像为源点的链接以图像为源点的链接 图像上设链接 常用网站 5-3.html 5.3

8、.4 链接打开目标链接打开目标target属性属性 在制作网页的过程中，有时候我们希望超链接的目标窗口 是在一个新的窗口中打开，原页面仍然保留在原处。也就 是说，不希望超链接的目标窗口将原来的窗口覆盖掉，这 时可以通过标记的target属性来设置目标窗口的打开 方式。 基本语法：基本语法： 链接元素 语法说明：语法说明： target属性用于指定打开链接的目标窗口，其默认方式是原窗口。建立 链接的目标窗口有以下四个选项： _self: 默认，被链接的文档加载到与该链接文字相同的框架或窗口中。 _blank:将被链接的文档加载到新的浏览器窗口中。将被链接的文档加载到新的浏览器窗口中。 _pare

9、nt:将被链接的文档加载到父框架窗口中。 _top: 被链接的文档加载到整个浏览器窗口中并删除所有框架。 5.3.6 链接的目标类型链接的目标类型 超链接不仅可以链接到一个网页文件，还可以是其它的文 件类型，可以链接到一个图片、一个压缩包、一个doc文 档或是一个邮箱地址等等。 李白简介 李白（701.2.28762），字太白， 号青莲居士。.。 李白画像 李白故事 李白作品 5-4.html 5.3.7 Email链接链接 Email链接，可以快速发送电子邮件，点击电子邮件链接 后，将启动机器上的电子邮件管理软件，然后可以发送电 子邮件给收件人。例如： 请写电子邮件联 系我们 p锚记链接又叫

10、书签链接，常常用于那些内容庞大繁琐的网 页，通过点击命名锚记，不仅让我们能指向文档，还能指 向页面里的特定位置。元素的name属性用于定义锚 记的名称，一个页面可以定义多个锚记，通过的href 属性可以根据name跳转到对应的锚记位置。 p锚记链接可以在同一页面中链接，也可以在不同页面中链 接，在不同页面中链接的前提是需要指定好链接的页面地 址和链接的锚记位置。 5.4 锚记（书签）链接锚记（书签）链接 p基本语法：基本语法： 在同一页面使用锚记链接的方法： 链接文本 在不同页面使用锚记链接的方法： 链接文本 西游记西游记 第第001回回 第第002回回 第第003回回 第一回灵根育孕源流出心

11、性修持大道生 . . . 回到顶部回到顶部 第二回第二回悟彻菩提真妙理悟彻菩提真妙理断魔归本合元神断魔归本合元神 话表美猴王得了姓名，.。 . . 回到顶部回到顶部 第三回第三回四海千山皆拱伏四海千山皆拱伏九幽十类尽除名九幽十类尽除名 . 回到顶部回到顶部 5-5.html 不同页面的锚记链接示例 席幕容经典诗集目录 无怨的青春无怨的青春 错误错误 莲的心事莲的心事 不同页面锚记示例5-6.html 有时候在图像上的某个区域或多个区域设置链接，这就需 要用到图像映射。 5.5 设置图像映射设置图像映射 5.5.1 了解热区和图像映射了解热区和图像映射 在 HTML 中还可以把图片划分成多个热点

12、区域，每一个 热点域链接到不同网页的资源。这种效果的实质是把一幅 图片划分为不同的热点区域，再让不同的区域进行超链接。 图像映射是一个能对链接指示作出反应的图形。单击该图 形的已定义区域，可转到与该区域相链接的目标。 5.5.2 创建图像映射 元素是用来创建图像映射区域，在元素之间添加 映射区域信息，为了能够引用相应的映射信息，应在 元素中使用 name 属性指定图像映射的名称。 基本语法：基本语法： . 语法说明：语法说明： 中的name属性和中的usemap属性将图像和 热区联系起来。 要在图像中添加热区应使用 标记，每个热区用一 个元素，如果一幅图像上需要有三个映射区域,则 应使用三个元

13、素。 标记有以下3个常用属性： 1、href属性：用于标识出超链接的目标文档。 2、shape属性：热区形状，取值可以是rect(矩形)、circle(圆形)、 poly(多边形)和default(整个图像区域)。 3、coords 属性：用于标识热区坐标。对于矩形而言，coords有4 个值，表示矩形区域左上角x坐标、左上角y坐标、右下角x坐 标和右下角y坐标；对于圆形而言，coords有3个值，分别表示 圆心的x坐标、y坐标以及圆的半径值；而对于多边形来说，则 coords有多对值，分别表示各顶点的坐标值。 5-7.html 5.6 浮动窗口及其链接浮动窗口及其链接 浮动窗口也被称为内嵌框

14、架、内嵌窗口等。 元素可以用来创建包含在另外一个文档中的浮动 窗口，实际上就是将一个HTML文档嵌入到另外一个 HTML文档中，如同“画中画”的感觉一样。 5.6.1 浮动窗口浮动窗口 基本语法：基本语法： 语法说明：语法说明： src属性用来指定在iframe中显示的文档的URL。在 HTML4中元素有很多属性，但是在HTML5中 仅仅支持src属性。 嵌入的页面 嵌入的页面 嵌入的页面：5-8-2.html iframe示例 iframe应用示例 被嵌入的页面未加链接 iframe示例 iframe应用示例 淘宝网 京东商城 当当网 被嵌入的页面加链接5-8-1.html 5.7 定义基准网址 基本语法：基本语法： 语法说明：语法说明： href属性设置基准网址，target设置目标窗口打开方 式。元素必须位于网页头部，在同一文档中，最 多只能使用一个元素。 base元素示例 国内新闻 国际新