时间：2023-09-29 08:00:02 | 来源：网站运营
时间：2023-09-29 08:00:02 来源：网站运营
HTML学习案例练习：
在线咨询
<header>），应充满页面宽度，并包含网站主标题、网站 logo 和导航栏菜单。样式生效后标题和 logo 应显示在在两边，导航栏在它们下方。<main>），应有两栏，其中主区域显示欢迎信息，侧边栏包含一些缩略图。<footer>），包含版权信息和鸣谢。<link> 元素把现成的 CSS 文件引入页面。<!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>由于文章字数有限，所以不添加到该文章中。<!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> 关键词：练习,学习
