HTML的总结作业

作业1

参照图使用表格定位表单。

参考代码

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"/>

<title></title>

</head>

<body>

<form action="">

<table width="600"height="500" border="1" align="center">

<tr bgcolor=#bdbdbd align="center" >

<td colspan="2" align="center"

>用户注册</td>

</tr>

<tr>

<td align="right"

>用户名</td>

<td> <label for="edit"></label>

<input type="edit" value="" /></td>

</tr>

<tr>

<td align="right"

>密码</td>

<td> <label for="edit"></label>

<input type="password" value=""/></td>

</tr>

<tr>

<td align="right"

><label for="hob">

性别

</label></td>

<td>

<input type="radio" name="性别" value="男" />男

<input type="radio" name="性别" value="女" />女

</td>

</tr>

<tr>

<td align="right">

<label for="hob">

爱好

</label></td>

<td><input type="checkbox" name="听音乐" value="听音乐" />听音乐

<input type="checkbox" name="写作" value="写作" />写作

<input type="checkbox" name="体育" value="体育" />体育

</td>

</tr>

<tr>

<td align="right">省份</td>

<td>

<select name="省份">

<option >陕西</option>

<option >山西</option>

<option >广西</option>

<option >西藏</option>

</select>

</td>

</tr>

<tr>

<td align="right">自我介绍</td>

<td>

<textarea name="" cols="50" rows="10"></textarea>

</td>

</tr>

<tr bgcolor=#bdbdbd align="center" >

<td colspan="2" align="center">

<input type="submit" name="">

<input type="reset">

</td>

</table>

</from>

</body>

运行截图

作业2

查考代码

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8" />

<title></title>

</head>

<body>

<tr>

<h1>工商银行电子汇款单</h1>

</tr>

<table width="1200" height="300" border="1">

<tr>

<td width="100" colspan="2"><b>回单类型</b></td>

<td width="500">网上转账汇款</td>

<td width="100"colspan="2"><b>指令序号</b></td>

<td >HQH00000000000000131878172</td>

</tr>

<tr >

<td rowspan="4" width="10"><b>收款人</b></td>

<td width="50">户名</td>

<td width="500">老马</td>

<td rowspan="4" width="10"><b>收款人</b></td>

<td width="50">户名</td>

<td width="500">老刘</td>

</tr>

<tr>

<td><b>卡号</b></td>

<td>0000000000000000001</td>

<td><b>卡号</b></td>

<td>0000000000000000001</td>

</tr>

<tr>

<td>地区</td>

<td>南京</td>

<td>地区</td>

<td>杭州</td>

</tr>

<tr>

<td><b>网点</b></td>

<td>工商江苏南京业务处理中心</td>

<td><b>网点</b></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="2"><b>合计</b></td>

<td colspan="4">人民币(大写):壹园整</td>

</tr>

<tr>

<td colspan="2"><b>交易时间</b></td>

<td><i>2017年6月1日</i></td>

<td colspan="2"><b>时间戳</b></td>

<td>2017-06-01-13.00.00.00000</td>

</tr>

</table>

<td>

票据打印时间:2017-06-01:15:00:12<br />

</td>

<td>

<del>票据打印单位:江苏徐州业务中心</del><br />

</td>

<td>

<del>操作员:大曾</del><br />

</td>

</body>

</html>

运行截图

作业三

豆瓣电影

参考代码

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>form</title>

</head>

<body>

<from action>

<table width="100%" height="100%" border="0" cellpadding="10" cellspacing="10">

<tr>

<td colspan="2" align="left"><h1>热门电影板块</h1></td>

</tr>

<tr align="left" cellpadding="10" cellspacing="10">

<td><b>最近热门电影</b></td>

<td>热门</td>

<td>最新</td>

<td>豆瓣高分</td>

<td>冷门佳片</td>

<td>华语</td>

<td>欧美</td>

<td>韩国</td>

<td>日本</td>

<td>更多>></td>

</tr>

<table width="100%" height="100%" border="0"

<tr>

<td><img src="./222.webp"></td>

<td><img src="./222.webp"></td>

<td><img src="./222.webp"></td>

<td><img src="./222.webp"></td>

</tr>

<tr>

<td align="center">鸡哥一号 2.5</td>

<td align="center">鸡哥二号 2.5</td>

<td align="center">鸡哥三号 2.5</td>

<td align="center">鸡哥四号 2.5</td>

</tr>

</table>

<table width="100%" height="100%" border="0">

<tr>

<td><img src="./222.webp"></td>

<td><img src="./222.webp"></td>

<td><img src="./222.webp"></td>

<td><img src="./222.webp"></td>

</tr>

<tr>

<td align="center">鸡哥五号 2.5</td>

<td align="center">鸡哥六号 2.5</td>

<td align="center">鸡哥七号 2.5</td>

<td align="center">鸡哥八号 2.5</td>

</tr>

</table>

</table>

</from>

</body>

</html>

运行截图

相关推荐
The Straggling Crow5 小时前
Network
网络
yyuuuzz5 小时前
独立站的技术基础与常见运维问题
大数据·运维·服务器·网络·数据库·aws
ZC跨境爬虫7 小时前
跟着 MDN 学CSS day_39:(Flexbox 弹性盒子核心机制)
前端·css·ui·html·tensorflow
Oll Correct8 小时前
实验二十九:TCP的运输连接管理
网络·笔记
日取其半万世不竭10 小时前
iftop、nethogs 和 nload:Linux 服务器网络流量实时监控工具介绍
linux·运维·服务器
mounter62510 小时前
Linux 内核资源管理:控制组(cgroup)的演进与“策略组”新提案
linux·运维·服务器·cgroup·kernel
bksczm10 小时前
文件在磁盘中的存储方式
linux·运维·服务器
L16247610 小时前
OpenSSH 半自动升级方案(独立编译 + 手动迁移 + 重建 systemd 服务)
linux·服务器·ssh
Cheng小攸10 小时前
综合实验2
网络·windows
Wpa.wk10 小时前
win环境本地文件上传远程服务器(scp/远程连接工具)
运维·服务器