| 實 驗 過 程 及 結 果 | 練習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>内嵌複用頁面 |