接下来，让我们着手完成HTML网页制作作业的下一个步骤：构建信息丰富的导航栏。第一步和上一次一样，我们需要创建一个新的空白文档，并输入基础代码。
首先，修改标题为“信息丰富的导航栏”。在效果图上，你可以看到一个醒目的“探索菜单”，这需要我们学习一个新标签：<ul> 与 <li>。
在 <body> 之中插入以下代码：
<ul>
<li>首页</li>
<li>关于我们</li>
<li>产品与服务</li>
<li>新闻动态</li>
<li>联系方式</li>
</ul>
保存文件，并在浏览器中查看：看到那些有序的列表了吗？这是由于 <ul> 与 <li> 标签的神奇力量！
这看起来与效果图相符吧？不过——导航栏可能缺少了一些样式？
没问题！除了基本的列表功能，我们还可以通过添加标签来进一步设计它。
在 <li> 标签内，我们可以加入类名（class），以便以后用CSS进行额外装饰。例如：
<ul>
<li class="menu-item">首页</li>
<li class="menu-item">关于我们</li>
<li class="menu-item">产品与服务</li>
<li class="menu-item">新闻动态</li>
<li class="menu-item">联系方式</li>
</ul>
接下来，在 <head> 标签内加入CSS代码：
.menu-item {
display: inline-block;
margin-right: 20px;
}
.menu-item:hover {
text-decoration: underline;
}
保存一下。现在再打开浏览器：哇！导航栏变得更有魅力了。
请注意，在 <ul> 与 <li> 标签之间可以插入图片或图标，让列表更加吸引人。
总结：<ul> 与 <li> 标签是制作有序列出信息的理想选择。通过添加类名和CSS样式，你可以为导航栏增添更多个性化特点。
现在，你的网页制作作业开始展现出丰富的信息结构了。记住，善于运用各种标签和属性，你会越做越好！
在下一步中，我们将探究如何在HTML文档中插入图片和链接。这将让我们的网页内容更加丰富，同时增加用户互动性。
首先，我们将在HTML页面中插入一张产品图像。找到你希望使用的图片，保存到合适的位置。
然后，使用以下代码：
<img src="path/to/your/image.jpg" alt="描述图片内容的文本">
其中，src 属性包含了图片的路径和文件名，而 alt 属性提供了图片内容的一个文本替代品。这对于搜索引擎优化（SEO）是非常有帮助的。
现在将此代码片段添加到你的页面中的合适位置：
<div class="product-image">
<img src="product.jpg" alt="我们的产品示例">
</div>
保存文件并打开浏览器，查看效果：图片出现在你指定的位置了吗？
下一步是在HTML文档中插入一个链接。这是将用户引导至其他页面的简单方式。
使用下面这样的代码：
<a href="http://www.example.com">链接文本</a>
将 href 属性的值替换为你要链接的目标网页地址，而 <a> 标签内的文本则是点击时显示的链接文字。
尝试在你的页面中添加一个示例链接：
<div class="read-more-link">
<a href="more-information.html">了解我们的服务</a>
</div>
保存并查看效果：当鼠标悬停在这段文字上时，是否有链接图标出现？
总结：HTML文档中的 <img> 与 <a> 标签是添加图像和链接的强力工具。合理运用这些标签可以显著增强网页用户体验。
以上步骤为你构建了一个基础但内容丰富的网页制作作业。通过不断学习和实践，你将为自己的专业技能感到自豪！记住：每次实验新技能都是一次小小的成功！继续加油吧！
