HTML 區塊層級元素/內嵌元素

區塊層級元素的分類 (原文：http://kevinpeng.iteye.com/blog/743936)

區塊層級元素按照其應用於結構還是內容分為三種：結構化塊狀元素，終端塊狀元素，多目標塊狀元素。

一.結構化塊狀元素

這類元素用於構造文檔的結構，一個好的文檔結構對於搜尋引擎和應用其他技術（如JavaScript）都是十分有利的。它們沒有語義上的含義，僅僅劃分出了文檔的組織方式，並沒有體現文檔的內容。

主要的結構化塊狀元素

    * <ol>
    * <ul>
    * <dl>
    * <table>

支援結構化的元素

    * <li>
    * <dt>
    * <dd>
    * <caption>
    * <thead>
    * <tbody>
    * <tfoot>
    * <colgroup>
    * <col>

二.終端塊狀元素

這類元素用於從結構轉向內容，它們擁有語義上的含義，能夠表明內容的性質。終端塊狀元素屬於結構的終點，它們不能再包含其他區塊層級元素，只能包含文本或行級元素。

終端塊狀元素

    * <h1>...<h6>
    * <p>
    * <blockquote>
    * <dt>
    * <address>
    * <caption>

三.多目標塊狀元素

所謂多目標指的是可以自由的擴充或嵌套文檔的結構，以可以終端的形式出現。當多目標塊狀元素以結構化的方式使用時就含有結構化的內涵，以終端的形式使用就含有語義的內涵。

多目標塊狀元素既可以包含塊狀元素，也可以包含內容（文本與行級元素的組合為內容），但不能同時包含兩者。應該把內容放在塊狀元素中。塊狀元素不應作為行級元素與文本的兄弟元素，受HTML校正器的限制，目前還沒辦法檢驗出此種情況，但是應該避免。

多目標塊狀元素

    * <div>
    * <li>
    * <dd>
    * <td>
    * <form>
    * <noscript>

在談論CSS布局時，我們需要提前知道一些東西。對於html各種標籤/元素，可以從塊的層面做一個分類：要麼是block(塊元素)，要麼是inline(內嵌元素)：

block元素的特點：

    * 總是另起一行開始；
    * 高度，行高以及頂、底邊距都可控制；
    * 寬度預設是它所在容器的100%，除非設定一個寬度。

inline元素的特點：

    * 和其它元素都在一行上；
    * 高度，行高以及頂、底邊距不可改變；
    * 寬度就是它所容納的文字或圖片的寬度，不可改變。

下面對它們的性質及應用做進一步說明：
◎塊元素(block element) 通常作為其它元素的容器，它可以容納內嵌元素和其它塊元素。
我們知道預設情況下，塊元素會順序以每次另起一行的方式往下排，而通過CSS控制其樣式，我們可以改變這種預設配置模式，把塊元素擺放到你想要的位置上 去。需要指出的是，table標籤也是塊元素的一種，基於table表格和基於CSS+DIV的布局，在使用者看來除了頁面載入速度的差別（table在 所有內容元素載入完成後才顯示），沒有其它的差別。但是從頁面的原始碼來看，這種差異就非常大了。基於良好結構理念設計的CSS布局源碼，至少能讓沒有 web開發經驗的使用者很容易找到連續的頁面內容。從這個角度來說，CSS layout code應該有更好的美學體驗。
我們可以把模組化的DIV想象成一個個box，然後把它們按自己的意願排列組成完整的內容，網頁布局設計就是遵循了同樣的模式。

塊元素(block element) HTML標籤分類明細

    * address - 地址
    * blockquote - 區塊引述
    * center - 舉中對齊塊
    * dir - 目錄列表
    * div - 常用塊級容易，也是css layout的主要標籤
    * dl - 定義列表
    * fieldset - form控制組
    * form - 互動表單 （只能用來容納其它塊元素）
    * h1 - 大標題
    * h2 - 副標題
    * h3 - 3級標題
    * h4 - 4級標題
    * h5 - 5級標題
    * h6 - 6級標題
    * hr - 水平分隔線
    * isindex - input prompt
    * menu - 菜單列表
    * noframes - frames可選內容，（對於不支援frame的瀏覽器顯示此區塊內容
    * noscript - 可選指令碼內容（對於不支援script的瀏覽器顯示此內容）
    * ol - 排序表單
    * p - 段落
    * pre - 格式化文本
    * table - 表格
    * ul - 非排序列表

◎內嵌元素(inline element) 一般都是基於語義級(semantic)的基本元素，只能容納文本或者其它內嵌元素。

　　為了比較明確的表現出 block 與 inline 的區別，我們可以利用它們各自的代表元素div和span的示範進行說明：

XXXXXXXXX

This's a DIV layout

XXXXXXXXX
div另起一行，它的形狀不受內部文字的影響
XXXXXXXThis's a span layoutXXXXXXX 所有元素在一行，span剛好包容文字
內嵌元素(inline element) HTML標籤分類明細

    * a - 錨點
    * abbr - 縮寫
    * acronym - 首字
    * b - 粗體(不推薦)
    * bdo - bidi override
    * big - 大字型
    * br - 換行
    * cite - 引用
    * code - 電腦代碼(在引用源碼的時候需要)
    * dfn - 定義欄位
    * em - 強調
    * font - 字型設定(不推薦)
    * i - 斜體
    * img - 圖片
    * input - 輸入框
    * kbd - 定義鍵盤文本
    * label - 表格標籤
    * q - 短引用
    * s - 中劃線(不推薦)
    * samp - 定義範例電腦代碼
    * select - 項目選擇
    * small - 小字型文本
    * span - 常用內聯容器，定義文本內區塊
    * strike - 中劃線
    * strong - 粗體強調
    * sub - 下標
    * sup - 上標
    * textarea - 多行文本輸入框
    * tt - 電傳文本
    * u - 底線
    * var - 定義變數

◎可變元素 是基於以上兩者隨環境而變化的，它的基本概念就是根據上下文關係確定該元素是塊元素還是內嵌元素。一旦確定了它的類別，它就遵循塊元素或者內嵌元素的規則限制。

可變元素  HTML標籤分類明細

    * applet - java applet　　
    * button - 按鈕　　
    * del - 刪除文本　　
    * iframe - inline frame　　
    * ins - 插入的文本　　
    * map - 圖片區塊(map)　　
    * object - object對象　　
    * script - 用戶端指令碼

但是通過CSS，我們可以擺脫上面表格裡HTML標籤歸類的限制，自由地在不同標籤/元素上 應用我們需要的屬性。例如，我們可以對塊元素[ ul ]標籤加上 display:inline 屬性，讓原本垂直的列表水平顯示，這在我們設定Blog導航條時得到了廣泛應用；我們也完全可以把內嵌元素[ cite ]加上 display:block 這樣的屬性，讓它也有每次都從新行開始的屬性。