重构HTML改善Web应用设计

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

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

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

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

良构

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

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

•所有的其实标签都应有一个匹配的结束标签

•空元素应该使用空元素的标签语法

•所有的属性都必须有一个值

•所有的属性都需要用引号括起来

•所有的&好必须转义为&；

•所有的小于号都要转义为<；

•只有唯一的根元素

•所有未预定义的实体应用必须在DTD中声明

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

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

1.将名称改成小写。

改写为

等，因为XHTML只使用小写名称，所有元素和属性都要小写，和
都不被接收

2.给属性值加引号。改写成等。一些空格的属性有时候出现有做括号而没有右括号，浏览器不宜定按照你的意愿解析，不同的浏览器有不同的解析效果，这就有可能造成跨浏览器问题。

3.补足遗漏的属性。改成等。XHTML不支持只有属性名称而没有值的语法。

4.将空标签替换为空元素标签。XML解析器要求所有的起始标签都有匹配的结束标签

要有对应的

，
改写为
等

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

有效性

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

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

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

具体实现方法：

1，加入过渡型DOCTYPE声明

 
 
    
  
  
  1. 
  
  
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" 
    3.

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

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

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

4，把行内（inline）元素，放在块（block）元素中

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

 
 
    
  
  
  1. Do you like this pictrue?
    2. 
  
  
    3. 
  
  
  3. I think it's really neat
    4. 
  
  
  4. 
  
  
  5. 
  
  
    7. 
  
  
  7. Do you like this pictrue?
    8. 
  
  
    9. 
  
  
  9. I think it's really neat
    10.

布局

1，熟悉元素语义

每一个元素都应各司其职：ul是无序列表，ol是有序列表，table是表格式数据，blockquote是应用，h1~h6是标题等。恰当的语义元素有助于屏幕阅读器呈现更容易理解的结构，也能保证不同平台间正确显示。对于初学者，很多本来语义良好的元书，如ul,blockquote,table等，被滥用与实现某种特定布局效果。这些滥用的目的是给网页生成特定的外观，然而这些外观难以跨浏览器，几乎除了设计者自己的电脑，通常很多地方都不通用的。

失败经历：

为了实现导航效果，一开始没有考虑内容语义，无意中将导航主项和相关联的菜单分开，在利用css中的相对定位，设定top和left属性，将相关菜单移动到相关的主项下。这样会导致一个严重的问题。一旦将不同页面放置在不同的分辨率的屏幕上，菜单就会错位。就是说，针对不同分辨率的屏幕，还要设计不同的top和left属性。

 
 
    
  
  
    2. 
  
  
  2.      菜单一菜单二菜单三
    3. 
  
  
  3. 
  
  
    5. 
  
  
  5.     子菜单一子菜单二子菜单三
    6. 
  
  
  6.

优化设计过的导航HTML结构，组合主菜单和子菜单：

 
 
    
  
  
    2. 
  
  
  2.     
    3. 
  
  
  3.         菜单一
    4. 
  
  
  4.         
  5. 
  
  
  6.              菜单二
    7. 
  
  
  7.             
    8. 
  
  
  8.                 
    9. 
  
  
  9.                 
    子菜单一
    子菜单二
    子菜单三子菜单三
    10. 
  
  
  10.             
    11. 
  
  
  11.         
    12. 
  
  
  12.         
  13. 
  
  
  14.              菜单三
    15. 
  
  
  15.             
    16. 
  
  
  16.                 
    17. 
  
  
  17.                 
    子菜单一
    子菜单二
    子菜单三子菜单三
    18. 
  
  
  18.             
    19. 
  
  
  19.         
    20. 
  
  
  20.     
    21. 
  
  
  21.

编写HTML的目的不是为某种结构或者页面外观，而是为了如何更好地呈现内容，因此在编写HTML之前，务必思考这种内容应该使用哪种语义的元素。

恰当的HTML非常适合处理跨浏览器问题。拿到web设计图后，在着手构建web应用之前，你必须要停止考虑页面的外观，而应该开始思考页面表达的是什么含义。

#p#

2，替换表格布局

基于CSS的页面比基于表格的页面更小更简单。

a)编写和编辑更容易，下载更快，

b)通过转向CSS，可以节省带宽。同时外联的css文件可以缓存和重用，不必随每次页面的下载又重下一次。

