元素。元素。此文章标签支持所有类型的浏览器：Google Chrome、opera、internet explorer 和 Edge。它们与一般部分的部分标签不同，而是充当独立的内容部分。
标签或
语法：
这里让我们看看这些标签元素的直接语法。
<article> <h1>…</h1> </article>
登录后复制
结构遵循开始标记。下一个前面的部分有
标签或 它形成一个小标题，给出内容的准确语义信息，并提供更丰富、更合适的有意义的信息。与其他标签一样，此文章标签也支持 HTML 属性，例如事件属性和相应类的全局属性。
<article> <h1>Introduction to CSS demo</h1> <p>CSS is a cascading Style Sheet helps to make a web page visually colored</p> </article>
登录后复制
文章标签在 HTML 中如何工作？
本节将讨论一个简单的文章标签（文档中的独立内容）并了解它如何在网页上工作。 HTML 5 引入了新的语义内容来丰富搜索引擎中的内容。它们确实支持内容的全局和事件属性。标签的内容被视为独立于单页上其他内容部分的文档。他们可以在页面上定义或展示文章的名称、作者信息和发布日期。这篇标签可以用作单个元素和多个
具有单个文章元素的文档解释了文档的主要内容。它具有单独的独特的单个内容，而在多个的情况下，它具有单独的内容。标签，一个页面有各种内容；换句话说，它们是等价的
。元素。 的主要目的是标签的作用是通过减少
的工作来帮助 HTML 代码清理内容。元素。
实现 HTML 标签的示例
以下是实现 HTML 标签的示例：
示例#1
使用单个
代码：
<!DOCTYPE html> <html> <head> <title>HTML Article Tag demo</title> </head> <body> <article> <h2>python</h2> <p>Python is a new programming language</p> </article> </body> </html>
登录后复制
输出：
示例#2
一个示例说明如何使用属性
与CSS样式。它利用 CSS 在网络浏览器中良好地显示。代码：
<!DOCTYPE html> <head> <title>Demo of article</title> </head> <body> <article style="width: 200px; border: 1px solid black; padding: 8px; border-radius: 8px; margin:6px;"> <article> <address> Written by xxxxxx.<br> refer me at: <br> https://www.educba.com/ <br> </address> </article>
登录后复制
下面的输出向访问者显示了带有链接地址的网页。
输出：
示例#3
示例演示如何使用显示日期和时间。
代码：
<!DOCTYPE html> <head> <title>Demo of article tag</title> </head> <body> <article style="width: 200px; border: 1px solid black; padding: 8px; border-radius: 8px; color :green; margin:6px;"> <article class="blog_post"> <p>My first article post. Stay tuned</p> <footer> <p> Displayed on <time datetime="2019-12-24 20:00"> Dec 23</time> by tutor </p> </footer> </article>
登录后复制
输出：
示例#4
使用多篇文章的示例。下面的代码使用语义元素
来指定 HTML 内容中最重要的标头。
代码：
<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>FEDERAL HOLIDAYS IN USA</h1>
<article class="day">
<h2>01 JAN 2020</h2>
<p>NEW YEAR DAY.</p>
<p> martin luther day </p>
</article>
<article class="day">
<h2>18 feb 2020</h2>
<p>Presidents day.</p>
</article>
<article class="day">
<h2>05 May 2020</h2>
<h2>27 May 2020</h2>
<p>mothers day.</p>
<p>memorial day.</p>
</article>
</article>登录后复制
输出：
示例#5
我们将看到标签由几个
代码：
<style>
.art {
margin: 5;
padding: .3rem;
background-color: #DC143C;
font: 1rem 'italic', sans-serif;
}
</style>
<article class="art">
<section id="aim">
<p>[Main Objective]</p>
</section>
<section id="main_concept">
<p>[Content text]</p>
</section>
<section id="link page">
<ul>
<li><a href="tt.html">first link page</a></li>
<li><a href="th.html">second link page</a></li>
</ul>
</section>
</article>登录后复制
输出：
示例#6
代码：
<article> <header> <h1>On this page</h1> <p>Published on 15th DEC 2019</p> </header> <p>WELCOME</p> <p> EXAMPLES TOPIC</p> <p>ILLUSTRATION</p> <section> <h2>Related topics</h2> <article> <footer> <p>published by Mark winston</p> </footer> <p>This was a great article</p> </article> <article> <footer> <p>Posted by: Casey Brock</p> </footer> <p>What do you think about the topics with the comments please</p> </article> </section> </article>
登录后复制
这是一个全局标题，其中包含任何具有相关内容的文档的网页标题。接下来是标签，链接到特定网站的页脚，并通过在页脚部分提供公司详细信息来有利于 SEO。最后，真正的使用
输出：
示例#7
借助
代码：
<!DOCTYPE html> <head> <title>Demo of article tag</title> </head> <main> <article> <h1>Cloud computing Basics</h1> <p>Used for data storage.</p> <section> <h2>Basic and syntax part</h2> <p>With an example.</p> </section> <section> <h2>Types of cloud computing services</h2> <p>Private , public , hybrid</p> </section> </article> </main>
登录后复制
输出：
结论
总之，本文介绍了在网页上使用的几个指南。它们是在单个网页中包含文档（它们自行感知）或内容的绝佳选择，并且它们被认为是 HTML5 下的完美语义元素。作为一个独立的上下文，它已在 html5 中使用，因为尖端网站已开始充分利用此标签，用户在发布博客和杂志等内容时会得到很好的回报。
