Lambda在线 > 摩登教程 > <article> | HTML5 文章标签

<article> | HTML5 文章标签

摩登教程 2021-01-14

定义与用法

“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 的事件属性。

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>