HTML实验三
1.🍡练习一 制作四大美女页面
需求说明：
- 使用表格标签制作四大美女页面，如效果图所示
效果图:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>四大美女图</title>
</head>
<body>
<table border="1" width="700" cellspacing="0" >
<caption><h1>四大美女</h1></caption>
<tr align="center">
<td><strong>图片</strong></td>
<td><strong>名字</strong></td>
<td><strong>年龄</strong></td>
<td><strong>颜值</strong></td>
</tr>
<tr align="center">
<td><img src="../images/dc.jpg" alt=""></td>
<td>貂蝉</td>
<td>17</td>
<td>100</td>
</tr>
<tr align="center">
<td><img src="../images/xx.jpg" alt=""></td>
<td>西施</td>
<td>18</td>
<td>100</td>
</tr>
<tr align="center">
<td><img src="../images/wzj.jpg" alt=""></td>
<td>昭君</td>
<td>16</td>
<td>100</td>
</tr>
<tr align="center">
<td><img src="../images/yyh.jpg" alt=""></td>
<td>杨玉环</td>
<td>17</td>
<td>100</td>
</tr>
<tr align="center">
<td>平均颜值</td>
<td colspan="3">100</td>
</tr>
</table>
</body>
</html>
2.🍞练习二 表格分组标签的使用
需求说明：
- 实现一个按地点和时间汇总的年终报表，如效果图所示
效果图:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tfoot等分组用法</title>
</head>
<body>
<table width="100%">
<caption>年终数据报表</caption>
<thead style="background:#0FF">
<tr>
<th></th>
<th>1月</th>
<th>2月</th>
<th>3月</th>
<th>小计(RMB)</th>
</tr>
</thead>
<tbody style="background:#9CC">
<tr>
<td width="20%">北京</td>
<td width="20%">10</td>
<td width="20%">10</td>
<td width="20%">50</td>
<td width="20%">70</td>
</tr>
<tr>
<td>上海</td>
<td>20</td>
<td>30</td>
<td>70</td>
<td>120</td>
</tr>
<tr>
<td>天津</td>
<td>30</td>
<td>40</td>
<td>80</td>
<td>150</td>
</tr>
</tbody>
<tfoot style="background:#FF0">
<tr>
<td>总计(RMB)</td>
<td>60</td>
<td>80</td>
<td>200</td>
<td>240</td>
</tr>
</tfoot>
</table>
</body>
</html>
3.🥪练习三 制作世纪佳缘页面
需求说明：
- 使用表格布局表单实现世纪佳缘页面，如效果图所示
效果图:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>世纪佳缘</title>
</head>
<body>
<form action="">
<table width="35%" align="center">
<caption><strong>青春不常在,抓紧谈恋爱</strong></caption>
<tr>
<td>性别</td>
<td>
<input type="radio" name="sex" value="男"><img src="../images/man.jpg" alt="男">男
<input type="radio" name="sex" value="女"><img src="../images/women.jpg" alt="女">女
</td>
</tr>
<tr>
<td>生日</td>
<td>
<select name="year">
<option value="" selected>请选择年</option>
<option value="">1991</option>
<option value="">1992</option>
<option value="">1993</option>
<option value="">1994</option>
<option value="">1995</option>
<option value="">1996</option>
<option value="">1997</option>
<option value="">1998</option>
<option value="">1999</option>
<option value="">2000</option>
<option value="">2000</option>
<option value="">2001</option>
<option value="">2002</option>
<option value="">2003</option>
</select>
<select name="moon">
<option value="" selected>请选择月</option>
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
<option value="">6</option>
<option value="">7</option>
<option value="">8</option>
<option value="">9</option>
<option value="">10</option>
<option value="">11</option>
<option value="">12</option>
</select>
<select name="day">
<option value="">请选择日</option>
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
<option value="">6</option>
<option value="">7</option>
<option value="">8</option>
<option value="">9</option>
<option value="">10</option>
<option value="">11</option>
<option value="">12</option>
<option value="">13</option>
<option value="">14</option>
<option value="">15</option>
<option value="">16</option>
<option value="">17</option>
<option value="">18</option>
<option value="">19</option>
<option value="">20</option>
<option value="">21</option>
<option value="">22</option>
<option value="">23</option>
<option value="">24</option>
<option value="">25</option>
<option value="">26</option>
<option value="">27</option>
<option value="">28</option>
<option value="">29</option>
<option value="">30</option>
<option value="">31</option>
</select>
</td>
</tr>
<tr>
<td>所在地区</td>
<td><input type="text" name="address" value="北京"></td>
</tr>
<tr>
<td>婚姻状况</td>
<td>
<input name="hy" type="radio" value="未婚">未婚
<input name="hy" type="radio" value="离婚">离婚
<input name="hy" type="radio" value="丧偶">丧偶
</td>
</tr>
<tr>
<td>学历</td>
<td><input type="text" value="小学"></td>
</tr>
<tr>
<td>月薪</td>
<td><input type="text" value="5000-10000"></td>
</tr>
<tr>
<td>手机号</td>
<td><input type="text"></td>
</tr>
<tr>
<td>昵称</td>
<td><input type="text"></td>
</tr>
<tr>
<td>喜欢的类型</td>
<td>
<input name="lx" type="radio" value="妩媚">妩媚
<input name="lx" type="radio" value="柔美">柔美
<input name="lx" type="radio" value="可爱">可爱
<input name="lx" type="radio" value="小鲜肉">小鲜肉
<input name="lx" type="radio" value="型男">型男
<input name="lx" type="radio" value="气质">气质
</td>
</tr>
<tr>
<td>自我介绍</td>
<td><textarea name="jianshao" cols="50" rows="10"></textarea></td>
</tr>
<tr>
<td></td>
<td><img src="../images/btn.png" alt="注册"></td>
</tr>
<tr>
<td></td>
<td><input type="checkbox" name="agree">我同意注册条款和会员加入标准</td>
</tr>
<tr>
<td></td>
<td><p><a href="">我是会员,立即登录</a></p></td>
</tr>
<tr>
<td></td>
<td>
<h3>我承诺</h3>
<ul>
<li>年满18岁,单身</li>
<li>抱着严肃的态度</li>
<li>真诚寻找另一半</li>
</ul>
</td>
</tr>
</table>
</form>
</body>
</html>
4.🍰练习四 引用google主页
需求说明：
- 用提供的素材实现google页引用，如图所示
效果图:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<iframe src="https://www.google.cn/" width=100% height="340px" scrolling="no"></iframe>
<table>
<tr>
<td width=40%></td>
<td>
<a href="实验三4_1.html" target="mainFrame">第一章 天下大事</a>
<a href="实验三4_2.html" target="mainFrame">第二章 合久必分</a>
<a href="实验三4_3.html" target="mainFrame">第三章 分久必合</a>
</td>
<td width=40%></td>
</tr>
</table>
<iframe src="实验三4_1.html" width="100%" height="500px" name="mainFrame" scrolling="no"></iframe>
</body>
</html>
5.🥖练习五 实现页面复用
需求说明：用提供的素材实现内容重用，效果如图所示，具体要求如下。
在给出的登录和注册页中重用贵美页面顶部和底部。
只需在login.htm和register.htm页面中加入语句
效果图:
代码:
在页面前后加上
<iframe src="head.htm" width=100% height="140px" scrolling="no"></iframe>
<iframe src="foot.htm" width=100% height="140px" scrolling="no"></iframe>
6.🍔练习六 制作北大青鸟宣传片
需求说明：
-
效果如图所示，具体要求如下:
* 视频必须在各主流浏览器上都支持
* 必须有控制视频播放的控件
* 视频循环播放
效果图:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>北大青鸟宣传片</title>
</head>
<body>
<video width=50% controls loop>
<source src="../meida/vedio.mp4" type="video/mp4" />
<source src="../meida/vedio.avi" type="video/avi" />
Your browser does not support the video tag.
</video>
</body>
</html>
