《HTML教程》-1.3教学材料

1.3.1资源路径所谓路径就是能够从当前工作目录找到目标资源的目录结构。分为两种路径：一种是绝对路径，另一种是相对路径。绝对路径是完整的URL地址，加上站内地址，如果是磁盘文件，则是从盘符开始，一直到资源文件所在的位置所经过的所有目录连接而成。绝对路径缺乏灵活性，所以一般采用相对路径进行表示。相对路径有三种不同的表示方法，分别表示不同的路径（注意下面的路径表示均不包括双引号“”）[2]：◆“./”或者“资源名”——表示当前目录；◆“../”——表示上一层目录；◆“/”——表示根目录。假定有以下结构的目录结构，如下图所示。图

E盘上的目录结构在上述目录结构中，如果Listing1-7.html要访问Listing1-6.html，则可以使用如下的相对路径：<ahref="Listing1-6.html">清单1-6</a>或者<ahref="./Listing1-6.html">清单1-6</a>即访问当前目录中的文件。如果Listing1-7.html要访问images目录下的flower.jpg文件，则使用如下的相对路径：<imgsrc="images/flower.jpg"/>

即访问当前目录下的某个目录中的文件。假如在test.html中要访问E盘根目录下的images文件夹中的flower.jpg文件，则可以使用如下的相对路径：<imgsrc="/images/flower.jpg"></img>

即访问根目录下某个文件夹中的文件。需要说明的是，无论使用哪种相对路径，都是以当前文件所在的目录——即工作目录——为出发点的！如test.html访问根目录下images目录中的flower.jpg文件，因为test.html文件在E盘的某个目录下，所以根目录就是指的E盘根目录，而不是其他盘中的根目录。相对路径对于网页制作有着十分重要的意义，它涉及能否有效访问资源的问题。请各位读者要仔细理解并掌握这部分内容。1.3.2a标记HTML本身就是一种超文本链接语言，链接标记a是十分重要的。它可以是文本，也可以是一幅图像，只要单击这个文本或图像就可以链接到新的网页，使得用户可以在多个相关的网页之间进行跳转浏览。使用a标记创建超级链接，可以包含3个属性：href属性、name属性和target属性。★href属性用于指向链接的目标地址；★name属性也用于指向链接的目标地

址，不过是本网页内部的一个位置，可以称为锚点；★target属性用于指标目标页面的打开位置target属性可选的属性值有以下几个，如表1-4所示。表1-4target属性值属性值说明_self在本窗口打开，为默认值。_blank在新的浏览器窗口打开。_parent将目标文件载入到父框架中。_top将目标文件载入到顶层窗口，并删除所有框架。由于现代网页设计不推荐使用框架，所以后两个属性值使用的比较少。target属性为可选属性，即创建超级链接时可以没有该属性，此时目标页面在本窗口中打开。创建超级链接的语法非常简单：<ahref=”目标地址”>链接文本或图像</a>或者<aname=”锚点名称”>提示信息</a>其中，目标地址即可以站内地址，也可以是站外地址。锚点即可以本网页内的位置也可以是其他网页中的指定位置。下面我们通过一个例子说明如何创建各种超级链接。示例代码如清单1-7所示。从该实例开始，为了节约篇幅，只给出关键代码，完整代码可在源代码中找到（下同）。清单1-7各种超级链接<ahref="Listing1-6.html"accesskey="a">清单1-6</a><ahref="/html/html_links.asp#tips">其他网页中的锚点</a><ahref="/" target="_blank">HTML可参考w3school</a><aname="top"></a><divstyle="border:1pxsolidred;height:2048px"></div><ahref="#top">返回顶端</a><ahref="mailto:454817856@">邮件链接</a><ahref="javascript:alert('确定要删除吗？')">删除</a>代码说明如下图：第一个“清单1-6”的超级链接是指向站内的链接，由于没有指定target属性，所以采用默认的_self属性值，因此单击该链接，会在当前窗口中打开Listing1-6.html文件，即目标文件把原来的网页取而代之。需要说明的是，此处的Listing1-6.html和当前网页应该在同一目录下，否则找不到目标网页Listing1-6.html。言外之意也就是说，站内的超级链接之间引用的路径必须正确，站外链接的域名和路径都必须正确，否则将找不到目标网页。所有需要访问资源的地方都会涉及路径问题，以后不再提示，下同。第二个链接是指向其他网页中锚点的链接，注意它的href的写法，是把#号加在URL的后面，再加上锚点的名字。第三个是站外链接，同时设置了target属性，目标网页在新窗口中打开。第四个链接定义了本网页内的锚点，并在第五个链接中指向它。最后两个链接分别是邮件链接和带有动作的链接，单击这两种链接会附带一定的功能。单击邮件链接可以打开本地的电子邮件程序，如Outlook；单击带动作的链接会触发一定的动作。在本例中会弹出一警告框“确定要删除吗？”。1.3.2img标记Img标记用于在网页中插入一幅图像，对于只有文字的网页来说，适当插入几幅图像无疑是非常精彩的。但是显示图像的前提条件是从服务器上加载图像，所以网页中如果图片太多势必会造成巨大的网络流量，影响网页加载速度，所以尽量慎用图像，做到画龙点睛就好。Img不仅仅是在当前网页中显示图像，还可以结合map和area标记制作HTML热点地图，也就是一种图像链接，可以实现更好的视觉效果。Img定义图像的语法如下：<imgsrc="图片的url地址"alt="替换文本">src属性是必选属性，指定要显示图片的URL地址。Alt属性为可选属性，用于在无法显示图像时，显示的替代文本。当然，img还有其他的属性，如宽度width，高度height等，为了遵从“内容、样式和动作相分离”的原则，这部分内容不在此进行讨论，而放在CSS基础中加以说明。下面分别说明img图像标记的几种用法

