作业一
课本 P190 页实验 1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格实验</title>
<style>
table{
border: 8px double #0000ff;
}
td{
border: 1px solid black;
text-align: center;
}
</style>
</head>
<body>
<table width=300 border="1" align=center>
<tr>
<td>1</td>
<td rowspan="2">2</td>
<td>
<table style="text-align: center;width: 80%;border: 1px;background-color: #ffffee;">
<tr>
<td>a</td>
<td rowspan="2">b</td>
<td>c</td>
</tr>
<tr>
<td>d</td>
<td>f</td>
</tr>
<tr>
<td>g</td>
<td>h</td>
<td>i</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table style="text-align: center;width: 80%;border: 1px;background-color: #fefefe;">
<tr>
<td>a</td>
<td colspan="2">b</td>
</tr>
<tr>
<td>d</td>
<td>e</td>
<td>f</td>
</tr>
<tr>
<td>g</td>
<td>h</td>
<td>i</td>
</tr>
</table>
</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</body>
</html>
作业二
课本 P190 页实验 2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CASIO</title>
<style>
.table {
margin-top: 5px;
width: 600px;
border: 2px solid black;
text-align: center;
margin-left: 8px;
border-spacing: 50px 50px;
}
.table2 {
border: 2px solid black;
margin-left: 8px;
margin-top: -15px;
width: 600px;
background-color: white;
}
td {
border: 2px solid black;
width: 50px;
height: 50px;
}
.div {
width: 620px;
height: 650px;
background-color: gray;
}
</style>
</head>
<body>
<div class="div">
<p>
<img src="img/casio.png" />
</p>
<table class="table2">
<tr>
<td colspan="4" style="border: hidden;height: 80px;"></td>
</tr>
</table>
<table class="table">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>+</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
<td>-</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
<td>*</td>
</tr>
<tr>
<td>0</td>
<td>=</td>
<td>CE</td>
<td>/</td>
</tr>
</table>
</div>
</body>
</html>作业三
设计新书推荐页面，效果如下所示。要求：
1） 页面标题：新书推荐
2） table 标记属性定义：边框 1px,边框颜色#f0f0f0，单元格间距 0px
3） 图像 img 标记样式：宽度 150px,高度 200px
4） 书名均采用 4 号标题字，其他文字样式为默认，书图像文件分别为：image61.jpg---
image64.jpg
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>新书推荐</title>
<style>
table{
border-collapse: collapse;
}
table,td,tr{
border: 1px solid #f0f0f0;
}
img{
width:150px;
height:200px;
}
</style>
</head>
<body>
<table>
<tr>
<td colspan="4"><h3>总编推荐</h3></td>
</tr>
<tr>
<td><img src="img/图片1.jpg"></td>
<td>
<h4>数学的世界 I</h4>
<p>作者: J.R. 纽曼 编， 王善平, 李璐 译 定价: 59.00 元 推荐理由: 呈现在大家面前的是由 J.R.
纽曼花费十五年心血，所精选的迄今为止世界上最天才的数学文献集锦。 高 ...</p>
</td>
<td><img src="img/图片2.webp"</td>
<td>
<h4>现代教育技术</h4>
<p>作者: 傅钢善 定价: 39.80 元 推荐理由: 本教材结构新颖，逻辑清晰，图文并茂，内容丰富，
易教易学，知行合一。</p>
</td>
</tr>
<tr>
<td><img src="img/图片3.jpg"></td>
<td>
<h4>《生态智慧——生态可持续性》</h4>
<p>作者: 伍业钢 定价: 29.00 推荐理由:传统的经济学认为，经济的投入和产出可以简化为“资
本+劳动”的投入等于经济增长，而忽略了对劳动者的人文关怀（以人为本）。</p>
</td>
<td><img src="img/tp4.png"></td>
<td>
<h4>中国工程院院士（11）</h4>
<p>作者: 中国工程院、高等教育出版社、中国工程物理研究院 定价: 500.00 推荐理由:中国工
程院院士是国家在工程技术方面设立的最高学术称号，为终身荣誉。为了展现中国工程院院
士的风采、宣传科学家积极投身 ...</p>
</td>
</tr>
</table>
</body>
</html>
作业四
课本 P209 页实验1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录页面</title>
<style type="text/css">
fieldset {
width: 300px;
height: 130px;
border: 2px solid black
}
</style>
</head>
<body>
<form>
<fieldset>
<legend align="left">登录页面</legend>
用户名：<input type="text" size="20"><br>
密 码：<input type="text" size="20"><br>
类 型：
<input type="radio" />管理员
<input type="radio" />普通用户<br>
<input type="checkbox">记住密码
<input type="checkbox">自动登录<br>
<input type="submit" value="提交">
<input type="reset" value="重置">
</fieldset>
</form>
</body>
</html>
作业五
课本 P209 页实验 2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>应聘页面</title>
</head>
<body>
<form>
<font size="4"><strong>希望工作地点：</strong></font>
<select name="didian">
<option value="1">北京</option>
<option value="2">广州</option>
<option value="3">深圳</option>
<option value="4">上海</option>
</select>
<font size="4"><strong>月薪要求：</strong></font><input type="text" size="15px">
<input type="checkbox">要求提供过渡住房<br>
<font size="4"><strong>请选择应聘行业：</strong></font><br>
<select size="20">
<option selected>计算机软件</option>
<option>计算机硬件</option>
<option>计算机服务</option>
<option>通信/电信/网络设备</option>
<option>互联网/电子商务</option>
<option>网络游戏</option>
<option>电子技术/半导体/集成电路</option>
<option>仪器仪表/工业自动化</option>
</select>
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>
</body>
</html>作业六
设计参会注册界面，要求：
1） 标题：参会注册表
2） 页面包含：页面内容在 form 标记内，使用表单中嵌套表格，进行页面布局设计，表格
标题为“参会注册表”
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>参会注册表</title>
<style>
table,tr,td{
border: 1px solid black;
}
</style>
</head>
<body>
<h1> 参会注册表</h1>
<table>
<tr>
<td>姓名：<input type="text"></td>
<td>单位：<input type="text"></td>
</tr>
<tr>
<td>性别：<input type="radio" />男<input type="radio" />女</td>
<td>手机：<input type="text"></td>
</tr>
<tr>
<td>酒店：<input type="radio" />天山大酒店<input type="radio" />昆仑饭店</td>
<td>预定房间数：<input type="text" size="7">套</td>
</tr>
<tr>
<td colspan="2">房间类型：<input type="radio" />单人间（320元）<input type="radio" />标准双人间（380元）<input type="radio" />家庭套间（450元）</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="提交"> <input type="reset" value="重置"></td>
</tr>
</table>
</body>
</html>