0
点赞
收藏
分享

微信扫一扫

HTML设计详解_word导入体验

古月无语 2022-05-17 阅读 20
htmlide北大青鸟Html/CSS前端开发
加载失败

实​

验​

过​

程​

及​

结​

果​

​

练习1​

​

效果图:​

HTML设计详解_word导入体验_ide​

​

代码:​

​

<!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设计详解_word导入体验_html_02​

代码:​

<!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设计详解_word导入体验_ide_03​

代码:​

<!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设计详解_word导入体验_html_04​

代码:<!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设计详解_word导入体验_ide_05​

​

代码:​

​

在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设计详解_word导入体验_html_06​

代码:<!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>内嵌复用页面​

​

举报

相关推荐

word导入

dockergitgithub

word导入-直接导入

dockergitgithub

Word导入测试

dockergitgithub

word导入测试--非导入文章

word

dedecms支持Word导入

官网图片上传html.Net编程语言

MapReduce #导入Word文档图片#

mapreducehadoop云服务云计算

dedecms支持Word内容导入

htmljavascriptcss.Net编程语言

dedecms支持Word图片导入

服务器jsonsed.Net编程语言

帝国CMS导入Word文档

WordCMS网站管理HarmonyOS后端开发

dedecms支持Word图文导入

服务器jsonsed.Net编程语言
0 条评论
加载失败