菩提树朋友在评论中做了个比喻:
XHTML像是一块白肉,不能吃,就算能吃,吃起来,也是十一分难吃。CSS就是那酱料,沾着吃,才有味,SCRIPT就好比加了一道火,烤一下,再吃,原来,完全不一样。
非常感谢你,这个比喻非常好,不过理解重心不一样。
还是这个比喻,我把xhtml视为牛排好不好?一份牛排好吃与否关键在牛肉本身的品质,其价值也体现在这里。甚至牛肉本身的品质可以好到任何外部因素都显多余,生吃是最好的选择。不知道你喜欢烹饪吗?我比较喜欢。首先要肉好菜好,新鲜,其次才是调料、火候、技巧。一堆好菜,不用费什么功夫就能得到很好的效果,而一堆烂菜,怎么掩饰都掩饰不住本质的缺陷。任何厨师都最重视原材料的筛选,事半功倍。话说回来,生存第一位,所以一块白肉哪怕再难吃也强过调料,没别的意思,只是为了说明轻重,应该首先重视xhtml的品质,其次才是css的技巧。By The Way,我很喜欢吃牛排,而且只要3成熟。^_^
我还是继续说下去吧,或许听完后再回头看,就能理解我为什么说:Css, Stop!并非要否定Css,而是指对Css的过度追捧,Stop。
问题:HTML中的六个标题Tag(h1/h2/h3/h4/h5/h6),设计是否合理?理由?解决办法?
这是我在培训中提出的两个问题之一,不知道大家有没有考虑过?或许你要说这个不是我们该考虑的问题,这个是W3的工作。我承认,其实我最初也没主动去考虑过,直到有一天接触了xhtml2.0,我才知道h系列标题的设计是不合理的,在xhtml2.0中,不推荐使用<hx>系列Tag,理由是结构不好,推荐使用这样更合理的结构进行代替:
<h>
<section>
<h>
<section>
<h>
</section>
</section>
</section>
嗯,好像答案都有了,不合理,结构不好,解决如上。其实我想问的是为什么hx系列结构不好?为什么要这样改?现在你先别急着向下看,试试想想。
琢磨这个问题是因为我想试着去理解W3到底想干什么?现在我们清楚了为什么在xhtml1.1中不认可类似font之类的Tag,xhtml1.1是2001年的产物,如果当时我们就理解了,那么Web标准早就推广开来了。现在W3如法炮制,在2.0中不推荐现有的h系列Tag,那么会不会在“2.1”中完全抛弃它,如同抛弃font一样。xhtml2.0尚处于草稿和提议当中,还未被W3正式推荐。当然我无意从中引出Web大标准、超标准之类的东西,我只是希望能对目前的Web标准加深理解有所帮助,实际上我认为我得到了较大启发或者说之前的一些模糊的,不确定的感觉变清晰了,所以我认为这是一个对于目前Web标准非常经典的问题。
好,现在说说我的理解。
首先我们想想h1/h2/h3/h4/h5/h6这六个Tag是什么东西,当然是标题Tag。它们有什么不同?h1页面唯一(一个页面只能存在一个h1),并且字体最大。h2~h6可以多个,字体逐步减小。曾经有个朋友说他认为h系列都是和表现相关的东西,有可能在以后的xhtml中被删除,所以他从来不用也搞不懂为什么那么多人用。其实他搞错了开头,却猜中了结局。确实已经在2.0中不被推荐,却不是因为表现而是因为结构。不知道还有没有人和他有同样看法?h系列绝对不是类似font的表现Tag,如果因为粗体和大小就算的话,那么所有标签都属于表现标签了,ul还有点,ol还有数字呢,p有间距,div会换行,……那么还需要xhtml干嘛呢?直接XML好了。
xml里的X是指可扩展,也就是可以随意定制标签。而xhtml中的X虽然也叫Extensible可扩展,但是并非可扩展,你不能为xhtml自定义标签,它更多是指xml化,也就是xml化的html。所以,xhtml每个标签都需要有默认的样式来支撑它的语义化,这些样式是最基础的样式,为什么h1和h2不一样?因为它们默认样式不一样。为什么2个div会形成2行,而2个span却在一行上?因为div默认一个display:block的样式。具体的大家有兴趣可以查一下。好了,hx系列Tag的不合理就出在这里,语义和结构。h1~h6的语义通通都是一样的,那就是标题。他们之间有没有结构?有的。同样的语义却设计了6个Tag,为什么?因为结构的存在。hx系列之间的结构(节,俗点叫上下级关系)是靠123456(不同的默认样式来决定),但是这些数字并没有语义的,你说1大还是6大?不同的环境下截然相反,人的判断都如此,作为程序是无法理解凭什么2就是1的子级,3就是2的子级。再有,假如一篇极端的文档需要用到h7,h8……怎么办呢?所以有了以上的改变,语义用h表示,把结构分离出来用section表示,这样一来,程序喜欢不喜欢,我想不用多说了。^_^
2006 2 27 Create
很久以前,我第一次看到IBM网站上《Web 的未来:XHTML 2.0》这篇译文时,第一个反应是怎么把标题Tag搞得这么复杂,再定睛一看,马上就联想到自己的迷惑和一直在追求的东西,真的立刻就有一种醍醐灌顶、豁然开朗、近视眼带上眼镜的感觉。其实早在一年多前,我就有过这样的迷惑:如何固定xhtml文档?后来还在重构之美-迎接Web标准化设计的来临[总结一:网页设计回归?]中对这个问题曾做过这样的总结:
...2、根据规划完成XHTML文档,组织好文档结构,设计纯文档。这里我要提醒,纯文档同样具有UE,它只是没有了UI而已,所以需要仔细推敲标记的选用并确定下最简洁的XHTML文档。...4、根据设计稿为XHTML文档添加样式进行还原,通过样式表的设计技巧尽可能的不修改XHTML,如果UI实在是复杂,则可以在不影响XHTML文档结构的情况下加入一些额外的标记或者进行一些嵌套。...
可以看到当时的我其实是迷惑的,怎样选用标记?怎样的xhtml文档最简洁又灵活?我一直在努力,去始终好像很难找到一个方法固定xhtml。对于一个页面,不同的人有不同的分析,不同的分析又将产生不同的xhtml文档。哪怕两人在不加载样式表情况下设计出浏览界面完全一样的页面,背后也可能因为分析的不同是两份不同结构的xhtml,也就是语义一样,但结构不一样。语义含有部分结构的概念,却不等于是结构。
现在举个例子吧,可能都希望看见实例。下面这个图很简单,大家先试试写出xhtml来,如果懒,构思一下也好。
2006 2 28 Update
很早就开始关心纯文档的结构,从最初的关注浏览器中xhtml的浏览结构,慢慢也开始关注xhtml的代码结构。简单说明一下这两个结构吧,希望大家能够多关注一下浏览结构,更多关注一下代码结构,而不是仅仅把目光注视在应用了css后的最终页面效果上。比如:
<h2>标题1</h2>
<h3>标题1.1</h3>
<h3>标题1.2</h3>
<h4>标题1.2.1</h4>
<h4>标题1.2.2</h4>
<h3>标题1.3</h3>
<h2>标题2</h2>
<h3>标题2.1</h3>
这段代码的浏览效果如下:
我们可以看到,浏览已经完整了,有了结构,这种结构是通过语义而产生,然而代码结构完整吗?所以我说过,语义带有部分结构的含义,却不等于结构。完整的代码结构我认为如下:
<div>
<h2>标题1</h2>
<div>
<h3>标题1.1</h3>
<h3>标题1.2</h3>
<div>
<h4>标题1.2.1</h4>
<h4>标题1.2.2</h4>
</div>
<h3>标题1.3</h3>
</div>
<h2>标题2</h2>
<div>
<h3>标题2.2</h3>
</div>
</div>
上面的代码还不是很合理,有心的朋友应该能看出来,不过意思到了就好。
这有没有觉得这段代码眼熟?回头看看开头xhtml2.0中推荐的标题表达形式。是的,当我看见xhtml2.0的时候马上想起的就是我的这种写法,然后更加坚定的将这种写法延伸使用下去,并且发现似乎找到了固定xhtml的方法:用标题划分代码结构。这样对于同一个页面,不同的人都能写出同样的xhtml结构。例如,对于大部分页面,都可以视为页头,内容,页脚三部分,那么好了,每个人都能写出一模一样的xhtml大结构,而不管页面具体如何设计的,看看:
<div>
<h2>页头</h2>
<h2>内容</h2>
<h2>页脚</h2>
</div>
或许你会说,这样简单了,那么你可以去看我在[复杂表格]中的几段代码,或者看《粗略整理博客圆的页面Xhtml代码》。统统是这样的结构。
这样写优势太多了,因为它不论在哪一方面都吻合xml的要求,不论在写法上还是结构上,程序会非常喜欢,比如无论通过js还是后台编程,我们都可以很轻松的通过xpath查询提出所有的h3或者任何部分。我想这也是xhtml的目标,让html尽可能的靠向xml。xhtml会代替html,但是我想xml不会代替xhtml,至少在浏览器没变革前,xml没有直接的语义,只有结构。xml的语义需要通过程序或者xsl来转换成有直接语义的xhtml来体现,关于xml这里就不多说了。 这种写法是有缺点的,那就是会感觉h不够用,6个h标签,只有3个可用,h4已经显小。那么当我们的结构层次高于3层或者高于4层的时候就麻烦了,所以开始向往xhtml2.0,可以无限层的表达下去,虽然还不清楚它怎么来区分每个h标签。
这样的写法很接近一个结构很好的Word文档,对,就是以写Word文档的方式来写xhtml页面,固定下来。
好了,现在你理解了吗?认可吗?
作者:爆牙齿 http://yuntian.cnblogs.com