<article> | HTML5 文章标签的定义与用法

由 hcduguo

定义与用法

  • “article”作为英文单词有“文章”的意思。
  • <article>标签一般用于文档、页面、应用程序中独立的内容板块。可以是论坛帖子、杂志或报纸文章、博客条目、用户提交的评论、交互式小部件或小工具，或任何其他独立的内容。
  • <article>标签中的内容通常有它自己的标题，甚至有时候还有自己的脚注。它可以嵌套使用，但是一般需要外部内容和内部内容有关系。
  • <article>标签是html5新增标签。

语法格式

<article>……</article>

示例代码

<!DOCTYPE html>
<html>
    
    <head>
        <meta charset="utf-8">
        <title>奔月教程(Runoon.com)</title>
    </head>
    
    <body>
        <article>
            <header>
                <h1>html 中 article 标签详细介绍</h1>
                <p>发表日期：2019-04-15</p>
                <p>article作为英文单词有文章的意思</p>
            </header>
            <footer>
                <p>奔月教程 版权所有</p>
            </footer>
            </article>
    </body>

</html>

效果展示：

html 中 article 标签详细介绍

发表日期：2019-04-15

article作为英文单词有文章的意思

奔月教程 版权所有

亲自试试

浏览器支持

主流浏览器都支持 <article> 标签，IE 8 或更早版本的 IE 浏览器不支持 <article> 标签。

全局属性

<article> 标签支持 HTML 的全局属性。

事件属性

<article> 标签支持 HTML 的事件属性。

更多示例

示例一：单独使用<article>标签
<!DOCTYPE html>
<html>
    
    <head>
        <title>HTML Article 标签示例</title>
    </head>
    
    <body>
        <article>
            <h2>Python</h2>
            <p>Python是一门新的编程语言</p>
        </article>
    </body>

</html>

效果展示：

Python

Python是一门新的编程语言

示例二：使用article标签进行分组
<style>
    .JAN { margin: 1; padding: .2rem; background-color: #D2691E; font: 2rem 'Fira Sans', sans-serif; } 
    .JAN > h1,.day { margin: .4rem; padding: .2rem; font-size: 1rem; } .day { background: border-box no-repeat gray; } 
    .day > h2, .day > p { margin: .2rem; font-size: 1rem; }
</style>
<article class="JAN">
    <h1>2021年节假日</h1>
    <article class="day">
        <h2>2021-1-1</h2>
        <p>元旦</p>
        <p>新年第一个假期</p>
    </article>
    <article class="day">
        <h2>2021-1-20</h2>
        <p>腊八节</p>
        <p>农历传统节日</p>
    </article>
    <article class="day">
        <h2>2021-2-11</h2>
        <h2>春节</h2>
        <p>中国最重要的传统节日</p>
    </article>
</article>

效果展示：

2021年节假日

2021-1-1

元旦

新年第一个假期

2021-1-20

腊八节

农历传统节日

2021-2-11

春节

中国最重要的传统节日

亲自试试

相关