连接
上一篇：重构之美－走在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>（１）已享受房改购房面积（平方米）</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>
<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>