網(wǎng)站建設(shè)前端開發(fā)中使用Div和Section有什么不同

2021-12-24 分類：網(wǎng)站建設(shè)

幾年前，當(dāng)HTML5出現(xiàn)在現(xiàn)場時，它向語言中添加了一系列新的標(biāo)簽元素，SECTION元素。HTML5引入的大多數(shù)新元素都有明確的用途。例如，元素用于定義Web頁面的文章和主要部分，元素用于定義對頁面其余部分不重要的相關(guān)內(nèi)容，而頁眉、導(dǎo)航和頁腳則非常易于解釋。但是，新添加的Section元素很多人并不太清楚。許多人認為HTML元素部分和實際上是一樣的-一般的容器元素用來包含網(wǎng)頁上的內(nèi)容。然而，現(xiàn)實情況是，這兩個元素雖然都是容器元素，但絕不是通用的。使用Section元素和DIV元素都有特定的原因，本文將解釋這些不同之處，接下來讓我們一起學(xué)習(xí)下網(wǎng)站建設(shè)前端開發(fā)中使用Div和Section有什么不同。

Section和Div

Section元素被定義為Web頁面或站點的語義部分，而不是另一種更具體的類型(如文章或旁白)。當(dāng)我標(biāo)記頁面的一個不同的部分時，我傾向于使用這個元素-這個部分可以被大量地移動并在站點的其他頁面或部分上使用。如果您愿意的話，它是一段不同的內(nèi)容，或者是內(nèi)容的“部分”。相反，將DIV元素用于要分割的頁面部分，但用于語義以外的目的。如果我這樣做純粹是為了給自己一個與CSS一起使用的“鉤子”，那么我會將一個內(nèi)容區(qū)域包裝在一個分區(qū)中。它可能不是基于語義的內(nèi)容的不同部分，但是我為了實現(xiàn)我想要的頁面布局而口述的內(nèi)容。

一切都是語義的問題

這是一個很難理解的概念，但DIV元素和Section元素之間的唯一區(qū)別是語義。換句話說，這就是您要劃分的代碼部分的含義。

DIV元素中包含的任何內(nèi)容都沒有任何內(nèi)在意義。它最適合用于以下情況：

CSS樣式和CSS樣式的掛鉤
布局容器
JavaScript掛鉤
對HTML進行劃分，使其更易于閱讀

DIV元素曾經(jīng)是我們用來添加鉤子來設(shè)置文檔樣式、創(chuàng)建列和花哨布局的唯一元素。正因為如此，我們最終得到的HTML中充滿了DIV元素-這可以被Web設(shè)計人員稱為“Divitis”。甚至還有所見即所得(WYSIWYG)編輯器專門使用DIV元素。我實際上遇到過使用DIV元素而不是段落的HTML！使用HTML5，我們可以開始使用剖分元素來創(chuàng)建語義更具描述性的文檔(用于導(dǎo)航和描述性圖形等)，還可以定義這些元素的樣式。

那跨度元素呢？

大多數(shù)人想到DIV元素時想到的另一個元素是元素。這個元素，像DIV一樣，不是一個語義元素。它是一個內(nèi)聯(lián)元素，您可以使用它在內(nèi)聯(lián)內(nèi)容塊(通常是文本)周圍添加樣式和腳本的掛鉤。從這個意義上講，它就像DIV元素一樣，只是內(nèi)聯(lián)而不是塊元素。在某些方面，更容易將DIV視為塊級SPAN元素，并以僅跨整個HTML內(nèi)容塊的方式使用它。

對于舊版本的Internet Explorer

即使您支持不能可靠識別HTML5的IE(如IE8及更低版本)的舊版本，您也不應(yīng)害怕使用語義上正確的HTML標(biāo)記。語義將幫助您和您的團隊在將來管理頁面(因為如果文章被文章元素包圍，那么您將知道該部分就是文章)。此外，能夠識別這些標(biāo)簽的瀏覽器將會更好地支持這些標(biāo)簽。您仍然可以在InternetExplorer中使用HTML5語義剖分元素，您只需添加腳本，可能還需要添加一些周圍的DIV元素，以使它們能夠?qū)?biāo)記識別為HTML。

使用DIV和Section元素

如果使用正確，則可以在有效的HTML5文檔中同時使用DIV和Section元素。正如您在本文中看到的，您可以使用Section元素定義內(nèi)容的語義離散部分，并使用DIV元素作為CSS和JavaScript的掛鉤，以及定義沒有語義意義的布局。

分享標(biāo)題：網(wǎng)站建設(shè)前端開發(fā)中使用Div和Section有什么不同
當(dāng)前鏈接：http://www.js-pz168.com/news/141825.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營銷seo公司；服務(wù)項目有網(wǎng)站建設(shè)等

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

久久99久久人婷婷精品综合_超碰aⅴ人人做人人爽欧美_亚洲电影第三页_日韩欧美一中文字暮专区_波多野结衣的一区二区三区_婷婷在线播放_人人视频精品_国产精品日韩精品欧美精品_亚洲免费黄色_欧美性猛交xxxxxxxx

網(wǎng)站建設(shè)前端開發(fā)中使用Div和Section有什么不同