| 实 验 过 程 及 结 果 | 练习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 效果图: 代码:<!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页面中<body></body>中最开始和最后面加上 <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> |
| 实 验 总 结 | 通过这次实验,练习了1.使用表格实现数据展示2.使用媒体元素在网页中播放音视频3.使用HTML5结构元素进行网页布局4.使用<iframe>内嵌复用页面 |