Code筆記之：CSS+HTML display 屬性

display屬性值:
none 此元素不會被顯示。 
block 此元素將顯示爲塊級元素，此元素先後會帶有換行符。 
inline 默認。此元素會被顯示爲內聯元素，元素先後沒有換行符。 
inline-block 行內塊元素。（CSS2.1 新增的值） 
list-item 此元素會做爲列表顯示。 
run-in 此元素會根據上下文做爲塊級元素或內聯元素顯示。 
compact CSS 中有值 compact，不過因爲缺少普遍支持，已經從 CSS2.1 中刪除。 
marker CSS 中有值 marker，不過因爲缺少普遍支持，已經從 CSS2.1 中刪除。 
table 此元素會做爲塊級表格來顯示（相似 <table>），表格先後帶有換行符。 
inline-table 此元素會做爲內聯表格來顯示（相似 <table>），表格先後沒有換行符。 
table-row-group 此元素會做爲一個或多個行的分組來顯示（相似 <tbody>）。 
table-header-group 此元素會做爲一個或多個行的分組來顯示（相似 <thead>）。 
table-footer-group 此元素會做爲一個或多個行的分組來顯示（相似 <tfoot>）。 
table-row 此元素會做爲一個表格行顯示（相似 <tr>）。 
table-column-group 此元素會做爲一個或多個列的分組來顯示（相似 <colgroup>）。 
table-column  此元素會做爲一個單元格列顯示（相似 <col>） 
table-cell 此元素會做爲一個表格單元格顯示（相似 <td> 和 <th>） 
table-caption 此元素會做爲一個表格標題顯示（相似 <caption>） 
inherit 規定應該從父元素繼承 display 屬性的值。

xHTML究竟有多少個標籤？絕大部分人都不能得出一個正確的答案，如今就有個機會，本身數數。答案：91個，哈哈,被你找到了~

a, abbr, b, base, body, br, dd, div, dl, dt, em, fieldset, form, h1, h2, h3, h4, h5, h6, head, hr, html, i, img, li, link, meta, ol, p, s, script, span, strong, style, title, u, ul, acronym, address, applet, area, basefont, bdo, big, blockquote, button, caption, center, cite, code, col, colgroup, del, dfn, dir, font, frame, frameset, iframe, input, ins, isindex, kbd, label, legend, map, menu, noframes, noscript, object, optgroup, option, param, pre, q, samp, select, small, strike, sub, sup, table, tbody, td, textarea, tfoot, th, thead, tr, tt, var

常見的塊狀元素與內聯元素

 

塊狀元素	內聯元素
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 - 無序列表 li	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 - 定義變量

 

塊級元素的分類 
塊級元素按照其應用於結構仍是內容分爲三種：結構化塊狀元素，終端塊狀元素，多目標塊狀元素。 
一.結構化塊狀元素 
這類元素用於構造文檔的結構，一個好的文檔結構對於搜索引擎和應用其餘技術（如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 這樣的屬性，讓它也有每次都重新行開始的屬性。

 

html技巧:input表單輸入框默認提示信息

做用：實現表單的輸入框當光標爲當前時，去掉默認值，當光標離開原默認值沒有發生改變時，再次顯示默認值，按鈕除外；

實現代碼以下（jquery版）：

$(":input").not(":input[type=submit],:input[type=button]").focus(function(){ if($(this).val() ==this.defaultValue){ $(this).val(""); } }).blur(function(){ if ($(this).val() == '') { $(this).val(this.defaultValue); } });