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

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

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::

连接
上一篇:重构之美-走在Web标准化设计的路上[复杂表单]
下一篇:重构之美-走在Web标准化设计的路上[深入结构:理解h系列的不合理。]


一个[复杂表单]热了热身,嗯,好,现在开始逐渐进入状态中……

这个副标题让我琢磨了很久,和之前的“随想随说”不一样,重新命名为《重构之美》后就给了我压力,让我认真对待仔细斟酌,这样其实也好。

2006 2 25 Create

Web标准在概念描述上涵盖了三个部分,结构[xhtml]、表现[css]、交互[DOM、ECMAScript],准确的定义我就不摘抄凑字数了,百度上google一下,遍地都是。这三个部分我认为并非处于同一个等级,xhtml是最重要的部分是第一级,而css和script则并列处于第二级,简单如下图例:

我认为不要小看了这个认识,我觉得这个目前很多人都没有意识到的问题,即便意识到了,行为上也没有跟上。怎么说呢?script不是我所擅长的,所以我基本上不会涉及到Web标准中交互这部分,即便涉及也只是很浅,个人能力有限。css部分会有针对性的涉及到,但不会很多,因为我不想在css上做太多的文章,因为我感觉现在国内Web标准界对css的追捧有点过了,大小介绍Web标准的网站和书籍主要都是在介绍css的各种技巧,而对于xhtml部分的介绍很少,也就泛泛的提及用div代替table进行布局和书写规则,多一点的会提到语义。

有没有深入的理解过?为什么要严格书写?我想大部分的答案是通过认证。再问,为什么要通过认证?答不出来了?好,再来,那又为什么要严格书写?又是认证?这不扯蛋嘛!鬼大爷管你认证与否。那么严格书写需要吗?不需要吗?靠!再来说语义,说起来估计还有很多“Web标准”者连语义这两个字都不知道。我认为语义是xhtml的两个核心之一,另外一个核心就是今天要谈到的结构。比如对表格table的使用,都是这么说的:表状数据还是要用table标记。那么有没有想过什么样的数据是属于表状数据?我说把一个三栏式布局的页面视为一行三列表状数据行不行?我是在扯蛋,那么什么是表状数据?什么时候用table?现在网上关于xhtml语义理解的文章真的很少,为什么?css啊,从上到下都追捧css去了,以至于那天我在蓝色理想上见回帖:学div+css,但不准备遵守xhtml……。类似的还有很多,什么花样都有。无语中,我想每个真正理解了Web标准的人都会很无奈的摇头,近2年Web标准的推广演变为Css的推广。Css很重要吗?不重要吗?靠!我说不要Css行不行?你找一大堆完全合理的理由……“行不行?”“行!”那就对了,我说不要你的Css,我要他的Css,又行不行?那么和xhtml相比,Css重要在哪里?

最后我们来说说关于“用div代替table进行布局”这种说法,这么说吧,如果你是抱着这种思路使用div,我认为是错误的,布局这个概念其实是table带来的,如果你又把布局加到对div的理解中去,那么对不起,你还是一个“table者”。最典型的,有位朋友针对我上一篇[复杂表单]评论到:你这个表单看似复杂,其实很简单,不过左右两列式布局,左二右六,……。他还提到了“拼装”两个字,然后说我的代码不过是用div代替table,说我是table思路。看看看看他对页面的分析,“左右两列”,“左二右六”,“拼装”,多么熟悉啊,即便他用div实现了这样的布局,你认为他抛开了table吗?所以我说他完全没看懂我的代码。我只听说过“不要使用table布局”,没有在很官方的地方看见过“用div代替table进行布局”这种说法,都是人为造出来的,或许是为了更好的推广Web标准,但是现在我们要知道,这种说法是错误的!div从来不是布局元素,也没有哪个标记是布局元素。

像上面的图示,xhtml是根基,表现和交互虽然也很重要,但毕竟可以不要表现,也可以不要交互,但是不能不要xhtml,所以在现在,在现在狂热的追捧Css,几乎达到忽略xhtml这个根基的环境下(比如上面我说的那个回帖),我要站出来,振臂一呼:Css,Stop!(不知道有多少人响应我,鄙视我也欢迎,当我是疯子一笑而过也可以。^_^)

本来打算简单说说Web标准的概念和对现状的不满,然后专心写[深入结构:理解h系列的不合理。],结果扯谈了这么多,也好,换个标题发布,[深入结构:理解h系列的不合理。]放到下篇来写。

2006 2 27 Update


连接
上一篇:重构之美-走在Web标准化设计的路上[复杂表单]
下一篇:重构之美-走在Web标准化设计的路上[深入结构:理解h系列的不合理。]

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

..
            
<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-02-27 15:32  爆牙齿  阅读(6331)  评论(33编辑  收藏  举报