0
点赞
收藏
分享

微信扫一扫

HTML基本标签（三）

女侠展昭 2022-05-25 阅读 135
htmlide北大青鸟Html/CSS前端开发













实

验

内

容


实验内容：

  1. 练习——制作四大美女页面需求说明：使用表格标签制作四大美女页面，如图1.1所示。
    HTML基本标签（三）_html
    图1.1 四大美女页
  2. 练习——表格分组标签的使用需求说明：实现一个按地点和时间汇总的年终报表，如图1.2所示。
    HTML基本标签（三）_ide_02
    图1.2 年终报表
  3. 练习——制作世纪佳缘页面需求说明：使用表格布局表单实现世纪佳缘页面，如图1.3所示。
    HTML基本标签（三）_ide_03
    图1.3世纪佳缘页
  4. 练习——引用google主页。需求说明：用提供的素材实现google页引用，如图1.4所示。
    HTML基本标签（三）_ide_04
    图1.4google页的引用
  5. 练习——<iframe>实现页面复用需求说明：用提供的素材实现内容重用，效果如图1.5所示，具体要求如下。
  1. 在给出的登录和注册页中重用贵美页面顶部和底部。
  2. 只需在login.htm和register.htm页面中加入<iframe>语句。HTML基本标签（三）_ide_05
    图1.5 用<iframe>实现页面重用
  1. 练习—制作北大青鸟宣传片

需求说明：效果如图1.6所示，具体要求如下。

  1. 视频必须在各主流浏览器上都支持
  2. 必须有控制视频播放的控件
  3. 视频循环播放

HTML基本标签（三）_html_06

图1.6 北大青鸟宣传片



实

验

过

程

及

结

果


练习1


效果图:

HTML基本标签（三）_html_07


代码:


<!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


效果图:

HTML基本标签（三）_ide_08

代码:

<!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



效果图:

HTML基本标签（三）_北大青鸟_09

代码:

<!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


效果图:


HTML基本标签（三）_ide_10

代码:<!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


效果图:


HTML基本标签（三）_北大青鸟_11


代码:


在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


效果图:

HTML基本标签（三）_html_12

代码:

<!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>内嵌复用页面



举报

相关推荐

HTML 基本标签

经验分享面试

HTML——基本标签

leetcodec语言算法

html基本标签

html前端java

HTML基本标签

htmlpostman前端

HTML-基本标签

操作系统html前端

HTML基本标签（一）

html无法显示新闻资讯Html/CSS前端开发

HTML|网页基本标签

html网页设计h5二级Html/CSS前端开发

基本结构标签(HTML)

html搜索虚拟化云计算

HTML基本标签学习笔记

html5

学习博客：【HTML】基本标签、图像标签及链接标签

学习html5
0 条评论