好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

重构HTML改善Web应用设计_html/css_WEB-ITnose

本文从良构,有效性,布局三个角度,结合往日项目开发经历, 整理总结重构HTML改善Web应用设计的几点规则和做法。部分参考自《重构HTML改善Web应用设计》。

重构。什么是重构?为什么要重构。

  重构是在不改变程序行为的基础上进行小的改动,是代码逐渐改善的过程。移除长期累积下来的烂码,以得到更清晰和更容易维护,除错以及添加新功能的代码,这做法不能单纯只出现在编码的后期,甚至是你意识到你的代码已经无从再下手非重写不可的时候,而是从开始开发起,逐渐积累,逐渐修改。以前因为日常编码的随意性,导致问题日益积累,逐步扩散,最后只能推倒重来。如果时间经受不起推倒重来,你别无选择,唯一实现的选择就是重构。

  无论做什么,都不要因为追求完美而忽略晓得改进,如果眼下时间足够做一点重构,那就做一点儿。日后有时间还可以做更多。整体的重构设计虽然惹人注目令人难忘,但没有平日的积累,何以收获庞大的成就?你的目标应该是让代码每天都有新变化。坚持几个月,我相信我们都能拥有骄傲地,清晰代码。

良构

   把标记转换为符合现代标准的首要任务是实现良构。良构保证了DOM可操作的文档树结构的唯一性,因而成为可靠的跨浏览器的javascript代码的基础。对于一个乱构的页面来说,任何可靠的自动化处理或测试都是非常难以保证的,其次,浏览器页面的展示效果更是不可预估。对于乱构的页面,不同的浏览器使用不同的方式补充确实的片段,并纠正其中的错误。因此,对于重构HTML,最要紧的无疑是实现页面良构化。

  要达到良构,大部分的网站要至少或全部做到以下几点:

所有的其实标签都应有一个匹配的结束标签 空元素应该使用空元素的标签语法 所有的属性都必须有一个值 所有的属性都需要用引号括起来 所有的&好必须转义为&; 所有的小于号都要转义为<; 只有唯一的根元素 所有未预定义的实体应用必须在DTD中声明

  针对往日因为个人编程习惯和随意性容易犯的错误,从良构角度思考,整理一下日后构建HTML时,有几点需要特别注意。

  更好实现良构的几个要点:

将名称改成小写。

改写为

等,因为XHTML只使用小写名称,所有元素和属性都要小写, 和 都不被接收 给属性值加引号 。 改写成 等。一些空格的属性有时候出现有做括号而没有右括号,浏览器不宜定按照你的意愿解析,不同的浏览器有不同的解析效果,这就有可能造成跨浏览器问题。 补足遗漏的属性。 改成 等。XHTML不支持只有属性名称而没有值的语法。 将空标签替换为空元素标签 。XML解析器要求所有的起始标签都有匹配的结束标签

要有对应的


改写为
等 消除重叠。 xxxx 改写成 xxxx 等。不同的浏览器对包含重叠元素的文档所构建的DOM树不一样。在重叠元素面前,javascript,css以及其他需要读取DOM的程序都变得难以创建,排错和维护。

有效性

   有效性比良构稍微严格,即不仅要确保文档的语法正确,还要保证语义正确。保证元素和属性只能按自身语义出现在恰当的地方。

  有效性是面向未来开发的基石。有效的网站与设备无关,有效的页面为不同的读者传达相同的信息,就算读者使用的是界面不相同的浏览器。

良构和有效性检查是基本的语法约束保证,接下来要保证语义是恰当的。

  具体实现方法:

   1,加入过渡型DOCTYPE声明

 

  过渡式DTD让你不必要完全语义标记就能让文档通过验证,并且他允许包含i,b和center等这些不推荐使用的表现性元书,因此,在进一步改善文档的语义之前,你可以找出比修复更严重的结构问题。

   2,删除所有不存在的标签

  3,用CSS替代center,i,font等不被推荐或弃用的标签。

  4,把行内(inline)元素,放在块(block)元素中

  要做到有效,文档中所有元素是有效的严格性XHTML元素还不够,还必须保证它们之间的正确关系,浏览器和其他程序处理XHTML需要依赖元素间的正确位置。

Do you like this pictrue?
I think it's really neat

Do you like this pictrue?

查看更多关于重构HTML改善Web应用设计_html/css_WEB-ITnose的详细内容...

  阅读:35次