静态HTML网页制作

1、第五章静态HTML网页制作5.1 HTML文件编辑环境介绍5.1.1常用名词在学习网页制作之前，我们有必要先了解一些常用的概念。（1）WWW万维网“万维网”（Word Wide Web）简称WWW，这是号称除了报纸、广播、电视外的第四大传播媒体。（2）Browser浏览器要观看万维网上的内容，一个必要条件是要有一个万维网浏览器。目前常用的浏览器是微软（Microsoft）公司的Internet Explorer（简称IE），网景公司（Netscape）的Communicator（通讯家），还有Opera等。（3）WebPage网页当你浏览一个网站时，网站中的每一页都称为一个“网页”。网页是用来

2、显示各种数据与信息的，它由文字、图片、声音、动画等组件组成。每个网页都是一个文件，我们通过浏览器可以查看其内容。（4）HomePage主页当你上网浏览某个网站时，我们进入网站最先看到的网页称为“主页”，也叫作“首页”，这有点像自己家的门面一样。一般的网站管理者为了吸引上站者的眼球，都将主页做得很炫、很漂亮。（5）Web Site网站“网站”就是用来存放网页文件的地方，通过浏览器便可以浏览网站上面的网页。（6）Hypertext超文本“超文本”文件本身是一个文本文件，但其内容和一般文本文件又不一样，除了有一般信息内容之外，还有一些加注性描述用来产生特殊效果，在显示文件时，浏览器先根据加注性描述对

3、信息内容进行处理，最后才把结果展示给浏览者。这种文件当然也可以用一般的文字编辑软件打开，但却看不到加注性描述所产生的特殊效果，因为一般的文字编辑软件不能像浏览器那样根据加注性描述对信息内容进行处理。（7）Hyperlink超级链接万维网能风行全球当然有其原因：美丽而动态的画面，方便而简易的使用界面，精彩而富于变化的内容，这些都是它的引人之处；但除了这些之外，它还有一个成功的利器，即它的无限的超级链接能力。譬如它具有网站内部网页间彼此连接的能力，我们称为“内部超级链接”，还可以连接到其他网站，我们称之为“外部超级链接”。网络具有无限的连接性才有它的意义，若没有连接功能，网站就像一座孤岛。（8）H

4、TML超文本描述语言HTML(HyperText Markup Language)，是一种专门用来设计网页的计算机语言，HTML对网页上的文字、图片等信息出现的位置、形式、顺序及关系都使用标记语法做出定义，同时对网页间加注超级链接关系。一般用HTML语言编写的网页文件，其扩展名都是.htm或.html。（9）TCP/IP通讯协议TCP/IP（Transport Control Protocol/Internet Protocol，传输控制协议/Internet协议）是一组通讯协议的名称，而此通讯协议则是Internet中成千上万台计算机间沟通的语言，就好像人类的使用的语言一样，Internet

5、上的计算机主机就借着TCP/IP而能互相沟通，并且交换彼此音的文件数据。（10）IP地址在Internet上每一台计算机之间要进行数据交换时，必须通过TCP/IP通讯协议，并且每一台计算机都最少有一个专属的IP地址，而要进行数据交换时，必须知道双方的IP地址，就好像打电话一样，必须知道电话号码。IP地址的长度为32位，分为4段，每段8位，用十进制数字表示，每段数字范围为0255，段与段之间用句点隔开。例如。（11）DNS域名服务器由于IP地址是由四个8位的数字组成，并不容易记忆，因此我们大多使用域名（Domain Name）来代表IP地址，为了将Domain Name转换

6、成对应的IP地址，就必须经由DNS服务器来进行转换，就好像查字典一样，将Domain Name转换成IP地址。（12）URL统一资源定位法网页上的超级链接是让你取得Internet上的网络资源，而这些网络资源的服务单位的IP地址（Internet Protocol Address，简称网址），是国际间是唯一的，我们将这些独一无二的身份证称为“统一资源定位法”（Universal Resource Locator，简称URL）。URL的格式如下图所示：protocol:/host.domain/path/filename图1URL其中： protocol：为网络资源的通讯协议。常用的网络资源通讯

