超越起点 追随自由 我想故我所有

我看不见,我的明天,但今天,绝不重复昨天;顺风是滑翔,逆风才是飞翔,火烧过才能化凤凰!总想对你表白,我的心情是多么豪迈
总想对你倾诉,我对生活是多么热爱

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::
  415 随笔 :: 18 文章 :: 2062 评论 :: 30 引用

公告

连接
◆《重构之美》总目录
上一篇:重构之美-走在Web标准化设计的路上[振臂一呼:Css, Stop! ]
下一篇:重构之美-走在Web标准化设计的路上[关于HTML/XHTML/XML/XSL]


回头看上篇文章,确实有点乱,感觉自己像个愤青,怨妇一样。我的意思是不要过多的把关注投向Css,Css并非Web标准的最核心的东西。我认为Web标准的核心在从html到xhtml这个看似变化很小确意义非凡的事情上。Web标准更多的是思想的变革,思想的重构,而不是技术,而这一点则几乎全部体现在xhtml上。

菩提树朋友在评论中做了个比喻:

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,理由是结构不好,推荐使用这样更合理的结构进行代替:

<section>
    
<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后的最终页面效果上。比如:

<h1>文档名</h1>
<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>

这段代码的浏览效果如下:

我们可以看到,浏览已经完整了,有了结构,这种结构是通过语义而产生,然而代码结构完整吗?所以我说过,语义带有部分结构的含义,却不等于结构。完整的代码结构我认为如下:

<h1>文档名</h1>
<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大结构,而不管页面具体如何设计的,看看:

<h1>网站标题</h1>
<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页面,固定下来。

好了,现在你理解了吗?认可吗?

下一篇继续深入结构,咱们聊聊关于div和span。

2006 3 8 Update


连接
◆《重构之美》总目录
上一篇:重构之美-走在Web标准化设计的路上[振臂一呼:Css, Stop! ]
下一篇:重构之美-走在Web标准化设计的路上[关于HTML/XHTML/XML/XSL]

@lpspider

“……大师分析C++代码……”,……,快别这么说,我好不容易把尾巴夹起来,您这不是挑逗我把尾巴翘起来吗,呵呵。这话真动听……

你在《刚要玩玩xhtml就被当头一棒》迷惑于国外在html和xhtml之间的争论,没来得及细看,不过我认为没有太多争论的。

xhtml1.X一定是html,而html则不一定是xhtml1.X。那么如果说IE不支持xhtml就等于说IE不支持html,不会吧。所以IE不支持xhtml一说不知何来之有,不过IE不完全支持Css倒是真的,但是,但是css是表现,表现和结构是无关的。xhtml的产生正是因为在html中,表现和结构混为一团,不利于向xml平稳过渡。

如果要说担心,xhtml2.0到值得担心,因为有很多新的东西被加入进来,就需要各浏览器作出相应的支持,不像目前xhtml1.x,浏览器不用变化。但是这种担心或许有点早了,又或许多余了。首先xhtml2.0还处于草案和提议与设计中,而1.X还没有被正确普及开来,时间还长着呢。其次,即便xhtml2.0被确定被推荐,由于不能完全向下兼容,还需要等浏览器跟上节奏,这又是一长段时间。所以完全不用着急,我认为的话,即便xhtml是被视为一种过渡技术,但是仍然有着相当的生命力。

最后顺便提提xml吧,就像我在文中所说,我认为xhtml一定会代替html,但是不一定被xml所代替,或者就如上所说,有相当的生命力。xml只有数据和结构,它的语义是面向程序的,而不是面向浏览器。如果要全面xml话,首先使用浏览器浏览网页这种上网模式就一定要先转变,再或者浏览器本身的内核会有较大的改变甚至需要重新设计。这两个都不是一蹴而就的事情,所以xml的意义更多在于桥梁,要作为主体目前还不行,不管作为数据的主体还是结构的主体。因此即便xhtml被视为过渡技术,2000年出生以来,经历了1.0,1.1,现在仍然在向2.0发展,直到所有条件成熟,xml能够全面接管过来。而xhtml的作用就是在xml能够接管之时,顺利平稳过渡。我个人认为现在谈过渡还早,2003年说99%是过时的,现在呢?2006年了,纠正了多少了?那么,我想,xhtml会再存在3、5年或者更久吧。不过互联网谁又知道呢,也许就在明天一切都变了。

明天怎么样管不了了,我们只能有个方向,然后全力把握住今天。

 

---------------------垃圾部分------------------

..
            
<div class="personinfo">
                
