介绍
在这个循序渐进的实验中,你将学习如何使用 HTML 的 <aside>
标签。该标签用于显示与主要内容相关但并非必需的内容。
注意:你可以在
index.html
中练习编码,并学习如何在 Visual Studio Code 中编写 HTML。请点击右下角的 'Go Live' 以在端口 8080 上运行 Web 服务。然后,你可以刷新 Web 8080 标签以预览网页。
在这个循序渐进的实验中,你将学习如何使用 HTML 的 <aside>
标签。该标签用于显示与主要内容相关但并非必需的内容。
注意:你可以在
index.html
中练习编码,并学习如何在 Visual Studio Code 中编写 HTML。请点击右下角的 'Go Live' 以在端口 8080 上运行 Web 服务。然后,你可以刷新 Web 8080 标签以预览网页。
打开你的代码编辑器并创建一个名为 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>
标签。这些信息与主要内容相关,但并非必需。
<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>
标签有助于搜索引擎和浏览器理解哪些内容是主要的,哪些是非主要的。