HTML中div與span對比

這篇文章主要介紹了HTML中div與span對比，分別介紹了p和span的用法和比較，有興趣​​的可以了解一下

一、

和

1.

標籤

#

標籤可定義文件中的分區或節（pision/section），從而將文件分割為獨立的、不同的部分。

標籤可以作為嚴格的組織工具，並且不使用任何格式與其關聯，這其中包含一種HTML標記和表現樣式相分離的想法。在實際工作中，我們通常會為

標籤指定 id 或 class 屬性，使該標籤會變得更有效。

是一個區塊級元素,這意味著它的內容自動地開始一個新行。並且實際上換行是

固有的唯一格式表現。

下面這段 HTML 模擬了新聞網站的結構。其中的每對

標籤 把每條新聞的標題和摘要組合在一起，也就是說，

為文檔添加了額外的結構。同時，由於這些

屬於同一類元素，所以可以使用class="news" 屬性對這些

標籤進行標識，這麼做不僅為

增加了合適的語義，而且便於進一步使用樣式對

進行格式化。

     <p class="news">
         <h2>
             News headline 1</h2>
         <p>
             some text. some text. some text...</p>
         ...
     </p>
     <p class="news">
        <h2>
             News headline 2</h2>
         <p>
             some text. some text. some text...</p>
        ...
     </p>

2.標籤

標籤被用來組合文件中的行內元素（inline elements）。

  <span style="color: Red">注意：</span>

二、區塊級元素與行內元素

#區塊級元素（block element)與行內元素/內聯元素(inline element )是css中的概念，像

和

等元素常稱為區塊級元素。這是因為這些元素顯示為一塊內容，即「塊框」。與之相反， 和 等元素稱為“行內元素”，這是因為它們的內容顯示在一行中，即“行內框”。

 塊級元素和行內元素的概念並不是固定不變的，而是相對的。我們可以使用元素的 display 屬性來改變產生的框的類型。這意味著，透過將display 屬性設為block，可以讓行內元素（例如 元素）表現得像區塊級元素一樣；還可以透過將display 設定為inline 讓產生的元素成為行內元素；甚至，我們可以把display屬性設定為none ,使元素根本沒有框，這種情況，該框及其所有內容就不再顯示，不佔用文件中的空間。

     <p id="dv1" style="display: block">
         我是一个块级元素。
     </p>
     <p id="dv2" style="display: inline">
         我是一个行内元素。
     </p>
     <p id="p3" style="display: none">
         我是不可见的
     </p>

三、

和的比較

##1.相同點：

標籤和標籤都是用來劃分區間但是沒有實際語義的標籤；兩者都是主要用於應用樣式表。

2.不同點：

標籤屬於區塊級元素，瀏覽器在它的前後會自動加上換行標籤;標籤屬於內嵌元素，它的前後不會自動加上換行標籤。

如果在網頁佈局中要將某兩個內容顯示在同一行內，最簡單的方法就是將它們用標籤包裝起來。例如，一個頁面有相鄰的兩個元素，一個是

，另一個是。要將它們顯示在同一行，可以將這個

改為。當然，也可以透過css將

等標籤的display屬性設定為 inline 來實現。

總結：以上就是這篇文章的全部內容，希望能對大家的學習有所幫助。

相關推薦：

透過程式碼詳細為你講解如何在js中建立div，span，label

詳談div中的dispaly:inline樣式和span的區別

#怎麼定義內聯元素span的最小高度

以上是HTML中div與span對比的詳細內容。更多資訊請關注PHP中文網其他相關文章！