7、协议如下：http：HyperText Tarnsfer Protocol，超文本传输协议，通过这种协议，才能显示出万维网上的各种媒体效果。ftp：File Transfer Protocol，是一种文件传输协议，用途在于使Internet上的主机可以交换文件数据。mail：电子邮件，经由网络系统将文件传送至远程的计算机主机。WWW通讯协议主机名称 host.domain：为所联机网络资源的主机名称。如：阜阳师范学院网站的地址为：图2主机名称 path/filename：网络资源存放在网站内的路径及文件名称。如阜阳师范学院文学院的网址为：:8080/xiweb/zwx/htdocs/index

8、.asp通讯协议主机名称端口号路径文件名图3路径及文件名说明：通讯协议和主机名称的英文字母可以不分大小写，但路径及文件名称的英文字母的大小写被视为不同的字符。表1网域类型代码和地区代码网域类型的代码说明地区代码说明代码网域类型地区代码地区名称地区代码地区名称.com商业组织.cn中国大陆.de德国.edu教育单位及学术研究单位.us美国.nz新西兰.net管理网络的机构.jp日本.uk英国.int国际组织.hk香港.au澳大利亚.mil国防机构.tw台湾.it意大利.gov政府机构.ca加拿大.kr韩国.org研究单位及非营利组织.sg新加坡.fr法国构思主题搜集资料草图制作网站制作局部测试上

9、传测试推销网站后期维护推销网站后期维护上传测试局部测试网站制作5.1.2网站制作流程搜集资料草图制作构思主题初期规划中期实际行动后期维护图3网站设计整体流程图5.1.3HTML文件的生成、编辑与查看编辑网页有多种语言，目前最基本最常用的是HTML，HTML（Hyper Text Markup Language）是一种文件标记式的网络语言，现在已经成为Internet上专门用来制作网页文件的标准语言。由于HTML文件是一个纯文本文件(Text File)，因此要产生HTML文件很简单，只要使用一般的文本编辑软件就可以了。在Windows环境下可以使用记事本、写字板、Word或使用网页制作专用软件

10、如FrontPage、Dreamweaver等，一旦文件的内容编辑好了，以扩展名.htm或.html方式存盘，就可以了。编辑好之后想查看生成网页的效果，可以直接双击它就行了，这时计算机会自动使用IE浏览器打开HTML网页文件。现在给大家演示一下怎么用这些软件编辑HTML文件，也就是网页文件，并比较一下它们的优劣。其实目前专门用于HTML文件制作的软件很多，有的有自动提示功能，这里给大家推荐ASPstudio，它还可以方便以后大学习动态网页的制作。5.2 HTML编辑文字图片技巧HTML是制作网页最基础的语言，Internet上所有的Web网站的网页，95%以上都是以HTML格式来制作的。当然H

11、TML一般只能生成静态的网页，以后大家可能会使用ASP、JSP或PHP等语言来制作动态的网页，但这些ASP或PHP程序经服务器解译之后，最后呈现在客户端浏览器上的还是HTML格式的，更为重要的是不管是ASP、JSP或PHP或其他什么语言，一般都要和嵌入到HTML文件之中，或者自己被HTML嵌入。因此，有人认为使用Frontpage或Dreamweaver等所见即所得的网页编辑软件，就可以不必学习HTML语言了，这是错误的，当然，如何你只想制作一个静态的网页，用这样的软件就可以了，甚至可以不学习HTML语言，但这种做法只能说是沙堆上建高楼，根基太差，只知其然不知其所以然，以后几乎没有进步发展的可

