HTML <article> 標籤
示例
三個具有獨立、自包含內容的 article
<article>
<h2>Google Chrome</h2>
<p>Google Chrome 是 Google 開發的一款網頁瀏覽器，於 2008 年釋出。Chrome 是當今世界上最流行的網頁瀏覽器！</p>
</article>
<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox 是由 Mozilla 開發的開源網頁瀏覽器。自 2018 年 1 月以來，Firefox 一直是第二流行的網頁瀏覽器。</p>
</article>
<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge 是 Microsoft 開發的一款網頁瀏覽器，於 2015 年釋出。Microsoft Edge 取代了 Internet Explorer。</p>
</article>
自己動手試一試 »
更多“自己嘗試”的例子見下文。
定義和用法
<article> 標籤定義了獨立、自包含的內容。
article 應該能夠獨立存在，並且可以獨立於站點的其他部分進行分發。
<article> 元素的潛在來源
- 論壇帖子
- 部落格帖子
- 新聞報道
注意： <article> 元素在瀏覽器中不會渲染成任何特殊樣式。但是，您可以使用 CSS 來設定 <article> 元素的樣式（請參閱下面的示例）。
瀏覽器支援
表格中的數字表示完全支援該元素的首個瀏覽器版本。
| 元素 | |||||
|---|---|---|---|---|---|
| <article> | 6.0 | 9.0 | 4.0 | 5.0 | 11.1 |
全域性屬性
<article> 標籤還支援 HTML 全域性屬性。
事件屬性
<article> 標籤還支援 HTML 事件屬性。
更多示例
示例
使用 CSS 設定 <article> 元素樣式
<html>
<head>
<style>
.all-browsers {
margin: 0;
padding: 5px;
background-color: lightgray;
}
.all-browsers > h1, .browser {
margin: 10px;
padding: 5px;
}
.browser {
background: white;
}
.browser > h2, p {
margin: 4px;
font-size: 90%;
}
</style>
</head>
<body>
<article class="all-browsers">
<h1>最受歡迎的瀏覽器</h1>
<article class="browser">
<h2>Google Chrome</h2>
<p>Google Chrome 是由 Google 開發的網路瀏覽器，於 2008 年釋出。Chrome 是當今世界上最受歡迎的網路瀏覽器！</p>
</article>
<article class="browser">
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox 是由 Mozilla 開發的開源網路瀏覽器。自 2018 年 1 月以來，Firefox 一直是第二受歡迎的網路瀏覽器。</p>
</article>
<article class="browser">
<h2>Microsoft Edge</h2>
<p>Microsoft Edge 是由 Microsoft 開發的網路瀏覽器，於 2015 年釋出。Microsoft Edge 取代了 Internet Explorer。</p>
</article>
</article>
</body>
</html>
自己動手試一試 »
相關頁面
HTML DOM 參考： Article 物件
預設 CSS 設定
大多數瀏覽器將使用以下預設值顯示 <article> 元素
article {
display: block;
}
