第4章用HTML建立超链接分析.ppt

第四章 用HTML建立超链接 4.1 设置基本文字超链接 建立HTML标记为a/a标记。超链接最重要的两个要素，设置为超链接到文本内容和超链接指向的目标地址。 基本超链接的结构如下： a href=“”百度/a URL的格式 每个文档在互联网上有唯一的地址，该地址被称为统一资源定位器（Uniform Resource Laocator）,简称URL。 URL由四个部分组成：协议、主机名、文件夹名和文件名。 /study/index.html URL的类型 超链接的URL有两种类型：绝对URL和相对URL。 绝对URL如下： /study/index.html 相对URL分为两种： 1、相对文档的URL，这种URL以链接的原文档为起点。 2、相对服务器的URL，这种URL以服务器的根目录为前点。 URL的类型 html head title超链接/title /head body p点击a href= /guest-book.html链接01/a链接到第1个网页。/p p点击a href= /02.html链接02/a链接到第2个网页。/p p点击a href= ../sub/03.html链接03/a链接到第3个网页。/p /body /html 4.2 设置页面内部特定目标的链接 超链接不仅可以跳转到其他页面，也可以在本业内跳转。 4.2 设置页面内部特定目标的链接 html head title无标题文档/title /head body pa href=#first第1本书/a a href=#second第2本书/a a href=#third第3本书/a/p h3a name=“third/a精通CSS+DIV网页样式与布局/h3 p本书系统地讲解了CSS层叠样式表的……能力。/p p详细介绍/p h3 a name=second/a CSS设计彻底研究/h3 p本书是一本深入研究和揭示CSS设计技术的书籍。本书在……以然。 br 详细介绍/p h3 a name=third/a CSS设计禅意花园/h3 p本书作者是世界著名的网站设计师，……性能优良且具有强大生命力的网站。br /body /html 4.3设置图片的超链接 html head title图片的超链接/title /head body a href=1.html img src=cup.gif /abr /body /html 4.3设置图片的超链接 为图片添加一个超链接后，浏览器就会自动给图片加上一个粗边框，就像在建立文字超链接时会加上下划线一样。如果希望去掉这个边框，只需要在img标记中设置border=“1”后就可以取消这个边框。 a href=1.htmlimg src=cup.gif border=“0” /a 4.4 设置电子邮件链接 电子邮件链接类似于URL的链接方式，格式是mailto:电子邮件地址。 html head title邮件的链接/title /head body 联系我们：a href=mailto:479384554@给我们发送邮件/a。 /body /html 4.5 设置以新窗口显示链接页面 如果要在点击某个链接以后，打开一个新的浏览器窗口，在这个新窗口里显示目标页面，就需要在a标记中设置”target” 属性。 Target属性设置为“_blank”，就会自动打开一个新窗口，显示目标页面。 4.5 设置以新窗口显示链接页面 html head title以新窗口方式打开/title/head body 以a href=1.html target=_blank新窗口/a方式打开一个页面。 /body /html 4.6 创建热点区域 所谓图片的热点区域就是将一个图片划分成若干个链接区域。访问者点击不同区域会链接到不同的目标页面。 HTML中可以使用3种类型的热点区域：矩形、圆形和多边形。 4.6 创建热点区域 img src=hotmap.jpg width=542 height=266 border=0 usemap=#1 map name=“1 area shape=rect coords=25,71,168,185 href=2.html target=_blank 4.6 创建热点区域 area shape=circle coords=302,124,59 href=2.html target=_parent area shape=poly coords=447,198,438,183