幾年前,當HTML5出現在現場時,它向語言中添加了一系列新的標簽元素,SECTION元素。HTML5引入的大多數新元素都有明確的用途。例如,元素用于定義Web頁面的文章和主要部分,元素用于定義對頁面其余部分不重要的相關內容,而頁眉、導航和頁腳則非常易于解釋。但是,新添加的Section元素很多人并不太清楚。許多人認為HTML元素部分和實際上是一樣的-一般的容器元素用來包含網頁上的內容。然而,現實情況是,這兩個元素雖然都是容器元素,但絕不是通用的。使用Section元素和DIV元素都有特定的原因,本文將解釋這些不同之處,接下來讓我們一起學習下
網站建設前端開發中使用Div和Section有什么不同。
Section和Div
Section元素被定義為Web頁面或站點的語義部分,而不是另一種更具體的類型(如文章或旁白)。當我標記頁面的一個不同的部分時,我傾向于使用這個元素-這個部分可以被大量地移動并在站點的其他頁面或部分上使用。如果您愿意的話,它是一段不同的內容,或者是內容的“部分”。相反,將DIV元素用于要分割的頁面部分,但用于語義以外的目的。如果我這樣做純粹是為了給自己一個與CSS一起使用的“鉤子”,那么我會將一個內容區域包裝在一個分區中。它可能不是基于語義的內容的不同部分,但是我為了實現我想要的頁面布局而口述的內容。
一切都是語義的問題
這是一個很難理解的概念,但DIV元素和Section元素之間的唯一區別是語義。換句話說,這就是您要劃分的代碼部分的含義。
DIV元素中包含的任何內容都沒有任何內在意義。它最適合用于以下情況:
- CSS樣式和CSS樣式的掛鉤
- 布局容器
- JavaScript掛鉤
- 對HTML進行劃分,使其更易于閱讀
DIV元素曾經是我們用來添加鉤子來設置文檔樣式、創建列和花哨布局的唯一元素。正因為如此,我們最終得到的HTML中充滿了DIV元素-這可以被Web設計人員稱為“Divitis”。甚至還有所見即所得(WYSIWYG)編輯器專門使用DIV元素。我實際上遇到過使用DIV元素而不是段落的HTML!使用HTML5,我們可以開始使用剖分元素來創建語義更具描述性的文檔(用于導航和描述性圖形等),還可以定義這些元素的樣式。
那跨度元素呢?
大多數人想到DIV元素時想到的另一個元素是元素。這個元素,像DIV一樣,不是一個語義元素。它是一個內聯元素,您可以使用它在內聯內容塊(通常是文本)周圍添加樣式和腳本的掛鉤。從這個意義上講,它就像DIV元素一樣,只是內聯而不是塊元素。在某些方面,更容易將DIV視為塊級SPAN元素,并以僅跨整個HTML內容塊的方式使用它。
對于舊版本的Internet Explorer
即使您支持不能可靠識別HTML5的IE(如IE8及更低版本)的舊版本,您也不應害怕使用語義上正確的HTML標記。語義將幫助您和您的團隊在將來管理頁面(因為如果文章被文章元素包圍,那么您將知道該部分就是文章)。此外,能夠識別這些標簽的瀏覽器將會更好地支持這些標簽。您仍然可以在InternetExplorer中使用HTML5語義剖分元素,您只需添加腳本,可能還需要添加一些周圍的DIV元素,以使它們能夠將標記識別為HTML。
使用DIV和Section元素
如果使用正確,則可以在有效的HTML5文檔中同時使用DIV和Section元素。正如您在本文中看到的,您可以使用Section元素定義內容的語義離散部分,并使用DIV元素作為CSS和JavaScript的掛鉤,以及定義沒有語義意義的布局。
網站標題:網站建設前端開發中使用Div和Section有什么不同
文章URL:http://vcdvsql.cn/news25/141825.html
網站建設、網絡推廣公司-創新互聯,是專注品牌與效果的網站制作,網絡營銷seo公司;服務項目有網站建設等
廣告
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源:
創新互聯