介绍
在这个循序渐进的实验中，你将学习如何使用 HTML 的 <aside> 标签。该标签用于显示与主要内容相关但并非必需的内容。
注意：你可以在
index.html中练习编码，并学习如何在 Visual Studio Code 中编写 HTML。请点击右下角的 'Go Live' 以在端口 8080 上运行 Web 服务。然后，你可以刷新 Web 8080 标签以预览网页。
设置 HTML 页面
打开你的代码编辑器并创建一个名为 index.html 的新文件，然后添加以下基本的 HTML 结构：
<!doctype html>
<html>
<head>
<title>HTML Aside 标签教程</title>
</head>
<body></body>
</html>创建主要内容
在 <body> 标签内，让我们创建一些主要内容。添加以下代码：
<h1>欢迎来到我的博客！</h1>
<p>
在这篇文章中，我们将探讨使用 HTML5 的好处。HTML5
是一种用于在万维网上构建和呈现内容的标记语言。
</p>添加侧边栏内容
现在让我们添加一个 <aside> 标签，其中将包含一些与主要内容相关的附加信息。在步骤 2 的段落下方添加以下代码：
<aside>
<h2>关于本文</h2>
<p>
本文由 John Doe 撰写，他是一名拥有超过 8 年行业经验的 Web 开发人员。他对 Web
开发充满热情，并喜欢与他人分享他的知识。
</p>
</aside>通过添加上述代码，我们创建了一个包含文章相关信息的 <aside> 标签。这些信息与主要内容相关，但并非必需。
为
现在添加以下 CSS 来为 <aside> 标签设置一些样式：
<style>
aside {
width: 300px;
margin-left: 30px;
padding: 10px;
background-color: #f2f2f2;
border: 1px solid #ccc;
}
</style>通过添加这段 CSS，我们为 <aside> 标签设置了一些样式。宽度设置为 300px，左边距设置为 30px，并具有浅灰色背景和边框。
为文章添加额外内容
让我们为文章添加更多内容，以便更好地展示 <aside> 标签的使用方式。在 <aside> 标签下方添加以下代码：
<p>
HTML5 是 HTML
语言的重要更新。它提供了新的特性和功能，使开发者能够更轻松地创建网页和应用程序。HTML5
的一些新特性包括：
</p>
<ul>
<li>新的语义标签，如 header、footer、article 和 section</li>
<li>通过 video 和 audio 标签增强的多媒体支持</li>
<li>通过 nav 和 main 标签提升的可访问性</li>
</ul>通过添加上述代码，我们为主文章添加了一些额外内容。它包含一个无序列表，其中列出了关于 HTML5 的一些信息。
总结
在这个逐步实验中，我们学习了如何使用 HTML <aside> 标签来添加与网页主要内容相关的附加内容。我们还学习了如何使用 CSS 为该标签添加一些样式。使用 <aside> 标签有助于搜索引擎和浏览器理解哪些内容是主要的，哪些是非主要的。
