超链接到设置图片边框示例
创建超链接—锚点链接
• 要链接到相同页面上的某内容可以使用 锚点链接 • 锚点链接需要定义两次：
– 首先需要定义锚点，然后在超链接中指向该 锚点。 定义锚点应使用 <a name=锚点名称></a> – 指向锚点的超链接为：<a href=#锚点名 称>link</a>
示例
Chapter 4
超链接的建立
无法显示图片？？
• <img src=……>标记显示图片时经常 无法显示图片 • 原因：
– 路径错误 – 文件名，特别是扩展名错误
超链接基础
URL（Universal Resources Locator） 用于定位Web或本机上的文档信息 通常一个 URL 包括 3 部分：协议、计算机 地址、文件路径
• 示例
创建图片超链接
• 图像既可以作为超链接的目标，也可以 作为超链接的源。 • 作为目标时可以直接将使href=图片的 URL即可。 URL
查看示例
• 图片作为超链接的源时可以整体作为源 ，也可设置热点区域，使图像不同的区 域有不同的链接
创建图片超链接
• 使用标记的嵌套即可实现在图像上添加 超链接的效果 • 形式：<a href=“……”><img src=…… ……></a> • 示例
创建图片超链接—热点区域
• 图片的热点区域就是将一个图片分割出 一个链接区域，通过点击该区域来达到 所要链接的目标 • 定义并命名图片热点区域：<map name=名称>标记符和<area>标记符 • 使用定义了热点区域的图片：<img usemap=#名称>
area标记
• shape属性（rect、circle、poly）－－允 许我们使用已定义的形状定义图形区域 • coords属性－－使用像素或者长度百分比来 定义形状的尺寸 • href属性－－所链接的源文件的URL • 示例
网页自动跳转
• <t;之间 • 其中http-equiv属性取refresh，表示 需要更新该页 • content指定更新时间以及更新时需要 显示的页 • 示例
绝对URL
绝对URL---示例
根目录 目录名 C:\My Documents\My webs\Myweb\images\city.gif
当前所编辑网页, 引用city.gif
相对URL
• 相对URL是指Internet上资源相对于 当前页面的地址，它包含从当前页面指 向目标页面位置的路径 • 使用相对URL的好处：易于维护
春宫怨 昨夜风开露井桃， 未央前殿月轮高。 平阳歌舞新承宠， 帘外春寒赐锦袍。 登科居 昔日齷齪不足夸， 今朝放荡思无崖。 春风得意马蹄疾， 一日看尽长安花。 五十言怀诗 笑舞狂歌五十年， 花中行乐月中眠。 漫劳海内传名字， 谁信腰间没酒钱。 诗赋自惭称作者， 众人疑道是神仙。 些须做得工夫处， 莫损心头一寸天。
以新窗口显示链接页面
• 使用<a>标记的属性target来实现 • target取值 ”_blank”（默认”_self”） • 查看示例
其它应用
• • • • • • • 文件下载效果 <a href=某文件名或其url>下载</a> 登陆ftp <a href=ftp://……> 连接BBS站点 <a href=telnet://……> 发送e-mail
– 文本超链接 – 图像超链接 – 对象超链接（例如Flash、Java小程序）
创建超链接
• A 标记符用于创建超链接（结束标记符 不能省略），href 属性用于指定超链接 的目标文件 • 形式：<a href=……>link</a>
创建超链接—文字超链接
• 使用文字作为超链接的载体，可以链接 其他外部文件 • 形式： <a href=……>文本</a> • 例：
其它应用—发送电子邮件
• <a href=mailto:i@>Email</a> • 控制命令：
– – – – – ?subject= 设置信件主题 ?cc= 设置抄送人 ?bcc= 设置密件抄送人 ?body= 设置邮件内容 & 组合多个控制命令
• 示例
网页自动更新
• 在网页打开前，如果需要先让用户知道 某些重要信息（如公告、登陆网站的注 意事项和操作方法等）可以使用 <meta>标记，在显示一段时间的信息 后再跳转到主页去 • 形式<meta http-equiv=“……” content=“……”>
• 协议：//计算机/文件路径
其中 文件路径 用于定位本地计算机上文档的 信息。如果需要定位文件位于本计算机，通常 只用指定 文件路径
绝对URL
绝对URL是指资源的完整地址，包括 URL的所有3个部分，即：
– 协议：//计算机/文件路径
• 如果存放在本地计算机，通常使用以下 形式
– 根目录/文件目录名/文件目录名……/文件名
链接位置1 左边三首诗为同一 页面显示内容，为 方便查找，可以使 用锚点链接定义链 接位置
链接位置2
链接位置3
查看
创建超链接—超链接的颜色
• 通过设置超链接的颜色来提示用户该链接是否 已经点击 • 设置方法：通过<body>中的属性进行设置
– link=“...”设置链接的颜色 – vlink=“...”设置链接被访问后的颜色 – alink=“...”设置激活链接的颜色
\city.gif
\Myweb\images\cit interest Interest. City.gif ..\image images y.gif htm s\city.gif
interest.htm
index.htm
city.gif
frontpag.gif
……
创建超链接
• 根据超链接源对象的不同，分为：
相对URL
• 使用相对URL时，经常使用两个与DOS 类似的符号：
– 句点（.）表示当前目录 – 双重句点（..）表示当前目录的上一级目录
相对URL
路径 .\images\city.gif
当前所编辑网页，引用city.gif
对比
引用
My webs 被引用 相对路径
绝对路径
index.htm city.gif .\images \Myweb\images\cit Myweb y.gif
