第3章用HTML5建立超链接.PDF
第3 章 用HTML5建立超链接
HTML 文件中最重要的应用之一就是超链接 。超链接是一个网站的灵魂 。Web 上的网页是
互相链接 的，单击被称为超链接 的文本或 图形就可以链接到其他页面。
3.1 URL 的概念
URL 为“Uniform Resource Locator ”的缩写，通常翻译为“统一资源定位器”，也就是人
们通常说的“网址 ”。它用于指定 Internet 上的资源位置 。
3.1.1 URL 的格式
网络中的计算机是通过 IP 地址区分的，如果需要访问 网络中某台计算机中的资源 ，首先
要定位到这台计算机。IP 地址由 32 位二进制代码(32 个 0/1 )组成，数字之间没有意义，且
不容易记忆 。为了方便记忆，现在计算机一般采用域名的方式来寻址，即在网络上使用一组有
意义字符组成的地址代替 IP 地址来访问 网络资源 。
URL 由 4 个部分组成，即 “协议”“主机名 ”“文件夹名 ”“文件名 ”，如图 3-1 所示。
图 3-1 URL 组成
互联 网中有各种各样的应用，如 Web 服务、FTP 服务等 。每种服务应用都要对应有协议，
通常通过浏览器浏览网页的协议都是 HTTP (超文本传输协议)，因此通常网页的地址都以
“http:// ”开头。
“ ”为主机名，表示文件存在于哪台服务器 ，主机名可以通过 IP 地址或
者域名来表示。
确定到主机后，还需要说明文件存在于这台服务器的哪个文件夹中，这里文件夹可以分为
多个层级 。
确定文件夹后，就要定位到文件，即要显示哪个文件，网页文件通常是以“.html”或 “htm ”
为扩展名 。
用 HTML5 建立超链接 第 3 章
3.1.2 URL 的类型
在第 3 章讲解网页中使用的图像时，已经介绍了“路径 ”的概念。对于超链接来说，路径
的概念同样存在。
超链接 的 URL 可以分为两种类型：“绝对 URL ”和“相对 URL ”。
(1)绝对 URL 一般用于访问非 同一台服务器上的资源 。
(2 )相对 URL 是指访问同一台服务器上相 同文件夹或不同文件夹中的资源 。如果访问相
同文件夹中的文件，只需要写文件名；如果访问不同文件夹中的资源 ，URL 以服务器的根 目录
为起点 ，指 明文件的相对关系，由文件夹名和文件名两部分构成。
下面的实例使用绝对 URL 和相对 URL 实现超链接 。
【例3.1 】 (实例文件：ch03\3.1.html )
绝对URL和相对URL单击绝对URL链接到
webDesign网站首页
单击相同文件夹的URL链接到相同文件夹中的第2个页面
单击不同文件夹的URL链接到不同文件夹中的第3个页面
在上述代码中，第 1 个链接使用的是绝对 URL ；第 2 个用的是服务器相对 URL ，也就是
链接到文档所在的服务器的根 目录下的 02.html ；第 3 个使用的是文档相对 URL ，即原文档所
在文件夹的父文件夹下面的 pages 文件夹中的 03.html 文件。
在 IE 11.0 中的预览网页效果如图 3-2 所示。
图 3-2 绝对 URL 和相同 URL
·35 ·
精通 HTML5+CSS3+Ja