重构HTML改善web应用设计

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

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

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

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

良构

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

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

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

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

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

将名称改成小写。 改写为 等，因为XHTML只使用小写名称，所有元素和属性都要小写，<TABLE>和<Table>都不被接收
给属性值加引号。改写成等。一些空格的属性有时候出现有做括号而没有右括号，浏览器不宜定按照你的意愿解析，不同的浏览器有不同的解析效果，这就有可能造成跨浏览器问题。
补足遗漏的属性。<input type = "radio" checked>改成<input type = "radio" checked = 'checked'>等。XHTML不支持只有属性名称而没有值的语法。
将空标签替换为空元素标签。XML解析器要求所有的起始标签都有匹配的结束标签要有对应的， 改写为等
消除重叠。xxxx改写成xxxx等。不同的浏览器对包含重叠元素的文档所构建的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应用之前，你必须要停止考虑页面的外观，而应该开始思考页面表达的是什么含义。

　　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服务器都支持某些形式的服务器端包含功能，使用服务器端包含各种非静态文件，性能有所降低，但影响不大。

<!DOCTYPE html>

<html>

    <meta charset = "utf-8">

<body>

    <!--#include virtual = "/header.html" -->

    <!---这里嵌套主内容-->

    <!--#include virtual = "/footer.html"-->

    <!--#include virtual = "/siderbar.html"-->

</body>

</html>

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

AddType text/html .shtml

AddOutputFilter INCLUDES .shtml

Options +Includes

PHP包含：

PHP的include函数有类似的功能

<!DOCTYPE html>

<html>

    <meta charset = "utf-8">

<body>

    <!--主内容-->

   <?php

       include("footer.html");

       include("sidebar.html");

    ?>

</body>

</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，否则图片会奇怪地变大变小。如果需要经常改变图片，比如设计页面是，最好是在最后的阶段插入确定的宽度和高度。

重构HTML改善web应用设计的更多相关文章

web架构设计经验分享（转）
本人作为一位web工程师,着眼最多之处莫过于性能与架构,本次幸得参与sd2.0大会,得以与同行广泛交流,于此二方面,有些心得,不敢独享,与众博友分享,本文是这次参会与众同撩交流的心得,有兴趣者可以查 ...
Web API设计方法论
英文原文:A Web API Design Methodology 为Web设计.实现和维护API不仅仅是一项挑战:对很多公司来说,这是一项势在必行的任务.本系列将带领读者走过一段旅程,从为API确定 ...
Web API设计方法论--比较完整的web api 开发过程
为Web设计.实现和维护API不仅仅是一项挑战:对很多公司来说,这是一项势在必行的任务.本系列将带领读者走过一段旅程,从为API确定业务用例到设计方法论,解决实现难题,并从长远的角度看待在Web上维护 ...
Web界面设计(Designing Web Interfaces中文版) (美)斯科特 pdf扫描版
Web界面设计是由Bill Scott编著.电子工业出版社出版的一部图书,在Web已经进入崭新的时代的今天,界面的设计显得非常重要,本书就是基于独一无二的Web环境下.在创建丰富体验的过程中设计Web ...
GOTO Berlin: Web API设计原则
在邮件列表和讨论区中有很多与REST和Web API相关的讨论,下面仅是我个人对这些问题的一些见解,并没有绝对的真理,InnoQ的首席顾问Oliver Wolf在GOTO Berlin大会上开始自己的 ...
我所理解的RESTful Web API [设计篇]
<我所理解的RESTful Web API [Web标准篇]>Web服务已经成为了异质系统之间的互联与集成的主要手段,在过去一段不短的时间里,Web服务几乎清一水地采用SOAP来构建.构建 ...
25套用于 Web UI 设计的免费 PSD 网页元素模板
Web 元素是任何网站相关项目都需要的,质量和良好设计的元素对于设计师来说就像宝贝一样.如果您正在为您的网站,博客,Web 应用程序或移动应用程序寻找完美设计的网页元素,那么下面这个列表会是你需要的. ...
Web交互设计优化的简易check list
Web交互设计优化的简易check list 00 | 时间: 2011-02-11 | 28,842 Views 交互设计, 用户研究 “优化已有产品的体验”,这是用户体验相关岗位职责中常见的描 ...
25套用于Web UI设计的免费PSD网页元素模板
Web 元素是任何网站相关项目都需要的,质量和良好设计的元素对于设计师来说就像宝贝一样.如果您正在为您的网站,博客,Web 应用程序或移动应用程序寻找完美设计的网页元素,那么下面这个列表会是你需要的. ...

随机推荐

aix archPlat
#++++++++++++++++++++++++++++++++++++++++++++++++++++ #+ Ruiy(R) Techdiss contact: 150 5519 8367 #+ ...
关于 ls 命令的一个小小的缺陷
linux 的 ls : ls后边加上要显示的路径时:比方 ls /tmp 它会打印一边 /tmp 下的信息当ls后边跟上多个同样路径的名字是,它会打印多次同样的信息比方 ls /tmp /tmp ...
URAL 1796. Amusement Park （math）
1796. Amusement Park Time limit: 1.0 second Memory limit: 64 MB On a sunny Sunday, a group of childr ...
Tab Bar Controller和Navigation Controller混合使用详细教程
在IPHONE上,NAV和TAB混合使用的案例很多.但很多书籍都没详细介绍这个是怎么使用的.我也找了很久才弄清楚怎么做.现在分享给大家. 1.先建立一个Window-based Application ...
CodeFirst EF中导航属性的个人理解
>导航属性: 01.个人理解就是Ef中的属性在实体数据表中不存在(先这么认为); 02.就是除了根据表中列映射出的属性之外根据表与表之间的关系的关联属性.方便操作与之关联的表; 例如: 有表 ...
使用SuperWebSocket 构建实时 Web 应用
Web 应用的信息交互过程通常是客户端通过浏览器发出一个请求,服务器端接收和审核完请求后进行处理并返回结果给客户端,然后客户端浏览器将信息呈现出来,这种机制对于信息变化不是特别频繁的应用尚能相安无事, ...
PHP自学4——通过mail函数将feedback界面用户填写表单信息发送至指定邮箱
这一讲的内容依旧简单(谁叫PO主水平菜,依旧是个弱鸡ORZ),通过PHP的内置mail函数将一个反馈界面的信息发送到指定邮箱.在Windows平台不能直接需要使用该函数,需要下载一个sendmail并 ...
css复合属性的写法
# 复合属性也称为 "shortcut" property (快捷属性),它作用是为了简化代码,提高页面运行的效率. # 下面的内容会介绍 2 个比较常用的复合属性 "f ...
搜索服务器xunsearch实现
安装方法: centos 6.6 64位 histroy: 12 cd /srv/ 13 wget http://www.xunsearch.com/download/xunsea ...
Android IT资讯网络阅读器应用源码
这个是Android IT资讯网络阅读器应用,也是一款通过jsoup解析Html获取内容的网络阅读器,和前面的其实是类似的,也是大学时期闲暇完成,对照CSDN的Web页面元素设计进行解析提取内容,核心 ...

重构HTML改善web应用设计

重构HTML改善web应用设计的更多相关文章

随机推荐

热门专题