本文展示了三个HTML代码示例，分别用于创建自荐信、太阳系行星数据的表格以及一个航班查询表单。每个示例都包含了基本的HTML标签和属性，如表格布局、图像、链接和输入元素。此外，还提到了网页内容结构的设计，包括头部导航、歌手信息展示和音乐列表。
一、实验目的
- 掌握HBuilder X的基本操作方法
- 理解并掌握HTML常用标记的使用。
- 实习题目
- 完成课本第47页实验3的内容。
代码：
<!--页面上方水平分隔线粗细为1px、颜色为#000fff,页面下方水平分割线粗细为1px、颜色为 #00ffff -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自荐信</title>
<style type="text/css">
body{
width:850px;
}
</style>
</head>
<body>
<h4 align ="center">自荐信</h4>
<hr width="100%" size="1" color="#000fff" align="center" >
<h4><pre>
尊敬的领导：
您好！
感谢您在百忙之中启阅我的自荐材料!相信此刻的停留不会让您失望!
我是计算机专业的本科毕业生。经过将近四年的大学学习和锻炼，与同龄人一样，我即将走上工作岗位，通过社会来
证实自己的知识和能力。为了找到一份符合自己特长和兴趣的工作，更好地发挥自己的才能，实现自己的人生价值，我
冒昧地写下这封信，希望能得到您的认可，能为贵公司服务。
此致
敬礼！
</pre>
</h4>
<hr width="100%" size="1" color="#00ffff" align="center">
<p align="center"><i>联系E-mail:zhang@163.com</i></p>
</body>
</html>截图：
2.完成“太阳系行星数据”表设计。（如下图所示）
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>太阳系行星数据</title>
</head>
<body>
<h4 align="center">太阳系行星的一些数据。（资料取自<a href="http://nssdc.gsfc.nasa.gov/planetary/factsheet/">NASA行星数据—公制</a>，
图片取自<a href="https://www.nasa.gov/multimedia/imagegallery/">NASA图片库</a></h4>
<table border="1"width="500"align="center"bordercolor="#3366ff">
<tr align="center">
<td> </td>
<td>名字</td>
<td>图片</td>
<td>质量（10<sup>24</sup>kg）</td>
<td>直径（km)</td>
<td>密度（kg/m<sup>3</sup>）</td>
<td>重力（m/s<sup>2</sup>）</td>
<td>天长（小时）</td>
<td>与太阳距离（10<sup>6</sup>km）</td>
<td>平均温度（°C）</td>
<td>卫星数量</td>
<td>备注</td>
</tr>
<tr align ="left">
<td rowspan="4" width ="600">类地行星</td>
<td align="center">水星</td>
<td><img src="img/mercury.jpg" alt="水星"></td>
<td>0.330</td>
<td>4,879</td>
<td>5427</td>
<td>3.7</td>
<td>4222.6</td>
<td>57.9</td>
<td>167</td>
<td>0</td>
<td>距太阳最近</td>
</tr>
<tr>
<td align="center">金星</td>
<td><img src="img/venus.jpg" alt="金星"></td>
<td>4.87</td>
<td>12,104</td>
<td>5243</td>
<td>8.9</td>
<td>2802.0</td>
<td>108.2</td>
<td>464</td>
<td>0</td>
<td></td>
</tr>
<tr>
<td align="center">地球</td>
<td><img src="img/earth.png" alt="地球"></td>
<td>5.97</td>
<td>12,756</td>
<td>5514</td>
<td>9.8</td>
<td>24.0</td>
<td>149.6</td>
<td>15</td>
<td>1</td>
<td>我们的世界</td>
</tr>
<tr>
<td align="center">火星</td>
<td><img src="img/mars.jpg" alt="火星"></td>
<td>0.642</td>
<td>6,792</td>
<td>3933</td>
<td>3.7</td>
<td>24.7</td>
<td>227.9</td>
<td>-65</td>
<td>2</td>
<td>红色星球</td>
</tr>
<tr align ="left">
<td rowspan="4">
<table width="100%"border="1"bordercolor="#33ff99">
<tr align ="center">
<td rowspan="2">类木行星</td>
<td>气巨星</td>
</tr>
<tr align="center">
<td>冰巨星</td>
</tr>
</table>
<td align="center">木星</td>
<td><img src="img/jupiter.jpg" alt="木星"></td>
<td>1898</td>
<td>142,984</td>
<td>1326</td>
<td>23.1</td>
<td>9.9</td>
<td>778.6</td>
<td>-110</td>
<td>67</td>
<td>太阳系最大</td>
</tr>
<tr>
<td align="center">土星</td>
<td><img src="img/saturn.jpg" alt="土星"></td>
<td>568</td>
<td>120,536</td>
<td>687</td>
<td>9.0</td>
<td>10.7</td>
<td>1433.5</td>
<td>-140</td>
<td>62</td>
<td></td>
</tr>
<tr>
<td align="center">天王星</td>
<td><img src="img/uranus.jpg" alt="天王星"></td>
<td>86.8</td>
<td>51,118</td>
<td>1271</td>
<td>8.7</td>
<td>17.2</td>
<td>2872.5</td>
<td>-195</td>
<td>27</td>
<td></td>
</tr>
<tr>
<td align="center">海王星</td>
<td><img src="img/neptune.jpg" alt="火星"></td>
<td>102</td>
<td>49,528</td>
<td>1638</td>
<td>11.0</td>
<td>16.1</td>
<td>4495.1</td>
<td>-200</td>
<td>14</td>
<td></td>
</tr>
<tr align ="left">
<td>矮行星</td>
<td align="center">冥王星</td>
<td><img src="img/pluto.jpg" alt="冥王星"></td>
<td>0.0146</td>
<td>2,370</td>
<td>2095</td>
<td>0.7</td>
<td>153.3</td>
<td>5906.4</td>
<td>-225</td>
<td>5</td>
<td>2006年降格，但<a href="http://www.usatoday.com/story/tech/2014/10/02/pluto-planet-solar-system/16578959/">尚存争议</a>。</td>
</tr>
</table>
</body>
</html>
截图：
3.制作如下图所示表单
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
<style type="text/css">
body{
width:400px;
}
</style>
</head>
<body>
<form>
<fieldset>
Departing from <input type="text" name="de"maxlength="20"size="20"placeholder="Airport code or city name"/><u><font color="blue">Nearby</font></u>
<br><br>
Destination <input type="text" name="de"maxlength="10"size="20"placeholder="Airport code or city name"/><u><font color="blue">Nearby</font></u>
<br><br>
Dates <input type="radio"name="dates"value="ss"/>Search exact dates
<br>
<input type="radio"name="dates"value="sss"/>See calendar of lowest fares
<br><br>
Departure date <input type="text" name="par"maxlength="10"size="10"placeholder="mm/dd/yyyy"/>
<br><br>
Return date <input type="text" name="par"maxlength="10"size="10"placeholder="mm/dd/yyyy"/>
<br><br>
Adults
<select name="aa" size=1>
<option value="a1">1</option>
</select>
<u color="#b266ff">Children, seniors</u>
<br><br>
<u><strong><font color="blue">Advanced search options</font></strong></u>
<br><br>
<p align="right"><input type="button" name="button"value="Search"/></p>
</fieldset>
</form>
</body>
</html>截图：
4．分析以下网页的内容，写出合适的HTML代码。说明：只要选取合适的HTML标记，完成内容结构即可，不关注显示效果。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>音乐页面</title>
<link rel="stylesheet" href="css/yinyue.css" type="text/css">
</head>
<body>
<div id="container" class="">
<div id="header" class="">
<div id="logo" class="inline_div">
<img src="img/logo.png" border="0" alt="" >
</div>
<div id="nav" class="inline_div">
<div class="navwrap">
<ul>
<li><a href="">首页</a></li>
<li><a href="">歌手</a></li>
<li><a href="">歌单</a></li>
<li><a href="">我的音乐</a></li>
</ul>
</div>
</div>
<div id="register" class="inline_div">
<input type="button" name="button" value="登录" onclick="javascript:alert('登录');"/>
</div>
<div id="search" class="inline_div">
<input type="text" size=15 placeholder="搜索歌曲/歌手"/>
<img src="img/search.png" border="0" alt="">
</div>
<br><br>
</div>
<div id="picture" class="">
<div id="left" class="">
<div style="width:150px; height:150px; border-radius:100%; overflow:hidden; transform:scale(1.8);">
<img src="img/JayChou.jpg" alt="">
</div>
</div>
<div id="right" class="">
<p id="p1">
周杰伦</p>
<p>
<pre id="p2">
周杰伦（Jay Chou），1979年1月18日出生于台湾省新北市，华语流行男歌手、演员、词曲创作人、MV及电影导
演编剧及制作人。2000年被吴宗宪发掘，发行首张个人专辑《Jay》。2001年发行专辑《... 更多介绍<img src="img/triangle.png" alt="">
<p id="p3" class="inline_div">单曲</p><p id="p4" class="inline_div">399 | </p><p id="p3" class="inline_div">专辑</p><p id="p4" class="inline_div">31</p>
<img src="img/play.png" alt=""> <img src="img/follow.png" alt="">
</pre>
</p>
</div>
</div>
<div id="main" class="">
<div id="up" class="">
<p class="inline_div">热门歌曲 </p><p id="p5" class="inline_div" ><font color="#FF9933">更多>></font></p>
<br><br>
<table width="1400" height="150px" border="1" rules="rows" align="center">
<tr align="left">
<th></th>
<th>歌曲</th>
<th>专辑</th>
<th>时长</th>
</tr>
<tr>
<td>1</td>
<td>不爱我就拉倒</td>
<td>不爱我就拉倒</td>
<td>04:05</td>
</tr>
<tr id="bg">
<td>2</td>
<td>等你下课(with 杨瑞代)</td>
<td>等你下课</td>
<td>04:30</td>
</tr>
<tr>
<td>3</td>
<td>惊叹号(Live)</td>
<td>周杰伦魔天伦世界巡回演唱会</td>
<td>03:16</td>
</tr>
<tr id="bg">
<td>4</td>
<td>最后的战役(Live)</td>
<td>周杰伦魔天伦世界巡回演唱会</td>
<td>04:09</td>
</tr>
<tr>
<td>5</td>
<td>龙拳(Live)</td>
<td>周杰伦魔天伦世界巡回演唱会</td>
<td>03:29</td>
</tr>
<tr id="bg">
<td>6</td>
<td>天台(Live)</td>
<td>周杰伦魔天伦世界巡回演唱会</td>
<td>01:48</td>
</tr>
<tr>
<td>7</td>
<td>打架舞(Live)</td>
<td>周杰伦魔天伦世界巡回演唱会</td>
<td>00:49</td>
</tr>
<tr id="bg">
<td>8</td>
<td>快门慢舞</td>
<td>周杰伦魔天伦世界巡回演唱会</td>
<td>02:03</td>
</tr>
<tr>
<td>9</td>
<td>哪里都是你(Live)</td>
<td>周杰伦魔天伦世界巡回演唱会</td>
<td>04:37</td>
</tr>
<tr id="bg">
<td>10</td>
<td>不能说的秘密(Live)</td>
<td>周杰伦魔天伦世界巡回演唱会</td>
<td>04:57</td>
</tr>
</table>
</div>
<div id="down" class="">
<h3>专辑</h3>
<hr>
<div id="down_1">
<div id="ddd" class="inline_div" >
<div class="inline_div" id="ddd"><img src="img/T002R300x300M000001CnPE31iJ899.jpg" width="150px" alt=""></div>
<div id="d2" class="inline_div">
不爱我就拉倒<br>
<p class="inline_div"><font color="#FF8000">语 言： </font></p><p class="inline_div">国语</p><br>
<p class="inline_div"><font color="#FF8000">发行时间： </font></p><p class="inline_div">2018-05-15</p><br>
<p class="inline_div"><font color="#FF8000">唱片公司： </font></p><p class="inline_div">杰威尔音乐有限公司</p>
</div>
</div>
<div id="sss" class="inline_div" >
<div class="inline_div"><img src="img/T002R300x300M000003bSL0v4bpKAx.jpg" width="150px" alt=""></div>
<div id="d2" class="inline_div">
等你下课<br>
<p class="inline_div"><font color="#FF8000">语 言： </font></p><p class="inline_div">国语</p><br>
<p class="inline_div"><font color="#FF8000">发行时间： </font></p><p class="inline_div">2018-01-18</p><br>
<p class="inline_div"><font color="#FF8000">唱片公司： </font></p><p class="inline_div">杰威尔音乐有限公司</p>
</div>
</div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<hr>
<div id="down_2">
<div id="ddd" class="inline_div">
<div class="inline_div"><img src="img/T002R300x300M000003RMaRI1iFoYd.jpg" width="150px" alt=""></div>
<div id="d2" class="inline_div">
周杰伦的床边故事<br>
<p class="inline_div"><font color="#FF8000">语 言： </font></p><p class="inline_div">国语</p><br>
<p class="inline_div"><font color="#FF8000">发行时间： </font></p><p class="inline_div">2016-06-24</p><br>
<p class="inline_div"><font color="#FF8000">唱片公司： </font></p><p class="inline_div">杰威尔音乐有限公司</p>
</div>
</div>
<div id="sss" class="inline_div">
<div class="inline_div"><img src="img/T002R300x300M000001uJFiE0tbGGa.jpg" width="150px" alt=""></div>
<div id="d2" class="inline_div">
英雄<br>
<p class="inline_div"><font color="#FF8000">语 言： </font></p><p class="inline_div">国语</p><br>
<p class="inline_div"><font color="#FF8000">发行时间： </font></p><p class="inline_div">2016-03-24</p><br>
<p class="inline_div"><font color="#FF8000">唱片公司： </font></p><p class="inline_div">杰威尔音乐有限公司</p>
</div>
</div>
</div>
<br><br><br><br><br><br><br> <br><br><br><br>
<hr>
<div id="down_3">
<div id="ddd" class="inline_div">
<div class="inline_div"><img src="img/T002R300x300M000004c8Md02WHHju.jpg" width="150px" alt=""></div>
<div id="d2" class="inline_div">
周杰伦魔天伦世界巡回演唱会<br>
<p class="inline_div"><font color="#FF8000">语 言： </font></p><p class="inline_div">国语</p><br>
<p class="inline_div"><font color="#FF8000">发行时间： </font></p><p class="inline_div">2016-05-10</p><br>
<p class="inline_div"><font color="#FF8000">唱片公司： </font></p><p class="inline_div">杰威尔音乐有限公司</p>
</div>
</div>
</div>
<br><br><br><br><br><br><br> <br><br><br><br>
<hr>
</div>
</div>
<div id="footer" class="">
<div id="fff">
<p>关于我们|用户协议|隐私政策|联系我们</p>
<p>布拿拿音乐版权所有©2018</p>
<br>
</div>
</div>
</div>
</body>
</html>css文件：
#container{background: #FFFFCC;}
#nav {width: 100%;font-size: 12px;background: top center repeat-x; float:center;}
.navwrap {width:978px; height: 40px; margin: 0 auto;
background: top center repeat-x;}
ul{width: 898px;height:40px;margin: 0;padding: 0 0 0 130px;list-style: none;}
li{float: left; font-size: 30px;}
a{line-height:40px;font-weight: bold;margin: 0 10px;color: #000000;text-decoration: none;}
a:hover {color: #ff3d3d;}
#logo{float: left}
.inline_div{ display:inline; }
#search{float:right;}
#register{float:right;}
#left{margin:20px 20px; width:200px; height:300px; float:left; line-height:1.5em; padding-left:20px;border-left:100px;}
#right{width:600px height:300px; float:center;}
#p1{font-size:50px;font-family:楷体;}
#p2{font-size:15px;font-family:楷体;}
#p3{font-size:20px;font-family:楷体;}
#p4{font-size:30px;font-family:楷体;}
#p5{font-size:15px;font-family:楷体;float:right;}
#up{
width:100%;
height:300px;
}
#down{
width:100%;
height:900px;
}
#bg{background:#E0E0E0;}
#d1{height:200px; width:50%; margin:10px 20px;}
#d2{height:200px; width:51%; margin:10px 20px;float:right;}
#ddd{float:left;}
#sss{float:right;}
#fff{padding:10px auto;text-align: center;color:#000000;background-color: #E0E0E0;}截图：
三、实验总结
1．熟练掌握了格式化文本与段落的方法，学会使用Div标记对页面进行分块。
2. 对于DIV图层的使用还不太熟悉，不能很好地进行内边距、外边距的设置。
3. 初步学会使用DIV+CSS进行页面布局。
扫一扫
4209
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
