文法：
這裡讓我們來(lái)看看這些標(biāo)籤元素的直接語(yǔ)法。
<article> <h1>…</h1> </article>
結(jié)構(gòu)遵循開(kāi)始標(biāo)記。下一個(gè)前面的部分有
標(biāo)籤或 它形成一個(gè)小標(biāo)題，給出內(nèi)容的準(zhǔn)確語(yǔ)義信息，並提供更豐富、更合適的有意義的信息。與其他標(biāo)籤一樣，此文章標(biāo)籤也支援 HTML 屬性，例如事件屬性和對(duì)應(yīng)類(lèi)別的全域?qū)傩浴?
<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 中如何運(yùn)作？
本節(jié)將討論一個(gè)簡(jiǎn)單的文章標(biāo)籤（文件中的獨(dú)立內(nèi)容）並了解它如何在網(wǎng)頁(yè)上運(yùn)作。 HTML 5 引入了新的語(yǔ)意內(nèi)容來(lái)豐富搜尋引擎中的內(nèi)容。它們確實(shí)支援內(nèi)容的全局和事件屬性。標(biāo)籤的內(nèi)容被視為獨(dú)立於單頁(yè)上其他內(nèi)容部分的文件。他們可以在頁(yè)面上定義或展示文章的名稱、作者資訊和發(fā)布日期。這篇標(biāo)籤可以用作單一元素和多個(gè)
具有單一文章元素的文件解釋了文件的主要內(nèi)容。它具有單獨(dú)的獨(dú)特的單一內(nèi)容，而在多個(gè)的情況下，它具有單獨(dú)的內(nèi)容。標(biāo)籤，一個(gè)頁(yè)面有各種內(nèi)容；換句話說(shuō)，它們與
實(shí)作 HTML 標(biāo)籤的範(fàn)例
以下是實(shí)作 HTML 標(biāo)籤的範(fàn)例：
範(fàn)例#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>
輸出：
範(fàn)例#2
一個(gè)範(fàn)例說(shuō)明如何使用屬性
與CSS樣式。它利用 CSS 在網(wǎng)頁(yè)瀏覽器中顯示良好。代碼：
<!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>
下面的輸出向訪客顯示了帶有連結(jié)位址的網(wǎng)頁(yè)。
輸出：
範(fàn)例 #3
範(fàn)例示範(fàn)如何使用顯示日期和時(shí)間。
代碼：
<!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>
輸出：
範(fàn)例#4
使用多篇文章的範(fàn)例。下面的程式碼使用語(yǔ)意元素
來(lái)指定 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>
輸出：
範(fàn)例#5
我們將看到標(biāo)籤由幾個(gè)
代碼：
<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>
輸出：
範(fàn)例 #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>
這是一個(gè)全域標(biāo)題，其中包含任何具有相關(guān)內(nèi)容的文件的網(wǎng)頁(yè)標(biāo)題。接下來(lái)是標(biāo)籤，連結(jié)到特定網(wǎng)站的頁(yè)腳，並透過(guò)在頁(yè)腳部分提供公司詳細(xì)資訊來(lái)有利於 SEO。最後，真正的使用
輸出：
範(fàn)例#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)頁(yè)上使用的幾個(gè)指南。它們是在單一網(wǎng)頁(yè)中包含文件（它們自行感知）或內(nèi)容的絕佳選擇，並且它們被認(rèn)為是 HTML5 下的完美語(yǔ)義元素。作為一個(gè)獨(dú)立的上下文，它已在 html5 中使用，因?yàn)榧舛司W(wǎng)站已開(kāi)始充分利用此標(biāo)籤，用戶在發(fā)布部落格和雜誌等內(nèi)容時(shí)會(huì)得到很好的回報(bào)。