<h2><span>个人信息</span></h2>
                
<div>
                    
<h3><span>购房人</span></h3>
                    
<table>
                        
<tr>
                            
<td><span>选择</span></td>
                            
<td>姓名</td>
                            
<td>性别</td>
                            
<td>年龄</td>
                            
<td>关系</td>
                            
<td>户籍所在地</td>
                        
</tr>
                        
<tr>
                            
<td><input type="checkbox" /></td>
                            
<td><select /></td>
                            
<td><input /></td>
                            
<td><input /></td>
                            
<td><select /></td>
                            
<td><input /></td>
                        
</tr>
                    
</table>
                
</div>            
                
<div>
                    
<h3><span>家庭成员</span></h3>
                    
<table>
                        
<tr>
                            
<td><span>选择</span></td>
                            
<td>姓名</td>
                            
<td>性别</td>
                            
<td>年龄</td>
                            
<td>关系</td>
                            
<td>户籍所在地</td>
                            
<td>工作单位</td>
                            
<td>编辑</td>
                            
<td>删除</td>
                        
</tr>
                        
<tr>
                            
<td><input type="checkbox" /></td>
                            
<td><select /></td>
                            
<td><input /></td>
                            
<td><input /></td>
                            
<td><input /></td>
                            
<td><input /></td>
                            
<td><input /></td>
                            
<td><button /></td>
                            
<td><button /></td>
                        
</tr>
                    
</table>
                    
<p>
                        
<button />
                    
</p>
                
</div>
            
</div>
<h1>大便蛔虫的表单标题</h1>
<div>
    
<h2>导航</h2>
    
<div>
        
<button>新增</button>
        
<button>刷新</button>
    
</div>
    
<div>
        
<h3>当前批次采用的标准为</h3>
        
<div>
            
<label>本人补贴</label>
            
<asp:label id="" Runat="server"></asp:label>
        
</div>
        
<div>
            
<label>本人工龄补贴</label>
            
<asp:label id="" Runat="server"></asp:label>
        
</div>
        
<div>
            
<label>配偶补贴</label>
            
<asp:label id="" Runat="server"></asp:label>
        
</div>
        
<div>
            
<label>配偶工龄补贴</label>
            
<asp:label id="" Runat="server"></asp:label>
        
</div>
        
<div>
            
<label>特殊补贴</label>
            
<asp:label id="" Runat="server"></asp:label>
        
</div>
    
</div>
    
<iewc:treeview id="" ExpandLevel="1" runat="server" AutoPostBack="True"></iewc:treeview>
</div>
<div>
    
<h2>表单内容</h2>
    
<div>
        
<h3>申请人信息</h3>
        
<div>
            
<label>本人姓名</label>
            
<asp:textbox id="" Runat="server"></asp:textbox>
        
</div>
        
<div>
            
<label>身份证号码</label>
            
<asp:textbox id="" Runat="server"></asp:textbox>
        
</div>
        
<div>
            
<label>本人工龄(年)</label>
            
<asp:textbox id="" Runat="server"></asp:textbox>
            
<asp:regularexpressionvalidator id="REVY" runat="server" Display="Dynamic" ValidationExpression="\d{0,2}" ErrorMessage="必须输入整数"
        ControlToValidate
="txt_WorkAge"></asp:regularexpressionvalidator>
        
</div>
        
<div>
            
<label>工作单位</label>
            
<asp:label id="" Runat="server"></asp:label>
        
</div>
        
<div>
            
<label>职务或职称</label>
            
<asp:textbox id="" Runat="server"></asp:textbox>
        
</div>
    
</div>
    
<div class="personinfo">
        
<h3>现住房信息</h3>
        
<div>
            
<label>现住房地址</label>
            
<asp:textbox id="" Runat="server"></asp:textbox>
        
</div>
        
<div>
            
<label>建筑面积(平方米)</label>
            
<asp:textbox id="" Runat="server"></asp:textbox>
        
</div>
        
<div>
            
<label>其中个人按市场价自购面积(平方米)</label>
            
<asp:textbox id="" Runat="server"></asp:textbox>
        
</div>
        
<div>
            
<label>现住房性质</label>
            
<asp:textbox id="" Runat="server"></asp:textbox>
        
</div>
        
<div>
            
<label>补贴住房面积标准(平方米)</label>
            
<asp:textbox id="" Runat="server"></asp:textbox>
        
</div>
        
<div>
            
<label>申请住房补贴理由</label>
            
<asp:dropdownlist id="" Runat="server"></asp:dropdownlist>
        
</div>
        
<div>
            
