|
本文从良构，有效性，布局三个角度，结合往日项目开发经历， 整理总结重构HTML改善Web应用设计的几点规则和做法。部分参考自《重构HTML改善Web应用设计》。
重构。什么是重构？为什么要重构。 重构是在不改变程序行为的基础上进行小的改动，是代码逐渐改善的过程。移除长期累积下来的烂码，以得到更清晰和更容易维护，除错以及添加新功能的代码，这做法不能单纯只出现在编码的后期，甚至是你意识到你的代码已经无从再下手非重写不可的时候，而是从开始开发起，逐渐积累，逐渐修改。以前因为日常编码的随意性，导致问题日益积累，逐步扩散，最后只能推倒重来。如果时间经受不起推倒重来，你别无选择，唯一实现的选择就是重构。 无论做什么，都不要因为追求完美而忽略晓得改进，如果眼下时间足够做一点重构，那就做一点儿。日后有时间还可以做更多。整体的重构设计虽然惹人注目令人难忘，但没有平日的积累，何以收获庞大的成就？你的目标应该是让代码每天都有新变化。坚持几个月，我相信我们都能拥有骄傲地，清晰代码。
良构 把标记转换为符合现代标准的首要任务是实现良构。良构保证了DOM可操作的文档树结构的唯一性，因而成为可靠的跨浏览器的javascript代码的基础。对于一个乱构的页面来说，任何可靠的自动化处理或测试都是非常难以保证的，其次，浏览器页面的展示效果更是不可预估。对于乱构的页面，不同的浏览器使用不同的方式补充确实的片段，并纠正其中的错误。因此，对于重构HTML，最要紧的无疑是实现页面良构化。 要达到良构，大部分的网站要至少或全部做到以下几点：
针对往日因为个人编程习惯和随意性容易犯的错误，从良构角度思考，整理一下日后构建HTML时，有几点需要特别注意。 更好实现良构的几个要点：
有效性 有效性比良构稍微严格，即不仅要确保文档的语法正确，还要保证语义正确。保证元素和属性只能按自身语义出现在恰当的地方。 有效性是面向未来开发的基石。有效的网站与设备无关，有效的页面为不同的读者传达相同的信息，就算读者使用的是界面不相同的浏览器。 良构和有效性检查是基本的语法约束保证，接下来要保证语义是恰当的。 具体实现方法： 1，加入过渡型DOCTYPE声明 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./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等，被滥用与实现某种特定布局效果。这些滥用的目的是给网页生成特定的外观，然而这些外观难以跨浏览器，几乎除了设计者自己的电脑，通常很多地方都不通用的。
编写HTML的目的不是为某种结构或者页面外观，而是为了如何更好地呈现内容，因此在编写HTML之前，务必思考这种内容应该使用哪种语义的元素。 恰当的HTML非常适合处理跨浏览器问题。拿到web设计图后，在着手构建web应用之前，你必须要停止考虑页面的外观，而应该开始思考页面表达的是什么含义。
2，替换表格布局 基于CSS的页面比基于表格的页面更小更简单。 a)编写和编辑更容易，下载更快， b)通过转向CSS，可以节省带宽。同时外联的css文件可以缓存和重用，不必随每次页面的下载又重下一次。
取代滥用本用于呈现表格数据的table元素而使用表格布局，可以考虑频繁使用的分栏式布局： 1）两栏，左侧固定宽度的侧栏，右边是弹性宽度的内容栏 2）三栏，左右各固定宽度的侧栏，中间是内容。
3，内容与样式分离
当然我们的页面也需要漂亮的外观，以帮助我们在竞争中脱颖而出。这可以通过在独立的CSS样式中放置有关表现的信息来实现。CSS用来描述网页的外观，而浏览器可以自由选择不同的样式表或是修改过的样式表。实际上，你可以为不同的浏览器随意发送不同的样式表，也可以为它们独特的能力量身定制。这是响应式设计的基本实现方法。 “响应式网页不仅仅是响应不同类型的设备，而且需要响应不同的用户需求。响应式的初衷是为了让信息更好的传递交流，让所有人无障碍的获取信息，同时这也是 Web 的初衷。” 出于方便或者是自身的编码习惯，在修改某种被更改的需求的样式代码时候，我们很容易在html代码中直接镶嵌样式代码。这样的做法除了更快的完成你暂时的任务之外没有任何好处。
4，使用CSS定位替代框架
网站使用框架的理由实际上就两种： （1）为所有页面引入相同的静态内容，而不用单独编辑每个页面。例如导航，网页头部尾部。也就是说，单独的非框架页面可能比相应的框架页面更耗带宽，因为框架内容每次都要给客户端重新发送内容。 （2）显示多栏外观。例如Java API，包含包和类的列表，主体内容 然而，过多使用框架将降低可用性： （1）难以标记数千或返回指定页面 （2）难以保存和打印页面 （3）过多的滚动条占据屏幕的宝贵空间 在每一个页面上都有导航和其他相同或几乎相同的内容，对网站来说是非常普遍的，使用CSS取代框架，关键在于设立对应每个框架的div，每个div内容是对应框架里的文档内容。然而，这样做的问题在于，它违反了DRY原则（Don't Repeat Youself,别重复你自己），对于相同的内同，虽然有时候只是很小的变化，但还是需要不断在这一页那一页重复出现。重复内容通常也是代码的坏味道。框架在静态页面上避免恶劣不必要的重复，我提倡清晰，可维护的代码，在不损害用户界面的前提下，我更远一选择难看的代码而不是难看的用户界面。日常中原始的 HTML是重复的，但不是我们必须编辑的，很多时候我们可以通过后台自动生成重复内容。
5，正确标记列表 正确标记列表能够提升可访问性，通常我们子啊列表中实现跳转和导航。 大部分浏览器给列表以及列表中的项目都制定特定的外观，通常表现为缩进和项目符号，可能不是你所需要的外观，因此很容易在搭建html的时候忽略它们的存在，放弃使用正确列表标记，而使用语义较差的标签，实现同样的效果。根据需求，你能够通过CSS可以容易地修复这些特定的外观。下面整理了开发中常用的CSS样式修改规则： /*删除项目符号*/
ul{
list-style-type:none;
}
/*载入外部图片自定义项目符号*/
ul li {
list-style-image : url(images/str.gif);
}
/*去掉缩进的规则*/
ul{
margin-left : 0px;
padding-left :0px;
}
/*把项目排成一行*/
ul,li{
display: inline;
margin:0px;
padding: 0px;
}
/*在列表项之间插入逗号*/
ul li:after{
content : ",";
}
/*制定项目的宽度，超出时显示省略号*/
div.titleholder {
font-size: 8pt;
width: 100px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
然而，lu应用与列表上，blockquote应用在应用上。blockquote与ul相比，整理文本缩进更强大，更准确。
6，为图片添加width和height属性 width和height属性能让浏览器更快地样式化页面并展现给用户。但注意，这样做，对页面的显示速度有提升，但对下载速度并没有帮助。 出于一般项目开发触觉，改变图片的尺寸意味着要修改HTML，否则图片会奇怪地变大变小。如果需要经常改变图片，比如设计页面是，最好是在最后的阶段插入确定的宽度和高度。
|
|
|
来自： 昵称10504424 > 《工作》
