你真的懂HTML吗-从"最新闪存"说起
2009-11-04 23:05
246 查看
楔子
博客园最近正在整合闪存和博客.刚好我最近也在捣腾博皮,所以关注了下整合的结果.不得不说,园子最终的生成的html相当的不规范,语义性混乱,或者说很多冗余,也许就是所谓的div强迫症/class强迫症.HTML的语义性
我不知道从什么时候开始,Table的布局开始为国人所唾弃,div+css的布局开始大受吹捧.不管引领潮流的是哪个,我们所追求的目标是一致的,"让html更简练,更可读."更简练,意味着去除不需要的冗余,分离内容和展现,清除纯粹用于布局的tag. 更可读,意味着提高html本身的语义性,让html解释它本身所要表达的意思.
而这样子做的好处是什么呢?
简练,让内容和展现松耦合,利于分工,最大化利用web缓存机制,减少网路流量,加快页面渲染. 可读,让内容结构更清晰,利于被各种终端理解(比如盲人的屏幕阅读器,搜索引擎的爬虫).
Block-level Elements(块级元素) VS Inline Elements(内联元素)
在Html的规范中,这么说到(摘自棕熊童鞋的[Quicky] block 和 inline 的区别是?) 所有允许被 BODY 元素包含的元素,要么是块级的;要么是内联的;要么既可以算作块级的,也可以算作内联的。但是绝对不存在一个能被BODY包含,但即非块级,又非内联的元素。
常见的块级元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等等。
常见的内联元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR 等等。
另外,SCRIPT, OBJECT, MAP, BUTTON, DEL, INS 这些元素,既可以作为块级元素,也可以作为内联元素。
常见的块级元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等等。
常见的内联元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR 等等。
另外,SCRIPT, OBJECT, MAP, BUTTON, DEL, INS 这些元素,既可以作为块级元素,也可以作为内联元素。
那么块级元素和内联元素具体有什么区别呢?具体表现在以下几个方面:
一般来说块级元素可以包含块级元素和内联元素;但内联元素只能包含内联元素。 要注意的是,每个特定的元素,能包含的元素也是特定的,所以具体到个别元素上,这条规律是不适用的。
比如 P 元素,只能包含内联元素,而不能包含块级元素。
code
<!-- 这是不符合规范的 --> <p><div>balalbalabala</div></p> <!-- 这是规范允许的--> <p><span>balalbalabala</span></p>
具体关于这方面的知识,大家可以阅读棕熊童鞋的[Quicky] block 和 inline 的区别是?
为什么是div+css的布局
把追求语义性定义为"div+css布局",其实是狭隘的.我觉得它的完整说法应该是"无语义性tag+css做布局,语义性tag组织内容".我们知道 html的tag大部分本身都有自身的语义性的.比如p,是段落,br是换行,你不能用p来做换行,用br来做段落,这样就会导致html本身的语义产生混乱.而div和span刚好是html中两个本身不具备语义性的tag. 但是span是inline element,所以不适合做容器,div是块级元素,所以毫无疑问它成为我们做布局的最好选择,也才有了"div+css布局"一说.div强迫症/class强迫症
在第一版本的整合中,最新闪存的html结构大致如下code
<div class="day"> <div class="dayTitle"> </div> <div class="my_ing"> 一个良好的讨论氛围,是一家好公司的最基本条件.<a class="ing_lnk" href="http://home.cnblogs.com/ing/58955/">10-30 14:44</a> <br> 经济危机,重新开垦一亩三分地......<a class="ing_lnk" href="http://home.cnblogs.com/ing/58457/">10-28 13:45</a> <br> 学习是个轮回,重新上路ing...<a class="ing_lnk" href="http://home.cnblogs.com/ing/32400/">06-01 21:06</a> <br> <a class="ing_lnk" href="http://home.cnblogs.com/walkingboy/ing/</span>">更多闪存...</a> </div> </div>
首先,最新闪存被放在post的列表容器内,而且使用一样的容器class标识,这就导致做css的时候很难定位它.
其次br被用来做列表,
再次more link和list item又进行混淆.
我本来想为自己的博皮调调css,结果发现这个结构真是很晕,然后发了条建议闪存的html位置和结构竟然和Post一样,很难修改皮肤啊.
不得不说,园子团队的反应速度还是可以的,昨天晚上又进行了更新,我们看下第二版本的html结构.
code
<div id="side_ing_block"> <h3 class="catListTitle">最新闪存</h3> <div class="side_ing_list"> <ul> <li>一个良好的讨论氛围,是一家好公司的最基本条件. <a class="ing_lnk" href="http://home.cnblogs.com/ing/58955/">10-3014:44</a></li> <li>经济危机,重新开垦一亩三分地......<a class="ing_lnk" href="http://home.cnblogs.com/ing/58457/">10-2813:45</a></li> <li>学习是个轮回,重新上路ing... <a class="ing_lnk" href="http://home.cnblogs.com/ing/32400/">06-0121:06</a></li> <li><a class="ing_lnk" href="http://home.cnblogs.com/walkingboy/ing/</span>">更多闪存...</a></li> </ul> </div> </div>
不错,语义性已经有一定的修改了,但是还是有太多的冗余tag.
原来Cat Chen有篇文章叫你有 <table /> 强迫症吗?.
我想我们可以说上面的html是有强烈的<div/>强迫症+class强迫症. 为什么这么说呢.
<div/>强迫症+class强迫症
<div id="side_ing_block"> <h3 class="catListTitle">最新闪存</h3><!--这个class是完全多余的,h3已经很好的显示了它的语义,css定位也是明确的#side_ing_block h3 ,找不到它留下来的理由 --> <div class="side_ing_list"><!--ul已经表示了是个list,何必再一个div+class来标识呢?css的定位也是明确的#side_ing_block ul--> <ul> <li>一个良好的讨论氛围,是一家好公司的最基本条件.<a class="ing_lnk" href="http://home.cnblogs.com/ing/58955/">10-3014:44</a></li> <li>经济危机,重新开垦一亩三分地......<a class="ing_lnk" href="http://home.cnblogs.com/ing/58457/">10-2813:45</a></li> <li>学习是个轮回,重新上路ing... <a class="ing_lnk" href="http://home.cnblogs.com/ing/32400/">06-0121:06</a></li> <li><a class="ing_lnk" href=http://home.cnblogs.com/walkingboy/ing/>更多闪存...</a></li><!--不是相同项,怎么能并入相同的列表呢?即使不管语义性,这样子的定义,css也不好定位啊--> </ul> </div> </div>
我个人认为就"最新闪存"这部分的html,更好的结构应该是
code
<div id="side_ing_block"> <h3>最新闪存</h3> <ul> <li><a href="http://home.cnblogs.com/ing/58955/">一个良好的讨论氛围,是一家好公司的最基本条件. 10-30 14:44</a></li> <li><a href="http://home.cnblogs.com/ing/58457/">经济危机,重新开垦一亩三分地......10-28 13:45</a></li> <li><a href="http://home.cnblogs.com/ing/32400/">学习是个轮回,重新上路ing...06-01 21:06</a></li> </ul> <span><a href=http://home.cnblogs.com/walkingboy/ing/>更多闪存...</a></span> </div>
当然我们当前是孤立的看待这段html,如果我们把它放入整个页面的结构中,还是需要适当的修改的。比如<div id="side_ing_block">应该修改为 <div id="side_ing_block" class="block">,block是页面块状结构的一个基础样式,不过园子的left menu里面的div都是独立的,没有抽象出一个基础样式class,所以每次新加入一个模块,所有的博皮都得修改。而span也应该多加一个 class="more".这些已经不是html语义化的范畴,而是css复用的设计问题了,不在这篇文章的谈论之内。
随着<table/>强迫症的逐渐消失,我们应该警惕<div/>强迫症,class强迫症的不断抬头,追求标准我们永不止步,但是也不能迷失自我.
本文基于署名 2.5 中国大陆许可协议发布,正品行货,如有雷同,皆为山寨,作者保留追究权利,在保留本文的署名陈达艺(包含链接)的情况下,允许进行转载,演绎或用于商业目的。如您有任何疑问或者授权方面的协商,请用E-Mail/MSN联系我。
相关文章推荐
- 你真的懂HTML吗-从&quot;最新闪存&quot;说起
- [zt]给你的Mp4大换血,精选Touch里3年收集的900多首歌,"经典不忍去的""最新近流行的",与你共享~~
- 说明:最新"谷歌AI智商不超过6岁"研究来自中国科学院而非美国康内尔大学
- TextField htmlText 以及xml里"<" 和 ">" 等特殊字符的显示问题
- 【三水哥】HTML中数字输入框内输入字母或者特殊符号,获取输入框内的值为""
- 编写 "纯HTML" jsp应用--学会使用 JSTL
- 控制台报错:HTML1524: 无效 DOCTYPE。最短的有效文档类型是 "<!DOCTYPE html>"
- Jsoup选择器解析html时,遇到class里有空格时,用"."代替
- 从"error:file not found \n grub rescue>"说起
- 最新升级的火狐38.0.6识别ajax调用返回的""空值可能有异常。
- 基于html、jsp、css制作的"慕课网"首页界面设计练习
- 说明:最新"谷歌AI智商不超过6岁"研究来自科学院而非康内尔大学
- silverlight: "[HtmlPage_NotEnabled] 调试资料字符串不可用"的解决
- MAC chrome浏览器 "adobe flash player不是最新版本提示" 的解决方案
- 从"error:file not found \n grub rescue>"说起
- html-编写"改变颜色"、"改变宽高"、"隐藏内容"、"显示内容"、"取消设置"的函数
- HTML中显示特殊字符,如尖括号 “<”,">"等等
- HTML中显示特殊字符,如尖括号 “<”,">"等等
- "Content-Type" content="text/html; charset=utf-8"中content="text/html是啥意思呢?
- [转-来自啊泰]推模式下dataset1下显示的是"...未找到项目..." 问题的解决[补充] [http://www.cnblogs.com/babyt/archive/2005/04/15/138588.html]