<article>: article 內容元素
<article> HTML 元素表示文件、頁面、應用程式或站點中的一個自包含的組合，旨在獨立分發或重用（例如，用於資訊聚合）。示例如下：論壇帖子、雜誌或報紙文章、部落格條目、產品卡片、使用者提交的評論、互動式小部件或小工具，或任何其他獨立的內容項。
試一試
<article class="forecast">
<h1>Weather forecast for Seattle</h1>
<article class="day-forecast">
<h2>03 March 2018</h2>
<p>Rain.</p>
</article>
<article class="day-forecast">
<h2>04 March 2018</h2>
<p>Periods of rain.</p>
</article>
<article class="day-forecast">
<h2>05 March 2018</h2>
<p>Heavy rain.</p>
</article>
</article>
.forecast {
margin: 0;
padding: 0.3rem;
background-color: #eeeeee;
}
.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；例如，在一個部落格中，當讀者滾動時，會逐個顯示每篇文章的內容，每篇帖子都會包含在一個 <article> 元素中，其中可能包含一個或多個 <section>。
屬性
此元素僅包含全域性屬性。
用法說明
- 每個
<article>都應被標識，通常透過將標題（<h1>-<h6>元素）作為<article>元素的子元素來包含。 - 當
<article>元素巢狀時，內部元素表示與外部元素相關的 article。例如，一篇部落格帖子的評論可以作為<article>元素巢狀在代表該部落格帖子的<article>中。 <article>元素的作者資訊可以透過<address>元素提供，但它不適用於巢狀的<article>元素。<article>元素的釋出日期和時間可以使用<time>元素的datetime屬性進行描述。
示例
html
<article class="film_review">
<h2>Jurassic Park</h2>
<section class="main_review">
<h3>Review</h3>
<p>Dinos were great!</p>
</section>
<section class="user_reviews">
<h3>User reviews</h3>
<article class="user_review">
<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 class="user_review">
<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>
結果
技術摘要
規範
| 規範 |
|---|
| HTML # the-article-element |
瀏覽器相容性
載入中…