搜文章
推荐 原创 视频 Java开发 iOS开发 前端开发 JavaScript开发 Android开发 PHP开发 数据库 开发工具 Python开发 Kotlin开发 Ruby开发 .NET开发 服务器运维 开放平台 架构师 大数据 云计算 人工智能 开发语言 其它开发
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作为英文单词有文章的意思

奔月教程 版权所有


点击下方“阅读原文”可亲试效果



浏览器支持

IE Firefox Chrome Safari Opera
<article> | HTML5 文章标签 <article> | HTML5 文章标签

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



全局属性


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



事件属性


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



更多示例


示例一:单独使用<article>标签
<!DOCTYPE html>
<html>

<head>
<title>HTML5 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

春节

中国最重要的传统节日


点击下方“阅读原文”可亲试效果

版权声明:本站内容全部来自于腾讯微信公众号,属第三方自助推荐收录。《<article> | HTML5 文章标签》的版权归原作者「摩登教程」所有,文章言论观点不代表Lambda在线的观点, Lambda在线不承担任何法律责任。如需删除可联系QQ:516101458

文章来源: 阅读原文

相关阅读

关注摩登教程微信公众号

摩登教程微信公众号:MD_Tutorial

摩登教程

手机扫描上方二维码即可关注摩登教程微信公众号

摩登教程最新文章

精品公众号随机推荐