HTML元素的分類，特性以及相互轉換

1.HTML元素的分類

html標籤又叫做html元素，它分為塊級元素和內聯元素（也可以叫做行內元素），都是html規範中的概念；

2.塊級元素的特性

含義：塊級元素是指本身屬性為display:block;的元素。因為它自身的特點，我們通常使用塊級元素來進行大布局（大結構）的搭建

• 獨佔一行，每一個塊級元素都會從新的一行重新開始，從上到下排布；
• 可以直接控制寬度、高度以及盒子模型的相關css屬性(width/height/border/margin/padding)；
• 在不設定寬度的情況下，塊級元素的寬度是它父級元素內容的寬度；
• 在不設定高度的情況下，塊級元素的高度是它本身內容的高度；
• 可以巢狀其他元素；
• ul li、ol li 、dl dt dd 成組出現，p標籤不能巢狀它自己本身；

標籤	作用
div	常用塊級容器，也是css layout的主要標籤
h1	大標題
h2	副標題
h3	三級標題
h4	四級標題
h5	五級標題
h6	六級標題
hr	水平分隔線
menu	選單列表
ol	有序列表
ul	無序列表
li	列表項
dl	定義列表
dt	定義標題
dd	定義描述
table	表格
p	段落
form	互動表單

3.行內元素的特性

行內(內聯)元素是指本身屬性為display:inline;的元素。因為它自身的特點，我們通常使用塊級元素來進行文字、小圖示（小結構）的搭建；

• 和其他內聯元素從左到右在一行顯示,從左到右，達到父級元素的最大寬度時，會自動折行；
• 不能直接控制寬度、高度以及盒子模型的相關css屬性，但是直接設定內外邊距的左右值是可以的；
• 內聯元素的寬高是由本身內容的大小決定（文字、圖片等）
• 內聯元素只能容納文字或者其他內聯元素（此處請注意，不要在內聯元素中巢狀塊級元素）
• 在編輯程式碼時，元素之間有回車或者換行的時候，元素和元素之間有間隙；

標籤	作用
span	常用內聯容器，定義文字內區塊
a	錨點
b	加粗
strong	加粗強調
i	斜體
em	斜體強調
s	中劃線（不推薦使用）
strike	中劃線
del	文件中已被刪除的文字
br	強制換行
u	下劃線
textarea	多行文字輸入框
input	輸入框
select	下拉選單
label	input 元素定義標註（標記）
img	插入圖片
sub	下標
sup	上標
big	大字型文字
small	小字型文字

4.行內塊元素的特性

• 在一行排布，從左到右，達到父級元素的最大寬度時，會自動折行；
• 設定盒子模的CSS屬性；
• 預設不設定寬度和高度的時候，寬高都是由本身內容決定的；
• 在編輯程式碼時，元素之間有回車或者換行的時候，元素和元素之間有間隙；

標籤	作用
textarea	文字域
input	輸入框
img	圖片

5.塊級元素和行內元素之間的相互轉換

CSS之display 屬性

• display: inline 行內
• display：inline-block 行內塊
• display: block 塊級

CSS之float 屬性

• float ：left 左浮動
• float ：right 右浮動
• float：none 去掉浮動

6.CSS之display屬性

display的取值

• 設定或檢索物件是否及如何顯示
• display: inline; 指定物件為內聯元素
• display:block; 指定物件為塊級元素
• display:none; 隱藏物件,與visibility屬性的hidden值不同，其不為被隱藏的物件保留其物理空間
• display:inline-block; 指定物件為內聯塊（行內塊）元素
• display: table-cell 指定物件作為表格單元格

display: inline-block

• 特點： 可以讓上下結構的元素排列方式變成左右水平排列的方式(讓元素在一行顯示)
• 缺點： 行內塊元素會受換行符和空格的影響產生間距；
• 行內塊間距，解決辦法: 給行內塊元素的父元素新增屬性 font-size:0;
• IE6/7下不相容 ，解決辦法: 給行內元素上新增*display:inline;*zoom:1

7.display與visiblity的區別

• display屬性設定一個元素應如何顯示
• visibility屬性指定一個元素應可見還是隱藏；
• visibility:hidden可以隱藏某個元素，但隱藏的元素仍需佔用與未隱藏之前一樣的空間。也就是說，該元素雖然被隱藏了，但仍然會影響佈局 ；
• display:none可以隱藏某個元素，且隱藏的元素不會佔用任何空間。也就是說，該元素不但被隱藏了，而且該元素原本佔用的空間也會從頁面佈局中消失；