1. 元素類型
根據(jù)CSS顯示分類，XHTML元素被分為三種類型:
塊狀元素，內(nèi)聯(lián)元素，可變元素
或
塊狀元素攒盈，內(nèi)聯(lián)元素，內(nèi)聯(lián)塊元素(css2.1增加）
塊狀元素
- 塊狀元素在網(wǎng)頁中就是以塊的形式顯示哎榴，即為矩形區(qū)域
- 默認(rèn)情況下型豁，按順序自上而下排列僵蛛，都獨(dú)占一行
- 塊狀元素都可以定義自己的寬度和高度
- 塊狀元素一般作為其他元素的容器，可以容納內(nèi)聯(lián)元素和其它塊狀元素
- 塊狀元素在默認(rèn)情況下迎变，寬度為瀏覽器的寬度充尉，高度為子元素高度，如果子元素沒有高度則不顯示
內(nèi)聯(lián)元素
- 內(nèi)聯(lián)元素最小內(nèi)容單元也呈現(xiàn)矩形形狀
- 內(nèi)聯(lián)元素是在一行內(nèi)逐個(gè)排列
- 內(nèi)聯(lián)元素不能直接定義它的寬和高衣形，它顯示的寬度驼侠、高度是由內(nèi)容撐開的
- 元素也會(huì)遵循盒模型基本規(guī)則，如可以定義padding,border,margin,background等屬性谆吴，但個(gè)別屬性不能正確顯示(padding-top/padding-bottom倒源，margin-top/margin-bottom)
注意： 內(nèi)聯(lián)元素在一行之內(nèi)排列的時(shí)候，之間有間距
解決方法：a. 添加浮動(dòng) b. 把標(biāo)簽在一行顯示（不推薦）
行內(nèi)塊元素
行內(nèi)塊狀元素綜合了行內(nèi)元素和塊狀元素的特性
- 不會(huì)自動(dòng)換行
- 默認(rèn)排列方式為從左到右
- 可以設(shè)置寬高
可變元素
需要根據(jù)上下文關(guān)系確定該元素是塊元素或者內(nèi)聯(lián)元素
2. 標(biāo)簽種類
- 塊級(jí)元素
div -最常用的塊級(jí)元素
dl - 和dt句狼、dd 搭配使用的塊級(jí)元素
form - 交互表單
h1-h6 - 大標(biāo)題
hr - 水平分隔線
ol – 有序列
p - 段落
ul - 無序列表
li
fieldset - 表單字段集
colgroup-col - 表單列分組元素
table-tr-td 表格及行-單元格
...
- 內(nèi)聯(lián)元素
a - 超鏈接（錨點(diǎn)）
b笋熬、strong - 粗體
br - 換行
i - 斜體
em - 強(qiáng)調(diào)
img - 圖片
input - 輸入框
label - 表單標(biāo)簽
span - 常用內(nèi)聯(lián)容器，定義文本內(nèi)區(qū)塊
sub - 下標(biāo)
sup - 上標(biāo)
textarea - 多行文本輸入框
u - 下劃線
select - 項(xiàng)目選擇
...
- 可變元素
applet - java applet
button - 按鈕
del - 刪除文本
iframe - inline frame
ins - 插入的文本
map - 圖片區(qū)塊(map)
object - object對象
script - 客戶端腳本
...
3. 元素類型的轉(zhuǎn)換
- display屬性
盒子模型可通過display屬性來改變默認(rèn)的顯示類型
block 此元素將顯為塊級(jí)元素
inline 此元素會(huì)被顯示為內(nèi)聯(lián)元素腻菇，元素前后沒有換行符
inline-block 行內(nèi)塊元素（CSS2.1新增的值）
list-item 此元素會(huì)作為列表顯示
none 元素隱藏
注意：當(dāng)行內(nèi)元素設(shè)置了float屬性后胳螟，也可以給元素定義寬、高
4. 置換元素和非置換元素
置換元素：
瀏覽器根據(jù)元素的標(biāo)簽和屬性筹吐，來決定元素的具體顯示內(nèi)容
如img標(biāo)簽糖耸，src屬性決定了在網(wǎng)頁呈現(xiàn)不同的圖片
如input標(biāo)簽，type屬性決定了在網(wǎng)頁中呈現(xiàn)什么類型的input控件非置換元素
除置換元素外其他的html元素都是非置換元素
標(biāo)簽之間書寫什么樣的內(nèi)容丘薛，瀏覽器就顯示什么內(nèi)容
如img input select textarea button label等蔬捷，他們被稱為可置換元素。
它們區(qū)別一般inline元素是：這些元素?fù)碛袃?nèi)在尺寸榔袋，可以設(shè)置width/height屬性
它們的性質(zhì)和設(shè)置了display:inline-block的元素一致
這也是為什么img作為內(nèi)聯(lián)元素卻可以設(shè)置寬高的原因
