定义和用法
<article>是 HTML5 中引入的一个语义化元素，用于表示文档、页面、应用或网站中的独立可分配或可复用的内容。
<article>中的文章应该能够独立理解，且可以独立于整个站点进行分发。
<article>元素的适用场景：论坛帖子、博客文章、新闻故事、评论、产品卡片、交互式小部件等。
<article>元素的基本语法：
<article>
<h2>文章标题</h2>
<p>文章内容...</p>
</article>注意：在浏览器中，<article>元素本身不会呈现任何特殊的样式。但是，你可以使用 CSS 样式化<article>元素
实例推荐
接下来用多种实例演示<article>标签的用法，来深化您对<article>的理解。
1. 博客文章场景下的实例
<article class="blog-post">
<header>
<h2>如何学习HTML5</h2>
<p>作者: <span class="author">张三</span></p>
<time datetime="2023-05-15">2023年5月15日</time>
</header>
<section class="content">
<p>HTML5是最新的HTML标准，提供了许多新特性...</p>
<!-- 更多内容 -->
</section>
<footer>
<p>标签: <a href="#">HTML5</a>, <a href="#">Web开发</a></p>
</footer>
</article>2. 评论场景下的实例
<article class="comment">
<h3>用户评论</h3>
<div class="comment-meta">
<span class="user">李四</span>
<time datetime="2023-05-16T14:30">2023年5月16日 14:30</time>
</div>
<div class="comment-content">
<p>这篇文章很有帮助，谢谢分享！</p>
</div>
</article>3. 嵌套使用场景下的实例
<article class="blog-post">
<!-- 博客内容 -->
<section class="comments">
<h3>评论</h3>
<article class="comment">
<!-- 评论内容 -->
</article>
<article class="comment">
<!-- 另一个评论 -->
</article>
</section>
</article>与 <section> 的区别
<article>用于独立的内容块<section>用于对相关内容进行分组，内容不一定独立
全局属性
<article>标签还支持全局属性，有关全局属性的更多信息。
事件属性
<article>标签还支持事件属性，有关事件属性的更多信息。
默认的 CSS 设置
大多数浏览器将使用以下默认值显示<article>元素：
article {
display: block;
}浏览器支持
表中的数字注明了首个完全支持该元素的浏览器版本。
 |
 |
 |
 |
 |
| 6.0 | 9.0 | 4.0 | 5.0 | 11.1 |
评论区 0
发表评论
教程介绍
HTML 参考手册涵盖 HTML 元素、属性、事件等详细解析，助您快速检索 HTML 使用方法 。
50
章节
51
阅读
0
评论
反馈提交成功
感谢您的反馈，我们将尽快处理您的反馈