《网页设计与制作》程序代码
――武汉大学出版社
【例2-1】强制换行标记的使用。
<html>
<head>
<title>强制换行标记的使用</title>
</head>
<body>
<h2 align=center>计算机课程
</h2>程序设计<br>组成原理<br>网页制作<br>操作系统<br>
</body>
</html>
【例2-2】强制换段标记的使用。
<html>
<head>
<title>强制换段标记的使用</title>
</head>
<body>
<p>南登杜陵上，</p>
<p>北望五陵间。</p>
<p>秋水明落日，</p>
<p>流光灭远山。</p>
</body>
</html>
【例2-3】文字的对齐应用。
<html>
<head>
<title>文字的对齐<／title>
<／head>
<body>
<p align=left>左对齐
<p align=center>居中
<p align=right>右对齐
<／body>
<／html>
【例2-4】字体标记的使用。
<html>
<head>
<title>字体标记<Font>的使用</title>
</head>
<body>
文字大小的设置：<br>
<font size="6">这是size=6时的字体</font><br>
<font size="2">这是size=2时的字体</font><br><br>
文字颜色的设置：<br>
<font color="black">这是黑色字体</font><br><br>
文字字体的设置：<br>
<font face="楷体_GB2312">字体设置（楷体）</font><br>
<font face="宋体">字体设置（宋体）</font><br>
<font face="黑体">字体设置（黑体）</font><br><br>
文字字体、大小、颜色同时使用：<br>
<font size="5" color="red" face="隶书">这是size=5,颜色为红色的隶书体文字</font>
</body>
</html>
【例2-5】其他字体标记的使用。
<html>
<head>
<title>其他字体标记</title>
</head>
<body>
<b>粗体字</b><br><br>
<i>斜体字</i><br><br>
<u>加下划线</u><br><br>
<small>小型字体</small><br><br>
<big>大型字体</big>
</body>
</html>
【例2-6】背景颜色设置。
<html>
<head>
<title>网页背景色的设置</title>
</head>
<body bgcolor="#CCCCCC">
这是bgcolor="#CCCCCC"时的网页背景色
</body>
</html>
【例2-7】创建不同的有序列表。
<html>
<head>
<title>有序列表示例</title>
</head>
<body>
用大写罗马字母表示的有序列表：
<ol type="I">
<li>列表项1<li>列表项2<li>列表项3
</ol>
编号不连续的有序列表
<ol><li>列表项1<li> 列表项2<li value="5">列表项3</ol>
变换了数字样式的有序列表
<ol><li>列表项1<li>列表项2<li type="A">列表项3</ol>
</body>
</html>
【例2-8】嵌套的有序列表。
<html>
<head>
<title>嵌套的有序列表</title>
</head>
<body>
<h2>嵌套的有序列表</h2>
<ol type="A">
<li>列表项1
<ol><li>子列表项 1
<li>子列表项 2
<li>子列表项 3
</ol>
<li>列表项 2
<li>列表项 3
</ol>
</body>
</html>
【例2-9】无序列表的使用。
<html>
<head>
<title>无序列表示例</title>
</head>
<body>
默认的无序列表标记：
<ul>
<li>默认列表项标记一
<li>默认列表项标记二
<li>默认列表项标记三
</ul>
使用方块作为无序列表项标记：
<li type="square">
<li>方块列表项标记一
<li>方块列表项标记二
<li>方块列表项标记三
</ul>
</body>
</html>
【例2-10】定义型列表标记的使用。
<html>
<head>
<title>定义型列表示例</title>
</head>
<body>
定义型列表标记：
<dl>
<dt>软件说明
<dd>简单介绍软件的功能及基本应用
<dt>软件界面
<dd>用于选择软件外观
</dl>
</body>
</html>
【例2-11】图像标记符的使用。
<html>
<head>
<title>图像标记符</title>
</head>
<body>
<p>显示在D盘下photo文件夹中名为flower.jpg的图片</p>
<img src="file:///D：/photo/flower.jpg" width="210" height="180"align="left">
</body>
</html>
【例2-12】创建表格的实例。
<html>
<head>
<title>简单表格示例</title>
</head>
<body>
<table border="1"><caption align="top">课程表</caption>
<tr>
<td>&nbsp;</td>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
</tr>
<tr>
<th>上午</th>
<td>数学</td>
<td>语文</td>
<td>英语</td>
<td>物理</td>
<td>哲学</td>
</tr>
<tr>
<th>下午</th>
<td>英语</td>
<td></td>
<td>化学</td>
<td>计算机</td>
<td>体育</td>
</tr>
</table>
</body>
</html>
【例2-13】制作不规则表格。
<html>
<head>
<title>合并单元格示例</title>
</head>
<body>
<table border>
<caption align="top"><font face="黑体" size="4">学生成绩表</font>
</caption>
<tr>
<th rowspan="2">学号</th>
<th colspan="3">个人信息</th>
<th colspan="2">期末成绩</th>
</tr>
<tr>
<td>姓名</td>
<td>班级</td>
<td>入学时间</td>
<td>数学</td>
<td>语文</td>
</tr>
<tr>
<td>0008</td>
<td>郭靖</td>
<td>一年级二班</td>
<td>2006年9月</td>
<td>29</td>
<td>80</td>
</tr>
<tr>
<td>0009</td>
<td>黄蓉</td>
<td>五年级一班</td>
<td>2006年9月</td>
<td>100</td>
<td>80</td>
</tr>
</table>
</body>
</html>
【例2-14】本例显示了如何影响表格宽度及单元格内和单元格间的空白。
<html>
<head>
<title>表格尺寸设置</title>
</head>
<body>
<table width="400" border="2" height="50">
<caption align="top">表格1</caption>
<tr>
<td>此表格宽为400像素，边框宽为2像素，高50像素</td>
</tr>
</table>
<p>
<table width="400" border="1" cellspacing="10">
<caption align="top">表格2</caption>
<tr>
<td>中国</td><td>韩国</td><td>朝鲜</td>
</tr>
<tr>
<td>印度</td><td>新加坡</td><td>马来西亚</td>
</tr>
<tr>
<td>缅甸</td><td>越南</td><td>菲律宾</td>
</tr>
</table>
</p>
<table width="400" border="1" cellpadding="10">
<caption align="top">表格3</caption>
<tr>
<td>中国</td> <td>韩国</td><td>朝鲜</td>
</tr>
<tr>
<td>印度</td><td>新加坡</td><td>马来西亚</td>
</tr>
<tr>
<td>缅甸</td><td>越南</td><td>菲律宾</td>
</tr>
</table>
</body>
</html>
【例2-15】用HTML代码实现表格设置边框和分隔线时的显示效果。
<html>
<head>
<title>表格分隔线示例</title>
</head>
<body>
<table border="4" frame="hsides" rules="rows">
<!--边框宽度为4像素，仅显示在上下边框和横向分隔线-->
<caption align="top">我的行程表</caption>
<tr>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
<tr>
<td>北京</td>
<td>北京</td>
<td>黑龙江</td>
<td>黑龙江</td>
<td>吉林</td>
</tr>
<tr>
<td>吉林</td>
<td>吉林</td>
<td>广东</td>
<td>广东</td>
<td>广东</td>
</tr>
<tr>
<td>内蒙古</td>
<td>内蒙古</td>
<td>内蒙古</td>
<td>江苏</td>
<td>江苏</td>
</tr>
</table>
</body>
</html>
【例2-16】用HTML代码实现单元格内容的水平对齐。
<html>
<head>
<title>表格数据的水平对齐</title>
</head>
<body>
<table border>
<caption><h2>表格数据的水平对齐</h2></caption>
<tr align="right">
<td>本行数据右对齐</td>
<td>右</td>
<td>右</td>
</tr>
<tr align="center">
<td>居中</td>
<td>本行数据为居中对齐</td>
<td>居中</td>
</tr>
<tr>
<td>左</td>
<td>左</td>
<td>本行数据为默认左对齐</td>
</tr>
</table>
</body>
</html>
【例2-17】用HTML代码实现单元格内容垂直对齐的效果。
<html>
<head>
<title>表格数据的垂直对齐</title>
</head>
<body>
<table border align="center"><caption><h2>表格数据的垂直对齐</h2></caption>
<tr valign="top">
<td><img src="dz.jpg"></td>
<td>上海大众</td>
<td>valign=top</td>
</tr>
<tr>
<td><img src="bc.jpg"></td>
<td>德国奔驰</td>
<td>valign的默认值</td>
</tr>
<tr valign="bottom">
<td><img src="bm.jpg"></td>
<td>德国宝马</td>
<td>valign=bottom</td>
</tr>
</table>
</body>
</html>
【例2-18】用HTML代码将页面划分为四个部分。
<html>
<head>
<title>设置单元格大小</title>
</head>
<body>
<table border="1" align="center">
<tr>
<td width="400" height="80" colspan="3" align="center">为了显示效果，为表格添加了边框</td>
</tr>
<tr>
<td width="100" height="200">&nbsp;</td>
<td width="200" height="200">&nbsp;</td>
<td width="100" height="200">&nbsp;</td>
</tr>
</table>
</body>
</html>
【例2-19】以下HTML代码显示了设置表格和单元格背景的效果。
<html>
<head>
<title>设置表格和单元格的背景</title>
</head>
<body>
<table border="1" align="center" background="0015.gif">
<tr>
<td width="400" height="80" colspan="3" align="center">表格和单元格背景设置</td>
</tr>
<tr>
<td bgcolor="#999999" width="100" height="200">单元格背景色</td>
<td width="200" height="200">&nbsp;</td>
<td background="0006.gif" width="100" height="200">单元格背景图案</td>
</tr>
</table>
</body>
</html>
【例2-20】框架集网页示例。
<html>
<head>
<title>框架集网页示例</title>
</head>
<frameset cols="150,*">
<frame>
<frame>
</frameset>
</html>
【例2-21】以下框架集将窗口在垂直方向上分为3个框架，上下两个框架分别为80像素高，中间的框架占窗口的剩余部分。
<html>
<head>
<title>水平方向框架</title>
</head>
<frameset rows="80，*，80">
<frame>
<frame>
<frame>
</frameset>
</html>
【例2-22】以下框架集将窗口在水平方向上分为3个框架，中间的框架为250像素，左边的框架占剩余空间的1/4，右边的框架占剩余空间的3/4。
<html>
<head>
<title>垂直方向框架</title>
</head>
<frameset cols="*，250，3*">
<frame>
<frame>
<frame>
</frameset>
</html>
【例2-23】框架嵌套示例。需要先将窗口垂直分成20％、80％两个区域，然后将右边的区域再横向分成分别占40％和60％的两个区域。
<html>
<head>
<title>框架的嵌套<／title>
</head>
<frameset cols="20％，80％"><!--分为左、右两个区域，-- >
<frame name="left"><!--定义左侧框架left-->
<frameset rows="40％，60％"><!--右侧区域划分成上、下两个区域-->
<frame name="right_up"><!--定义右侧上边框架right_up-->
<frame name="right_down"><!--定义右侧下边框架right_down-->
</frameset>
<noframes>
<body>对不起，您的浏览器不支持框架!</body>
</noframes>
</frameset>
</html>
说明：【例2-23】中用到了<noframes>标记符，该标记符中的内容是在浏览器不支持框架时显示的，由于目前大多数浏览器都支持框架，所以通常可以不使用该标记符。
【例2-24】用HTML代码为框架设置初始页面。
以下是框架集文档的内容:
<html>
<head>
<title>框架的初始化</title>
</head>
<frameset rows="30%,*">
<frame src="up.html">
<frameset cols="100,*">
<frame src="left.html">
<frame src="right.html">
</frameset>
</frameset>
</html>
以下是框架集所在目录下up.html文件的内容:
<html>
<head>
<title>姚明</title>
</head>
<body>
<h2 align="center">姚明</h2>
</body>
</html>
以下是框架集所在目录下left.html文件的内容:
<html>
<head>
<title>图片链接</title>
</head>
<body>
<h3 align="center"><a href="#">图片一</a></h3>
<h3 align="center"><a href="#">图片二</a></h3>
</body>
</html>
以下是框架集所在目录下right.html文件的内容:
<html>
<head>
<title>简介</title>
</head>
<body>
姚明简介:<br>中国男篮主力中锋。在美国当地时间2002年6月26日的选秀大会上，休斯顿火箭队顺利挑到了中国的中锋姚明,他也成为联盟历史上第一个在首轮第一位被选中的外国球员。连续两个赛季入选NBA全明星阵容。
</body>
</html>
【例2-25】框架与框架中文本的间距设置。将【例2-24】所示实例的框架集文件更改为如下（其他文件保持不变）：
<html>
<head>
<title>框架的初始化</title>
</head>
<frameset rows="30%,*">
<frame src="up.html">
<frameset cols="100,*">
<frame src="left.html" marginheight="50">
<frame src="right.html" marginwidth="50" marginheight="50">
</frameset>
</frameset>
</html>
【例2-26】超链接示例。
<html>
<head>
<title>超链接<／title>
</head>
<body>
<!绝对url>
<a href="http：／／www.baidu.com">百度搜索<／a><br>
<!相对url>
<a href="fenhang.htm">分行表示</a><br>
</body>
</html>