此頁面由社群從英文翻譯而來。了解更多並加入 MDN Web Docs 社群。
<article>:文章內容元素
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
<article>HTML 元素代表文件、頁面、應用程式或站點中的一個獨立組成部分,該部分旨在獨立分發或重複使用(例如,在聯合編輯中)。例如:論壇帖子、雜誌或報紙文章、部落格文章、產品卡片、用戶提交的評論、互動小工具或小裝置,或任何其他獨立的內容項目。
In this article
嘗試一下
<article> <h1>Weather forecast for Seattle</h1> <article> <h2>03 March 2018</h2> <p>Rain.</p> </article> <article> <h2>04 March 2018</h2> <p>Periods of rain.</p> </article> <article> <h2>05 March 2018</h2> <p>Heavy rain.</p> </article></article>.forecast { margin: 0; padding: 0.3rem; background-color: #eee;}.forecast > h1,.day-forecast { margin: 0.5rem; padding: 0.3rem; font-size: 1.2rem;}.day-forecast { background: right/contain content-box border-box no-repeat url("/shared-assets/images/examples/rain.svg") white;}.day-forecast > h2,.day-forecast > p { margin: 0.2rem; font-size: 1rem;}一個文件可以包含多個文章;例如,在一個按讀者滾動顯示每篇文章文本的部落格上,每篇文章都可以包含在<article> 元素中,可能包含一個或多個<section>。
屬性
此元素僅包含全域屬性。
使用注意事項
- 每個
<article>應該被識別,通常通過在<article>元素的子元素中包含標題(<h1>-<h6>元素)。 - 當嵌套
<article>元素時,內部元素代表與外部元素相關的文章。例如,部落格文章的評論可以是嵌套在表示部落格文章的<article>中的<article>元素。 <article>元素的作者信息可以通過<address>元素提供,但不適用於嵌套的<article>元素。<article>元素的發佈日期和時間可以使用<time>元素的datetime屬性來描述。
範例
html
<article> <h2>Jurassic Park</h2> <section> <h3>Review</h3> <p>Dinos were great!</p> </section> <section> <h3>User reviews</h3> <article> <h4>Too scary!</h4> <p>Way too scary for me.</p> <footer> <p> Posted on <time datetime="2015-05-16 19:00">May 16</time> by Lisa. </p> </footer> </article> <article> <h4>Love the dinos!</h4> <p>I agree, dinos are my favorite.</p> <footer> <p> Posted on <time datetime="2015-05-17 19:00">May 17</time> by Tom. </p> </footer> </article> </section> <footer> <p> Posted on <time datetime="2015-05-15 19:00">May 15</time> by Staff. </p> </footer></article>結果
規範
| Specification |
|---|
| HTML> # the-article-element> |