HTML <article> 标签

HTML5的<article>标签用于定义独立、自包含的内容,如论坛帖子、文章、博客条目等。该标签在Firefox、Opera、Chrome和Safari中得到支持,但在IE8及更早版本不支持。

实例

<article>
  <h1>Internet Explorer 9</h1>
  <p>Windows Internet Explorer 9(简称 IE9)于 2011 年 3 月 14 日发布.....</p>
</article>

浏览器支持

元素ChromeIEFirefoxSafariOpera
<article>6.09.04.05.011.1

Internet Explorer 9, Firefox, Opera, Chrome 以及 Safari 支持 <article> 标签。

注释:Internet Explorer 8 以及更早的版本不支持 <article> 标签。

定义和用法

<article> 标签规定独立的自包含内容。

一篇文章应有其自身的意义,应该有可能独立于站点的其余部分对其进行分发。

<article> 元素的潜在来源:

  • 论坛帖子
  • 报纸文章
  • 博客条目
  • 用户评论

HTML 4.01 与 HTML 5 之间的差异

<article> 标签是 HTML 5 中的新标签。

 

### 关于 `<article>` 标签的使用方法 `<article>` 是 HTML5 中的一个语义化标签,用于定义独立的内容块。这些内容可以被单独分发或重用,例如博客文章、新闻报道或其他具有独立意义的内容片段[^2]。 #### 基本语法结构 以下是一个基本的 `<article>` 标签使用的示例: ```html <article> <header> <h1>标题</h1> <p>作者:张三</p> <p>发布时间:<time datetime="2023-10-01">2023年10月1日</time></p> </header> <p>这里是文章的主要内容。</p> <p>继续描述更多细节...</p> <footer> <p>版权 © 2023 张三</p> </footer> </article> ``` 在这个例子中,`<article>` 包含了一个完整的文章结构,包括头部 (`<header>`) 和尾部 (`<footer>`)。其中还嵌套了时间标记 `<time>` 来表示发布日期[^5]。 #### 特殊功能与属性 除了作为容器外,`<article>` 还支持一些特殊的功能和属性: - **`pubdate` 属性**:当 `<time>` 标签带有 `pubdate` 属性时,它表明该时间为整个页面的出版日期。注意此属性仅适用于顶级 `<article>` 或全局范围内的 `<time>` 标记[^5]。 #### 实际应用场景 `<article>` 可以应用于多种场景,如下所示: - 博客平台上的每篇文章都可以封装在一个 `<article>` 标签内。 - 新闻网站中的单篇报道适合用 `<article>` 表达其独立性和完整性。 - 论坛帖子或者评论区也可以通过 `<article>` 组织成清晰的层次结构[^3]。 #### 结合样式设计 为了增强视觉效果,可以通过 CSS 对 `<article>` 添加自定义样式。例如设置边距、背景颜色等特性使内容更加突出: ```css article { border: 1px solid #ccc; padding: 20px; margin-bottom: 20px; background-color: #f9f9f9; } ``` 以上代码将给每个 `<article>` 元素增加浅灰色背景以及内外间距,使其与其他部分区分明显[^4]。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值