12、能。5.2.1 HTML基本语法标记一份标准的HTML文件是由标记（Tag）和欲显示在网页上的内容所组成。欲显示的内容当然包括文字、图片、图像、声音、视频等元素；而标记（Tag）的作用是标记网页元素在网页上出现的位置、形式、顺序及元素间的关系。在HTML中文件中，有些标记规定必须是以“tagname”符号开始，而以“/tagname”符号结束，我们称之为“成对标记”；有些标记允许单一标记出现在欲显示元素的前面或后面，这是非成对标记，其基本格式有下列两种写法：语法1：成对标记displaydata语法2：非成对标记1. displaydata2. displaydata HTML的语法使用上没有

13、大小写的差别，可依自己的习惯来撰写。说明：是标记名称，用来表示这是标记的开始，标记前面加斜线表示这是标记的结束。displaydata代表欲在网页上显示的内容。在标记内的property（属性）用来改变displaydata的属性值。之前的内容都按property的值来显示。在设定value值时不一定要用双引号将属性值的头尾括起来，但建议最好用双引号，以免字符串中有空白而产生错误。不同标记所拥有的property（属性）不一定相同，而且书写几个属性时，没有前后次序关系。每个property（属性）都有其默认值。因此，标记内若省略某属性不写，则会使用默认值。结构HTML的整体结构。人类的身体是由

14、头部（Head）和身体（Body）两大部分组成。HTML文件的整体结构也是如此。其中头部（Head）就是指文件的标题，以开头，以结束，中间用来定义标题的内容，身体是以开头，以结束，两个标记之间用来放置欲显示的网页元素及其标记。其整体构架如图所示：头部身体图4HTML的整体结构标记一个完整的HTML文件是以标记开始，用来告诉浏览器这个文件是使用HTML格式编写的；最后使用标记结束，用来告诉浏览器此处是HTML文件的结束点。由图4我们可以看到，两者之间包含两个主要部分：一个是HTML文件的头部，我们称之为“标题设定区”，放置一些有关该文件的识别数据，前后使用标记框住；另一部分是主体我们称之为“HT

15、ML网页文本区”，是呈现给浏览者观点的文件内容及其格式，前后使用标记住。标记标记主要用来提供此份文件的整体信息。包括标题栏名称、文件的网址、所采用的语种等。标记用来告诉浏览器这是文件标头的开始点；最后使用标记告诉浏览器此处是文件标头的结束点。但要记住必须成对出现。这对标记之间可以使用下列标记：（1）通过来设定标题栏名称。（2）通过来设定文件中超级链接的网址。（3）通过说明本文件使用什么语种，如本例是使用国标码。（4）通过来加入背景音乐。音乐文件的格式只能是.mid、.wav或.asf格式的。“URL”为音乐文件的全路径，如为本地音乐，格式为：“src=file:/D:work in fuyan

16、g语言文字信息处理教案第5章d067.WAV”（5）通过可以在HTML文件任何地方加上注释。在一些关键地方加入注释是一个非常好的习惯。标记必须成对出现，之间所夹的文字就是你在浏览器标题栏所看到的标题名称。但要记住：必须出现包含在标记之间。标记由于Internet的范围涵盖全球，因此也就面临英文、中文、法文、日文等语种在显示文字上的问题，我们可以在HTML文件中通过标记来设定网页所属的语种。当然，这个标记还可以指定其他附加信息，这里不再多提。语法：功能：允许网页设计者在网页标头中加入自定义信息。说明：非成对标记，该标记必须写在之间。本例作用是指定文件格式为text/html，语种是大五码（cha

17、rset=big5）其他作用请参考HTML手册。标记这个标记的作用是在网页中加入背景音乐，其语法如下：语法：功能：按照指定的播放次数播放背景音乐。说明：非成对标记，必须写在之间。src的值为“URL”，用来指定音乐所在位置loop的值为“playtimes”，用来设定音乐播放次数，缺少值为1次，若值为-1，则表示播放无限次。该标记只在IE中有效。音乐文件的格式只能是.mid、.wav或.asf格式的。“URL”为音乐文件的全路径，如为本地音乐，格式为：“src=file:/D:work in fuyang语言文字信息处理教案第5章d067.WAV”5.2.2设定段落与对齐在HTML文件中，可以

