明輝手游網(wǎng)中心：是一個免費提供流行視頻軟件教程、在線學(xué)習分享的學(xué)習平臺！

html article標簽有什么用？html article標簽的使用方法說明

發(fā)表時間：2023-09-03 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]本篇文章主要的向大家介紹關(guān)于HTML5 article標簽的用法和使用實例說明，希望大家都能理解，接下來我們來看這篇關(guān)于HTML5 article標簽的文章了。首先我們先簡單的介紹下article：html5 <article>表示頁面中的一塊與上下文不相關(guān)的獨立內(nèi)容，比如網(wǎng)頁中的一篇...
本篇文章主要的向大家介紹關(guān)于HTML5 article標簽的用法和使用實例說明，希望大家都能理解，接下來我們來看這篇關(guān)于HTML5 article標簽的文章了。

首先我們先簡單的介紹下article：

html5 <article>表示頁面中的一塊與上下文不相關(guān)的獨立內(nèi)容，比如網(wǎng)頁中的一篇文章或報紙中的一篇文章。

article不同于其他DIV CSS布局結(jié)構(gòu)，article主要布局文章類內(nèi)容。

article語法代碼：

<article>內(nèi)容</article>

article是有開始與閉合一對HTML標簽元素。

以<article>開始，以</article>結(jié)束閉合。

現(xiàn)在說說article標簽的使用說明：

article是HTML5新增標簽，其語法基本功能和以前DIV、p、span等標簽一樣，可以直接使用style屬性標簽內(nèi)設(shè)置CSS，或者使用class或id引入外部CSS樣式。

<article class="aaa">內(nèi)容</article>
<article id="bbb">內(nèi)容</article>

article主要是布局文章、內(nèi)容方面內(nèi)容。

再來看看HTML5 article標簽的使用實例：

這里使用article標簽布局一篇實例，通過此示例掌握了解article元素標簽。以下是完整HTML5實例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>article 實例 ThinkCSS</title>
<style>
article{ color:#000}
article h1{ color:#F00}
</style>
</head>
<body>
<article>
    <h1>文章標題</h1>
    <p>文章段落一，內(nèi)容CSS技術(shù)上ThinkCSS網(wǎng) ...</p>
    <p>文章段落二，內(nèi)容CSS技術(shù)上ThinkCSS網(wǎng) ...</p>
    <p>段落三，內(nèi)容CSS技術(shù)上ThinkCSS網(wǎng) ...</p>
</article>
</body>
</html>

article標簽的代碼效果截圖：

tuyi.png

如圖是代碼的效果圖，基本上都能看明白，有什么不明白的可以在下方留言

【小編推薦】

如何給html中的pre標簽中的文字換行？html pre標簽的使用實例

如何使用HTML span標簽的class屬性？這里有關(guān)于class屬性的詳解

以上就是html article標簽有什么用？html article標簽的使用方法介紹的詳細內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！


網(wǎng)站建設(shè)是一個廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護的網(wǎng)站。