1、在网页中插入图片

这是img标记最简单的应用，只需要在src属性中指定要显示图像的url地址即可。如下面的代码所示。<imgsrc="images/flower.jpg"alt="鲜花"/>2、制作图像超链接

有时候只有单一的文本超链接是不能满足用户需求的，适当的加入图像或者图像文本混合使用的超链接，可以美化网页，满足用户多性化的需求。只需要将img标记嵌入a标记内部就可以了。示例代码如下：<ahref="#"><imgsrc="images/delete.jpg"/></a>3、制作HTML热点地图

这是一种更形象的图像导航方式，即把图像划分成若干个区域，每个区域对应一个链接地址，单击这个区域就可以到达链接的网页。这种导航形象直观，受到大多数用户的青睐。生成HTML热点地图的代码结构如下：<imgsrc="../images/face.jpg"usemap="#face"/>

<mapname="face">

<areashape="rect"coords="100,200,250,305"href="eye.html"target="_blank"/> <!—其他area标记的定义–>

</map>制作热点地图的格式稍微有点复杂，我们来解释一下。首先，是在img标记中添加了usemap属性，用于指定用于生成地图的map，usemap属性的值与map标记的name属性值保持一致（不含#号）。其次，map用于制作与图像相关的热点区域，包括若干个area标记，一个area标记代表地图中的一个热点，单击这一热点就可以导航到相应的网址。area的shape属性用于指定热点区域的形状，有三个值可选，分别是圆形（circ或circle）、多边形（poly或polygon）和矩形（rect或rectangle）。Coords属性用于指定区域的各顶点坐标。矩形需要指定左上角点坐标和右下角点坐标；圆形需要指定圆心坐标和半径；多边形最复杂，需要指定各个顶点的坐标。Href属性和target属性与超级链接的属性相同，在此不再介绍。几种用法例子的完整清单1-8所示。清单1-8img的几种用法<imgsrc="../images/flower.jpg"alt="鲜花"/><br/><ahref="#"> <imgsrc="../images/delete.jpg"/></a><br/><imgsrc="../images/face.jpg"usemap="#face"/><mapname="face"> <areashape="rect"coords="100,200,250,305"href="eye.html"target="_blank"/><areashape="rect"coords="280,200,420,305"href="eye.html