18、配合各种不同的标记来美化文字，如：设定文字的颜色、大小，字体等。标记到之间是HTML文件最重要的部分，是真正呈现到浏览者面前的图文内容及其格式，的语法如下：语法：功能：设定网页内容显示区的属性。说明：bgcolor：设置背景色 background：设置背景图片 text：设置文本颜色 link：设置链接文本颜色 alink：活动链接颜色值 vlink：访问过的颜色值 注：表示颜色：（1）用red blue yellow green black white cyan magenta（2）用#rrggbb表示：r、g、b使用16进制数 如品红：#880088、青色：#008888省略全部属性，则

19、网页背景色为白色，文字为黑色。前面提到，到之间的内容将按照其格式呈现到浏览者面前。我们现在在这中间输入一些内容来试试。例1：欢迎光临我的网站亲爱的各位同学： 你只要认真听课，勤于练习，你会发现：“HTML原来不难啊!”坚持下去，你很快会成为网友制作高手的! 祝学习进步傅成宏2008.4.6实验结果表明，可以在浏览器中显示这些内容，但并没有按我们的排版样式显示。原因是我们的HTML文件并没有对这些内容加任何美化的标记。要想使浏览器按我们排版的样式显示，只要在内容的前后加上下面的标记就可以了。标记这个标记可以让文字的编排按我们设定的方式显示，也就是说浏览器里显示的文字和我们在HTML文件里的排版方

20、式一模一样。注意要成对出现在和内部。来试试。标记是换行标记，属于非成对标记。一般都是配合标记使用，使得网页的段落分明。如我们可以使用它来实现上面标记实现的功能。试试。实验结果我们发现，基本上实现了我们的要求，但每段开头没有空两格，尽管我们在源代码中手工加入了空格也不能让浏览器显示空格。这是因为要让浏览器显示空格，必须使用空格的特殊符号句柄“ ”。在网页中要显示特殊符号，需要使用句柄并且在句柄的前面加上作为开头，常见特殊符号的句柄如下表。表2 常见特殊符号句柄句柄显示结果句柄显示结果 空一格（半角）divide;<©&qout;“®×&

21、;&标记语法： displaydata 功能：段落标记用来设定段落。说明：与组成成对标记。一般配合使用，让网页的段落分明。会使接下来的文字从新的一行开始显示，并且每个用标记所形成的段落之间都会自动空一行，不会产生空行。也可以省略不写。align属性且为设定文字的对齐方式，其value属性值可设为：Left：左对齐；right：右对齐；center：中对齐。标记功能是将图文置中对齐，必须与成对出现。而和的差别在于后者会跳出一个空行，前者不会。5.2.3设定文字格式标记此为文字缩小一级标记，其后到之前的文字会缩小一级，此标记应该成对出现。标记与标记相反。试试！标题标记说明：一般用来设定标题字的字体

22、大小，使得标题字更加醒目，但它除了会改变字体大小之外，字体还会依大小自动加粗以提高浏览者的注意力，作为标题的文字会独占一行且上下各有一空行。最大、最小，此标记应该成对出现。此标记中可以加入align属性来控制文字对齐方式。字体标记在一份HTML文件中,设定字体大小当然可能使用前面的三个标记，和甚至还可以嵌套使用，但毕竟不太方便。因此HTML另外提供来对整个段落的文字大小作设定，而且不会像那样将字体加粗并将文字上下空一行。字体标记除了可以设定字体大小之外，还通过face属性来设定字体和种类，通过color属性来设定文字的颜色，其语法如下：语法： displaydata 功能：设定文字的大小、字体

23、、颜色。说明：应与成对使用。size属性，用来设定文字的大小。它的值为17值越大字体越大。默认值为3。也可以使用相对大小设定，例如size=”+1”或size=”-1”表示将目前字体大小上升一级或下降一级。face属性，用来设定文字字体的种类（如：face=”楷体_GB2312”）。color属性，用来设定文字颜色。正表是常用颜色名称（color=”green”）：颜色名称代表颜色颜色名称代表颜色颜色名称代表颜色Aqua水蓝色black黑色blue蓝色fuchsia紫红色gray灰色green绿色line石灰色maroon栗色navy深蓝色olive橄榄色purple紫色red红色sliver

