经典论坛 › 论坛 › 网站开发区 › HTML5及WEB标准化专栏 › 重构之美－走在Web标准化设计的路上[深入结构：div再议以 ...

查看: 12076|回复: 36

重构之美－走在Web标准化设计的路上[深入结构：div再议以及对span的迷惑] [复制链接]

yuntian　楼主

初级会员

帖子: 135
体力: 120
威望: 35

发表于 2006-2-23 10:26:00 |显示全部楼层

严正申明：《重构之美》系列原创连载文章，个人blog：http://yuntian.cnblogs.com 首发，蓝色理想同步更新。版权归作者个人所有。欢迎个人网站转载传播，请尊重作者劳动注明如下：作者：爆牙齿 http://yuntian.cnblogs.com。严禁任何营利性商业网站在未经作者授权同意情况下进行转载等侵权行为。

想了想还是把这段话也加上：

[center]唠叨先[/center]

对自己没信心了，不指望能集中续写《重构之美》，还是散开记录比较好。

看见一个评论这么说：“晕，现在才谈XHTML是不是太晚了点，这东东2004就火了一把了。”其实我觉得，作为一项技术，没有火与不火的说法，也没有早与晚的说法。技术的生命力和火没有关系的，不知道不理解没学会怎么都不晚。再说了，Web标准这个东西再过几个月就是进入中国两年的时间段了（这里我们暂且以傅捷所译《网站重构》2004年5月出版这事作为一个起点好吧）。两年的时间，你敢说Web标准已经全面推广开了吗？

有多少人还不知道？
有多少人只知道“Web标准”这个词？
有多少人正在学习？
有多少人把Web标准理解为div+css或者是ul/li代替table/tr/td？
有多少人把Web标准理解为css的崛起？……

我不知道，但是我去年底到目前的公司，40多名研发开发人员没一个知道Web标准。当我把Web标准带到他们面前，他们的理解只是我的css很强，……恰恰相反我个人觉得我自己的css水平很一般，本来css就没太多的技术含量，都是些技巧的东西。7、8年的思维模式哪那么容易就改过来了？ html也倔得要命，要连根拔出也不是件容易的事。所以Web标准之路还长着呢。我琢磨着xhtml 2.0发布的时候估计xhtml 1.0都在国内普及不开来，或者说不能正确的被普及开来。

既然叫随想随说，我就懒得整理了，想到那里说到那里，不分先后。我说出我的一些个人理解，正确与否自行判断吧，如果觉得我有错请无情的指出，谢谢。

啊哟，回头想想，快两年了诶，好快！不过就眨了眨眼。
----------------------------------------------------------------------------
最后决定就将这次散开记录的系列文章由最初的《随想随说，正确理解与运用Web标准》重新命名为《重构之美－走在Web标准化设计的路上》

本来我取名为“正确理解与应用”其实有赚眼球的不良动机。因为我确实仍处于理解中，并不能保证是绝对正确，而且很多文章我都会以一种求证的态度表达我自己的理解，这不已经有人指出：你完全不熟悉xhtml。虽然他没说理由，或许是随口一说，但仍让我感到汗颜，所以还是把翘起来的尾巴夹住，以免出现一看标题就想攻击的情况。

不过我已经不间断使用Web标准近两年时间，在多个项目内多次运用实践，现在做为发起者将对目前所在公司内40人规模的研发开发团队进行Web标准全面应用部署系列培训，并主导实施。所以我觉得，我应该不算初学者了，理解可能不一定正确，但至少不会肤浅。我希望每一个对我提出意见或者说甚至抨击我的朋友，对自己的话负责任拿出您的理由来，我们讨论，如果确实您正确，我立刻修改文章并注明您的名字和连接。对于不负责任的评论，一天后删除。希望大家评论时多敲一点字完整说出您的意见，类似于“好！”“顶！”“不好！”“乱说！”之类毫无意义的评论我也会随时整理删除，因为如果您做无意义的评论还真不如保持安静，谢谢。

如果说《重构之美－迎接网站标准化设计的来临》是一篇Web标准入门的文章，做到了形似，那么时隔近1年半，我希望和大家一起讨论，交换意见，努力的走近神似，所以取名为《重构之美－走在Web标准化设计的路上》，我们都在路上。这次的核心不在技术技巧上，而是像老标题一样，我希望尽量在“正确理解与运用”上做文章，在思路上做文章。

2006 2 24 update

[center]复杂表单[/center]

最近突然遭遇许多复杂表单，于是干上了。

一直有种说法：table用于数据表，对于复杂表单，table也是最好的选择，由于一直没有遇见过也就没有认真去研究，到底复杂表单是否应该使用table。

好了，机会来了，我拿着复杂表单的图样，看来看去都觉得不应该用table呀，除非是有行标和列标的数据表表单。反而类似于登陆这种简单表单，我倒是一直使用table，理由是能够在纯文档的时候对齐文本与输入框，但是对于复杂表单就不一样了，复杂表单涉及到页面布局了。

为什么要研究？因为我希望程序员不要涉及到界面的任何部分，对于页面，他只需要关注结构，而复杂表单如果采用table，很容易就将程序员带进对布局的操作中去。

好，经过一阵艰苦奋斗，还算好，xhtml部分自己觉得还算摸清了一些规律，页面的分析信手捻来，div布局下的复杂表单真是漂亮，但是但是…… css部分……我靠，真是难搞，干了几个复杂表单的css都没摸清规律，太JB麻烦了，尤其是文本长度不一致，表单控件又各种各样交错，还有错误提示隐藏的文本，时不时中间又加个按钮……迷茫了……算了，继续干css，希望最后能得出结论，对于复杂表单到底用table还是div?

先给一个对于登陆界面这样简单的表单，我最常用的xhtml代码，使用table，理由见上：

<div>
<h3><span>用户登陆</span></h3>
<table>
<tr>
<td><label for="name">用户名</label></td>
<td><input id="name" />
</tr>
<tr>
<td><label for="pw">密码</label></td>
<td><input id="pw" /></td>
</tr>
</table>
<p><button /></p>
</div>

复制代码

另外不使用table的如下：

<div>
<h3><span>用户登陆</span></h3>
<div>
<label for="name">用户名</label>
<input id="name" />
</div>
<div>
<label for="pw">密码</label>
<input id="pw" />
</div>
<p><button /></p>
</div>

复制代码

怎么说呢？第一种我视这样的简单表单为2行2列数据，用了table。第二种则是div模块化操作。一般我都使用第一种，除非文本长度一样（比如姓名，密码）才用第二种。当然我觉得第二种是正确的，所以我会优先在文案上先做文章使之长度一致。为什么？因为只有模块化，才能固定xhtml而通过css 随意布局，比如形式上为一行四列之时，第一种就做不到（其实FF可以正确解释对tr的浮动操作，例如2列tr，但是ie不支持，一个tr怎么都得占 table的一行。）。

好了，复杂表单的图样和xhtml部分在公司，明天上班发上，现在睡觉问梦去。

这份表单够份量不？

这里是xhtml部分，做了些必要的删除，没破坏结构就好了。留意我补充的部分，比如h2、h3。

<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>

复制代码

再补充一个，这里有两个部分很明显的表格结构，所以在那里使用了table，而其他部分没有用。

table部分xhtml。

..
<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>

复制代码

css部分还没琢磨出来规律，结论没有，继续琢磨，不过感觉没有用table结构很漂亮也很灵活，但是css确实让人头大，权衡得失中，再补充了。

爆牙齿 2006 2 23
http://yuntian.cnblogs.com

已有 1 人评分	威望	收起理由
经典论坛大妈	+ 3	历史打分

总评分: 威望 + 3 查看全部评分

		自动登录	找回密码
密码			注册

重构之美－走在Web标准化设计的路上[深入结构：div再议以及对span的迷惑] [复制链接]

随想随说，正确理解与运用Web标准——复杂表单

随想随说，正确理解与运用Web标准——复杂表单

随想随说，正确理解与运用Web标准——复杂表单

随想随说，正确理解与运用Web标准——复杂表单

随想随说，正确理解与运用Web标准——复杂表单

随想随说，正确理解与运用Web标准——复杂表单

随想随说，正确理解与运用Web标准——复杂表单

随想随说，正确理解与运用Web标准——复杂表单

随想随说，正确理解与运用Web标准——复杂表单

随想随说，正确理解与运用Web标准——复杂表单

重构之美－走在Web标准化设计的路上[复杂表单]

重构之美－走在Web标准化设计的路上[振臂一呼：Css, Stop!]

重构之美－走在Web标准化设计的路上[振臂一呼：Css, Stop!]

重构之美－走在Web标准化设计的路上[振臂一呼：Css, Stop!]

重构之美－走在Web标准化设计的路上[振臂一呼：Css, Stop!]

重构之美－走在Web标准化设计的路上[振臂一呼：Css, Stop!]

重构之美－走在Web标准化设计的路上[振臂一呼：Css, Stop!]

重构之美－走在Web标准化设计的路上[深入结构：理解h系列的不合理。]

重构之美－走在Web标准化设计的路上[深入结构：理解h系列的不合理。]

重构之美－走在Web标准化设计的路上[深入结构：理解h系列的不合理。]

重构之美－走在Web标准化设计的路上[深入结构：理解h系列的不合理。]

重构之美－走在Web标准化设计的路上[深入结构：理解h系列的不合理。]

重构之美－走在Web标准化设计的路上[理解HTML/XHTML/XML/XSL]

重构之美－走在Web标准化设计的路上[理解HTML/XHTML/XML/XSL]

重构之美－走在Web标准化设计的路上[理解HTML/XHTML/XML/XSL]

重构之美－走在Web标准化设计的路上[理解HTML/XHTML/XML/XSL]

重构之美－走在Web标准化设计的路上[深入结构：合理运用div和span。]

重构之美－走在Web标准化设计的路上[深入结构：合理运用div和span。]

重构之美－走在Web标准化设计的路上[深入结构：合理运用div和span。]

浏览过的帖子

浏览过的版块