图3．6 6.htm文件在浏览器中的显示
从浏览器显示的效果我们可以知道，写在预格式化标志<pre>……</pre>之间的文本将严格按文本原有格式输出。
6．表格的使用
表格实际上也是body的一部分，单独提出来介绍，是因为表格在网页制作中显得尤为重要。我们这里所谓的表格，是广义上的表格。你可以认为这是一个区域，也可以认为是一个拥有边界的常见的表格。
下面这个例子用table元素和其中的thead、tr、th元素建立了一个三行两列的表格。代码如例3．8。
【例3．8】HTML语言的表格
<TABLE BORDER=1 WIDTH=80%> <THEAD> <TR> <TH>Heading 1</TH> <TH>Heading 2</TH> </TR> </THEAD> <TBODY> <TR> <TD>Row 1, Column 1 text.</TD> <TD>Row 1, Column 2 text.</TD> </TR> <TR> <TD>Row 2, Column 1 text.</TD> <TD>Row 2, Column 2 text.</TD> </TR> </TBODY> </TABLE>
|
将上述代码输入输入记事本，存为7.htm文件。启动IE浏览器，打开7.htm文件，显示如图3．7的结果。
图3．7 7.htm文件在浏览器中的显示
这是一段很普通的表格表格代码。我们可以看到其中的主要部分被包含在<table></table>的标签之中。同时，这段代码的主要结构也是由<tr></tr>以及<th></th>和<td></td>组成的。
其中<tr></tr>的作用是定义table中的行，可以粗略地说有几个tr，这个表格中就有几行。我们在上面的代码中看到了一共有三对<tr></tr>，所以这是一个有三行的表格。其中的<th></th>构成了表格头的列（注意这里是表格头的列）。还有就是<td></td>，构成了表格身体的列（注意这里是表格身体的列）。其中两者的区别大家从浏览器的效果中也看到了，默认情况下，<th></th>是表格头，这个元素将其中的文字显示在中间，而且将文字效果变为粗体；而相对应，<td></td>就没有这一效果。但注意，其中的<THEAD></THEAD>与<TBODY></TBODY>则定义了表格中的表格头与表格身体。
7．框架frame的使用
框架frame作为HTML语言的一部分，在网页制作中占据着重要的地位。大家看到很多网页上都好像windows的资源管理器一样，在左边点击相应的链接，而内容显示在右边，这就是框架的效果。
使用frame必须首先用frameset来定义，可以说frameset就是frame的一个“统治者”。在html文档中，可以有frameset元素或者body元素，但是绝对不能同时使用这两种元素。
【例3．9】frameset元素的使用
<html>
<head> <title>frameset元素的使用</title> </head>
<frameset>
<frame>
<frame>
</frameset>
</html> |
当然了，这个html文档在浏览器上什么也显示不出来。只是告诉大家最基本的frameset及frame的使用方法。
下面介绍frameset及frame的一些属性的使用方法。
（1）frameset元素的cols及rows属性
cols及rows的作用是设置frame的宽度及高度。
【例3．10】frameset元素的cols及rows属性
(1) <html>
(2) <head><title>frameset元素中cols及rows属性的使用</title></head>
(3) <frameset cols="20%,200,*">
(4) <frame>
(5) <frameset rows="30%,*">
(6) <frame>
(7) <frame>
(8) </frameset>
(9) <frame>
(10) <frame>
(11) </frameset>
(12) </html> |
|
将上述代码输入输入记事本，存为8.htm文件。启动IE浏览器，打开8.htm文件，显示如图3．8的效果。
图3．8 8.htm文件在浏览器中的显示
说明：
第3行中的语句cols="20%,200,*" 定义了浏览器中frame的“列数”。20%说明最左边的frame占据整个浏览器宽度的百分比，200说明中间的frame占据整个浏览器的宽度是200个像素，*则说明除去左边和中间的frame以外的地方，其余全部留给最右边的frame。
第4、9、10行的frame是<frameset cols="20%,200,*">语句定义后的每个“框架”的各自定义。同样，第6、7行的frame是<frameset rows="30%,*">语句所定义的“框架”的各自定义。
第二个frameset定义在一个frame之内，大家也从浏览器的结果看来了，横向的“框架”只出现在最中间的列向“框架”之中。
可以试图改变浏览器窗口的大小，就可以看出中间的frame的宽度是始终不变的，大小总是200像素。最左边的frame所占的比例总是总宽度的20%，剩下的宽度就留给了最右边的frame，横向frame同理。
（2）frameset元素的border属性
border属性设置frame之间的距离，包括3-D边框。
【例3．10】frameset元素的border属性
(1) <html>
(2) <head><title> frameset元素中border属性的使用</title></head>
(3) <frameset cols="20%,60%,*" border=10 bordercolor=rgb(0,0,255)>
(4) <frame>
(5) <frame>
(6) <frame>
(7) </frameset>
(8) </html> |
将上述代码输入输入记事本，存为9.htm文件。启动IE浏览器，打开9.htm文件，显示如图3．9的效果。
图3．9 9.htm文件在浏览器中的显示
说明：
如图3．9，frame之间的宽度现在为10个像素。如果定义border属性的值为0，则在浏览器中将不会看到边界。bordercolor属性作用是设定边框的颜色，颜色值为标准RGB颜色值。
（3）frame元素的name属性
name属性用于设置frame的名字。
【例3．11】frameset元素的name属性
(1) <html>
(2) <head><title> frame元素中name属性的使用</title></head>
(3) <frameset cols="50%,*">
(4) <frame name="left" src="html语言教程1.htm">
(5) <frame name="right" src="html语言教程2.htm">
(6) </frameset>
(7) </html> |
框架的名称并不会影响到框架内显示的内容，名称的作用是指定相应框架链接的显示内容。
（4）frameset元素的scrolling属性及noresize属性
scrolling:决定frame是否可以使用滚动条。
noresize:决定frame是否可以改变大小。
【例3．12】frameset元素的scrolling属性及noresize属性
(1) <html>
(2) <head><title> frame元素中scrolling属性及noresize属性的使用</title></head>
(3) <frameset cols="30%,40%,*">
(4) <frame name="left" src="1.htm" scrolling=no>
(5) <frame name="center" src="2.htm" noresize=true>
(6) <frame name="right" src="3.htm" scrolling=yes>
(7) </frameset>
(8) </html> |
将上述代码输入输入记事本，存为10.htm文件。启动IE浏览器，打开10.htm文件，显示如图3．10的效果。
