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); } });