語法：
這里讓我們看看這些標(biāo)簽元素的直接語法。
<article> <h1>…</h1> </article>
結(jié)構(gòu)遵循開始標(biāo)記。下一個前面的部分有
標(biāo)簽或 它形成一個小標(biāo)題，給出內(nèi)容的準(zhǔn)確語義信息，并提供更豐富、更合適的有意義的信息。與其他標(biāo)簽一樣，此文章標(biāo)簽也支持 HTML 屬性，例如事件屬性和相應(yīng)類的全局屬性。
<article> <h1>Introduction to? CSS demo</h1> <p>CSS is a cascading Style Sheet helps to make a web page visually colored</p> </article>
文章標(biāo)簽在 HTML 中如何工作？
本節(jié)將討論一個簡單的文章標(biāo)簽（文檔中的獨立內(nèi)容）并了解它如何在網(wǎng)頁上工作。 HTML 5 引入了新的語義內(nèi)容來豐富搜索引擎中的內(nèi)容。它們確實支持內(nèi)容的全局和事件屬性。標(biāo)簽的內(nèi)容被視為獨立于單頁上其他內(nèi)容部分的文檔。他們可以在頁面上定義或展示文章的名稱、作者信息和發(fā)布日期。這篇標(biāo)簽可以用作單個元素和多個
具有單個文章元素的文檔解釋了文檔的主要內(nèi)容。它具有單獨的獨特的單個內(nèi)容，而在多個的情況下，它具有單獨的內(nèi)容。標(biāo)簽，一個頁面有各種內(nèi)容；換句話說，它們是等價的
實現(xiàn) HTML 標(biāo)簽的示例
以下是實現(xiàn) HTML 標(biāo)簽的示例：
示例#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 在網(wǎng)絡(luò)瀏覽器中良好地顯示。代碼：
<!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>
下面的輸出向訪問者顯示了帶有鏈接地址的網(wǎng)頁。
輸出：
示例#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 內(nèi)容中最重要的標(biāo)頭。
代碼：
<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
我們將看到標(biāo)簽由幾個
代碼：
<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>
這是一個全局標(biāo)題，其中包含任何具有相關(guān)內(nèi)容的文檔的網(wǎng)頁標(biāo)題。接下來是標(biāo)簽，鏈接到特定網(wǎng)站的頁腳，并通過在頁腳部分提供公司詳細(xì)信息來有利于 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>
輸出：
結(jié)論
總之，本文介紹了在網(wǎng)頁上使用的幾個指南。它們是在單個網(wǎng)頁中包含文檔（它們自行感知）或內(nèi)容的絕佳選擇，并且它們被認(rèn)為是 HTML5 下的完美語義元素。作為一個獨立的上下文，它已在 html5 中使用，因為尖端網(wǎng)站已開始充分利用此標(biāo)簽，用戶在發(fā)布博客和雜志等內(nèi)容時會得到很好的回報。
