当前位置:
文档之家› 实验三+用HTML表格进行网页排版
实验三+用HTML表格进行网页排版
二实验内容和要求
实验内容:
1.创建名为ex3的文件夹,在该文件夹里面创建一个网页文件sales.html,网页的标题为“ACME公司2013年销售输入”,使用HTML 4 Transitional文档类型声明,使用合适的表格标记及属性显示ACME公司2013的5种产品4个季度的销售额。显示效果如下(单元格数据为随机值):
<html xmlns="/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>表单</title>
</head>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>ACME公司2013年销售输入</title>
</head>
<body>
<table border="1">
<tr>
<th>产品/季度</th>
三实验步骤
第一题:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/1999/xhtml" xml:lang="en">
</tr>
<tr>
<td><label for="suggestion">您的建议:</label></td>
<td><textarea name="suggestion" id="suggestion"cols="45" rows="5">请留下您的宝贵意见</textarea></td>
</tr>
<body>
<h1>请正确填写您的个人信息,以方便我们及时与您联系!!!!</h1>
<form id="form1" name="form1" method="post">
<table>
<tr>
<td><label for="username">姓名:</label></td>
<td><input type="text" name="username" id="username"/></td>
<td><input type="password" name="pass2" id="pass2"/></td>
</tr>
<tr>
<td><label for="sex">性别:</label></td>
<td><input type="radio" name="sex" id="radio" value="radio">男
<tr>
<th>X-Super</th>
<td>32345</td>
<td>34655</td>
<td>4345</td>
<td>34534</td>
</tr>
<tr bgcolor="#66FFCC">
<th>Compact2x</th>
<td>234324</td>
<td>7876</td>
<td>53434</td>
产品/季度
一季度
二季度
三季度
四季度
Helix
20000
565454
5654
334543
X-Super
32345
34655
4345
34534
Compact2x
234324
7876
53434
43543
MiniXooper
7867
5465
6763443
354366
2.使用表格对教材64页图2-26的表单使用表格进行布局,保存为profile.html。
3.使用W3C在线HTML验证工具验证上述文档的合法性,修改验证结果中出现的错误。
实验要求:
(1)需要每个同学独立完所有的实验步骤,
(2)要求使用label标记对相关的表单元素进行说明,即:<label for=”elementId”>Label</label>
(3)下课之前将实验报告的电子文档提交至教学平台。
<label><input type="radio" name="degree[]" id="radio5" value="bs"/>学士及以下</label>
</td>
</tr>
<tr>
<td>您的头像:</td>
<td><input type="image" src="image/55.jpg"name="imgael"alt="您的头像"/></td>
<option selected="selected">18-35岁</option>
<option>36-50岁</option>
<option>50岁以上</option>
</select>
</td>
</tr>
<tr>
<td>最喜爱的语言:</td>
<td>
<label><input type="checkbox" name="html-lang">HTML</label>
</tr>
<tr>
<td><label for="pass">密码:</label></td>
<td><input type="password" name="pass"id="pass"/></td>
</tr>
<tr>
<td><label for="pass2">确认密码:</label></td>
<label><input type="checkbox" name="css-lang">CSS</label>
<label><input type="checkbox" name="js-lang">Javascript</label>
</td>
</tr>
<tr>
<td>最高学历:</td>
<td>
<tr>
<td>您的上传:</td>
<td>
<input type="file" name="document" size="20" maxlength="500"/></p>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" name="button" id="button" value="提交"/>
<td>43543</td>
</tr>
<tr>
<th>MiniXooper</th>
<td>7867</td>