<label>申请住房补贴标准</label>
            
<asp:radiobuttonlist id="" runat="server" RepeatDirection="Horizontal">
                
<asp:ListItem>无房户一次性补贴</asp:ListItem>
                
<asp:ListItem>一次性补面积差</asp:ListItem>
            
</asp:radiobuttonlist>
        
</div>
    
</div>
    
<div>
        
<h3>配偶信息</h3>
        
<div>
            
<label>配偶姓名</label>
            
<asp:textbox id="" Runat="server"></asp:textbox>
        
</div>
        
<div>
            
<label>配偶身份证号码</label>
            
<asp:textbox id="" Runat="server"></asp:textbox>
        
</div>
        
<div>
            
<label>配偶工龄</label>
            
<asp:textbox id="" Runat="server"></asp:textbox>
            
<asp:regularexpressionvalidator id="" runat="server" Display="Dynamic" ValidationExpression="\d{0,2}" ErrorMessage="必须输入整数"
            ControlToValidate
=""></asp:regularexpressionvalidator>
        
</div>
        
<div>
            
<label>配偶工作单位</label>
            
<asp:textbox id="" Runat="server"></asp:textbox>
        
</div>
        
<div>
            
<label>职务或职称:</label>
            
<asp:textbox id="" Runat="server"></asp:textbox>
        
</div>
    
</div>
    
<div>
        
<h3>享受住房分配或货币补贴情况</h3>
        
<div>
            
<label>(1)已享受房改购房面积(平方米)</label>
            
<asp:textbox id="" Runat="server"></asp:textbox>
        
</div>
        
<div>
            
<label>(2)已享受购房补贴(元)</label>
            
<asp:textbox id="" Runat="server"></asp:textbox>
        
</div>
        
<div>
            
<label>(3)已享受住房补贴(元)</label>
            
<asp:textbox id="" Runat="server"></asp:textbox>
        
</div>
        
<div>
            
<asp:button id="" Text="计算" Runat="server"></asp:button>
            
<label>本次补贴面积(平方米)</label>
            
<cc1:acceptnumber id="" runat="server"></cc1:acceptnumber>
        
</div>
    
</div>
    
<div>
        
<h3>住房补贴</h3>
        
<div>
            
<label>本人补贴(元)</label>
            
<asp:textbox id="" Runat="server"></asp:textbox>
        
</div>
        
<div>
            
<label>本人工龄补贴(元)</label>
            
<asp:textbox id="" Runat="server"></asp:textbox>
        
</div>
        
<div>
            
<label>配偶补贴(元)</label>
            
<asp:textbox id="" Runat="server"></asp:textbox>
        
</div>
        
<div>
            
<label>配偶工龄补贴(元)</label>
            
<asp:textbox id="" Runat="server"></asp:textbox>
        
</div>
        
<div>
            
<label>特殊补贴(元)</label>
            
<asp:textbox id="" Runat="server"></asp:textbox>
        
</div>
        
<div>
            
<label>合计(元)</label>
            
<asp:textbox id="" Runat="server"></asp:textbox>
        
</div>
        
<div>
            
<label>实际发放补贴(元)</label>
            
<asp:textbox id="" Runat="server"></asp:textbox>
        
</div>
    
</div>
    
<div>
        
<h3>请申请人根据不同情况填写</h3>
        
<div>
            
<label>现购房地址</label>
            
<asp:textbox id="" Runat="server"></asp:textbox>
        
</div>
        
<div>
            
<label>售房单位</label>
            
<asp:textbox id="" Runat="server"></asp:textbox>
        
</div>
        
<div>
            
<label>偿还贷款帐号</label>
            
<asp:textbox id="" Runat="server"></asp:textbox>
        
</div>
        
<div>
            
<label>贷款银行</label>
            
<cc1:xmldropdownlist id="" runat="server" XmlNodeName="" XmlPath=""></cc1:xmldropdownlist>
        
</div>
        
<div>
            
<label>本人公积金存储号</label>
            
<asp:textbox id="" Runat="server"></asp:textbox>
        
</div>
    
</div>
    
<div>
        
<asp:button id="" Text="保存" runat="server" CssClass="button"></asp:button>
        
<asp:Button id="" Text="退回" runat="server" CssClass="button"></asp:Button>
        
<asp:Button id="" Text="删除" runat="server" CssClass="button"></asp:Button>
        
<button id="" onclick="javascript:window.close();">关闭</button>
    
</div>
</div>
posted on 2006-03-08 14:17 爆牙齿 阅读(...) 评论(...) 编辑 收藏