你重构过自己的页面吗？——DOCTYPE的魔咒！（上）
2021年1月15日 | by tgcode
前言：如果您知道我有多么辛苦、多么用心的写着这篇文字，出于同情，您或许会捎上一眼。想要将自己的文字发布在园子的首页上，就必须用心去写，上班时白天在公司用着一台实际上只有480MB可用内存的台机，在IE7的窗口中敲打着这篇文字，当我插入了“1.1代码示例”之后，明显感觉所有浏览器窗口就如同当机时一般无法动弹，内存瞬间被吃200MB+，我想是无法继续在IE7下工作了，想把这篇文字迅速编辑完成的梦想顿时破灭了。存稿，关闭IE7，打开Chrome，嗯，还不错，至少内存没被吃太多，编辑器窗口的滚动条还能拖动，我又可以工作了。我的天啊，插入图片，上传按钮失效，老天你不能这样对我，于是，我又切换到Firefox，OK，终于可以插入图片了，却Firefox下，似乎也不是那么顺畅，于是我在几个浏览器之间寻求平衡与协作。周末了，终于我熬了两个通宵，花费了很多本该休息的时间，完成了一个“上篇”，真不知道“下篇”还会耗费我多少不再年轻的“青春”呢？如果您，是一个有点爱心的人，给我点鼓励吧，呵呵。
不知道您是否阅读过 Jeffrey Zeldman 的大作《网站重构——应用Web标准进行设计》（第二版） 这本书，即使您没有翻阅过此书，那么您也应该或多或少听说过 W3C 这个词汇吧，当然《网站重构》这本书并非 W3C官方出品，也非官方代言书籍，但是书中所渗透出的思想却是对 W3C 标准和规范的阐释，什么是 Web 标准，如何利用标准进行设计，正是Zeldman在书中用了大量生动的实例所阐述的。
Zeldman 在他的著作中说过：“……许多设计师和开发者都认为 Web 标准只是一个梦想，许多人甚至放弃了正确实现他们的努力。这并不难理解，理解需要多年才能形成。”
在当今这个花花的 Web 世界里，没有一种浏览器是完美的，每种浏览器在使用标准和可访问性上都各有所长。我一直很喜欢IE 在字体上的呈现度上，从我的眼睛看去同样的字体下 IE 总是比其他浏览器更为丰满些，看起来更舒服些，当然这仅仅是我的观点。至于从实现 W3C 标准和规范的角度来说，非 IE 系列的现代浏览器都有着非常良好的表现，当然 IE7+ 也并非一无是处，其对于标准和规范的理解及实现只是稍有欠缺罢了。
说了这么多，我是被《网站重构》鼓动了的心思，可拿什么页面来尝试一下重构乐趣呢？这不，公司首页改版，外包给美工的静态页面交付完工了，某领导最初的设想是让我按照以前其他同事的方式写几个 aspx 页面，然后通过iframe 将这些“动态”显示的数据嵌入到静态的首页中去，我很反感这样做，于是以理抗争说服了领导同志按照我的想法直接将首页改为了 aspx 页面。我的工作终于由分别写几个 aspx 页面，变成了专注于写一个 aspx 页面，貌似轻松不少。一百来行服务器端代码，哗哗啦啦的一个小时不到就写完了，可我花在研究 aspx 页面中 HTML 代码上的时间却不少，如何将动态读取到的数据“安静、不唐突、悄悄的”复原到静态的模板页上，应该采用何种服务器端数据控件动态显示从数据库中读取的数据等。在思考中我浪费了不少时间读取那糟糕的 HTML 源码，Table 布局带给我的视觉冲击就是大量的
| [……] |
伴随着数不清的 HTML 标签属性，以及少量使用 style 属性抒写的样式规则。我的天啊，这忽然让我想起了两年前第一次尝试用 Table 布局来组织一个页面时的痛苦，不知道什么地方会千奇百怪多出来的一个像素，整个 Table 或许会无缘无故的膨胀了起来，那些曾经的痛苦都留在记忆。
是的，在忍受了 Table 带给我的痛苦不久后，接触了 CSS 这个神奇的家伙，我囫囵吞枣的了解基本规则，对着中国同胞整理的CSS2.1 手册，开始自己的第一次“DIV之旅”。那时我只是一味的将所有的 Table 全部替换成了“DIV + 绝对定位”，那种对页面上内容的控制欲让我成为了一个十足的“多 div 症”患者。如今回首，那时的我只做了一件事：尝试用 div 重建自己原来的表格结构。用一套不必要（或不合理）的标签替换了另一套不必要（或不合理）的标签。
您或许会觉得我的旁白有点过于啰嗦，如果您不是早已麻木到遗忘地步，那您肯定没有经历过与我类似的痛苦，也没有动手尝试过像一位 divitis 患者一样重构过自己设计过的页面。那就来吧，和我一起经历一次又何妨。
首先，请您来看看根据静态页面按照要求修改而成的 aspx 的页面源码，请您注意 HTML 结构部分我未作任何修改，在您打开折叠的示例代码前，我友善的提醒一下您，做好心理准备，看一眼就可以重新折叠上代码了，因为我怕您“梦回2001”（2001年开始大量使用CSS来表现样式的页面出现，其结构和布局类似于下列代码中所见），但是很感谢您坐在2009年当下的电脑屏幕前认真地阅读我的文字。
百克网（这里建议您直接访问我公司首页，看看页面的效果，您或许会发现，嗨，还不错啊，页面设计的很简朴啊，恭喜您使用的是 IE 系列浏览器；如果您看见了什么奇怪异样的页面，那么恭喜您使用的应该是 Chrome 浏览器；如果您发现正在使用的浏览器下页面的表现和 IE 下 看起来只有少许异样，那么您或许使用的是 Mozilla 系列浏览器。如果您正在使用非 IE 系列浏览器阅读该篇文字，那么可以通过浏览器点击源码阅读。）首页 aspx 源码如下：
1.1代码示例<!–
Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/
–>@Pagelanguage=“c#“Codebehind=“main.aspx.cs“AutoEventWireup=“false“Inherits=“indexPage.main“%>
<!–DOCTYPEHTMLPUBLIC”-//W3C//DTDHTML4.01Transitional//EN”>
HTML>
HEAD>
title>百克网_领先的石化社区,国家级交易平台,上海石油交易所授权总服务商<!–title>
metahttp-equiv=”Content-Type”content=”text/html;charset=gb2312″>
METAcontent=”百克网,pec365.com,化工,石油,塑料,期货,招商,论坛,招聘,统计,文献,原油,成品油,橡胶,润滑油”name=”keywords”>
METAcontent=”百克网(www.pec365.com)是在全面整合原慧聪石油、慧聪化工、慧聪橡塑和中国润滑油网(www.chinalubricant.com)的基础上，与上海石油交易所(SPEX)联手打造的国家级石化产品交易平台，是以新型模式运营的石化行业专业资讯提供商，是目前中国最领先的石化社区”
name=”description”>
styletype=”text/css”>
BODY{MARGIN:0px;BACKGROUND-COLOR:#ffffff}
<!–style>
linkhref=”css/mainStyle.css”rel=”stylesheet”type=”text/css”>
styletype=”text/css”>BODY{FONT-SIZE:12px;COLOR:#666666;FONT-FAMILY:宋体}TD{FONT-SIZE:12px;COLOR:#666666;FONT-FAMILY:宋体}TH{FONT-SIZE:12px;COLOR:#666666;FONT-FAMILY:宋体}A:link{COLOR:#666666;TEXT-DECORATION:none}A:visited{COLOR:#666666;TEXT-DECORATION:none}A:hover{COLOR:#999999;TEXT-DECORATION:underline}A:active{COLOR:#666666;TEXT-DECORATION:none}.style1{COLOR:#7b7b7b}.lh24{HEIGHT:24px}<!–style>
scriptlanguage=”javascript”type=”text/javascript”src=”js/swfobject_source.js”><!–script>
scriptlanguage=”javascript”type=”text/javascript”src=”js/iJS.js”><!–script>
<!–HEAD>
basetarget=”_blank”>
body>
tablewidth=”100%”border=”0″align=”center”cellpadding=”0″cellspacing=”0″>
tr>
tdheight=”23″background=”images/top_bar_bg.jpg”>tablewidth=”1000″border=”0″align=”center”cellpadding=”0″cellspacing=”0″>
tr>
tdwidth=”555″height=”23″>ahref=”http://info.pec365.com/oil.aspx”class=”top_bar_grey”>石油<!–a>
fontclass=”top_bar_line”>|<!–font>ahref=”http://info.pec365.com/chem.aspx”class=”top_bar_grey”>
化工<!–a>fontclass=”top_bar_line”>|<!–font>ahref=”http://info.pec365.com/plas.aspx”class=”top_bar_grey”>
橡塑<!–a>fontclass=”top_bar_line”>|<!–font>ahref=”http://www.chinalubricant.com”class=”top_bar_grey”>
润滑<!–a>fontclass=”top_bar_line”>|<!–font>ahref=”http://product.pec365.com”class=”top_bar_grey”>
产品<!–a>fontclass=”top_bar_line”>|<!–font>ahref=”http://trade.pec365.com”>交易<!–a>
fontclass=”top_bar_line”>|<!–font>ahref=”http://articles.pec365.com”>文献<!–a>fontclass=”top_bar_line”>
|<!–font>ahref=”http://eln.pec365.com”class=”top_bar_grey”>学习<!–a>fontclass=”top_bar_line”>
|<!–font>ahref=”http://expo.pec365.com”class=”top_bar_grey”>展示<!–a>fontclass=”top_bar_line”>
|<!–font>ahref=”http://job.pec365.com”class=”top_bar_grey”>招聘<!–a>fontclass=”top_bar_line”>
|<!–font>ahref=”http://book.pec365.com”class=”top_bar_grey”>书城<!–a>fontclass=”top_bar_line”>
|<!–font>ahref=”http://ask.pec365.com”class=”top_bar_grey”>问答<!–a>fontclass=”top_bar_line”>
|<!–font>ahref=”http://bbs.pec365.com”class=”top_bar_grey”>论坛<!–a><!–FONT><!–td>
tdwidth=”445″align=”right”>ahref=”http://www.pec365.com/reg/register1.aspx”class=”top_bar_blue”>注册<!–a>fontclass=”top_bar_line_blue”>/<!–font>ahref=”http://www.pec365.com/reg/Login.aspx”class=”top_bar_blue”>登录<!–a>
fontclass=”top_bar_line_blue”>|<!–font>ahref=”http://www.pec365.com/ptgcodeecmoney/index.htm”class=”top_bar_blue”>
充值<!–a>fontclass=”top_bar_line_blue”>|<!–font>ahref=”http://www.pec365.com/member”class=”top_bar_blue”>
会员中心<!–a>fontclass=”top_bar_line_blue”>|<!–font>ahref=”http://www.pec365.com/pecpo/index.htm”class=”top_bar_blue”>
百克宝<!–a>fontclass=”top_bar_line_blue”>|<!–font>ahref=”http://www.pec365.com/sms/step1.aspx”class=”top_bar_blue”>
短信订制<!–a>fontclass=”top_bar_line_blue”>|<!–font>ahref=”#”class=”top_bar_blue”>
套餐订制<!–a><!–td>
<!–tr>
<!–table>
<!–td>
<!–tr>
<!–table>
tablewidth=”1000″border=”0″align=”center”cellpadding=”0″cellspacing=”0″>
tr>
tdwidth=”446″>imgsrc=”images/logo.gif”width=”276″height=”83″><!–td>
tdwidth=”554″valign=”top”>tablewidth=”130″border=”0″cellspacing=”0″cellpadding=”0″>
tr>
tdwidth=”130″height=”11″><!–td>
<!–tr>
<!–table>
tablewidth=”554″border=”0″cellspacing=”0″cellpadding=”0″>
tr>
tdwidth=”554″>tablewidth=”542″border=”0″cellspacing=”0″cellpadding=”0″>
tr>
tdwidth=”58″height=”39″background=”images/search_bg2.jpg”>imgsrc=”images/search_bg1.jpg”width=”58″height=”39″><!–td>
tdwidth=”472″valign=”top”background=”images/search_bg2.jpg”>tablewidth=”472″border=”0″cellspacing=”0″cellpadding=”0″>
tr>
tdwidth=”383″height=”33″valign=”bottom”>INPUTname=”text”class=”top_bar_grey”id=”search”onKeyPress=”if(event.keyCode==13)gosearch();”style=”BORDER-RIGHT:#d8d8d81pxsolid;BORDER-TOP:#d8d8d81pxsolid;BORDER-LEFT:#d8d8d81pxsolid;WIDTH:380px;LINE-HEIGHT:20px;BORDER-BOTTOM:#d8d8d81pxsolid;HEIGHT:20px”><!–td>
tdwidth=”89″valign=”bottom”>imgsrc=”images/search_btn.gif”width=”85″height=”21″border=”0″onClick=”gosearch();”><!–td>
<!–tr>
<!–table>
<!–td>
tdwidth=”12″background=”images/search_bg2.jpg”>imgsrc=”images/search_bg3.jpg”width=”12″height=”39″><!–td>
<!–tr>
<!–table>
<!–td>
<!–tr>
tr>
tdheight=”28″>spanclass=”keyword_b”>您要找的是：<!–span>ahref=”http://info.pec365.com/searchpage.aspx?keyword=%u539F%u6CB9″class=”keyword”>原油<!–a>
ahref=”http://info.pec365.com/searchpage.aspx?keyword=%u6210%u54C1%u6CB9″class=”keyword”tgcode>成品油<!–a>ahref=”#”class=”keyword”>液化气<!–a>ahref=”http://info.pec365.com/searchpage.aspx?keyword=%u7532%u9187″class=”keyword”>
甲醇<!–a>ahref=”http://info.pec365.com/searchpage.aspx?keyword=MTBE”class=”keyword”>MTBE<!–a>ahref=”http://info.pec365.com/searchpage.aspx?keyword=%u4E8C%u7532%u919A”class=”keyword”>二甲醚<!–a>
ahref=”http://info.pec365.com/searchpage.aspx?keyword=%u4E19%u70EF”class=”keyword”>丙烯<!–a>ahref=”#”class=”keyword”>PE<!–a>ahref=”http://info.pec365.com/searchpage.aspx?keyword=%u805A%u4E19%u70EF”class=”keyword”>
PP<!–a>ahref=”http://info.pec365.com/searchpage.aspx?keyword=%u805A%u6C2F%u4E59%u70EF”class=”keyword”>PVC<!–a>ahref=”#”class=”keyword”>苯<!–a>
ahref=”http://info.pec365.com/searchpage.aspx?keyword=%u7532%u82EF”class=”keyword”>甲苯<!–a>ahref=”http://info.pec365.com/searchpage.aspx?keyword=%u4E8C%u7532%u82EF”class=”keyword”>二甲苯<!–a>ahref=”http://info.pec365.com/searchpage.aspx?keyword=%u5C3F%u7D20″class=”keyword”>
尿素<!–a>ahref=”http://info.pec365.com/searchpage.aspx?keyword=%u590D%u5408%u80A5″class=”keyword”>复合肥<!–a><!–td>
<!–tr>
<!–table>
<!–td>
<!–tr>
<!–table>
tablewidth=”1000″border=”0″align=”center”cellpadding=”0″cellspacing=”0″>
tr>
td>
iframestyle=”FLOAT:left;MARGIN:0px”marginWidth=”0″marginHeight=”0″src=”http://www.pec365.com/webForum/tbFiles/tb744.htm”
frameBorder=”0″width=”1000″scrolling=”no”height=”31″><!–iframe>
<!–td>
<!–tr>
<!–table>
tablewidth=”1000″border=”0″align=”center”cellpadding=”0″cellspacing=”0″>
tr>
tdwidth=”300″>tablewidth=”300″border=”0″align=”center”cellpadding=”0″cellspacing=”0″>
tr>
tdwidth=”300″height=”30″background=”images/left_part_mid.gif”>imgsrc=”images/left_part_title.gif”width=”300″height=”30″><!–td>
<!–tr>
tr>
tdheight=”368″valign=”top”background=”images/left_part_mid.gif”>tablewidth=”278″border=”0″cellspacing=”0″cellpadding=”0″>
tr>
tdwidth=”41″height=”16″><!–td>
tdwidth=”237″><!–td>
<!–tr>
tr>
tdheight=”25″>imgsrc=”images/left_part_ico.gif”width=”13″height=”16″align=”right”><!–td>
td>ahref=”http://info.pec365.com/oil.aspx”class=”left_p_b”>石油<!–a><!–td>
<!–tr>
tr>
td><!–td>
tdclass=”td_p”>ahref=”http://product.pec365.com/oil/detail/1/1/1/”class=”left_p”>原油<!–a>
ahref=”http://product.pec365.com/oil/detail/1/2/2/”>成品油<!–a>ahref=”http://product.pec365.com/oil/detail/1/2/1/1/tgcode“>
液化气<!–a>ahref=”http://product.pec365.com/oil/detail/1/2/3/”>燃料油<!–a>ahref=”http://product.pec365.com/oil/detail/1/2/6/”>
沥青<!–a>ahref=”http://product.pec365.com/oil/detail/1/2/9/”>溶剂油<!–