题1：
<form action="#" method="post">
<table>
<tr>
<td>用户名：</td>
<td><input type="text" name="UserName" maxlength="20" size="15"></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" name="UserPass" maxlength="20" size="15"></td>
</tr>
<tr>
<td>性别：</td>
<td><input type="radio" name="sex" value="男" checked>男
<input type="radio" name="sex" value="女">女</td>
</tr>
<tr>
<td>爱好：</td>
<td><input type="checkbox" name="like" value="写作">写作
<input type="checkbox" name="like" value="听音乐">听音乐
<input type="checkbox" name="like" value="体育">体育</td>
</tr>
<tr>
<td>省份：</td>
<td><select name="province">
<option value="shaanxi" selected>陕西省</option>
<option value="shanx">山西省</option>
</select></td>
</tr>
<tr>
<td>自我介绍：</td>
<td><textarea name="intro" rows="5" cols="25">这个家伙什么也没留下</textarea></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="send" value="提交">
<input type="reset" name="reset" value="重置"></td>
</tr>
</table>
</form>
运行结果：
题目2：
<!DOCTYPE html>
<html>
<head>
<title>将进酒</title>
<style>
h1 {
font-weight: bold;
}
h5 {
font-family: Arial, sans-serif;
line-height: 2.8; /* 调整行高 */
}
img {
float: left;
margin-right: 10px;
vertical-align: top;
}
.poem-container {
display: inline-block;
}
</style>
</head>
<body>
<h1>将进酒</h1>
<img src="li_bai.png" alt="李白的图片">
<h5>
君不见，黄河之水天上来，奔流到海不复回。<br>
君不见，高堂明镜悲白发，朝如青丝暮成雪。<br>
人生得意须尽欢，莫使金樽空对月。<br>
天生我材必有用，千金散尽还复来。<br>
烹羊宰牛且为乐，会须一饮三百杯。<br>
岑夫子，丹丘生，将进酒，杯莫停。<br>
与君歌一曲，请君为我倾耳听。<br>
钟鼓馔玉不足贵，但愿长醉不复醒。<br>
古来圣贤皆寂寞，惟有饮者留其名。<br>
陈王昔时宴平乐，斗酒十千恣欢谑。<br>
主人何为言少钱，径须沽取对君酌。<br>
五花马、千金裘，呼儿将出换美酒，与尔同销万古愁。<br>
</h5>
</body>
</html>
运行结果：
题目3：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>工商银行电子汇款单</title>
<style>
table {
border-collapse: collapse;
margin: 20px;
}
caption {
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
}
th, td {
padding: 10px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
tfoot td:nth-child(odd) {
background-color: #f2f2f2;
}
tfoot td:nth-child(even) {
text-align: right;
font-weight: bold;
}
tfoot tr:first-child td {
font-weight: bold;
}
</style>
</head>
<body>
<table width="1000" border="1" cellspacing="0">
<caption><h1>工商银行电子汇款单</h1></caption>
<thead>
<tr>
<th colspan="2">回单类型</th>
<th>网上转账汇款</th>
<th colspan="2">指令序号</th>
<th>HQH0000000000000013878172</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="4">收款人</td>
<th>户名</th>
<td>老牟</td>
<td rowspan="4">付款人</td>
<th>户名</th>
<td>老刘</td>
</tr>
<tr>
<th>卡号</th>
<td>000000000001</td>
<th>卡号</th>
<td>000000000002</td>
</tr>
<tr>
<th>地区</th>
<td>南京</td>
<th>地区</th>
<td>杭州</td>
</tr>
<tr>
<th>网点</th>
<td>工商江苏南京业务处理中心</td>
<th>网点</th>
<td>江苏徐州业务中心</td>
</tr>
<th colspan="2">币种</th>
<td>人民币</td>
<th colspan="2">秒汇标志</th>
<td>钞票</td>
</tr>
<tr>
<th colspan="2">金额</th>
<td >1000000.00元</td>
<th colspan="2">手续费</th>
<td >100</td>
</tr>
<tr>
<th colspan="2">合计</th>
<td colspan="4">人民币(大写) : 壹佰万元整</td>
</tr>
<tr>
<th colspan="2">时间</th>
<td>2017年6月1日</td>
<th colspan="2">时间戳</th>
<td>江苏徐州业务中心</td>
</tr>
</tbody>
</table>
<p>票据打印时间: 2017-06-01 15:00:12</p>
<p><del>票据打印单位: 江苏徐州业务中心</del></p>
<p>操作员：大曾</p>
</body>
</html>
运行结果：
题目4：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>热门电影板块</title>
<style>
.movies-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.movie {
width: 200px;
margin: 10px;
text-align: center;
}
.movie img {
width: 100%;
height: auto;
}
.movie-name {
margin-top: 5px;
}
hr {
margin-top: 20px;
margin-bottom: 20px;
border: none;
height: 1px;
background-color: black;
}
p:nth-of-type(2n) {
margin-top: 30px;
}
</style>
</head>
<h1>热门电影板块</h1>
<hr>
<p>
<span class="underline">最近电影</span>
<span class="underline">热门</span>
<span class="underline">最新</span>
<span class="underline">豆瓣高分</span>
<span class="underline">冷门佳片</span>
<span class="underline">华语</span>
<span class="underline">欧美</span>
<span class="underline">韩国</span>
<span class="underline">日本</span>
<span class="underline">更多>></span>
</p>
<hr>
<div class="movies-container">
<div class="movie">
<img src="movie1.png" alt="电影1">
<div class="movie-name">猜火车 8.1</div>
</div>
<div class="movie">
<img src="movie2.png" alt="电影2">
<div class="movie-name">贝尔科的实验 6.0</div>
</div>
<div class="movie">
<img src="movie3.png" alt="电影3">
<div class="movie-name">加州公路巡警 6.8</div>
</div>
<div class="movie">
<img src="movie4.png" alt="电影4">
<div class="movie-name">歌声不绝 6.3</div>
</div>
<div class="movie">
<img src="movie5.png" alt="电影5">
<div class="movie-name">明日的我与昨日的我</div>
</div>
<div class="movie">
<img src="movie6.png" alt="电影6">
<div class="movie-name">速度与激情8</div>
</div>
<div class="movie">
<img src="movie7.png" alt="电影7">
<div class="movie-name">极速特工</div>
</div>
<div class="movie">
<img src="movie8.png" alt="电影8">
<div class="movie-name">金刚狼3：殊死一搏</div>
</div>
</div>
</body>
</html>
运行结果：
