介绍
语义化 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>
添加 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 代码，以确保它没有错误并符合所有必要的标准。
