div標簽,主要用來為HTML文檔內大塊的內容提供結構和背景。div,即division(分區),用來劃分一個區域。div標簽,又稱為“區隔標簽”。我們常見的什麼“div+css”中的div就是指我們現在學習的div標簽。
div標簽內可以放入<body>標簽的任何內部標簽:段落文字、表格、列表、圖像等。
我們先看一段代碼:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>換行標簽</title> </head> <body> <!--這是第一首詩--> <h3>靜夜思</h3> <p>床前明月光,疑是地上霜。</p> <p>舉頭望明月,低頭思故鄉。</p> <hr/> <!--這是第二首詩--> <h3>春曉</h3> <p>春眠不覺曉,處處聞啼鳥。</p> <p>夜來風雨聲,花落知多少。</p> </body> </html>
對於這段代碼,我們發現這個HTML文檔結構比較凌亂。那接下來,我們用div標簽為這段代碼劃分區域如下:
在線測試<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>換行標簽</title> </head> <body> <!--這是第一首詩--> <div> <h3>靜夜思</h3> <p>床前明月光,疑是地上霜。</p> <p>舉頭望明月,低頭思故鄉。</p> </div> <hr/> <!--這是第二首詩--> <div> <h3>春曉</h3> <p>春眠不覺曉,處處聞啼鳥。</p> <p>夜來風雨聲,花落知多少。</p> </div> </body> </html>
在浏覽器預覽效果如下:
這兩段代碼在浏覽器預覽的效果都是一樣的,但是在後台代碼中卻是不一樣的,使用div標簽劃分區域的代碼更加具有邏輯性。
其實div的作用遠遠不止如此,對於我們初學者來說,現在不需要深入,先給大家留個印象。在後續課程,我們會不斷讓大家接觸div標簽,大家去感悟一下,慢慢就知道了。