html中div標籤、section標籤和acticle標籤三者有啥區別

導語：

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

（學習影片分享：html影片教學）

下面我們就來介紹下它們之間的差異：

1、div元素：

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

2、secion元素：

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

3、article元素：

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

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

<article>

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

	<p>此标签里显示的是article整个文章的主要内容，下面的section元素里是对该文章的评论</p>

	<section>
		<h2>评论</h2>
		<article>
			<header>
			
				<h3>发表者：Cherish599</h3>
				<p>1小时前</p>
				</header>
		
			<p>这篇文章很不错啊，顶一下！</p>
		</article>
	
		<article>
			<header>
			
				<h3>发表者：兩個西柚</h3>
				<p>2小时前</p>
				</header>
		
			<p>这篇文章真棒，对article的嵌套解释的很详细</p>
			</article>
	</section>
</article>

總結：

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

相關推薦：html教學

以上是html中div標籤、section標籤和acticle標籤三者有啥區別的詳細內容。更多資訊請關注PHP中文網其他相關文章！