(二) html元素顯式模式

web標準

由結構, 表現, 行爲三部分組組成

• 結構: 用於對網頁元素進行整理和分類, 主要指html
• 表現: 用於設置網頁元素的版式, 顏色,大小等外觀樣式, 主要指css
• 行爲: 指網頁模型的定義及交互的編寫, 主要指js

HTML

元素顯示模式

塊級元素、行內元素、行內塊元素

---

1. 塊級元素

塊級元素只能出如今標籤以內

// 常見的塊級元素
div  H1 ~ H6  ul  ol li  p  dl  form  table  hr

@特色:

• 獨佔一行
• 高度、寬度、內外邊距均可以控制
• **寬度默認和父親同樣 **
• 能夠看成一個容器使用

注意:

• p標籤裏面不能放塊級元素
• 文字類標籤也儘可能不要放塊級元素

---

2. 行內元素

// 常見的行內元素
span  a  em  strong  i  s  ins  br等

**@特色: **

• 行內元素能夠一行顯示
• 寬、高設置無效
• 默認寬度是自己內容的寬度
• 只能容納文本或其餘行內元素

**注意: **

• 連接裏面不能再放連接
• 特殊狀況下 a標籤能夠放塊級元素, 但最好轉換一下模式

---

3. 行內塊元素

// 常見的行內塊元素
img    input    button    td 等

**@特色: **

• 行內塊元素能夠一行顯示, 可是彼此之間會有空白縫隙
• 寬、高、內外邊距均可以控制
• 默認寬度是自己內容的寬度

三種模式的對比

元素模式	元素排列	設置寬高	默認寬度	子元素
塊級元素	獨佔一行	能夠	父親的寬度	任何元素
行內元素	可在一行	不能夠	自己內容的寬度	文本或行內元素
行內塊元素	可在一行	能夠	自己內容的寬度

---

模式轉換

display

• 轉成塊級元素: displa: block
• 轉成行內元素: displa: inline
• 轉成行內塊元素: displa: inline-block

---

空元素

首先空元素下是沒有子級節點和內容的。而後空元素是在開始標籤中關閉的，也就是說空元素沒有閉合標籤的。

在HTML中的空元素有如下幾個：

<img>
<input>
<link>
<meta>
<hr>
<source>
<embed>
<keygen>
<param>
<track>
<wbr>

僅記錄本身的學習總結，若有錯誤，還請評論指正~