HTML 内容侧边栏

HTMLHTMLBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

介绍

在这个循序渐进的实验中,你将学习如何使用 HTML 的 <aside> 标签。该标签用于显示与主要内容相关但并非必需的内容。

注意:你可以在 index.html 中练习编码,并学习如何在 Visual Studio Code 中编写 HTML。请点击右下角的 'Go Live' 以在端口 8080 上运行 Web 服务。然后,你可以刷新 Web 8080 标签以预览网页。


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/TextContentandFormattingGroup(["`Text Content and Formatting`"]) html(("`HTML`")) -.-> html/LayoutandSectioningGroup(["`Layout and Sectioning`"]) html(("`HTML`")) -.-> html/AdvancedElementsGroup(["`Advanced Elements`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/BasicStructureGroup -.-> html/head_elems("`Head Elements`") html/TextContentandFormattingGroup -.-> html/text_head("`Text and Headings`") html/TextContentandFormattingGroup -.-> html/para_br("`Paragraphs and Line Breaks`") html/TextContentandFormattingGroup -.-> html/lists_desc("`Lists and Descriptions`") html/LayoutandSectioningGroup -.-> html/layout("`Layout Elements`") html/LayoutandSectioningGroup -.-> html/doc_flow("`Document Flow Understanding`") html/AdvancedElementsGroup -.-> html/inter_elems("`Interactive and Dynamic Elements`") subgraph Lab Skills html/basic_elems -.-> lab-70703{{"`HTML 内容侧边栏`"}} html/head_elems -.-> lab-70703{{"`HTML 内容侧边栏`"}} html/text_head -.-> lab-70703{{"`HTML 内容侧边栏`"}} html/para_br -.-> lab-70703{{"`HTML 内容侧边栏`"}} html/lists_desc -.-> lab-70703{{"`HTML 内容侧边栏`"}} html/layout -.-> lab-70703{{"`HTML 内容侧边栏`"}} html/doc_flow -.-> lab-70703{{"`HTML 内容侧边栏`"}} html/inter_elems -.-> lab-70703{{"`HTML 内容侧边栏`"}} end

设置 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> 标签。这些信息与主要内容相关,但并非必需。

<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> 标签有助于搜索引擎和浏览器理解哪些内容是主要的,哪些是非主要的。

您可能感兴趣的其他 HTML 教程