这是我参与「第五届青训营 」伴学笔记创作活动的第 7天。
概要：尝试编写一些学员手册中提供的案例来巩固加深HTML中的知识点。
一、题目要求：
1.构建内容丰富的网页
本项目的任务是为“观鸟网”的主页添加结构化的元素，使其可以进行布局设计。需要添加的有：
- 页眉（
<header>），应充满页面宽度，并包含网站主标题、网站 logo 和导航栏菜单。样式生效后标题和 logo 应显示在在两边，导航栏在它们下方。 - 主内容区域（
<main>），应有两栏，其中主区域显示欢迎信息，侧边栏包含一些缩略图。 - 页脚（
<footer>），包含版权信息和鸣谢。
你应该为以下内容添加合适的标签：
- 页眉
- 导航菜单
- 主要内容
- 欢迎语
- 图片侧边栏
- 页脚
还应：
- 添加一个
<link>元素把现成的 CSS 文件引入页面。
2.构建行星数据表格
你在学校工作; 目前，你的学生正在学习太阳系的行星，然后你想为他们提供一份简单的易于追踪的数据集合，来查找有关行星的数字和情况。一张 HTML 数据表将是理想的，你需要先获得可用的数据，然后把它变成一张表格，跟着下面的步骤。
二、我实现的效果：
1.构建内容丰富的网页
2.构建行星数据表格
三、HTML实现代码：
1.构建内容丰富的网页
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>观鸟网</title>
<link href="https://fonts.googleapis.com/css?family=Long+Cang|Noto+Sans+SC:300" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<header>
<h1>观鸟网</h1>
<img src="dove.png" alt="一张鸽子剪影图片">
</header>
<nav>
<ul>
<li><span>主页</span></li>
<li><a href="#">开始</a></li>
<li><a href="#">图片</a></li>
<li><a href="#">设备</a></li>
<li><a href="#">论坛</a></li>
</ul>
</nav>
<main>
<article>
<h2>欢迎</h2>
<p>欢迎访问观鸟网虚拟站点。如果这是一个真实的网站，那么它就是观鸟爱好者的理想聚集地。无论你是一名期望学习观鸟知识的新手，还是一位希望分享体会、经验和图片的观鸟老手。</p>
<p>时不我待！赶快带齐装备，关上电脑，去拥抱美丽的大自然吧！</p>
</article>
<aside>
<h2>收藏照片</h2>
<a href="favorite-1.jpg"><img src="favorite-1_th.jpg" alt="一只体型小巧的鸟，羽毛蓝绿色，爪黑白相间，黑色的喙细且锋利。点击缩略图查看完整照片。"></a>
<a href="favorite-2.jpg"><img src="favorite-2_th.jpg" alt="一只美丽的孔雀的上半身图片，它的颈上覆盖蓝色的羽毛，有浅色的喙和蓝色的冠。点击缩略图查看完整照片。"></a>
<a href="favorite-3.jpg"><img src="favorite-3_th.jpg" alt="一只大鸟的上半身图片，羽毛白色，浅色的喙细长而弯曲。点击缩略图查看完整照片。"></a>
<a href="favorite-4.jpg"><img src="favorite-4_th.jpg" alt="一只成年鹈鹕，羽毛大多为白色，背部和腹部有少许黑色羽毛，又长又直的喙呈黄色，喙的下方有一个喉囊可以暂时储存食物。点击缩略图查看完整照片。"></a>
</aside>
</main>
<footer>
<p>本虚拟站点遵守 CC0 协议，所有内容均可任意修改和复用。原始版本由 Chris Mills 于 2016 年编写。Roy Tian 于 2019 年汉化。</p>
<p><a href="http://game-icons.net/lorc/originals/dove.html">鸽子图标</a> 由 Lorc 绘制。</p>
</footer>
</body>
</html>
2.构建行星数据表格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title >太阳系行星数据</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<h1>太阳系行星数据</h1>
<table>
<caption>
太阳系中行星的一些数据。（资料取自<a href="http://nssdc.gsfc.nasa.gov/planetary/factsheet/">NASA 行星数据 - 公制</a>，图片取自<a href="https://www.nasa.gov/multimedia/imagegallery/">NASA 照片库</a>。）
</caption>
<colgroup>
<col span="2">
<col style="border: 2px solid black">
<col span="10">
</colgroup>
<thead>
<tr>
<th colspan="2"> </th>
<th>名字</th>
<th>质量 (10<sup>24</sup>kg)</th>
<th>直径 (km)</th>
<th>密度 (kg/m<sup>3</sup>)</th>
<th>重力 (m/s<sup>2</sup>)</th>
<th>天长 (hours)</th>
<th>与太阳距离 (10<sup>6</sup>km)</th>
<th>平均温度 (°C)</th>
<th>卫星数量</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2" rowspan="4">类地行星</td>
<td>水星</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>金星</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>地球</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>火星</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>
<td colspan="1" rowspan="4">类木行星</td>
<td colspan="1" rowspan="2">气巨星</td>
<td>木星</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>土星</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 colspan="1" rowspan="2">冰巨星</td>
<td>天王星</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>海王星</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>
<td colspan="2" rowspan="1">矮巨星</td>
<td>冥王星</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>
</tbody>
<tfoot>
</tfoot>
</table>
</body>
</html>
三、个人练习总结：
总结常用标签：
- ⽂件标签：构成html最基本的标签
- html:html⽂档的根标签
- head：头标签。⽤于指定html⽂档的⼀些属性。引⼊外部的资源
- title：标题标签。
- body：体标签
- ⽂本标签：和⽂本有关的标签 注释：<!-- 注释内容 -->
- <h1> to <h6>：标题标签
- <p>：段落标签
- <br>：换⾏标签
- <hr>：展⽰⼀条⽔平线
- <b>：字体加粗
- <i>：字体斜体
- <font>:字体标签
- <center>:⽂本居中 属性：
- color：颜⾊
- width：宽度
- size：⾼度
- align：对其⽅式
- center：居中， left：左对齐， right：右对齐
- size：⼤⼩
- face：字体
- 图⽚标签：
- img：展⽰图⽚
属性：
- src：指定图⽚的位置
- 语法：<img src="图⽚⽂件路径" />
- 列表标签
- 有序列表： ol: ， li:
- ⽆序列表： ul:， li:
- 链接标签
- a:定义⼀个超链接
属性：
- href：指定访问资源的URL(统⼀资源定位符)
- target：指定打开资源的⽅式
- self:默认值，在当前页⾯打开
- blank：在空⽩页⾯打开
语法： <!--超链接 a-->
- div和span
- div:每⼀个div占满⼀整⾏。块级标签
- span：⽂本信息在⼀⾏展⽰，⾏内标签 内联标签
- 语义化标签
- <header>：页眉
- <footer>：页脚
- 表格标签
- table：定义表格
- width：宽度
- border：边框
- cellpadding：定义内容和单元格的距离
- cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为⼀条、
- bgcolor：背景⾊
- align：对齐⽅式
- tr：定义⾏
- bgcolor：背景⾊
- align：对齐⽅式
- td：定义单元格
- colspan：合并列
- rowspan：合并⾏
- th：定义表头单元格
- <caption>：表格标题
- <thead>：表⽰表格的头部分
- <tbody>：表⽰表格的体部分
- <tfoot>：表⽰表格的脚部分
- 表单标签
- from:⽤于定义表单的。可以定义⼀个范围，范围代表采集⽤户数据的范围
- 属性：action：指定提交数据的URL
- method:指定提交⽅式：get、post
- 表单项中的数据要想被提交：必须指定其name属性 表单项标签：
- input：可以通过type属性值，改变元素展⽰的样式
- type属性：
- text：⽂本输⼊框，默认值
- placeholder：指定输⼊框的提⽰信息，当输⼊框的内容发⽣变化，会⾃动清空提⽰信息
- password：密码输⼊框
- radio:单选框
- checkbox：复选框
- file：⽂件选择框
- hidden：隐藏域
- submit：提交按钮
- label：指定输⼊项的⽂字描述信息
- select: 下拉列表
- textarea：⽂本域