取代滥用本用于呈现表格数据的table元素而使用表格布局，可以考虑频繁使用的分栏式布局：

1）两栏，左侧固定宽度的侧栏，右边是弹性宽度的内容栏

2）三栏，左右各固定宽度的侧栏，中间是内容。

根据以往项目开发经验：

栏目的高度是由它们所包含的内容量决定。对于内容比重大的网站来说，因为不能保证单个内容栏跟其他栏等高，栏会固定高度，保证各栏高度相同；而对于内容简单短小页面，不固定高度问题不大。另外，主体内容的div应该在侧栏，页头或页脚之前，这样屏幕阅读器可以从页面最重要的内容开始线性读取页面。搜索引擎机器人也可以对排在页面前面的内容予以更高的优先级。

就两栏布局而言，有三种可能的宽度：

（1）两栏宽度固定。最普遍，固定宽度对于一部分用户来所可能过大，过大的宽度用户必须滚动水平内容来查看内容，降低文本的可读性

（2）左栏固定，内容栏是百分比宽度

（3）两栏都是百分比

从更好的用户体验考虑，主体内容应该能调整大小，以便适应不同窗口宽度。

3，内容与样式分离

当然我们的页面也需要漂亮的外观，以帮助我们在竞争中脱颖而出。这可以通过在独立的CSS样式中放置有关表现的信息来实现。CSS用来描述网页的外观，而浏览器可以自由选择不同的样式表或是修改过的样式表。实际上，你可以为不同的浏览器随意发送不同的样式表，也可以为它们独特的能力量身定制。这是响应式设计的基本实现方法。

“响应式网页不仅仅是响应不同类型的设备，而且需要响应不同的用户需求。响应式的初衷是为了让信息更好的传递交流，让所有人无障碍的获取信息，同时这也是 Web 的初衷。”

出于方便或者是自身的编码习惯，在修改某种被更改的需求的样式代码时候，我们很容易在html代码中直接镶嵌样式代码。这样的做法除了更快的完成你暂时的任务之外没有任何好处。

4，使用CSS定位替代框架

网站使用框架的理由实际上就两种：

（1）为所有页面引入相同的静态内容，而不用单独编辑每个页面。例如导航，网页头部尾部。也就是说，单独的非框架页面可能比相应的框架页面更耗带宽，因为框架内容每次都要给客户端重新发送内容。

（2）显示多栏外观。例如Java API，包含包和类的列表，主体内容

然而，过多使用框架将降低可用性：

（1）难以标记数千或返回指定页面

（2）难以保存和打印页面

（3）过多的滚动条占据屏幕的宝贵空间

在每一个页面上都有导航和其他相同或几乎相同的内容，对网站来说是非常普遍的，使用CSS取代框架，关键在于设立对应每个框架的div，每个div内容是对应框架里的文档内容。然而，这样做的问题在于，它违反了DRY原则（Don't Repeat Youself,别重复你自己），对于相同的内同，虽然有时候只是很小的变化，但还是需要不断在这一页那一页重复出现。重复内容通常也是代码的坏味道。框架在静态页面上避免恶劣不必要的重复，我提倡清晰，可维护的代码，在不损害用户界面的前提下，我更远一选择难看的代码而不是难看的用户界面。日常中原始的HTML是重复的，但不是我们必须编辑的，很多时候我们可以通过后台自动生成重复内容。

Apache服务器端包含：

通常，拥有服务器端包含的以.shtml结尾的文件会在发送到客户端之前，告诉服务器需要解析自身以及包含的内容

几乎所有的Web服务器都支持某些形式的服务器端包含功能，使用服务器端包含各种非静态文件，性能有所降低，但影响不大。

 
 
    
  
  
  1. 
  
  
  2. 
  
  
  3.     
    4. 
  
  
  4. 
  
  
  5.      
    6. 
  
  
  6.     
    7. 
  
  
  7.     
    8. 
  
  
  8. 
  
  
  9.     
    10. 
  
  
  10.     
    11. 
  
  
  11. 
  
  
  12.

