练习
作业 1 ： ** 自己可以参考上面代码，尝试着练习完成，如下界面
要求：
- 用户名为文本框，名称为 UserName ，长度为 15 ，最大字符数为 20 。
- 密码为密码框，名称为 UserPass ，长度为 15 ，最大字符数为 20 。
- 性别为两个单选按钮，名称为 sex ，值分别为男和女，男默认选中。
- 爱好是三个多选按钮，名称为 like ，值分别为写作、听音乐、体育。
- 省份为下拉框，名称为 province ，选项的键 - 值对为 Key: 陕西省， value:shaanxi ； Key: 山西省，
value:shanx ；陕西省默认选中。 - 自我介绍为多行文本框，名称为 intro ，宽 25 ，高 5 ，默认值为 " 这个家伙什么也没留下 " 。
- 提交按钮，名称为 "send" ，标签为 " 提交 " 。
- 重置按钮，名称为 "reset" ，标签为 " 重置 " 。
- 参照图使用表格定位表单。
一、代码：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用户注册</title>
</head>
<body>
<form action="" method="post">
<div>
<label for="UserName">用户名:</label>
<input type="text" name="UserName" id="UserName" pattern="\d{15}" maxlength="20"/>
</div>
<div>
<label for="UserPass">密码：</label>
<input type="password" name="UserPass" id="UserPass" required pattern="\d{15}" maxlength="20"/>
</div>
<div>
<label>性别:</label>
<input type="radio" name="sex" value="男"> 男 <input type="radio"
name="sex" checked value="女"> 女 <br>
</div>
<div>
<label>爱好:</label>
<input type="checkbox" id="ah1" name="like" value="1">
<label for="ah1">写作</label>
<input type="checkbox" id="ah2" name="like" value="2">
<label for="ah2">听音乐</label>
<input type="checkbox" id="ah3" name="like" value="3">
<label for="ah3">体育</label>
</div>
<div>
<label>省份:</label>
<select name="city">
<option>--请选择--</option>
<option value="shaanxi">陕西省</option>
<option value="shanxi">山西省</option>
</select>
</div>
<div>
<label >自我介绍</label>
<textarea name="intro" cols="25" rows="5">这个家伙什么也没留下</textarea>
</div>
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>
</form>
</body>
</html>二、效果截图：
作业 2 ： 完成如下转转页面
一、代码：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格</title>
<h1>工商银行电子汇款单</h1>
</head>
<body>
<table border="1" width="100%" height="100%" cellspacing="0"
cellpadding="0">
<tr>
<th colspan="2">回单类型</th>
<th>网上转账汇款</th>
<th colspan="2">指令序号</th>
<th>656515466</th>
</tr>
<tr>
<td rowspan="4" align="left">收<br>款<br>人</td>
<td>卡户</td>
<td>张三</td>
<td rowspan="4">付<br>款<br>人</td>
<td>户名</td>
<td>霄怡</td>
</tr>
<tr>
<td>卡号</td>
<td>2177359824</td>
<td>卡号</td>
<td>00000000002</td>
</tr>
<tr>
<td>地区</td>
<td>南京</td>
<td>地区</td>
<td>杭州</td>
</tr>
<tr>
<td>网点</td>
<td>工商江苏南京业务处理中心</td>
<td>网点</td>
<td>江苏徐州业务中心</td>
</tr>
<tr>
<td colspan="2">币种</td>
<td>人民币</td>
<td colspan="2">钞标准</td>
<td>钞票</td>
</tr>
<tr>
<td colspan="2">金额</td>
<td>1.00元</th>
<td colspan="2">手续费</td>
<td>0.75元</td>
</tr>
<tr>
<td colspan="2">合计</td>
<td colspan="4">人民币（大写）：壹</td>
</tr>
<tr>
<td colspan="2">交易时间</td>
<td>2023年1月8日</td>
<td colspan="2">时间戳</td>
<td>2024-01-08-13.00.00.0000</td>
</tr>
</table>
<p>票据打印时间：2021-06-04</p>
<p><del>票据打印单位：xx银行</del></p>
<p>操作员：秦霄贤
</body>
</html>二、效果截图：
作业 3 ： 李白诗词
一、代码：
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>李白诗词</title>
</head>
<body>
<h1>将进酒<small>君不见黄河之水天上来</small></h1>
<table>
<td><img src=https://ts3.cn.mm.bing.net/th?id=OIP-C.y633yN5iT07_S3963Ep9-QHaPA&w=172&h=349&c=8&rs=1&qlt=90&o=6&dpr=1.5&pid=3.1&rm=2 alt=""></td>
<td><p>
君不见黄河之水天上来，奔流到海不复回。<br>
君不见高堂明镜悲白发，朝如青丝暮成雪<br>
人生得意须尽欢，莫使金樽空对月。<br>
天生我材必有用，千金散尽还复来。<br>
烹羊宰牛且为乐，会须一饮三百杯。<br>
与君歌一曲，请君为我倾耳听。<br>
钟鼓馔玉不足贵，但愿长醉不愿醒。<br>
陈王昔时宴平乐，斗酒十千恣欢谑。<br>
主人何为言少钱，径须沽取对君酌。<br>
五花马、千金裘，呼儿将出换美酒，与尔同销万古愁。<br></p></td>
</tr>
</table>
</body>
</html>二、效果截图：
作业 4 ： 豆瓣电影
一、代码：
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>热门电影板块</h1>
<hr>
<table border="0" cellspacing="0" width="1200">
<tr>
<td><font size="5"><b>最近热门电影</b></font></td>
<td align="center"><font size="5">热门</font></td>
<td align="center"><font size="5">最新</font></td>
<td align="center"><font size="5">豆瓣高分</font></td>
<td align="center"><font size="5">冷门佳片</font></td>
<td align="center"><font size="5">华语</font></td>
<td align="center"><font size="5">欧美</font></td>
<td align="center"><font size="5">韩国</font></td>
<td align="center"><font size="5">日本</font></td>
<td align="center"><font size="5">更多>></font></td>
</tr>
</table>
<hr>
<table border="0" cellspacing="0">
<tr>
<td><img src="img/movie1.png"></td>
<td><img src="img/movie2.png"></td>
<td><img src="img/movie3.png"></td>
<td><img src="img/movie4.png"></td>
</tr>
<tr>
<td>猜火车 8.1</td>
<td>贝尔科实验 6.0</td>
<td>加州公路巡警 6.8</td>
<td>歌声不绝 6.3</td>
</tr>
<tr>
<td><img src="img/movie5.png"></td>
<td><img src="img/movie6.png"></td>
<td><img src="img/movie7.png"></td>
<td><img src="img/movie8.png"></td>
</tr>
<tr>
<td>明日的我与昨日的我</td>
<td>速度与激情8 </td>
<td>极速特工 </td>
<td>金刚狼3:殊死一战 </td>
</tr>
</table>
</body>
</html>二、效果截图：
