html
塊狀元素、內聯元素
塊級元素的分類
塊級元素按照其應用於結構仍是內容分爲三種：
結構化塊狀元素，終端塊狀元素，多目標塊狀元素。
結構化塊狀元素
這類元素用於構造文檔的結構，一個好的文檔結構對於搜索引擎和應用其餘技術（如JavaScript）都是十分有利的。它們沒有語義上的含義僅僅劃分出了文檔的組織方式，並無體現文檔的內容。
主要的結構化塊狀元素
* <ol>
* <ul>
* <dl>
* <table>
支持結構化的元素
* <li>
* <dt>
* <dd>css
*<caption>
* <thead>
* <tbody>
* <tfoot>
* <colgroup>
* <col>
二
.
終端塊狀元素
這類元素用於從結構轉向內容，它們擁有語義上的含義，可以代表內容的性質。終端塊狀元素屬於結構的終點，它們不能再包含其餘塊級元，只能包含文本或行級元素。
終端塊狀元素
* <h1>...<h6>
* <p>
* <blockquote>
* <dt>
* <address>
* <caption>
三
.
多目標塊狀元素
所謂多目標指的是能夠自由的擴展或嵌套文檔的結構，以能夠終端的形式出現。當多目標塊狀元素以結構化的方式使用時就含有結構化的內，以終端的形式使用就含有語義的內涵。
多目標塊狀元素既能夠包含塊狀元素，也能夠包含內容（文本與行級元素的組合爲內容），但不能同時包含二者。應該把內容放在塊狀元素中。塊狀元素不該做爲行級元素與文本的兄弟元素，受HTML校驗器的限制，目前還沒辦法檢驗出此種狀況，可是應該避免。
多目標塊狀元素
* <div>
* <li>
* <dd>
* <td>
* <form>
* <noscript>
在談論CSS佈局時，咱們須要提早知道一些東西。對於html各類標籤/元素，能夠從塊的層面作一個分類：要麼是block(塊元素)，要麼是ine(內聯元素)：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 - formhtml
控制組
* form -
交互表單（只能用來容納其它塊元素）
* h1 - 大標題
* h2 - 副標題
* h3 - 3級標題
* h4 - 4級標題
* h5 - 5級標題
* h6 - 6級標題
* hr - 水平分隔線
* isindex - input promptjava
* menu - 菜單列表web
* noframes - frames可選內容，（對於不支持frame的瀏覽器顯示此區塊內容
* noscript - 可選腳本內容（對於不支持script的瀏覽器顯示此內容）瀏覽器
* ol - 排序表單app
* p - 段落
* pre - 格式化文本
* table - 表格
* ul - 非排序列表
◎內聯元素
(inline element) 通常都是基於語義級(semantic)的基本元素，只能容納文本或者其它內聯元素。爲了比較明確的表現出block 與inline的區別，咱們能夠利用它們各自的表明元素div和 span的演示進行說明：XXXXXXXXX This's a DIV layoutXXXXXXXXXdiv另起一行，它的形狀不受內部文字的影響XXXXXXXThis's a span layoutXXXXXXX 全部元素在一行，span恰好包容文字ide
內聯元素(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 這樣的屬性，讓它也有每次都重新行開始的屬性。