尽管Apache默认的编译会包含mod_include，但可能不会在所有目录上启用，你需要子啊Apache主配置文件或是.htacess文件中添加一下三行配置，以指向每一个使用服务器包含的目录：

 
 
    
  
  
  1. AddType text/html .shtml 
    2. 
  
  
  2. AddOutputFilter INCLUDES .shtml 
    3. 
  
  
  3. Options +Includes
    4.

PHP包含：

PHP的include函数有类似的功能

 
 
    
  
  
  1. 
  
  
  2. 
  
  
  3.     
    4. 
  
  
  4. 
  
  
  5.     
    6. 
  
  
  6.    
  
  
  7.        include("footer.html"); 
    8. 
  
  
  8.        include("sidebar.html");     
    9. 
  
  
  9.     ?>
    10. 
  
  
  10. 
  
  
  11.

#p#

5，正确标记列表

正确标记列表能够提升可访问性，通常我们子啊列表中实现跳转和导航。

大部分浏览器给列表以及列表中的项目都制定特定的外观，通常表现为缩进和项目符号，可能不是你所需要的外观，因此很容易在搭建html的时候忽略它们的存在，放弃使用正确列表标记，而使用语义较差的标签，实现同样的效果。根据需求，你能够通过CSS可以容易地修复这些特定的外观。下面整理了开发中常用的CSS样式修改规则：

 
 
    
  
  
  1. /*删除项目符号*/
    2. 
  
  
  2. ul{ 
    3. 
  
  
  3.    list-style-type:none;        
    4. 
  
  
  4. } 
    5. 
  
  
  5. 
  
  
  6. /*载入外部图片自定义项目符号*/
    7. 
  
  
  7. ul li { 
    8. 
  
  
  8.      list-style-image : url(images/str.gif); 
    9. 
  
  
  9. } 
    10. 
  
  
  10. 
  
  
  11. /*去掉缩进的规则*/
    12. 
  
  
  12. ul{ 
    13. 
  
  
  13.    margin-left : 0px; 
    14. 
  
  
  14.     padding-left :0px; 
    15. 
  
  
  15. } 
    16. 
  
  
  16. 
  
  
  17. /*把项目排成一行*/
    18. 
  
  
  18. ul,li{ 
    19. 
  
  
  19.    display: inline; 
    20. 
  
  
  20.     margin:0px; 
    21. 
  
  
  21.   padding: 0px; 
    22. 
  
  
  22. } 
    23. 
  
  
  23. 
  
  
  24. /*在列表项之间插入逗号*/
    25. 
  
  
  25. ul li:after{ 
    26. 
  
  
  26.   content : ","; 
    27. 
  
  
  27. } 
    28. 
  
  
  28. 
  
  
  29. /*制定项目的宽度，超出时显示省略号*/
    30. 
  
  
  30. div.titleholder { 
    31. 
  
  
  31.     font-size: 8pt; 
    32. 
  
  
  32.     width: 100px; 
    33. 
  
  
  33.    text-overflow: ellipsis; 
    34. 
  
  
  34.    overflow: hidden; 
    35. 
  
  
  35.    white-space: nowrap; 
    36. 
  
  
  36. }
    37.

然而，lu应用与列表上，blockquote应用在应用上。blockquote与ul相比，整理文本缩进更强大，更准确。

6，为图片添加width和height属性

width和height属性能让浏览器更快地样式化页面并展现给用户。但注意，这样做，对页面的显示速度有提升，但对下载速度并没有帮助。

出于一般项目开发触觉，改变图片的尺寸意味着要修改HTML，否则图片会奇怪地变大变小。如果需要经常改变图片，比如设计页面是，***是在***的阶段插入确定的宽度和高度。

本文出自：http://www.cnblogs.com/0603ljx/p/4049241.html

分享标题：重构HTML改善Web应用设计
网站路径：http://www.shufengxianlan.com/qtweb/news36/470936.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

网站内链知识

各行业网站

成都画册设计公司　　 　德信企业管理　　 　小程序　　 　成都酒店服定制　　 　成都网站营销推广　　 　网站建设公司　　 　成都钢筋机械设备　　 　网站建设改版　　 　渠县网站建设　　 　崇州做网站　　 　成都圣月制冷　　 　三台网站建设　　 　温江做网站　　 　中晴建设　　 　胜锦安防科技　　 　成都导视系统设计　　 　百度推广公司　　 　四川广汉锦华　　 　护栏打桩机　　 　企业网站建设