html中div標(biāo)簽、section標(biāo)簽和acticle標(biāo)簽三者有哪些區(qū)別

這篇文章主要介紹了html中div標(biāo)簽、section標(biāo)簽和acticle標(biāo)簽三者有哪些區(qū)別，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

導(dǎo)語：

本來我以為這三個標(biāo)簽的作用都差不多，后來查了相關(guān)資料才明白，原來他們?nèi)咧g還是有區(qū)別的。

下面我們就來介紹下它們之間的區(qū)別：

1、div元素：

它本身無任何語義，用作布局以及樣式化標(biāo)簽，可定義文檔中的分區(qū)或節(jié),相當(dāng)于一個容器。主要用作大的框架布局，也就是說網(wǎng)頁的骨架主要通過div來架設(shè)的，而網(wǎng)頁的血肉則是由span、p或者ul等元素完成。

2、secion元素：

section元素是html5中新增加的結(jié)構(gòu)元素，它有更進(jìn)一步的語義。表示頁面中的一個內(nèi)容區(qū)塊，比如章節(jié)、頁眉、頁腳、或者頁面中的其他部分。它可以與h2,h3,h4,h5,h6,h7等元素結(jié)合起來使用，標(biāo)示文檔結(jié)構(gòu)。

3、article元素：

article元素也是html5中新增加的結(jié)構(gòu)元素，a是一個特殊的section標(biāo)簽，它比section具有更明確的語義。 它代表一個獨立的、完整的相關(guān)內(nèi)容塊表示頁面中的一塊與上下不相關(guān)的獨立內(nèi)容，如博客中的一篇文章。

注：article元素是可以嵌套使用的，內(nèi)層的內(nèi)容在原則上需要與外層的內(nèi)容相關(guān)聯(lián)。例如，一篇博客文章中，針對該文章的評論就可以使用嵌套article元素的方式；用來呈現(xiàn)評論的article元素被包含在表示整體內(nèi)容的article元素里面。嵌套的代碼如下：

<article>

	<header>
		<h2>article元素的嵌套使用</h2>
		<p>發(fā)表日期：<time pubdate="pubdate">2019/8/6</time></p>
	</header>

	<p>此標(biāo)簽里顯示的是article整個文章的主要內(nèi)容，下面的section元素里是對該文章的評論</p>

	<section>
		<h3>評論</h3>
		<article>
			<header>
			
				<h4>發(fā)表者：Cherish699</h4>
				<p>1小時前</p>
				</header>
		
			<p>這篇文章很不錯啊，頂一下！</p>
		</article>
	
		<article>
			<header>
			
				<h4>發(fā)表者：兩個西柚</h4>
				<p>2小時前</p>
				</header>
		
			<p>這篇文章真棒，對article的嵌套解釋的很詳細(xì)</p>
			</article>
	</section>
</article>

總結(jié)：

div、section、article，語義是從無到有，逐漸增強(qiáng)的。div無任何語義，僅僅用作樣式化或者腳本化的標(biāo)簽。對于一段主題性的內(nèi)容，則就適用section，而假如這段內(nèi)容可以脫離上下文，作為完整的獨立存在的一段內(nèi)容，則就適用article。原則上來說，能使用article的時候，也是可以使用section的，但是實際上，假如使用article更合適，那么就不要使用section。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“html中div標(biāo)簽、section標(biāo)簽和acticle標(biāo)簽三者有哪些區(qū)別”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!