HTML中的div標籤是實作網頁的重要基礎,是學習HTML知識不可或缺的內容,這篇文章就來為大家介紹關於HTML中div標籤的使用方法。
什麼是div標籤?
div標籤表示一組必要的結構。目的是將夾在div標籤之間的字元分成塊狀。因此,單獨的div標籤沒有諸如改變顏色或改變字元樣式的效果。
另外,如果div標籤不適合其他元素,就暫時不要使用它。
但是,實際上,當需要指定哪個元素時,我們經常會使用div標籤。
透過將id和class加入div標籤並使用CSS處理id和class,你就可以更改div標籤中的顏色或改變為其他樣式。
div標籤與Section標籤的比較
我認為section標籤在文件上顯示單一集合比較合適
section標籤用於將群組指示為文檔。
我認為章節有章節的項
正如章節子句的這個概念一樣,section標籤是一個區塊,如果它被提取,通常沒有意義。
在報紙文章中,即使你只剪輯章節項,我也不認為整篇文章的意圖可以傳達。
透過比較,section標籤的使用方式與div標籤的使用方式不同,而是作為句子用來表示群組。
div標籤的用法
寫div標籤如下。
<div>内容</div>
#如上所述,div標籤透過新增id和class非常有用。如何分配id和class如下。
<div id="id名">内容</div> <div id="class名">内容</div>
順便說一下id和class
順便說一下,id和class是什麼? id和class稱為屬性,id是I具有D號之類的東西,具有相同id名稱的東西只能在該頁面內使用一次。
相反,我們將id屬性用於我們只使用一次的事物。
另一方面,class屬性可以在同一頁上使用多次。如果要指定“此元素和此元素的顏色相同”,請使用class屬性。
當然,即使你只使用一次,也可以使用class屬性。
我們來看實際的範例
我們先來看看div標籤包圍的結果
對於id和class,我們指定每個名詞的顏色名稱。
使用以下原始程式碼建立div.html並在瀏覽器中開啟它。
div.html
<html> <head> <meta charset="utf-8" /> </head> <body> <div id="red">苹果</div> <div class="skyblue">天空</div> <div class="yellow">香蕉</div> <div class="blue">大海</div> <div class="lightyellow">蒲公英</div> </body> </html>
在瀏覽器中顯示效果如下:
#上述只有文字顯示,現在讓我們用CSS作為背景上色。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> #red { background-color: #FF0000; } .skyblue { background-color: skyblue; } .yellow{ background-color: yellow; } .blue{ background-color: blue; } .beige{ background-color: beige; } </style> </head> <body> <div id="red">苹果</div> <div class="skyblue">天空</div> <div class="yellow">香蕉</div> <div class="blue">大海</div> <div class="beige">蒲公英</div> </body> </html>
在瀏覽器中顯示效果如下:
#可以看到背景是彩色的,也可以確認指定了多個相同的類別。
以上是什麼是div標籤? HTML中div標籤怎麼使用?的詳細內容。更多資訊請關注PHP中文網其他相關文章!