HTML 文章部分

HTMLBeginner
立即练习

介绍

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

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

添加 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>

添加
标签

<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>

<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 代码,以确保它没有错误并符合所有必要的标准。