作业一:完成用户注册页面
代码实现:
<!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>
成果展示:
作业二:完成电子汇款单页面
代码实现:
<!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>4322359824</td>
<td>卡号</td>
<td>00000000022</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>328.00元</th>
<td colspan="2">手续费</td>
<td>648.00元</td>
</tr>
<tr>
<td colspan="2">合计</td>
<td colspan="4">人民币(大写):壹</td>
</tr>
<tr>
<td colspan="2">交易时间</td>
<td>2024年3月8日</td>
<td colspan="2">时间戳</td>
<td>2024-01-08-13.00.00.0000</td>
</tr>
</table>
<p>票据打印时间:2024-04-04</p>
<p><del>票据打印单位:中国鞋墙银行</del></p>
<p>操作员:王龙
</body>
</html>
成果展示:
作业三:古诗词页面
代码实现;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>李白诗词</title>
</head>
<body>
<h1>将进酒<small> <br>君不见黄河之水天上来</small></h1>
<table>
<td><img src="C:\Users\le\Downloads\403ab26f268d59ab62584ac7f061a934.jpeg"=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 width="200" height="400"></td>
<td><p>
君不见黄河之水天上来,奔流到海不复回。<br>
君不见高堂明镜悲白发,朝如青丝暮成雪<br>
人生得意须尽欢,莫使金樽空对月。<br>
天生我材必有用,千金散尽还复来。<br>
烹羊宰牛且为乐,会须一饮三百杯。<br>
与君歌一曲,请君为我倾耳听。<br>
钟鼓馔玉不足贵,但愿长醉不愿醒。<br>
陈王昔时宴平乐,斗酒十千恣欢谑。<br>
主人何为言少钱,径须沽取对君酌。<br>
五花马、千金裘,呼儿将出换美酒,与尔同销万古愁。<br></p></td>
</tr>
</table>
</body>
</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="C:\Users\le\Downloads\e0e27b7f4a996a001c24e34f8a4becaa.jpg" width="250" height="390"></td>
<td><img src="C:\Users\le\Downloads\cb596ccac19a73b44ce1279a64ef5808.jpeg" width="250" height="390"></td>
<td><img src="C:\Users\le\Downloads\08acbf74158573ecae1046685ccf6bf9.jpeg" width="250" height="390"></td>
<td><img src="C:\Users\le\Downloads\e6dddff9b578ac4eab23ad3c98b4040f.jpeg" width="250" height="390"></td>
</tr>
<tr>
<td>沙丘2 8.1</td>
<td>周处除三害 8.2</td>
<td>热辣滚烫 7.8</td>
<td>飞驰人生2 8.1</td>
</tr>
<tr>
<td><img src="C:\Users\le\Downloads\b4188a7f7c5f9a3422350890ebc6416c.jpg" width="250" height="390"></td>
<td><img src="C:\Users\le\Downloads\8eb34542499611dd933ad009c30c7a15.jpg" width="250" height="390"></td>
<td><img src="C:\Users\le\Downloads\00656a8d371dd51193eca8ea02ed2226.jpeg" width="250" height="390"></td>
<td><img src="C:\Users\le\Downloads\4ab6d5b17b65c1042ffc8baf2d497acc.jpg" width="250" height="390"></td>
</tr>
<tr>
<td>第二十条 7.8</td>
<td>花束版的恋爱 8.2 </td>
<td>溺水小刀 7.0 </td>
<td>明日的我与昨日的你恋爱 8.0 </td>
</tr>
</table>
</body>
</html>
成果展示: