DIV CSS 佈局教程網

4.6 div標簽
編輯:HTML入門知識     

一、div標簽

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標簽,大家去感悟一下,慢慢就知道了。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved