本文从良构，有效性，布局三个角度，结合往日项目开发经历， 整理总结重构HTML改善Web应用设计的几点规则和做法。部分参考自《重构HTML改善Web应用设计》。
重构。什么是重构？为什么要重构。
重构是在不改变程序行为的基础上进行小的改动，是代码逐渐改善的过程。移除长期累积下来的烂码，以得到更清晰和更容易维护，除错以及添加新功能的代码，这做法不能单纯只出现在编码的后期，甚至是你意识到你的代码已经无从再下手非重写不可的时候，而是从开始开发起，逐渐积累，逐渐修改。以前因为日常编码的随意性，导致问题日益积累，逐步扩散，最后只能推倒重来。如果时间经受不起推倒重来，你别无选择，唯一实现的选择就是重构。
无论做什么，都不要因为追求完美而忽略晓得改进，如果眼下时间足够做一点重构，那就做一点儿。日后有时间还可以做更多。整体的重构设计虽然惹人注目令人难忘，但没有平日的积累，何以收获庞大的成就？你的目标应该是让代码每天都有新变化。坚持几个月，我相信我们都能拥有骄傲地，清晰代码。
良构
把标记转换为符合现代标准的首要任务是实现良构。良构保证了DOM可操作的文档树结构的唯一性，因而成为可靠的跨浏览器的javascript代码的基础。对于一个乱构的页面来说，任何可靠的自动化处理或测试都是非常难以保证的，其次，浏览器页面的展示效果更是不可预估。对于乱构的页面，不同的浏览器使用不同的方式补充确实的片段，并纠正其中的错误。因此，对于重构HTML，最要紧的无疑是实现页面良构化。
要达到良构，大部分的网站要至少或全部做到以下几点：
?所有的其实标签都应有一个匹配的结束标签
?空元素应该使用空元素的标签语法
?所有的属性都必须有一个值
?所有的属性都需要用引号括起来
?所有的&好必须转义为&；
?所有的小于号都要转义为<；
?只有唯一的根元素
?所有未预定义的实体应用必须在DTD中声明
针对往日因为个人编程习惯和随意性容易犯的错误，从良构角度思考，整理一下日后构建HTML时，有几点需要特别注意。
更好实现良构的几个要点：
1.将名称改成小写。<P></P> 改写为 <p></p>等，因为XHTML只使用小写名称，所有元素和属性都要小写，<TABLE>和<Table>都不被接收
2.给属性值加引号。<span class = speack></span>改写成<span class =“ speack”></span>等。一些空格的属性有时候出现有做括号而没有右括号，浏览器不宜定按照你的意愿解析，不同的浏览器有不同的解析效果，这就有可能造成跨浏览器问题。
3.补足遗漏的属性。<input type = "radio" checked>改成<input type = "radio" checked = 'checked'>等。XHTML不支持只有属性名称而没有值的语法。
4.将空标签替换为空元素标签。XML解析器要求所有的起始标签都有匹配的结束标签<p>要有对应的</p>，<br>改写为</br>等
5.消除重叠。<strong><em>xxxx</strong></em>改写成<strong><em>xxxx</em></strong>等。不同的浏览器对包含重叠元素的文档所构建的DOM树不一样。在重叠元素面前，javascript，css以及其他需要读取DOM的程序都变得难以创建，排错和维护。
有效性
有效性比良构稍微严格，即不仅要确保文档的语法正确，还要保证语义正确。保证元素和属性只能按自身语义出现在恰当的地方。
有效性是面向未来开发的基石。有效的网站与设备无关，有效的页面为不同的读者传达相同的信息，就算读者使用的是界面不相同的浏览器。
良构和有效性检查是基本的语法约束保证，接下来要保证语义是恰当的。
具体实现方法：
1，加入过渡型DOCTYPE声明
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
过渡式DTD让你不必要完全语义标记就能让文档通过验证，并且他允许包含i,b和center等这些不推荐使用的表现性元书，因此，在进一步改善文档的语义之前，你可以找出比修复更严重的结构问题。
2，删除所有不存在的标签
3，用CSS替代center，i，font等不被推荐或弃用的标签。
4，把行内（inline）元素，放在块（block）元素中
要做到有效，文档中所有元素是有效的严格性XHTML元素还不够，还必须保证它们之间的正确关系，浏览器和其他程序处理XHTML需要依赖元素间的正确位置。
Do you like this pictrue?<br /> <img src = "file.gif" /> I think it's really <em>neat</em> <!--改写为--> <p>Do you like this pictrue?<br /></p> <div><img src = "file.gif" /></div> <p>I think it's really <em>neat</em></p>
布局
1，熟悉元素语义
每一个元素都应各司其职：ul是无序列表，ol是有序列表，table是表格式数据，blockquote是应用，h1~h6是标题等。恰当的语义元素有助于屏幕阅读器呈现更容易理解的结构，也能保证不同平台间正确显示。对于初学者，很多本来语义良好的元书，如ul,blockquote,table等，被滥用与实现某种特定布局效果。这些滥用的目的是给网页生成特定的外观，然而这些外观难以跨浏览器，几乎除了设计者自己的电脑，通常很多地方都不通用的。
失败经历：
为了实现导航效果，一开始没有考虑内容语义，无意中将导航主项和相关联的菜单分开，在利用css中的相对定位，设定top和left属性，将相关菜单移动到相关的主项下。这样会导致一个严重的问题。一旦将不同页面放置在不同的分辨率的屏幕上，菜单就会错位。就是说，针对不同分辨率的屏幕，还要设计不同的top和left属性。
<div class = "nav"> <div class="nav01">菜单一</div><div class="nav02">菜单二</div><div class="nav03">菜单三</div> </div> <div class = "menu"> <div class="menu01">子菜单一</div><div class="menu02">子菜单二</div><div class="menu03">子菜单三</div> </div>
优化设计过的导航HTML结构，组合主菜单和子菜单：
<nav> <ul class="clear"> <li class="first"><a href="#">菜单一</a></li> <li> <span class="Darrow"></span> <a href="#">菜单二</a> <dl> <dt><span class="arrow"></span></dt> <dd><a href="#">子菜单一</a></dd><dd><a href="#">子菜单二</a></dd><dd><a href="#">子菜单三子菜单三</a></dd> </dl> </li> <li> <span class="Darrow"></span> <a href="#">菜单三</a> <dl> <dt><span class="arrow"></span></dt> <dd><a href="#">子菜单一</a></dd><dd><a href="#">子菜单二</a></dd><dd><a href="#">子菜单三子菜单三</a></dd> </dl> </li> </ul> </nav>
编写HTML的目的不是为某种结构或者页面外观，而是为了如何更好地呈现内容，因此在编写HTML之前，务必思考这种内容应该使用哪种语义的元素。
恰当的HTML非常适合处理跨浏览器问题。拿到web设计图后，在着手构建web应用之前，你必须要停止考虑页面的外观，而应该开始思考页面表达的是什么含义。