24、银色teal蓝绿色while白色yellow黄色pink粉红色文字的特殊标记见下表：表3 常用的文字特殊标记标记说明将标记范围内的文字以粗体显示将标记范围内的文字以斜体显示将标记范围内的文字加上下划线将标记范围内的文字以上标形式显示，如：2X3+3X2+6X=5将标记范围内的文字以下标形式显示，如：2H2O22H2O2以斜体来显示的重要文字以较小且加粗的方式显示文字在文字中间加上一条横线，用来显示要删除的文字以粗体来显示文字的重要性用来显示程序中的变量用来显示程序中的代码文字用来将文字缩进显示以斜体的方式显示参考文献用斜体来显示地址用来显示科学上的定律文字5.2.4在网页中插入水平线一个HTM

25、L文件通过来产生段落，可能让文件的段落层次分明，让浏览者知道彼此间哪些是属于同一个部分的内容。但是一张网页可能有标题以及不同性质的内容，单靠段落标记来区分，层次上不够清楚。此时可能通过标记加入水平线来加以区分，让浏览者很快区分出不同性质的内容。标记的语法如下：语法：功能：显示分层水平线。说明：非成对标记属性说明如下:align: 对齐方式 center、left、right，默认为centerwidth: 左右长度，默认为窗口宽度，可用60%来指定其长度为屏幕宽度的比例size:上下宽度，也可以用%指定宽度color:颜色noshade:无阴影5.2.5制作“跑马灯”在HTML标记中有个会产生

26、简单特效的标记，人们俗称之为“跑马灯”。语法如下：语法：displaydata功能：使文字或图片产生移动效果。说明：成对标记。各属性如下表：属性说明loop设定跑马灯的次数。可用数字表示。direction设定跑马灯的移动方向，常用属性值如下：right：文字由左向右移动。left：文字由右向左移动。（默认值）scrolldelay设定文字移动的速度，用来设定延迟时间，数值越大，速度越快，默认值为90，单位以毫秒来计算。scrollamount设定文字移动的速度，跑马灯文字移动距离，数值越大，速度越慢，默认值为6，跑马灯移动以像素点为单位。behavior设定文字走动方式，常用属性值如下： s

27、croll：文字跑到心头之后再重新开始跑（默认值）。 slide：文字跑完一次就不再跑了。 alternate：文字以左右来回移动的方式跑。width调整跑马灯的宽度height调整跑马灯的高度。bgcolor设定跑马灯的背景色。245.2.6加入项目编号或符号【无序标签】 1. 序列标签基本上可分为两种，一种是“无序条列”，一种是“有序条列”。所谓“无序条列”当然就是意指各条列间并无顺序关系，纯粹只是利用条列式方法来呈现资料而已，此种无序标签，在各条列前面均有一符号以示区隔。至于“有序条列”就是指各条列之间是有顺序的，从1、2、3一直延伸下去。 2. 我们先来看看“无序列表标签”如何使用：

28、无序标签 姓名：杰克升 生日：1974/11/21 星座：天蝎座 其中标签即为“无序列表标签”，每增加一列内容，就必须加一个。3. 前面的符号一定是要圆形的吗？不，我们可以加入TYPE=形状名称属性来改变其符号形状，一共有三个选择：DISK（实心圆）、SQUARE（小正方形）、CIRCLE（空心圆）三种（由于本页使用CSS故仅于Netscape看得出效果。）：【有序标签】 1. 接下来，我们来看看“有序列表标签”如何使用： 有序标签 姓名：杰克升 生日：1974/11/21 星座：天蝎座 其中标签即为“有序列表标签”，每增加一列内容，就必须加一个。2. 和无序列表标签一样，我们也可以选择不同的

