二、推荐的WebUI开发流程和模式
随着浏览器兼容性的问题越来越严重和得到关注，Web开发市场场终于出现了一个重要的角色和技术：UI。这个UI技术不再是关注所谓让页面炫耀的事情，而且关注页面的标准化问题。
2.1 Web页面的结构化和语义化
UI工程师所做的第一件事情就是将平面美工设计的页面草图转为结构化的Web页面。html最大的误解就是元素的使用随意，而且由于历史原因，html的元素被设计的非常之多。其中还包含了很多用于改变呈现外观的元素，还有一些早期的为计算机专业人员使用的元素。现在，html仅仅用于表现文档数据，我们不应该再去使用仅和呈现有关的元素
以下和外观有关的元素不管你是不是认识或了解，我建议你可以忘记他们了。
l b 指定文本应以粗体渲染。
l baseFont 设置渲染文本时作为缺省字体的基础字体值。
l big 指定内含文本要以比当前字体稍大的字体显示。
l button 指定其中所含的 HTML 要被渲染为一个按钮。
l center 将后面的文本和图像居中显示。
l font 指定用于渲染所包含文本的新字体、大小和颜色。
l hr 绘制水平线。
l i 指定文本应以斜体渲染。
l kbd 以固定字体渲染文本。
l listing 以固定字体渲染文本。
l plainText 以固定宽度字体渲染文本，
l pre 以固定宽度字体渲染文本
l strong 以粗体渲染文本。
l sub 指定内含文本要以下标的形式显示。
l sup 指定内含文本要以上标的形式显示。
l tt 以固定宽度字体渲染文本。
l u 带下划线渲染文本。
l xmp 以固定宽度字体渲染作为示例的字体。
l menu 创建一个项目的无序列表。
l marquee 创建一个滚动的文本字幕。
l dir 引起目录列表。
l strike 以删除线字体渲染文本。
还有一些元素只有你在明确知道他们的作用或你知道自己在干什么的时候才去用
l acronym 标明缩写词。
l address 特定信息，如地址、签名、作者、此文档的原创者。
l blockQuote 设置文本中的一段引语。
l cite 用斜体显示标明引言。
l code 指定代码范例。
l del 表明文本已经从文档中删除。
l samp 指定代码范例。
l ins 指定被插入到文档中的文本。
l var 定义编程变量。通常以斜体渲染。
l iframe 创建内嵌浮动框架。
l map 包含客户端图像映射的坐标数据。
一般来讲，我们建议你常用的html元素很少，有
l a 标明超链接的起始或目的位置。
l br 插入一个换行符。
l li 引起列表中的一个项目。
l ol 绘制文本的编号列表。
l ul 绘制文本的项目符号列表。
l input 创建各种表单输入控件。
l img 在文档中嵌入图像或视频剪辑。
l p 引起一段。
l span 指定内嵌文本容器。
l table系列 指定所含内容要组织成行列的表格。
l h系列 以标题样式渲染文本。
你需要正确的理解Web页面元素的含义，使用正确的html元素和次序来描述他们，在这个阶段，你不要去关心Web页面的样子是否好看，你关心的是你设计的结构化的页面是不是符合Web拥有者想表达的意思。其中要注意的是img元素，img元素应该描述具有数据意义的图片，而不是提示性的图片。
2.2 Web页面布局
早前的Web页面布局大多是是使用table元素进行布局，但现在的规范是推荐使用div+css进行布局处理。而国内很多资深的老Web程序员对使用div+css替换table布局非常抵制和反感，他们寻找了大量的理由来证明table布局的合理性。其实所有的理由只有一点，使用table布局可以使用可视化的工具来辅助Web页面的布局，而目前看来，还没有特别方便的div+css可视化布局。
但为什么要放弃容易可视化的table布局方式，而选用div+css呢？
l 理由1：语义化。
table的语义是描述数据的，所以基于语义的要求，table仅仅应该在描述报表这样的数据时才使用，而布局不应该采用table。从语义的角度来看，table至少应该有表头标题，然后有同类型相似性的数据的罗列，然而使用table进行布局的话，table中的单元格中的数据就不再具有相似性的含义了。
div是html中少有的无语义的元素，改元素存在的价值就是为其他元素在逻辑上分组，所以，一个结构化的页面中仅可以观察到业务的数据逻辑和元素之间的逻辑关系。而不应该象table布局那样，在页面中可以查看到到页面时几行几列的布局模型。
l 理由2：结构化设计
使用div的模式，我们在将平面的设计转为结构化的Web页面时，仅需要考虑元素的语义和元素的嵌套正确性。但是如果采用了table布局的话，则在编写html页面之前必须先考虑布局的概念。而且你必须先编写行列的数量，然后在单元格中填写相应的html语义元素。但是使用div的模式，开发人员不需要预先考虑页面布局，仅需要自然的编写结构文档即可。
l 理由3：重构
使用table的布局的确可以采用工具进行可视化的设计，但是这个方便性非常的诡异，你只有在最初的时候能简单方便的采用工具来可视化，对