HTML 文章部分

HTMLHTMLBeginner
立即练习

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

介绍

语义化 HTML 是 Web 开发中的一个重要概念,因为它有助于搜索引擎和辅助技术更好地理解网站上的内容。<article> 标签是可用于创建语义化 HTML 的元素之一。在本实验中,我们将学习如何使用 <article> 标签,以及它如何帮助创建可访问的网页。

注意:你可以在 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/lists_desc("`Lists and Descriptions`") html/LayoutandSectioningGroup -.-> html/doc_flow("`Document Flow Understanding`") html/AdvancedElementsGroup -.-> html/inter_elems("`Interactive and Dynamic Elements`") subgraph Lab Skills html/basic_elems -.-> lab-70702{{"`HTML 文章部分`"}} html/head_elems -.-> lab-70702{{"`HTML 文章部分`"}} html/text_head -.-> lab-70702{{"`HTML 文章部分`"}} html/lists_desc -.-> lab-70702{{"`HTML 文章部分`"}} html/doc_flow -.-> lab-70702{{"`HTML 文章部分`"}} html/inter_elems -.-> lab-70702{{"`HTML 文章部分`"}} end

添加 HTML5 结构

在你喜欢的文本编辑器中创建一个 index.html 文件并保存。

将基本的 HTML5 结构添加到 index.html 文件中。这包括 <!DOCTYPE html> 声明、<html> 元素、<head> 元素和 <body> 元素。

<!doctype html>
<html>
  <head>
    <title>My Webpage</title>
  </head>
  <body>
    <!-- Add content here -->
  </body>
</html>

添加 <article> 标签

<body> 元素内添加一个 <article> 标签。此标签将包含网页的主要内容。<article> 标签有一个开始标签和一个结束标签。

<article>
  <!-- Add main content here -->
</article>

添加文章内容

<article> 标签内添加一些内容,这些内容将代表网页的主要内容。这可以是任何内容,例如一篇文章、一篇博客文章或产品描述。

<article>
  <h1>我的精彩文章</h1>
  <p>这是我的网页的主要内容。这是一篇非常精彩的文章,每个人都应该阅读。</p>
  <p>以下是一些原因:</p>
  <ul>
    <li>它写得很好</li>
    <li>它很有信息量</li>
    <li>它很有趣</li>
  </ul>
</article>

添加 <footer> 标签

<article> 标签内添加一个 <footer> 标签,以提供有关内容的附加信息。

<article>
  <h1>我的精彩文章</h1>
  <p>这是我的网页的主要内容。这是一篇非常精彩的文章,每个人都应该阅读。</p>
  <p>以下是一些原因:</p>
  <ul>
    <li>它写得很好</li>
    <li>它很有信息量</li>
    <li>它很有趣</li>
  </ul>
  <footer>
    <p>
      发布于 <time datetime="2022-09-15">2022年9月15日</time>,作者:
      <a href="#">John Doe</a>
    </p>
  </footer>
</article>

保存 index.html 文件并在浏览器中打开,查看包含联系信息的最终网页。

总结

使用 <article> 标签是创建语义化 HTML 并使你的网站更具可访问性的一种简单方法。通过使用 <article> 标签,你可以提供有关网页主要内容的附加信息,这有助于搜索引擎和辅助技术更好地理解你的网站。请记住始终验证你的 HTML 代码,以确保它没有错误并符合所有必要的标准。

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