29、符号来显示顺序，一样是用TYPE属性来作更改，一更有五种符号：1（数字）、A（大写英文字母）、a（小写英文字母）、I（大写罗马字母）、i（小写罗马字母）等五种： 3. 另外，我们亦可指定序列起始的数目，其方法为：5.2.7插入图片在一个网页中，若能适时地插入一些图片、音乐、影像或是将某些文字语句改用图片来表示，不但使得该网页一目了然，而且生动引人。事实上几乎每个正式的网页都有图片。先对图片文件有个大体的了解。一般而方言，我们见的图片格式最多的有.bmp、.gif、.jpeg等。这里.bmp是没有压缩的，所以文件很大，传输较费时，所在很少在网络上使用。（1）GIF：这种格式的图片只有256色，比

30、较适合线条分明的图片。如小图标、按钮等，不适合储存照片或颜色较多的实物图片，另外这种格式可以用来制作简单的动画文件。（2）JPEG：可以储存全彩的图片或者灰度图形，与GIF适用类型正好相反。现在我们来向网页插入图片。语法如下：标记语法：功能：在网页的当前位置显示一张图片。说明：非成对标记。各属性说明如下表。属性说明src设定图片所在位置及文件名align用来调整图片周围的文字与图片之间的对齐方式，常用属性值如下： left：设定图片向左对齐（默认）。 right：设定图片向右对齐。 center：设定图片居中。 bottom：文字会对齐图片的下缘。 top：文字会对齐图片的上缘。 middle

31、：图片垂直居中对齐文字。 absmiddle：图片更精确垂直居中对齐文字。为一组，是为组，两组不能同时使用。border设定图片的外框vspace设定文字、图片与图片上下之间的间隔hspace设定文字、图片与图片左右之间的间隔width调整图片宽度。height调整图片高度。alt当图片不存在或使用者的鼠标指向图片时出现的提示文字。简单插入图片（img src=”url”）加入图片边框（border）图片提示信息（alt）控制图片大小（width/height）设置图片位置（left/center/right）注意：并不能实现图片的居中对齐，这是HTML语法的一个BUG，要实现图片居中对齐，须

32、要用到标记，应该这样做： 或者文字与同一行的图片对齐方式（top/middle/bottom）文字、图片与图片的间隔（vspace/hspace）跑马灯上加入图片（）如何在网上抓取图片5.2.8加入音乐控制组件前面我们学过加入背景音乐的标记，它必须置于标记内，而且它是否播放、播放次数不能由浏览者决定，它只限于midi、wav、asf格式的文件，这些是其缺点。为克服这些缺点，我们可以使用音乐控制组件标记。它可以让浏览者控制音乐的音量、播放次数、停止等。语法如下：语法：功能：设定音乐控制组件。说明：非对成对标记，应放在内。不再像那样受格式限制，也可以用、空格等来设置放置位置。5.2.9为网页加上背

33、景图片5.3表格的制作前面我们讲到了如何调整文字、图片等元素在网页上的显示位置，使用的是align=left/center/right和，但它们的功能是很有限的。要想在网页中使文字、图片等信息更灵活的定位，最好是使用表格。HTML的表格功能表格（Tables）由多个水平行（Rows）和垂直栏（Colunms）组成，表格内的小方框为储存单元（Cells）。当你在设计一张网页的时候，可以在适当的地方插入一个表格，然后将文字、图片等组件放入指定的储存单元中，也可以在同一个储存单元中放入文字、图形等组件。这样做的好处是可以让数据限制在某个范围内显现，使得网页内的信息看起来井然有序。第1栏第2栏第3栏第

34、1行 第2行 储存单元标记上图为23表格的基本结构，此表格对应的HTML语法如下： 1.1 1.2 1.3 2.1 2.2 2.3 语法说明：标记/属性说明标记声明表格的开始，并负责设定整个表格的属性。告知表格结束。标记tr是table row的缩写，用来声明这是表格中水平行的开始。水平行结束。标记内可设置两个属性来控制该行内所有栏位的对齐方式： 水平对齐：align=”left” 、align=”center”、 align=”right” 垂直对齐：valign=”top”、 valign=”middle”、 valign=”bottom”标记td是ta

