1.行內元素和塊元素特徵的區分

行內元素：相同的元素同行顯示，不會換行，除了圖片<img>，圖片按鈕input type='image'（感覺有點像是display:inline-block)，一般不能設定寬高(css裡display:inline)。

塊級元素：前後都有換行符，可以設定寬高，也可以按照內容自動自動增加高度。一般預設時，寬度為100%，獨佔一行（display:block)。

2.常見的行內元素和塊級元素

根據行內元素和塊級元素的顯示特性不同，可以找出常見的html標籤到底哪些屬行內元素，哪些塊級元素。以下標籤都有程式碼驗證過。

塊級元素：常見的有<div>，<p>，標題<h1>-<h6>等。

行內元素：有<span>，<a>，以及圖片<img>，換行符<br/>等。

剩下的根據幾種資料形式裡，form表單，table表格，以及列表（dl定義列表，ul無序列表，ol有序列表），以及文字修飾，來進行區分。

2.1 form表單

包含幾乎所有form標籤的程式碼：

使用者名稱 密碼 性別男女 我同意百合服務完協議

學歷：本科碩士博士 自我介紹：

fieldset和legend（標題） 文字框 什麼？

自我介紹： 自我介紹： 自我介紹：

以上的form表單幾乎涵蓋了所有的form標籤，根據上述程式碼的顯示結果發現：

1.form表單標籤的絕大多數是行內標籤，

包括input輸入框，input輸入框的type屬性值有（text文字，password密碼，radio單選，checkbox複選框，reset重置按鈕，submit提交，image圖片按鈕，file上傳檔案，hidden隱藏，button普通按鈕）；

其它的select下拉列表，<button>xaf</button>定義按鈕，<textarea></textarea>多行文字，都是屬於行內標籤。

2.也有例外，<fieldset>分割槽域標籤是塊標籤，它裡面的內容獨佔一個區域，有點類似一個div，但他有legend子標籤表標題，會顯示在border上。<fiedlset><legend>使用者名稱<input type='text'/></legend></feildset>

另外，form表單的form標籤自身也是塊級標籤，表單與表單之間也是換行，預設自增加高度。

2.2table表格

幾乎包含所有的talbe標籤：

上述程式碼實驗結果表明：

一般情況下，table裡塊狀標籤有，table，tr，caption（表格標題），但是某些情況下，會把table放到一個td裡，這時候，就有點像是css裡dispaly屬性的一些屬性值。

2.3列表

列表分三種，前兩種比較常見，分別是無序列表ul和有序列表ol，以及他們共同的列表項標籤li。後一種是定義列表dl，一般更傾向於是對於某一項的解釋和說明，其中，名字，dt，說明/舉例,dd。

包含了三種列表標籤的程式碼：

列表裡的標籤

dl定義列表（專案後面是註釋說明用的）之水果

蘋果

香蕉

水蜜桃

甜品

提拉米蘇

黑森林

• ul無序列表之蘋果
• 香蕉
• 水蜜桃

1. ol有序列表之提拉米蘇
2. 黑森林

上述程式碼結果表明，列表都是塊狀標籤，即ul，ol，li，和dl，dt，dd都是塊狀標籤

2.4文字修飾

在文字使用時，一般相關的標籤都是p段落，div塊，h1-h6標題這些塊標籤，或者span，a這些行內標籤。然而在對於文字的修飾方面，又有許多我們易忽略的小標籤。

strong：加粗

em：強調

i:斜體

sub：下標

sup:上標

small：字型變小和，big：字型變大

還有換行符：br，以上這些經過文字實驗，都是類似span這樣的行內標籤。

3.css裡的display屬性，可以改變標籤的顯示屬性

既然每個標籤都有自己的顯示屬性，那麼，當我們想使用的標籤屬性不是我們想要的顯示屬性時，使用css樣式裡的display屬性，它能改變標籤的顯示方式。由於display屬性的屬性值太多，只驗證幾個常見的屬性值。

1.display:none，完全不顯示，也不佔用網頁位置，（不同與visibility:hidden，不顯示但佔用位置）

2.display:block，

3.display:inline，

4.display:inline-block，

以下關於display的綜合程式碼：

display屬性的常見四個屬性值：none,inline,block,inline-block

test1:

test2:none

test3:inline

讓P標籤不在是分段的，而是同行顯示

我是第二段

我是第三段

我是第四段

test4:inline-block 由於Inline-block非常像img,即是同行顯示（行內元素特性，塊級元素獨佔一行，前後都有換行符），同時也可以設定寬高，（普通的行內元素無法設定寬高（少數可以，除了img就是imput type='image')，塊級元素根據內容自動增加寬高，或者直接設定 這是inline-block 這是inline-block

test5:block 我是span但我要行級顯示了！ 我是span但我要行級顯示了！ 我是span但我要行級顯示了！

test5:list 我是span,聽說我要列表顯示。。 我是span,聽說我要列表顯示。。 我是span,聽說我要列表顯示。。

同樣不可見，display:none和visibility:hidden的區別-----後者佔空間

div{ border:2px #CC6600 solid;} div p{display:inline; color:#F00;} .test_5 span{display:block; width:200px; height:50px; background-color:#CF0; border:#930 2px solid;} .test_6 span{display:list-item; border:2px #6666CC solid;}