资源描述
淮海工学院计算工程学院
实验报告书
课程名: Web应用开发技术
题 目： HTML表格与HTML表单
班 级:
学 号：
姓 名:
评语：
成绩： 指导教师：
批阅时间： 年 月 日
《Web应用开发技术》实验报告 - 5 -
HTML表格与HTML表单
一 实验目的
l 掌握网页中插入表格数据的标记的用法。
l 掌握不规则表格的创建方法
l 掌握表格外观控制属性的应用
l 掌握HTML表单的作用、HTML表单的两种提交方法及各自的使用场合；
掌握不同类型表单元素的使用方法;二 实验内容和要求
实验内容：
1。创建网页文件sales。html，网页的标题为“ACME公司2014年销售输入”,使用合适的表格标记及属性显示ACME公司2013的4种产品4个季度的销售额。显示效果如下（单元格数据为随机值,可以使用font等标记设置颜色等外观样式)：
产品/季度
一季度
二季度
三季度
四季度
Sass
1000
1200
8000
3000
LESS
5000
2500
4850
Stylus
3000
3650
4900
Myth
500
650
600
1200
SubTotal
6500
7350
12500
15950
Total
￥423，000.00
2。 创建如下图所示的表单：
实验要求：
1.所有参与实验同学独立完成“实验内容”部分，并记录实验步骤和结果填写在“实验步骤”、“实验结果"相应部分；
2。所有参与实验同学均需参阅资料,完成实验报告“思考题”部分内容。
特别提示：若实验报告出现雷同情况，所涉及同学均无相应成绩；
三 实验步骤
实验代码：
1.
〈html〉
〈head〉
〈title〉ACME公司2014年销售输入〈/title>
〈/head>
<body〉
〈table border=”1” bordercolor=”red” 〉
<tr〉
〈th>产品/季度</th〉
<th>第一季度〈/th〉
〈th>第二季度〈/th〉
〈th〉第三季度</th〉
〈th〉第四季度〈/th>
〈/tr〉
〈tr〉
〈td>Sass</td〉
<td〉1000〈/td〉
〈td>1200</td〉
〈td rowspan=”2”>8000〈/td>
<td〉3000</td>
〈/tr〉
〈tr>
<td〉Less〈/td〉
〈td rowspan=”2"〉5000〈/td〉
<td〉2500〈/td>
〈td>4850〈/td〉
〈/tr>
〈tr>
〈td>Stylus〈/td>
<td〉3000</td〉
〈td>3650〈/td〉
〈td〉4900〈/td〉
〈/tr〉
〈tr〉
〈td〉Myth〈/td>
〈td〉500</td〉
<td〉650</td〉
〈td〉600</td〉
〈td>1200</td〉
〈/tr〉
<tr bgcolor=”red"〉
<td〉Subtotal</td〉
<td〉6500</td>
〈td〉7350</td>
<td〉12500</td〉
<td>15950</td>
〈/tr>
〈tr bgcolor=”blue"〉
<td>Total〈/td〉
<td colspan="4">￥423，000。00</td>
〈/tr〉
〈/table>
</body>
〈/html>
2。
<html〉
<head〉
〈title〉实验三表单〈/title〉
</head>
〈body>
<form〉
<table border="1"〉
〈tr>
〈th〉Name〈/th>
〈th>Value〈/th〉
〈/tr>
〈tr〉
〈td>Name〈/td〉
〈td〉〈input type="text” name=”youername” size="20"〉〈/td>
〈/tr〉
<tr>
<td〉Sex〈/td〉
〈td>〈input type=”radio” name=”sex” value="male"〉Male〈/br>
<input type="radio" name="sex” value=”female” checked=”checked”〉Female〈/td〉
</tr〉
<tr〉
<td〉Eye color〈/td〉
〈td〉〈select name=”eyecolor">
〈option selected=”selected">green〈/option>
<option>blue</option〉
〈option〉yellow〈/option>〈/td〉
</tr〉
〈tr〉
〈td〉Check all that apply〈/td〉
<td><input type="checkbox" name=”check” value=”1”〉Over 5 feet tall</br>
〈input type=”checkbox" name=”check” value="3”〉Over 200 pounds〈/td〉
〈/tr〉
〈tr〉
<td colspan=”2"〉Describe your athletic ability：</br>
<textarea name=”ability” rows=”7” cols=”47">〈/textarea〉
〈/td〉
〈/tr>
<tr>
<td colspan="2” align=”center”〉<input type=”submit" value=”Enter my information”〉〈/td〉
〈/tr〉
〈/table>
〈/form〉
</body〉
</html〉
四 实验结果
五 思考题
1.使用HTML表格标记创建个人课程表，如下图所示：
<html>
〈head>
<meta http—equiv=”Content-Type" content=”text/html； charset=utf-8” /〉
<title〉课程表</title>
〈/head〉
〈body〉
<table border=”1”〉
<tr height="10" align=”center"〉
〈th width=”175”>〈/th>
<th width=”175">周一〈/th〉
〈th width=”175”〉周二〈/th>
〈th width="175”〉周三</th>
〈th width="175”〉周四〈/th>
〈th width="175”>周五〈/th〉
〈th width=”175"〉周六〈/th>
〈th width="175”〉周日〈/th〉
</tr〉
〈tr align=”center”〉
〈td〉7:45<br/〉1</td〉
〈td〉〈/td>
〈td rowspan=”2”>计算机组成原理＠Ⅲ216〈/td>
〈td〉〈/td〉
<td>〈/td〉
〈td rowspan=”2”>计算机组成原理＠Ⅲ214〈/td〉
<td>〈/td〉
〈td〉</td〉
〈/tr〉
〈tr align="center”〉
〈td>8:35〈br/〉2〈/td〉
<td></td>
〈td〉〈/td>
<td></td〉
〈td>〈/td〉
<td></td〉
〈/tr>
<tr align=”center”〉
<td>9：30〈br/〉3</td>
〈td rowspan=”3">web应用开发技术@计105〈/td>
〈td>〈/td〉
〈td rowspan="2”>数据库原理及应用＠Ⅲ204〈/td>
<td rowspan=”2”〉网球俱乐部＠主操场〈/td>
〈td rowspan="2”>数据库原理及应用@Ⅲ204〈/td>
<td></td〉
<td〉〈/td>
〈/tr〉
<tr align="center”>
<td〉10：25<br/〉4〈/td〉
〈td>〈/td〉
<td〉〈/td>
〈td〉〈/td〉
〈/tr〉
<tr align=”center"〉
〈td〉11:15<br/〉5</td〉
〈td〉</td〉
〈td>〈/td〉
〈td〉〈/td>
〈td〉</td>
〈td〉</td〉
<td〉〈/td〉
</tr〉
<tr align=”center"〉
<td>14：00<br/〉6</td〉
〈td rowspan=”2”〉计算机网络＠Ⅲ-204</td〉
〈td rowspan=”3”〉马克思主义基本理论概论〈/td>
〈td></td〉
<td rowspan="2">计算机网络@Ⅲ—204</td〉
〈td rowspan="2”〉大学英语（四）@N103〈/td〉
〈td></td>
〈td〉</td>
〈/tr〉
〈tr align="center">
〈td〉14:50〈br/〉7</td>
〈td〉〈/td〉
〈td〉〈/td〉
<td></td〉
</tr〉
<tr align=”center”>
〈td〉15:45〈br/〉8〈/td〉
<td〉</td〉
〈td〉〈/td〉
<td></td〉
〈td rowspan=”2”>web应用开发技术＠计105</td〉
〈td></td〉
〈td>〈/td>
〈/tr>
〈tr align="center”>
〈td>16：40<br/〉9〈/td>
〈td〉</td>
<td>〈/td〉
〈td>〈/td>
〈td〉</td>
<td>〈/td>
〈td〉</td〉
〈/tr>
</table〉
〈/body〉
〈/html〉
2. 创建HTML表单时何时使用GET提交，何时使用POST提交？
答：大规模数据传输时使用post小数据时使用get
3. 使用input标记可以创建的表单元素有哪些？如何创建？
答：有单行文本框，单选，多选,下拉框等，在网页中利用〈input type=””>即可创建，type的值代表创建的控件.
4. 在HTML表单中label标记的作用是什么？如何应用label标记?
答：创建文本标签，使用时添加〈lable>〈/lable〉即可
展开阅读全文
浙ICP备2021020529号-1 | 浙B2-20240490 