35、ble data的缩写，用来声明这是储存单元数据的开始，宣告结束。标记th是table header的缩写，用来定义表格字段（栏目）的名称，在标记文字预设为水平和垂直方向上居中对齐且字体加粗。也可在内加入align和valign两个属性来自定义对齐方式，为层次清楚，一般放在内。border属性是标记的属性之一，用来设定表格外框的宽度，属性值为数字，数值越大框线越粗，省略border属性表示表格无外框。练习：利用上述所学的标记，制作一张含有姓名、性别、QQ号码的通讯簿表格。结果如下图。昵称性别QQ号囧囧有神女447543891凤栖梧女157041432愛國者搗蛋男117520955咑尐僦鋌帥男2

36、53346901表格标题一张表格若缺少了标题，常常无法实时知道该表格的意义，因此大部分的表格都会在表格的上面加上标题文字，让人一开始就知道该表格的功用。在HTML中是通过标记来设定表格的标题的，其语法如下：语法：表格标题功能：当表格的标题或批注使用。说明： 此为成对标记，必须置于标记内，最好紧跟在的后面。align属性：设定标题对方方式，有三种取值：left/center/right。valign属性：设定标题位置，可以和align属性连用，有两种取值：top: 将标题置于表格的上方（默认）bottom: 将标题置于表格的下方。美化表格我们可以加上一些属性来美化表格，常用属性见下表：属性适用表

37、格标记功能border表格外框线的粗细，值为0则为取消外框线bordercolor须先设置border=”value”。bordercolorlightbordercoloradrkcellspacing表格内框线粗细，欲取消内框线须先取消外框线background表格背景图片width可先设定table宽度，再依次分配每个th、td宽度，否则HTML会自动分配每列的宽度height可先设定table高度，再依次分配每个th、tr、td高度，否则HTML会自动分配每行的高度align表格本身在网页中的水平对齐方式及单元格内文字水平对齐方式：left/center/rightvalign单元格文

38、字垂直对齐方式：top/middle/bottomcellpadding表格内文字与表格框线之间的距离bgcolor背景色表格中插入图片办法和在表格中加入文字是一样的，只要在之间加入便可以将指定的图片放入到存储单元格内。练习：试试使用border、cellspacing。表格的特殊变化：合并单元格先看一个简单的：单元格纵向跨多行，如下图，怎么做？昵称性别QQ号欲上初寒蝉女315367154安静地走开254234670可口可乐276529865三一男545251565虎哥290007853这就是单元格的跨行或跨列的问题，就须要在或中使用rowspan指定当前单元格跨几行，使用colspan指定当

39、前单元格跨几列(span:范围)，相当于Word中的合并单元格。我们来看源代码。第二个简单的，单元格横向跨多列，如下图：昵称欲上初寒蝉安静地走开可口可乐三一虎哥性别女男QQ号315367154254234670276529865545251565290007853第三个稍微复杂的，表格内既有跨行又有跨列，如下图：规格A牌计算机B牌计算机C牌计算机CPUPentium IV 2.0G迅驰二代 1.7G酷睿双核 2.0G内存选购Kingston 2G硬盘Seagate 60GIMB80G5.4超级链接何谓超级链接（Hyperlink）当你在浏览网页时，移动鼠标到网页的某些文字或图片上，光标马上变成一只小手，就表示该处有个“超级链接”，在该处单击鼠标左键，就可以立刻连接到这个“超级链接”所设定的位置去浏览。这些位置包括：某个网站、某个文件、某人的Email地址等等各式各样的Internet服务。超级链接是网页最吸引人的地方。适当地插入“超级链接”可以让你的网站无限地延伸，充分利用网络上其他资源，来增加网站本身的广度与