写在最先：（百度百科）语义可以简单地看作是数据所对应的现实世界中的事物所代表的概念的含义，以及这些含义之间的关系，是数据在某个领域上的解释和逻辑表示。
在开发中我的看法是：语义化就是还原它的本质，它本来用来表达什么，就应该根据它的本质来使用。（好像跟没解释一样）
在web开发中大家都难免会使用到标签来进行格式化数据，加上表现和行为控制，最后输出页面文档。既然使用了标签，那么根据w3c标准，就必须要“语义 化”的使用它，举个例子，你不能使用div来输出段落文字，而应该使用P标签。有意义的，语义化的标签使得浏览器在底层就将它调整为它本应该表现的样式， 不需要添加其他标记符，减少冗余和无意义表达。
个人认为，在UI设计中也同样可以语义化。怎么说呢，先举个例子：又一个页面效果设计图，在一个搜索框的旁边有一个按钮，就是大家经常见的search按 钮，点击后打开搜索，这个是它本质的需求，也就是说这个按钮的“本职工作”就是执行搜索，那么设计师在输出这个设计图给页面开发人员的时候，通常是使用 ps来切图输出，而切出的图可能会是这样的（index_02_9.gif），页面开发人员就刚开始看这个图的时候就纳闷了，这个02_09是啥玩意呢？
也许你会说：就一个search按钮而已啊，看缩略图不就知道了？是的，在这种情况没错，但如果有两个，或三个呢?并且是在页面结构不同的模块呢？并且只是有些小区别呢？
如果语义化输出切图，就能避免这些困惑了，这个search按钮既然是在index的文章搜索框旁边，那我就将它命名为 （indexArticleSearch.gif），这样就明了了。皆大欢喜，维护的时候也能减少搜索的时间，对于大型项目，个人认为能提高大家的效率不 少。
Posted in Web Standard | 1 Comment »
貌似已经有人写过，但是自己还是要记录一下。。
注：
+(针对IE7及IE6，IE8没有测试)
_(下横线只针对IE6)
*html(只针对IE6)
*+html（只针对IE7）
*（针对IE7及以下版本，IE8没有测试）
html>/**/body(针对FF)
element{ display /*屏蔽IE6*/:none;}(注释在冒号前,只针对IE6).............还有很多。
通常我们在浮动后都会进行清除以免造成布局因为浮动而变乱，这个时候一般有两种做法，一种是添加一个元素，通常是DIV，然后让他来完成清除的任务。
.clear{clear:both;}
或者是用伪类来进行清除
#select:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
个人经验来看一般情况下使用添加一个DIV来进行清理虽然会增加无语义的标签，但是要优于伪类清除（IE6以下版本不支持这种清理方法）
那么如果使用前一种方法的话在IE浏览器中就会出现这样一个问题：这个DIV会有5px高度！！！！而在其他类型浏览器中却没有这种问题。解决办法 是对这个元素进行display:inline;来进行修正。增加了overflow:hidden;是为了解决浮动时出现的double margin问题。
.clear{clear:both;*display:inline;overflow:hidden;}
使用上面的清除样式后，IE下的默认DIV高度和浮动清理就解决了。。
-----------------------
如果要单独对IE下空DIV去除默认高度,也可以DIV{*display:inline;}
Posted in Web Standard | No Comments »