第三讲用HTML建立超链接和表格

一、超链接2超链接1.1链接的基本概念1.2目录和目录结构1.3使用a创建链接1.4创建到电子邮箱1.5以图像作为链接31.1链接的基本概念什么是链接？是Web与其他媒体最本质的不同之处。是用户在组成Web站点的多个页面之间切换的途径。是用户从本站点访问其他站点和其他媒体的途径。链接由什么组成？目的地（destination）：访问者点击链接时将会切换到的网页或媒体，又称锚（anchor）。标签（label）：提供给访问者的点击处，可以是文本、图像或者两者兼有。显示目标（target）：指定目的地出现的窗口或框架。41.2目录和目录结构目录：分类存放站点网页使用到的各种文件。目录结构：多个目录之间的组织关系。根目录：保存站点的主目录子目录：位于其他目录中的目录父目录：包含其他目录的目录示例：我的站点是（）目录我的站点是图书的（）目录图书是音乐的（）目录下载是音乐的（）目录根父子平行51.2目录和目录结构文件在目录结构中的位置使用URL表示绝对地址（绝对URL）：显示文件的完整路径，包括协议模式、服务器名称、完整路径和文件名。相对地址（相对URL）：以包含URL本身的文件的位置为参照点，描述目标文件的位置。上级文件——父目录:使用../回溯到上一级父目录同一目录——平行目录:不需指定任何内容下级文件——子目录:使用子目录名/引用优点：1.表示简洁2.修改站点域名或目录名时，不需修改其子目录下的所有链接。61.3利用a创建链接目的：建立从当前页面到目的文件的链接语法格式：注意：目的文件若在本站点内，适合使用相对路径目的文件若在其他站点内，适合使用绝对路径页面上显示的链接文本将被自动加上下划线该链接文本也可以是图像文件ahref=“目的文件-URL”/当前页面上供单击的链接文本/a7创建到另一页面的链接目的：建立从当前页面到目的页面的链接语法格式：注意：目的页面文件若在本站点内，适合使用相对URL目的页面文件若在其他站点内，适合使用绝对URLahref=“目的页面-URL”/当前页面上供单击的链接文本/a示例8创建到本页面某个位置的链接目的：在长文本页面内，可能需要在各个部分间跳转，方便阅读。基本概念：源锚点：页面上可以单击的链接目的地锚点：源链接指向的特定位置方法：第一步：在目的地锚点处使用aid=“目的锚名”目的地锚点文本/a第二步：在源锚点处使用ahref=“#目的锚名”/源锚点文本(当前页面上供单击的链接文本)/a注意：一个页面中的id(或name)属性值必须唯一。示例91.4创建电子邮件的链接格式：示例：ahref=“mailto:[e-mail]？subject=主题&cc=抄送邮箱地址&bcc=密送邮箱地址&body=内容”/当前页面上供单击的链接文本/aahref=“mailto:[e-mail]?subject=咨询&cc=[e-mail].c&bcc=[e-mail]需要咨询请联系我/a10设置链接的属性——target作用：指定包含在链接目标文件显示的位置语法格式：属性值：ahref=“目标页面-URL”target=“显示目标页面的窗口或框架名”/当前页面上供单击的链接文本/a_blank在新窗口中打开链接_parent在父窗体中打开链接_self在当前窗体打开链接,此为默认值_top在当前窗体打开链接，并替换当前的整个窗体(框架页)框架名在对应框架页中打开11设置链接的属性——更改颜色由body标签中的一组相关属性设置各属性及作用：示例：属性名作用默认值text属性非可链接文字的颜色黑色link属性可链接文字的颜色蓝色vlink属性已经被访问过的可链接文字的颜色粟色alink属性正被单击的可链接文字的颜色红色bodylink=redvlink=bluealink=greenahref=“目的页面-URL”/链接文本/a/body示例121.5以图像作为链接作用：单击图像实现链接到其他文件格式：说明：把图像创建为链接用以实现导航按钮图像元素仍然可以使用图像的所有属性imgsrc=“URL”alt=“图像描述备选文本”/ahref=“目标页面-URL”//a示例13图像映射服务器端图像映射：服务器的脚本文件处理用户单击的位置坐标指示链接的目标页面。具体实现方法依赖于服务器类型及脚本。客户端图像映射：浏览器根据用户单击的位置指示链接的目标页面。可用HTML（XHTML）代码实现。本次仅讨论客户端图像映射的实现。14客户端图像映射实现方法：第一步：使用img插入作为地图的图片第二步：用画图工具找到并记下热点区域需要的各点坐标第三步：设置map和area元素，定义映射图mapname=“地图标识名”/areashape=“热点形状”coords=“热点区域所需坐标”href=“链接目标文件地址”target=“目标文件显示的窗口或框架”alt=“鼠标移至热点区域时显示的提示文本”//mapimgsrc=“地图图片地址”alt=“鼠标移上地图时显示的图片简介”/15area元素设置shape属性和coords属性areashape=“热点形状”coords=“热点区域所需坐标”href=“链接目标文件地址”target=“目标文件显示的窗口或框架”alt=“鼠标移至热点区域时显示的提示文本”/shape值创建的形状所需热点区域点坐标default没有定义区域无rectangle(rect)矩形左上角、右下角（共4个数字）circle(circ)圆形圆心、半径（共3个数字）polygon(poly)多边形每个顶点一对坐标，自动闭合示例使用映射图使用映射图：imgusemap=#地图标识名图像使用原则1.在设计网页时，应该反复斟酌哪些图像必须要，哪些图像可有可无，对于那些不是必需的图像，要舍得忍痛割爱；2.把图像尽量做得小一点1.同时使用图像和ALT的纯文本格式16示例二、表格2.1定义表格的基本语法2.2表格的定义2.3表格行的控制2.4单元格的控制2.5表格的分组2.6设置表格的标题caption2.1定义表格的基本语法在HTML中，表格的建立将运用table、tr、th、td四个标签完成。定义表格标签table/tabletable标签用于定义一个表格元素，一个表格元素，是由数个横行（tr）、单元格（td）与表头单元格（th）子元素所组成。定义表行标签tr/trtr标签用于定义表格的一行，在一组tr标签内可建立一行表格，也可以包含数组由td或th标签所定义的单元格。定义单元格标签td/tdtd标签用于定义表格的单元格，td标签必须放在tr标签内。数据标签td是成对出现标签，首标签td和尾标签/td之间的内容就是该单元格中的具体数据。注：在一个最基本的表格元素中，必须包含一组table标签、一组tr标签与一组td标签。定义表头标签th/th例子th标签用于定义表格内的表头单元格，此单元格中的文字将以粗体的方式显示th标签是成对出现标签，首标签th和尾标签/th之间的内容就是位于该单元格的表头元素内容。在一个表格的定义语法中也可以不使用th标签，定义表头单元格。table是用于定义一个表格元素的标签。table标签的属性主要有border、bordercolor、bordercolorlight、bordercolordark、width、height、align、bgcolor、background、cellapacing、cellpadding、frame和rules，它们都是可选的。2.2表格的定义设置边框尺寸的语法如下：tableborder=数值border属性的参数值是数字，表示表格边框宽度所占的像素点数。例如，tableborder=10表示表格的边框宽度为10个像素点。2.2.1设置表格边框的尺寸border设置表格边框颜色的基本语法如下：tablebordercolor=#设置表格边框颜色的亮度的基本语法如下：tablebordercolorlight=#tablebordercolordark=#其中，“#”取值为16进制的颜色代码，其代码可参见颜色代码表。2.2.2设置表格边框的颜色2.2.3设置表格的尺寸width/height设置表格尺寸的语法如下：tablewidth=数值height=数值width和height属性的作用是指定表格的大小。其中width属性用以规定表格的宽度，height属性用以规定表格的高度。这两个属性的参数值可以是数字或百分数2.2.3设置表格的尺寸width/height例：tablewidth=200height=50%表示该表格的宽度为200个像素点，高度为浏览器窗口高度的50%。设置表格的位置的基本语法如下：tablealign=参数值align属性的参数值为left、center和right之一，分别表示表格位于其相邻文字的左侧、表格水平居中和表格位于与其相邻的文字右侧。2.2.4设置表格的位置align2.2.5设置表格的背景颜色或背景图像设置表格的背景颜色或背景图像的基本语法如下：tablebgcolor=#tablebackground=URL其中，“#”取值为16进制的颜色代码。2.2.6设置格框线的宽度cellspacing设置格框线宽度的语法如下：tablecellspacing=数值在格与格之间有间隔线，称其为格框线。使用cellspacing属性可以指定格框线的宽度。该属性的参数值取像素值，默认值为2。加宽了格框线，表格会变得大一些。2.2.7设置格框与内容的空隙cellpadding设置格框与内容的空隙的语法如下：tablecellpadding=数值cellpadding属性用于指定单元格内容与单元格边界之间空白距离的大小。该属性的参数值取像素值，表示单元格内容与上下边界之间空白距离的高度所占的像素点数以及单元格内容与左右边界之间空白距离的宽度所占的像素点数。设置表格的左边框、右边框、上边框、下边框为显示或者隐藏。设置表格边框显示状态的基本语法如下：显示整个表格边框tableframe=box不显示表格边框tableframe=void只显示表格的上下边框tableframe=hsides只显示表格的左右边框tableframe=vsides只显示表格的上边框tableframe=above只显示表格的下边框tableframe=below只显示表格的左边框tableframe=lhs只显示表格的右边框tableframe=rhs2.2.8设置表格边框的显示状态frame2.2.9设置分隔线的显示状态rules设置表格中分隔线的显示状态，各种效果如图所示。设置表格中分隔线的显示状态的基本语法如下：显示所有分隔线tablerules=all只显示组与组的分隔线tablerules=“groups只显示行与行的分隔线tablerules=rows只显示列与列的分隔线tablerules=cols所有分隔线都不显示tablerules=none2.3表格行的控制HTML中的表格是按行组织的。一个表格由几行组成，就要有几个行标签与之相应对。tr标签有height、bordercolor、bgcolor、align和valign属性，它们都是可选的。height属性可控制表格内某行的高度，此属性的设置语法如下：trheight=