web前端第一次作业
一、用户注册界面作业要求:
1.用户名为文本框，名称为 UserName，长度为 15，最大字符数为 20
2.密码为密码框，名称为 UserPass，长度为 15，最大字符数为 20
3.性别为两个单选按钮，名称为 sex，值分别为男和女，男默认选中
4.爱好是三个多选按钮，名称为 like，值分别为写作、听音乐、体育
5.省份为下拉框，名称为 province，选项的键-值对为 Key:陕西省，value:shaanxi ;Key:山西省5.
value:shanx;陕西省默认选中
6.自我介绍为多行文本框，名称为 intro，宽 25，高5，默认值为“这个家伙什么也没留下”
7.提交按钮，名称为“send”，标签为“提交”
8.重置按钮，名称为“reset”，标签为“重置”8
9.参照图使用表格定位表单
代码如下
<!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><!--使用8*3表格--> <table border="1px" width="300px" height="350px" align="center"><tr><td bgcolor="grey" colspan="3" align="center"><b>用户注册</b></td></tr><!--1.用户名为文本框，名称为 UserName，长度为 15，最大字符数为 20--><tr><td bgcolor="lightgrey" align="right">用户名</td><td bgcolor="lightgrey" colspan="2"><input type="text" name="UserName" width="15px" maxlength="20"></td></tr><!--2.密码为密码框，名称为 UserPass，长度为 15，最大字符数为 20--><tr><td bgcolor="lightgrey" align="right" >密码</td><td bgcolor="lightgrey" colspan="2"><input type="password" name="UserPass width="15px" maxlength="20"></td></tr><!--3.性别为两个单选按钮，名称为 sex，值分别为男和女，男默认选中--><tr><td bgcolor="lightgrey" align="right" >性别</td><td bgcolor="lightgrey" colspan="2">男:<input type="radio" name="sex" value="0">女:<input type="radio" name="sex" value="1"><br></td></tr><!--4.爱好是三个多选按钮，名称为 like，值分别为写作、听音乐、体育--><tr><td bgcolor="lightgrey" align="right" >爱好</td><td bgcolor="lightgrey" colspan="2"><input type="checkbox" name="like" value="xz">写作<input type="checkbox" name="like" value="tyy">听音乐<input type="checkbox" name="like" value="ty">体育<br> </td></tr><!--5.省份为下拉框，名称为 province，选项的键-值对为 Key:陕西省，value:shaanxi ;Key:山西省;value:shanx;陕西省默认选中--><tr><td bgcolor="lightgrey" align="right" >省份</td><td bgcolor="lightgrey" colspan="2"><select name="location"><option value="shanxi" checked>陕西省</option><option value="sx">山西省</option></select></td></tr><!--6.自我介绍为多行文本框，名称为 intro，宽 25，高5，默认值为“这个家伙什么也没留下”--><tr><td bgcolor="lightgrey" align="right" >自我介绍</td><td bgcolor="lightgrey" colspan="3"><textarea name="intro" id="" cols="25" rows="5" placeholder="这个家伙什么也没留下"></textarea></td></tr><!--7.提交按钮，名称为“send”，标签为“提交”--><tr><td bgcolor="lightgrey" colspan="3" align="center" ><button type="submit" name="send"><b>提交</b></button><!--8.重置按钮，名称为“reset”，标签为“重置”8 --><button type="reset" name="reset"><b>重置</b></button> </td></tr></table>
</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>
</head>
<body><th><h2>工商银行电子汇款单</h2></th><table border="1px" width="780px" height="280px" cellspacing="0px"><!--第一行--><tr><!--跨两列--><td colspan="2"><b>回单类型</b></td><td>网上转账汇款</td><td colspan="2"><b>指令序号</b></td><td>HQH0000000000000013878172</td></tr><!--第二行--><tr><!--跨四行--><td rowspan="4"><b>收款人</b></td><td>户名</td><td>老牟</td><td rowspan="4"><b>付款人</b></td><td>户名</td><td>老刘</td></tr><tr><td>卡号</td><td>000000000001</td><td>卡号</td><td>000000000002</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"><b>币种</b></td><td>人民币</td><td colspan="2"><b>钞汇标志</b></td><td>钞票</td></tr><tr><td colspan="2"><b>金额</b></td><td>1.00元</td><td colspan="2"><b>手续费</b></td><td>0.57元</td></tr><tr><td colspan="5"><b>合计</b></td><td>人民币（大写）：壹元整</td></tr><tr><td colspan="2"><b>交易时间</b></td><td><i>2017年6月1日</i></td><td colspan="2"><b>时间截</b></td><td><i>2017-06-01-13.00.00.00000</i></td></tr></table><table><p>票据打印时间:2017-06-01 15:00:12</p><del>测试内容</del><p>操作员：大曾</p></table>
</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></head>
<body><h1 align="left"><b>将进酒</b><small> 君不见黄河之水天上来</small></h1><table><tr><td><img src="3.png" width="400px" height="600px"><td> <p>君不见，黄河之水天上来，奔流到海不复回。</p><p>君不见，高堂明镜悲白发，朝如青丝暮成雪！</p><p>人生得意须尽欢，莫使金樽空对月。</p><p>天生我材必有用，千金散尽还复来。</p><p>烹羊宰牛且为乐，会须一饮三百杯。</p><p>岑夫子，丹丘生，将进酒，杯莫停。</p><p>与君歌一曲，请君为我倾耳听。</p><p>钟鼓馔玉不足贵，但愿长醉不复醒。</p><p>古来圣贤皆寂寞，惟有饮者留其名。</p><p>陈王昔时宴平乐，斗酒十千恣欢谑。</p><p>主人何为言少钱，径须沽取对君酌。</p></td></tr></table></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>
</head>
<body><th><h2>热门电影板块</h2></th><b>最近热门电影</b>
<hr> 热门 最新 豆瓣高分 冷门佳片 华语 欧美 韩国 日本 更多>>
<hr><table><tr><td><img src="千与千寻.webp" width="150px" height="200px"> <p>千与千寻</p> </td><td><img src="哪吒之魔童闹海webp.webp" width="150px" height="200px"><p>哪吒之魔童闹海</p></td><td><img src="唐人街探案3.jpg" width="150px" height="200px"><p>唐人街探案3</p></td><td><img src="巨齿鲨.jpg" width="150px" height="200px"><p>巨齿鲨</p></td></tr><tr><td><img src="无间道.webp" width="150px" height="200px"><p>无间道</p></td><td><img src="重启未来.jpg" width="150px" height="200px"><p>重启未来</p></td><td><img src="金刚.webp" width="150px" height="200px"><p>金刚</p></td><td><img src="飞驰人生2.jpg" width="150px" height="200px"><p>飞驰人生2</p></td></tr> </table>
</body>
</html>结果如下
