HTML（11）div和span的比較

一、和1.

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

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

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

是乙個塊級元素,這意味著它的內容自動地開始乙個新行。並且實際上換行是固有的唯一格式表現。

下面這段 html 模擬了新聞**的結構。其中的每對

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

為文件新增了額外的結構。同時，由於這些

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

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

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

進行格式化。

1
<
div 
class
="news"
>
2<
h2>
3             news headline 1
h2>
4<
p>
5             some text. some text. some text...
p>
6...
7div
>
8<
div 
class
="news"
>
9<
h2>
10             news headline 2
h2>
11<
p>
12             some text. some text. some text...
p>
13...
14div
>

2.標籤

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

<
span 
style
="color: red"
>注意：
span
>

二、塊級元素和行內元素

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

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

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

1
<
div 
id="dv1"
style
="display: block"
>
2我是乙個塊級元素。
3div
>
4<
div 
id="dv2"
style
="display: inline"
>
5我是乙個行內元素。
6div
>
7<
div 
id="div3"
style
="display: none"
>
8我是不可見的
9div
>

三、和的比較

1.相同點：

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

2.不同點：

標籤屬於塊級元素，瀏覽器在它的前後會自動新增乙個換行標籤

；標籤屬於內聯元素，它的前後不會自動新增換行標籤。

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

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

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

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

HTML（11）div和span的比較

div和span的區別

SPAN和DIV的區別

div 和 span 的區別

HTML（11）div和span的比較

div和span的區別

SPAN和DIV的區別

div 和 span 的區別

相關推薦