上QQ阅读APP看本书，新人免费读10天
设备和账号都新为新人
第2章 HTML进阶
本章要点
▲表格的基本结构
▲表格属性的具体应用
▲表格的页面布局
▲图片与多媒体元素在页面中的具体应用
2.1 表格标签
表格是常用的页面元素，制作网页经常要借助表格进行排版，在网页布局方面，表格起着举足轻重的作用，通过设置表格以及单元格的属性，对页面中的元素进行准确定位，表格能够有序地排列数据又能对页面进行更加合理的布局。灵活地使用表格的背景、框线等属性可以得到更加美观的效果。
HTML表格是由行和列组成的二维表格，由行和列构成一个个单元格，在其中可以放置文本、图像等相关网页元素。每一列的最上方可以定义列标题，用来突出显示该列的主题，表格也可以定义标题，如图2.1所示，这些都可以通过HTML中具体的标签来实现。
图2.1 表格的形式
在网页中使用表格有如下几个优点：
- 以行列对齐的形式来显示文本和数字信息
- 可以固定文本或图像的显示位置
- 对网页结构的优化，充分利用空间
- 可以嵌套使用，但不利于手工代码的维护
HTML语法中表格用<table>标签表示，一个表格可以分成很多行，用<tr>标签表示，每行又可以分成很多单元格，用<td>标签表示，这3个标签是创建表格最常用的标签。
※ 表格的基本结构：
<table>
<caption>表格标题</caption>
<tr> //定义表行
<th>列标题</th>
</tr>
<tr>
<td>…</td> //定义单元格
</tr>
</table>
<table>标签代表表格的开始，<tr>标签代表行的开始，<td>和</td>之间就是单元格的内容。
注意：表格中的具体内容必须放在<td>与</td>之间。
2.1.1 表格标签<Table>
※ 基本语法：<table>表格内容</table>表格标签常用的属性如表2-1所示
表2-1 <table>标签常用属性
※ 范例代码 2.1.html
<table width="200" border=1 align="center" cellpadding=0 cellspacing=0 bordercolor=#FFFFFF bordercolorlight=#000000 bgcolor=#FF6600>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
<br>
<table cellspacing=2 cellpadding=0 width="200" bgcolor=#FF6600 border=1 align="center">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
<br>
<table width="200" border=1 align="center" bordercolor=#ffffff bordercolorlight=#000000 bgcolor=#FF6600>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table><p><strong></strong></p>
<p> </p>
</td>
</tr>
</table>
※ 代码分析
第一个<table>标签定义表格，属性值为宽度200px，边线1px，居中对齐，单元格与单元格之间的间距是0px，单元格边框与单元格内容之间的间距是0px，边框颜色为白色，表格的亮边框颜色为黑色，背景色值为#FF6600。第二个<table>标签定义单元格与单元格之间的间距是2px，单元格边框与单元格内容之间的间距是0px，宽度200px，边线1px，居中对齐，背景色值为#FF6600。第三个<table>标签与前两个相似，这里不再赘述。
※ 范例效果图
范例效果如图2.2所示。
图2.2 表格属性的应用
2.1.2 表格的行<Tr>
※ 基本语法：<tr>行内容</tr>
<tr>标记属性的使用方法与<table> 标记属性非常相似，用来设定表格中某一行的属性。行标签常用的属性如表2-2所示。
表2-2 <tr>标签常用属性
※ 范例代码 2.2.html
<table width="100%" height="189" border="1" cellpadding="0" cellspacing="0" class="bian1">
<tr bordercolor="#CCCCCC" bgcolor="#FF9900" class="text2">
<td height="30"><div align="center">类别</div></td>
<td><div align="center">旅游线路</div></td>
<td><div align="center">出团日期</div></td>
<td><div align="center">报价</div></td>
<td><div align="center">备注</div></td>
</tr>
<tr bordercolor="#CCCCCC" class="text2">
<td height="34"><div align="center">海南旅游</div></td>
<td><div align="center">海南四星贵宾纯玩游(二)****</div></td>
<td><div align="center">每周三五六发/团队另议</div></td>
<td><div align="center">2480元/人</div></td>
<td><div align="center"><a href="#">详情</a></div></td>
</tr>
<tr bordercolor="#CCCCCC" class="text2">
<td height="46"><div align="center">四川线路</div></td>
<td><div align="center">成都/九寨沟/黄龙双飞五日***</div></td>
<td><div align="center">每周三六发团/团队另议</div></td>
<td><div align="center">2080元/人</div></td>
<td><div align="center"><a href="#">详情</a></div></td>
</tr>
<tr bordercolor="#CCCCCC" class="text2">
<td height="43"><div align="center">黄山旅游</div></td>
<td><div align="center">黄山一地双卧四日游**</div></td>
<td><div align="center">每周三六发团/团队另议</div></td>
<td><div align="center">1090元/人</div></td>
<td><div align="center"><a href="#">详情</a></div></td>
</tr>
<tr bordercolor="#CCCCCC" class="text2">
<td><div align="center">武夷山旅游</div></td>
<td><div align="center">厦门/武夷山双飞五日游**</div></td>
<td><div align="center">天天发团/团队另议</div></td>
<td><div align="center">2110元/人</div></td>
<td><div align="center"><a href="#">详情</a></div></td>
</tr>
</table>
※ 代码分析
<tr>标签的class属性表示定义行的CSS样式，此部分在后面章节中讲解。
※ 范例效果图
范例效果如图2.3所示。
图2.3 <tr>标签的应用
2.1.3 表格的单元格<Td>
※ 基本语法：<td>单元格内容</td>
<td>标签属性的使用方法与<table> 标记属性非常相似，用来设定表格中某一单元格的属性。
行标签常用的属性如表2-3所示。
表2-3 <td>标签常用属性
※ 范例代码 2.3.html
<table width="300" border="1" cellpadding="1" cellspacing="1" bordercolor="#FF6600"> <tr> <td colspan="2" bgcolor="#FF6600"> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td rowspan="2" bgcolor="#CCCCCC"> </td> </tr> <tr> <td> </td> <td> </td> </tr> </table>
※ 代码分析
第一个<tr>标签中包含两个<td>标签对，第一个<td>标签对表示将一行中的两个单元格合并成一个单元格，单元格背景色为#FF6600。第二个<tr>标签中包含3个<td>标签，其中第三个<td>标签表示将两行中的单元格合并成一个单元格，背景色为#CCCCCC。
※ 范例效果图
范例效果如图2.4所示。
图2.4 <td>标签的应用
2.1.4 表格列标题<Th>
※ 基本语法：<th>列标题内容</td>
列标题用粗体样式标记，另外内容的对齐方式也可能和数据的对齐方式不同。数据通常会默认左对齐，列标题默认居中对齐。列标题标签常用的属性如表2-4所示。
表2-4 <th>标签常用属性
※ 范例代码 2.4.html
<table width="350" border="1" cellspacing="0" cellpadding="2" align="CENTER"> <tr align="CENTER"> <th bgcolor="#FF6600">姓名</span></th> <th bgcolor="#FF6600">性别</span></th> <th bgcolor="#FF6600">年龄</span></th> </tr> <tr align="CENTER"> <td><span class="STYLE3">王晓华</span></span></td> <td><span class="STYLE3">女</span></span></td> <td><span class="STYLE3">20</span></span></td> </tr> <tr align="CENTER"> <td><span class="STYLE3">周扬</span></td><td><span class="STYLE3">女</span></td> <td><span class="STYLE3">21</span></td></tr> <tr align="CENTER"> <td><span class="STYLE3">张强</span></td><td><span class="STYLE3">男</span></td> <td><span class="STYLE3">20</span></td></tr> </table>
※ 范例效果图
范例效果如图2.5所示。
图2.5 <th>标签的应用
2.1.5 表格标题<caption>
※ 基本语法：<caption>表格标题内容</caption>
标题是表格的说明性文字，出现在表格上方，通常在<table>标签后立即加入<caption>标签及其内容，标题可以包括任何主体内容。表格标题标签常用的属性如表2-5所示。
表2-5 <caption>标签常用属性
※ 范例代码 2.5.html
<table width="350" border="1" cellspacing="0" cellpadding="2" align="CENTER"> <caption>学生情况表</caption> <tr align="CENTER"> <th bgcolor="#FF6600">姓名</span></th> <th bgcolor="#FF6600">性别</span></th> <th bgcolor="#FF6600">年龄</span></th> </tr> <tr align="CENTER"> <td><span class="STYLE3">王晓华</span></span></td> <td><span class="STYLE3">女</span></span></td> <td><span class="STYLE3">20</span></span></td> </tr> <tr align="CENTER"> <td><span class="STYLE3">周扬</span></td> <td><span class="STYLE3">女</span></td> <td><span class="STYLE3">21</span></td> </tr> <tr align="CENTER"> <td><span class="STYLE3">张强</span></td> <td><span class="STYLE3">男</span></td> <td><span class="STYLE3">20</span></td> </tr> </table>
※ 范例效果图
范例效果如图2.6所示。
图2.6 <caption>标签的应用
2.2 图像标签<IMG>
在HTML语言中，可以在页面中嵌入图片、声音、视频、Flash动画等多媒体内容，这些多媒体内容极大地丰富了页面的表现力，给浏览者带来了阅读上的享受和对网站的强烈印象。
在HTML页面中插入图片，可以起到美化页面的作用。网页常用的图片格式有JPEG、GIF和PNG这三种，插入图片的标签只有一个，那就是<img>标签。
※ 基本语法：<img src=" file_url">具体属性说明如表2-6所示。
表2-6 <img>的属性
※ 范例代码 2.6.html
… <body leftmargin="70"> <p><img src="Figure-00/7-01.gif" width="230" height="48"><img src="image/7-2.gif" width="207" height="48"> </p> <p class="text3">申办护照</p> <p class="text3">1.北京市居民申请护照<br> …
※ 范例效果图
范例效果如图2.7所示。
图2.7 <img>标签的应用
※ 范例代码 2.7.html
<img src="YS.jpg" width="192" height="183" hspace="10" vspace="10" border="3" align="left" />虽皓月当空，祥云瑞彩依旧遮住了游子北望的眼睛。<br /> <img src="YSB.jpg" width="132" height="100" hspace="5" vspace="5" border="3" align="right" />能捎带上我那缕乡魂吗？一同回到梦里的山村？<br />
※ 代码分析
页面中插入和页面在同一路径下的图片"YS.jpg"，宽度为192px，高度为183px，水平间距和垂直间距都是10px，边框为3px，对齐方式为左对齐。插入第二张和页面在同一路径下的图片"YSB.jpg"，宽度为132px，高度为100px，水平间距和垂直间距都是5px，边框为3px，对齐方式为右对齐。
※ 范例效果图
范例效果如图2.8所示。
图2.8 <img>标签的属性应用
注意1：src属性是<img>标签必需的。
注意2：为了保证下载速度，图片并不是越多越好。
注意3：<img>没有结束标签。
2.3 多媒体
在网页中可以放置如MP3音乐、电影、动画等多种格式的多媒体内容，丰富了网页的效果。需要使用的相关标签如表2-7所示。
表2-7 多媒体标签
2.3.1 多媒体标签<embed>
※ 基本语法：
<embed src="file_url" width="value" height="value" hidden="heidden_value" autostart="auto_value" loop="loop_value"></embed>
具体属性说明如表2-8所示。
表2-8 <embed>的属性
1.嵌入FLASH动画
例：<embed src="flash.swf" width="450" height="600"></embed>
2.嵌入MP3音乐
<embed src="song.mp3" width="450" height="600"></embed>
3.嵌入MPG电影
<embed src="dianying.mpg" width="450" height="600"></embed>
4.嵌入AVI视频
<embed src="shipin.avi" width="450" height="600"></embed>
※ 范例代码 2.8.html
<embed src="jthintroduce/zzjj.swf" width=280 height=282 quality=high wmode=transparent bgcolor=#000000 type="application/x-shockwaveflash" pluginspage="http://www.macromedia.com/shockwave/download/inde x.cgi?P1_Prod_Version=ShockwaveFlash"> </embed> <embed src="jthintroduce/resume.swf" quality=high wmode=transparent bgcolor=#000000 width=150 height=43 type="application/x- shockwaveflash" pluginspage="http://www.macromedia.com/shockwave/download/inde x.cgi?P1_Prod_Version=ShockwaveFlash"> </embed>
※ 代码分析
swf格式是Flash生成的动画文件，src表示文件的来源，quality表示定义品质为高品质，wmode属性值为transparent，表示Flash的背景颜色为透明。
※ 范例效果图
范例效果如图2.9所示。
图2.9 多媒体标签的应用
2.3.2 背景声音<bgsound>
页面中的背景音乐的效果可通过<bgsound>标签实现。网页中常用的声音格式包括WAV、MP3、MIDI、AIF和RM格式，其中主要以MIDI格式文件为主。
※ 基本语法：<bgsound src="value" loop="value">
其属性如表2-9所示。
表2-9 <bgsound>的属性
例：<bgsound src="okok.mid" loop="-1">
※ 范例代码 2.9.html
<body> <bgsound src="sound/Ed5gm010.mid">
※ 范例效果图
范例效果如图2.10所示。
图2.10 背景声音
注意：src属性是<img>、<embed>、<bgsound>标签必需的。
2.3.3 插入Java小程序
Java语言可以编写两种类型的程序，分别是应用程序(Application)和小应用程序Applet)。其中应用程序是可以独立运行的程序，Java Applet是用Java编写的嵌入到页面并能产生特殊效果的小程序。通过使用Java Applet小程序可以在网页中实现一些文字、图片、动画等的显示特效，也可以完成人机交互的功能。
浏览器要执行Applet程序，必须内嵌有Java解释器。当浏览器访问使用了Java Applet的网页时，Java Applet会被下载到浏览器的客户机内存中，Java解释器将对其进行解释执行。如果浏览器中没有内嵌的Java解释器，Java Applet将不被执行，其运行效果也不会被看到。Applet需要使用HTML语法的<applet>标签，在网页中引入该组件。
※ 基本语法：<applet code="file_name">
其属性如表2-10所示。
表2-10 <applet>的属性
※ 范例代码 2.10.html
<html>
<head>
<title>Java Applet标签</title>
<head>
<body bgcolor="red">
<center>
<b>
<font size="+3" color="orange">Java Applet小程序的应用 </font>
</b>
<applet code="Hello.class" heitht=200 width=300>
<param name=varname value="李莉">
<param num=varnum value=24>
</applet>
</center>
</body>
<html>
Hello.java
import java.applet.Applet;
import java.awt.Graphics;
public class hello extends Applet
{
private String name;
private int num;
public void init()
{
name=getParameter("varname");
num=integer.parseInt(getParameter("varnum"));
}
public void paint(Graphics g)
{
g.drawString("欢迎"+name+"来到Java世界,你今年"+num+"岁了!",10,20);
}
}
2.4 页面实例——表格、图片与Flash动画的综合应用
※ 范例代码 2.11.html
<html> <head> <title>表格标志的综合示例</title> </head> <body> <table border="1" width="80%" bgcolor="#E8E8E8" cellpadding="2" bordercolor="#0000FF" bordercolorlight="#7D7DFF" bordercolordark="#0000A0"> <tr> <th width="33%" colspan="2" valign="bottom">意大利</th> <th width="36%" colspan="2" valign="bottom">英格兰</th> <th width="36%" colspan="2" valign="bottom">西班牙</th> </tr> <tr> <td width="16%" align="center">AC米兰</td> <td width="16%" align="center">佛罗伦萨</td> <td width="17%" align="center">曼联</td> <td width="17%" align="center">纽卡斯尔</td> <td width="17%" align="center">巴塞罗那</td> <td width="17%" align="center">皇家社会</td> </tr> <tr> <td width="16%" align="center">尤文图斯</td> <td width="16%" align="center">桑普多利亚</td> <td width="17%" align="center">利物浦</td> <td width="17%" align="center">阿森纳</td> <td width="17%" align="center">皇家马德里</td> <td width="17%" align="center">……</td> </tr> <tr> <td width="16%" align="center">拉齐奥</td> <td width="16%" align="center">国际米兰</td> <td width="17%" align="center">切尔西</td> <td width="17%" align="center">米德尔斯堡</td> <td width="17%" align="center">马德里竞技</td> <td width="17%" align="center">……</td> </tr> </table> </body> </html>
※ 范例效果图
范例效果如图2.11所示。
图2.11 表格应用
※ 范例代码 2.12.html
<body topmargin="0">
<div id="Layer3" style="position:absolute; width:0; height:0; z-index:2; left: 120;">
<div id="Layer4" style="position:absolute; width:770; height:145; z-index:1; left: 0;"></div>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/ swflash.cab#version=6,0,29,0" width="770" height="145">
<param name="movie" value="image/banner2.swf">
<param name="quality" value="high">
<param name="wmode" value="transparent">
<embed src="image/banner2.swf" width="770" height="145" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent"></embed></object>
</div>
<div align="center">
<table width="770" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="567" height="145" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="567" height="145" valign="top" background="image/lian_r1_c1.jpg"><div id="Layer1" style="position:absolute; width:0; height:0; z-index:1;">
<div id="Layer2" style="position:absolute; width:567; height:145; z-index:1;">
<div align="center">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/ cabs/flash/swflash.cab#version=6,0,29,0" width="567" height="145">
<param name="movie" value="image/banner11.swf"><param name="quality" value="high">
<param name="wmode" value="transparent">
<embed src="image/banner11.swf" width="567" height="145" quality="high" pluginspage="http://www.macromedia.com/go/ getflashplayer" type="application/x-shockwave-flash" wmode="transparent"></embed></object>
</div>
</div>
</div></td>
</tr>
</table></td>
<td colspan="6" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="203" height="145" valign="top"><img src="image/lian_r1_c2.jpg" width="203" height="145"></td>
</tr>
</table></td>
</tr>
<tr>
<td rowspan="2" valign="top" background="image/car_1_r2_ c1.jpg"><div id="Layer5" style="position:absolute; width:0; height:0; z-index:3">
<div id="Layer6" style="position:absolute; width:428px; height:218px; z-index:1; left: 99px; top: 56px;">
<table width="99%" height="198" border="2" cellpadding="0" cellspacing="2" bordercolor="#000099">
<tr>
<td width="22%" height="50"> </td>
<td width="27%" align="center" class="5">日本五十铃<br>
(430马力40尺) </td>
<td width="26%" align="center" class="5">斯太尔王<br>
(310马力40尺) </td>
<td width="25%" align="center" class="5">解放<br>
(280马力40尺) </td>
</tr>
<tr>
<td height="34" align="center" class="text">载重量(T)</td>
<td align="center" class="5">40</td>
<td align="center" class="5">30</td>
<td align="center" class="5">25</td>
</tr>
<tr>
<td height="32" align="center" class="text">车长度(m)</td>
<td align="center" class="5">12.5</td>
<td align="center" class="5">12.5</td>
<td align="center" class="5">12.5</td>
</tr>
<tr>
<td height="32" align="center" class="5">车宽度(m)</td>
<td align="center" class="5">2.4</td>
<td align="center" class="5">2.4</td>
<td align="center" class="5">2.4</td>
</tr>
<tr>
<td height="34" align="center" class="5">载货限高(m)</td>
<td align="center" class="5">2.7</td>
<td align="center" class="5">2.7</td>
<td align="center" class="5">2.7</td>
</tr>
</table>
</div>
</div>
<div id="Layer7" style="position:absolute; width:0; height:0; z-index:4">
<div id="Layer8" style="position:absolute; width:770; height:127; z-index:1; left: 2px; top: 272px;">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="770" height="127">
<param name="movie" value="image/car.swf">
<param name="quality" value="high">
<param name="wmode" value="transparent">
<embed src="image/car.swf" width="770" height="127" quality="high" pluginspage="http://www.macromedia.com/go/ getflashplayer" type="application/x-shockwave-flash" wmode="transparent"></embed></object>
</div>
</div></td>
<td width="35" height="174" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="35" height="174" valign="top"><a href="about%20us.htm"><img src="image/lian_r2_c2.jpg" width="35" height="174" border="0"></a></td>
</tr>
</table></td>
<td width="36" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="36" height="174" valign="top"><a href="car. htm"><img src="image/lian_r2_c3.jpg" width="36" height="174" border="0"></a></td>
</tr>
</table></td>
<td width="32" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="32" height="174" valign="top"><a href="join. htm"><img src="image/lian_r2_c4.jpg" width="32" height="174" border="0"></a></td>
</tr>
</table></td>
<td width="35" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="35" height="174" valign="top"><a href="he. htm"><img src="image/lian_r2_c5.jpg" width="35" height="174" border="0"></a></td>
</tr>
</table></td>
<td width="34" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="34" height="174" valign="top"><a href="lian.htm"><img src="image/lian_r2_c6.jpg" width="34" height="174" border="0"></a></td>
</tr>
</table></td>
<td width="31" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="31" height="174" valign="top"><a href="index.htm"><img src="image/lian_r2_c7.jpg" width="31" height="174" border="0"></a></td>
</tr>
</table></td>
</tr>
<tr>
<td height="225" colspan="6" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="203" height="225" background="image/car_1_ r3_c2.jpg"> </td>
</tr>
</table></td>
</tr>
<tr>
<td height="78" colspan="7" valign="top"><img src="image/ 78_r2_c1.jpg" width="770" height="77"></td>
</tr>
</table>
</div>
</body>
※ 范例效果图
范例效果如图2.12所示。
图2.12 表格、图片、动画的综合应用
2.5 上机练习
1.运用所学的表格标签，设计如图2.13所示页面。
图2.13 表格应用
2.用HTML语言设计一张借书登记表，内容包括序号、书名、借书人、借书日期和备注。要求表格中的借书信息不得少于5项。
3.对上题中的表格指定表格的背景色。要求表头行部分的背景色为蓝色，表格主体部分的背景色为绿色。
4.设计如图2.14所示页面。
图2.14 图片应用