<div></div>標籤可定義文檔中的分區或節(division/section),從而把文檔分割為獨立的、不同的部分。 <div></div>標籤可以作為一種嚴格的組織工具,並且不使用任何格式與其關聯,這其中包含一種HTML標記和表現樣式相分離的思想。在實際工作中,我們通常為<div></div>標籤指定id 或class 屬性,使該標籤會變得更加有效。 <div></div> 是一個塊級元素,這意味著它的內容自動地開始一個新行。並且實際上換行是<div> 固有的唯一格式表現。
下面這段HTML 模擬了新聞網站的結構。其中的每對<div></div>標籤把每條新聞的標題和摘要組合在一起,也就是說,<div></div> 為文檔添加了額外的結構。同時,由於這些<div></div> 屬於同一類元素,所以可以使用class=news 屬性對這些<div></div>標籤進行標識,這麼做不僅為<div></div> 添加了合適的語義,而且便於進一步使用樣式對<div></div> 進行格式化。
<div class=news> <h2> News headline 1</h2> <p> some text. some text. some text...</p> ... </div> <div class=news> <h2> News headline 2</h2> <p> some text. some text. some text...</p> ... </div>2.<span></span>標籤
<span> 標籤被用來組合文檔中的行內元素(inline elements)。
<span style=color: Red>注意:</span>二、塊級元素和行內元素
塊級元素(block element)和行內元素/內聯元素(inline element)是css中的概念,像<div></div>和<h1></h1>等元素常常被稱為塊級元素。這是因為這些元素顯示為一塊內容,即塊框。與之相反,<span></span> 和<strong></strong> 等元素稱為行內元素,這是因為它們的內容顯示在一行中,即行內框。
塊級元素和行內元素的概念並不是固定不變的,而是相對的。我們可以使用元素的display 屬性改變生成的框的類型。這意味著,通過將display 屬性設置為block,可以讓行內元素(比如<a> 元素)表現得像塊級元素一樣;還可以通過把display 設置為inline 讓生成的元素成為行內元素;甚至,我們可以把display屬性設置為none ,使元素根本沒有框,這種情況,該框及其所有內容就不再顯示,不佔用文檔中的空間。
<div id=dv1 style=display: block> 我是一個塊級元素。 </div> <div id=dv2 style=display: inline> 我是一個行內元素。 </div> <div id=div3 style=display: none> 我是不可見的</div>三、<div></div>和<span></span>的比較
1.相同點:<div></div>標籤和<span></span>標籤都是用來劃分區間但是沒有實際語義的標籤;兩者都是主要用於應用樣式表。
2.不同點:<div></div>標籤屬於塊級元素,瀏覽器在它的前後會自動添加一個換行標籤</br>;<span></span>標籤屬於內聯元素,它的前後不會自動添加換行標籤。
如果在網頁佈局中要將某兩個內容顯示在同一行內,最簡單的方法就是將它們用<span></span>標籤包裝起來。比如,一個頁面有相鄰的兩個元素,一個是<div></div>,另一個是<span></span>。要想將它們顯示在同一行,可以將這個<div></div>改為<span></span>。當然,也可以通過css將<div></div>等標籤的display屬性設置為inline 來實現。