html中div標簽、section標簽和acticle標簽三者有哪些區別

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

導語：

本來我以為這三個標簽的作用都差不多，后來查了相關資料才明白，原來他們三者之間還是有區別的。

下面我們就來介紹下它們之間的區別：

1、div元素：

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

2、secion元素：

section元素是html5中新增加的結構元素，它有更進一步的語義。表示頁面中的一個內容區塊，比如章節、頁眉、頁腳、或者頁面中的其他部分。它可以與h2,h3,h4,h5,h6,h7等元素結合起來使用，標示文檔結構。

3、article元素：

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

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

<article>

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

	<p>此標簽里顯示的是article整個文章的主要內容，下面的section元素里是對該文章的評論</p>

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

總結：

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

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