网站重构&Web标准设计第二版

爱生活，爱设计，将web标准进行到底…

Adam于亚东www.yuyadong.com个人简介

前言网站重构能够实现加快网页解析的速度，实现信息跨平台的可用性以及更加良好的用户体验，网站重构以高效开发与简单维护降低服务器成本，最重要的是它便于改版，实现与未来兼容。 Web标准就是实现网站重构的一种方法，所谓Web标准, Web标准并不是指某一个单一的标准，而是一系列标准的集合。一般指网站重构采用基于XHTML语言的网站设计标记语言，Web标准中典型的布局应用模式“DIV+CSS”。本教程以XHTML和CSS的应用为核心，在课程讲授的同时结合多项实例，使读者能够学以致用，举一反三，在较短时间里学会如何设计符合标准的Web网站。本教程适合于所有层次的Web开发者，网页设计师等. 无论你是刚刚接触CSS设计，还是接触CSS有一定基础的朋友，那么你就能从本教程中获得最大的收益，本教程力求使读者能够在学会制作Web标准网站的同时，掌握网站重构的核心思想。

掌握学习的方法学习是一种思想，一种不断思考，一种不断实践，一种不断创新的过程……学习没有捷径，只有勤奋，努力，实践，思考……

如何学习Web学习任何一门技能的时候，首先要明确思想，只有明确了思想才能够少有很多弯路，初学者学习Web标准，首先就要明确一点，到底什么是Web标准，如果错误的理解了Web标准的思想，很难学好Web标准，给初学者的建议：初学者很容易犯的错误就是把Web标准理解为Div+CSS，以为DIV的作用就是简单的替代表格去做表格以前做的事情，于是乎许多采用新技术的网站开始了DIV+CSS制作网页，当打开页面代码的时候，看到整个页面基本都是采用了DIV标签，给每个DIV标签都指定一个class，这是对Web标准的一种滥用方式。Web标准的思想是实现结构，表现，行为的分离，不只是简单的把table换成DIV ，如果要学好web标准的思想，首先要做的就是抛弃传统的表格布局思想。那么接下来我就会给大家先讲思想课，让大家更好的了解究竟什么是web标准的思想。

思想 VS 工具子曰：工欲善其事，必先利其器思想是工具的灵魂

思想是工具的灵魂思想是工具的灵魂，就像我们的计算机软件是计算机硬件的灵魂一样，没有了软件，计算机的硬件即使再好也没有任何作用，如同废铁，所以我们在学习的时候要明确我们的最终目是什么，我们要学的是这门技术的思想而不是去重视实现这门技术的一种应用工具。当然思想与工具都很重要，但是他们最大的区别在于，学会了思想我们可以选择很多不同的工具来实现这门技术，例如我们用Dreamweaver，EditPlus，甚至记事本等都可以实现我们想要的技术，工具最大的作用在于可以提高我们的工作效率，这是工具最重要的作用。所以我们不要走错的方向。

Web传统网站Web 传统网站是一个“完美”的“和谐社会”，一切即table，table即一切。表格视乎和谐一切……

David Siegel 印刷专家有人说我毁掉了Web，我回答他们，的确如此。我毁掉了Web是因为我把巧克力和花生酱混合在一起却再也不能把他们分开。我犯下了把结构跟表现混合在一起的错误。David Siegel

David Siegel 印刷专家他是一个印刷专家。那麽在1997年的时候，David Siegel改变了web，他自己研究出了一项网页布局技术，利用html中的的<table>元素和gif图片缝合在一起了，创造了表格布局技术，之后它就犹如一头猛兽泛滥起来。于是乎许多设计师们对他在web上复制传统印刷媒体布局方法感到欣喜若狂，从此以后数百万的页面把结构跟表现混杂在一起。在这之后David Siegel在内的很多人，很快提出反对采用表格进行布局的言论，但我们知道猛兽一旦释放就很难在关起来，加上当时没有有效的方法解决这个问题，猛兽在我们身边自由的徘徊，甚至到现在。我们可以看看互联网上仍然有很多网站都是采用的传统方式布局。

Web标准的好处高效开发与简单维护

更加良好的用户体验高效开发与简单维护网站建设的过程中，网站运营成本关键在于高效的开发与简单的维护，由此可见一个网站的结构搭建对后网站维护的重要性，采用Web标准的方式实现了结构与表现相互分离，可以使具体的结构内容和样式分离出来，这样使得分离出来的结构和样式代码可以重复使用，从而减少重复代码的编写，加快开发效率和成本。达到事半功倍的作用，通过修改一个外部的样式可以是使每个结构文档中相对应区域代码维护，使得维护变的简单高效，在可读性和维护性上都得到了极大的提高。

信息跨平台的可用性由于采用结构跟表现分离的技术，结构与表现各自为一个独立的个体，这样可以使信息实现跨平台，我们可以针对不同的设备进行不同的样式进行替换。从而实现一个结构文档在不用的平台设备上实现不用样式的表现，以适应不用操作平台的需要，达到文档一次建立，随处使用的目的。

降低服务器成本通过结构与样式的反复重用，整个网站的容量大大的减少，降低了服务器成本，我们思考一下，对于一个门户大型网站来说，例如雅虎，如果说它的页面代码量减少了一半的话，那么我们想想它的服务器带宽也就减少了一半，服务器的带宽如果减少了一半就证明我们的服务器成本就减少了一半。一半只是个保守的说法，采用web标准制作的方法对网站进行重构至少会是页面容量减少一半，甚至更多倍。

便于改版对于经常改版的门户网站来说，使用结构与表现分离的方法可以大大降低改版的开发成本，每次改版开发人员只需修改相应的样式文件即可，对应的结构页面也会随之改变，使得改版的技术难度与开发周期降低。

加快网页解析速度采用结构与表现分离的技术，可以加快网页解析的速度，相对于传统的表格嵌套表格的结构与表现混杂在一起的技术，浏览器在解析的时候能够更好的理解页面元素的含义，良好的结构使得网页浏览用户浏览的体验得以提升。

与未来兼容结构与表现分离，不必再担心为来的技术变革，分离开的结构与表现都可以随着自己的需求进行文档的修改和维护，良好的与未来兼容。

更加良好的用户体验结构与表现分离，不必再担心为来的技术变革，分离开的结构与表现都可以随着自己的需求进行文档的修改和维护，良好的与未来兼容。

网站重构&Web标准设计第二版

Netscape and Internet Explorer 早在1997年，有一个通用的惯例，Netscape浏览器使用Javascript，IE使用Jscript（一种类似于Javasrcipt的脚本语言）。Javasrcipt只能运行在Netscape，而微软的ActiveX和Jscript只能运行在IE。只能为不同的浏览器采用不同的代码去适应，这些事情是为3.0版本浏览器做的，1997年下半年的时候，Netscape和IE都推出了4.0版本浏览器，他们各自吹嘘自己的浏览器有强大的Dhtml（动态的html），但他们的浏览器完全不兼容，更不用说不知名的浏览器了，而且Netscape和IE跟他们3.0的版本也无法兼容，想让自己的网站在几个不同版本的浏览器中同时使用的话就要做几个不同的版本，每个功能都要做几个不同的版本去适应不同的浏览器，开发成本至少增加了25%；所以一些开发者限制他们的网站只适应其中一个版本的浏览器。而且网站随时面临着过时的命运和被淘汰的怪圈。

浏览器内核通常所谓的浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同，因此同一网页在不同的内核的浏览器里的渲染（显示）效果也可能不同，这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因。

主流浏览器内核Trident： IE浏览器使用的内核,该内核程序在1997年的IE4中首次被采用，是微软在Mosaic代码的基础之上修改而来的，并沿用到目前的IE7。 Trident实际上是一款开放的内核，其接口内核设计的相当成熟，因此才有许多采用IE内核而非IE的浏览器涌现（如 Maxthon、The World 、TT、GreenBrowser、AvantBrowser等）。Geckos： Netcape6开始采用的内核，后来的Mozilla FireFox也采用了该内核，Geckos的特点是代码完全公开，因此，其可开发程度很高，全世界的程序员都可以为其编写代码，增加功能。Presto：目前Opera采用的内核，该内核在2003年的Opera7中首次被使用，该款引擎的特点就是渲染速度的优化达到了极致，也是目前公认网页浏览速度最快的浏览器内核，然而代价是牺牲了网页的兼容性。Webkit：Safari浏览器使用的内核。 Webkit引擎包含WebCore排版引擎及JavaScriptCore解析引擎，均是从KDE的KHTML及KJS引擎衍生而来，它们都是自由软件，在GPL条约下授权，同时支持BSD系统的开发。所以Webkit也是自由软件，同时开放源代码。在安全方面不受IE、Firefox的制约，所以 Safari浏览器还是比较安全的浏览器。(Google的Chrome浏览器也是采用Webkit)

MozillaMozilla基金会简称Mozilla（缩写MF或MoFo，如图为Mozilla 基金会的注册标识），是为支持和领导开源的Mozilla项目而设立的一个非营利组织。该组织制定管理开发政策，经营关键基础组织并管理商标及其他知识产权。它拥有一个称作Mozilla公司的应课税子公司，雇佣了一些Mozilla开发人员并协调Mozilla Firefox网页浏览器以及Mozilla Thunderbird电子邮件客户端的发行版。Mozilla基金会位于美国加利福尼亚州。Mozilla基金会把自己描述为“一个致力于在互联网领域提供多样化选择和创新的公益组织”。

Firefox附加组件Web Developer

Firefox附加组件 CSSViewer

Firefox附加组件Firefox Universal Uploader

开发工具EditPlusTopStyleDreamweaver

EditPlus文件配置界面设置定制工具自动换行 矩形选取大小写转换，反转大小写，首字母大写 文件只读快速切换（F12，F11） 配对标签，配对符号代码折叠 注释浏览器 Make（定义是F9，切换是F4）查找替换快捷键监视剪切板总在最前剪辑文本

W3C（World Wide Web Consortium）W3C组织是对网络标准制定的一个非赢利组织，像HTML、XHTML、CSS、XML的标准就是由W3C来定制。W3C会员（大约500名会员）包括生产技术产品及服务的厂商、内容供应商、团体用户、研究实验室、标准制定机构和政府部门，一起协同工作，致力在万维网发展方向上达成共识。Web标准组织（W3C）于1998年发起，目的是说服Netscape、Microsoft和其他浏览器生产商彻底支持标准。他采用从容进行、坚持和策略性的方法，最终使得浏览器生产商同意引进一系列标准。通过共同的标准协同工作，是Web 向前发展必需的观点。

Web标准Web标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）表现（Presentation）行为（Behavior）对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，比如ECMA（European Computer Manufacturers Association）的ECMAScript标准。

Web标准三剑客结构表现HTMLXHTMLXMLCSS行为ECMAScriptDOM

结构标准语言 1）XHTML XHTML是The Extensible HyperText Markup Language可扩展标识语言的缩写。目前推荐遵循的是W3C于2000年1月26日推荐XHTML1.0。XML虽然数据转换能力强大，完全可以替代HTML，但面对成千上万已有的站点，直接采用XML还为时过早。因此，我们在HTML4.0的基础上，用XML的规则对其进行扩展，得到了XHTML。简单的说，建立XHTML的目的就是实现HTML向XML的过渡。 2）XML XML是The Extensible Markup Language(可扩展标识语言)的简写。目前推荐遵循的是W3C于2000年10月6日发布的XML1.0，和HTML一样，XML同样来源于SGML，但XML是一种能定义其他语言的语。XML最初设计的目的是弥补HTML的不足，以强大的扩展性满足网络信息发布的需要，后来逐渐用于网络数据的转换和描述。

表现标准语言CSS是Cascading Style Sheet 层叠样式表的缩写。目前推荐遵循的是W3C于1998年5月12日推荐CSS2。W3C创建CSS标准的目的是以CSS取代HTML表格式布局、帧和其他表现的语言。纯CSS布局与结构式XHTML相结合能帮助设计师分离外观与结构，使站点的访问及维护更加容易。

行为标准语言1）DOMDOM是Document Object Model文档对象模型的缩写。根据W3C DOM规范，DOM是一种与浏览器，平台，语言的接口，使得你可以访问页面其他的标准组件。简单理解，DOM解决了Netscape的Javascript和Microsoft的Jscript之间的冲突，给予web设计师和开发者一个标准的方法，让他们来访问他们站点中的数据、脚本和表现层对象。2) ECMAScriptECMAScript是ECMA(European Computer Manufacturers Association)制定的标准脚本语言（JAVAScript）。目前推荐遵循的是ECMAScript 262。

为页面添加正确的DOCTYPE1)过渡型（Transitional ） <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2)严格型（Strict ） <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">3)框架型（Frameset ） <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

设定一个名字空间（Namespace）直接在DOCTYPE声明后面添加如下代码：<html XMLns=“http://www.w3.org/1999/xhtml” >一个namespace是收集元素类型和属性名字的一个详细的DTD，namespace声明允许你通过一个在线地址指向来识别你的namespace。

声明你的编码语言为了被浏览器正确解释和通过标识校验，所有的XHTML文档都必须声明它们所使用的编码语言。代码如下：<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />这里声明的编码语言是简体中文GB2312，你如果需要制作繁体内容，可以定义为BIG5。

良好的XHTML规则以正确的DOCTYPE和名字空间开始

使用META内容元素声明你的内容编码语言

用小写字母写所有元素和属性名称

用空格和斜杠关闭空标签

不要再注释内容中使用“--”

把所有符号编码化选择合适的标签1）布局<div>网页头部</div><div>网页内容</div> <div>网页底部</div> 2) 文本<h1>文章标题</h1><h2>文章副标题</h2><h1>---<h6>用于识别标题内容<p>正文</p>

<strong>把文本定义为语气更强的强调的内容</ strong ><em>把文本定义为强调的内容</ em > 3）图片及其他元素<img src=“图片路径”title=“图片名称”alt=“图片简介”/><object>Flash元素经常用到</ object > 4）列表元素ul ol li dl dt dd

5）其他标签元素 <cite>定义引用</cite> <blockquote>块引用</blockquote> <sub>下标</sub> <sup>上标</sup> <code>定义计算机代码文本</code> <pre>表示计算机的源代码(带格式)</pre>

<p >Love <strong>life</strong>, love <strong>design</strong>, Web standards say in the end</p><p>—Adam</p>难以设定样式区别于页面上的其他内容

无法为引用文本提供语义和结构<div class=“blockquote ”> <p id="quote">Love <strong>life</strong>, love <strong>design</strong>, Web standards say in the end</p> <p id="author">—Adam</p></div>添加唯一的类方便样式设定<blockquote cite="http://www.somesite.com/path/to/page.html"> <p id="quote">Love <strong>life</strong>, love <strong>design</strong>, Web standards say in the end</p> <p id="author">—Adam</p></blockquote>blockquote是W3C为引用文本专门设计的元素，提供了语义和结构

在缺少css的情况下会更其他元素有所区别标题

<span class="title">Mozilla Firefox</span><p>The use of the Firefox open source web publishing engine Gecko, Gecko browser can allow as much as possible in accordance with the standard to show the contents of the page.</p>CSS禁用时，会跟普通文本一样没有区别

搜索引擎不会关注<span>标记的标题<p><b>Mozilla Firefox</b></p><p>The use of the Firefox open source web publishing engine Gecko, Gecko browser can allow as much as possible in accordance with the standard to show the contents of the page.</p>CSS禁用时，加粗显示

搜索引擎不会关注<b>标记的标题

无法针对这些文本设置单独的样式<h1>Mozilla Firefox</h1><p>The use of the Firefox open source web publishing engine Gecko, Gecko browser can allow as much as possible in accordance with the standard to show the contents of the page.</p>表达的文本标题的含义

不管如何设置样式，图形界面和非图形界面正确的识别<h1>

搜索引擎会非常关注<h1>标记的标题表现与结构,其他

<p>Hello World，my name is <i>Adam</i>.</p><p>Hello World，my name is <b>Adam</b>.</p><p>Hello World，my name is <em>Adam</em>.</p><p>Hello World，my name is <strong>Adam</strong>.</p>

<p>Hello World，my name is <span>Adam</span>.</p><p>Hello World，my name is <em><strong>Adam</strong></em>.</p><p>Hello World，my name is <strong class=“italic”>Adam</strong>.</p><p>Hello World，my name is <em class=“bold”>Adam</em>.</p>

<p>Hello World，my name is <abbr>Adam</abbr>.</p>A-d-a-m<p>Hello World，my name is <acronym>Adam</acronym>.</p>Adam

Orange<br />Apple<br />Watermelon<br />Pineapple<br />Banana<br /> 无法对单独的类表设置样式

小屏幕造成的长项折行造成阅读困难

缺乏语义<li>Orange<br /><li>Apple<br /><li>Watermelon<br /><li>Pineapple<br /><li>Banana<br />加上<li>可以显示类表符号便于区分，缺少外围的ul，某些浏览器不显示

缺乏语义，代码不规范<li>Orange</li><li>Apple </li><li>Watermelon </li><li>Pineapple</li><li>Banana </li> 闭合<li>标签代替<br />

缺少<ul>,无法为专门的列表设计样式

代码不规范<ul> <li>Orange</li> <li>Apple </li> <li>Watermelon </li> <li>Pineapple</li> <li>Banana </li></ul>代码符合规范，具有语义和结构

折行的文本在大多浏览器中进行缩进

<form action="" method="post"> <table> <tr> <th>Name:</th> <td><input type="text" name="name" /></td> </tr> <tr> <th>Email:</th> <td><input type="text" name="email" /></td> </tr> <tr> <th> </th> <td><input type="submit" value="submit"/></td> </tr> </table></form>

<form action="" method="post"> <p> Name:<input type="text" name="name" /><br /> Email:<input type="text" name="email" /><br /> <input type="submit" value="submit" /> </p></form>

<form action="" method="post"><p><label for="name">Name:</label><br /><input type="text" name="name" id="name"/></p><p><label for="email">Email:</label><br /><input type="text" name="email" id="email"/></p><p><input type="submit" value="submit" /></p></form>

<form action="" method="post"> <dl> <dt><label for="name">Name:</label></dt> <dd><input type="text" name="name" id="name"/></dd> <dt><label for="email">Email:</label></dt> <dd><input type="text" name="email" id="email"/></dd> <dd><input type="submit" value="submit" /></dd> </dl></form>

CSS选择器声明块选择器声明声明{ color : black; background: yellow; }h1属性属性值值

属性选择器常用选择器1）元素选择器body{ color : green;} h1{ color : red; } p{ color : blue;}2）群组选择器h1 , p ,strong{font-style:italic;}

3）类选择器.f-blue {color:blue;}p.f-blue {font-style:italic;}strong.f-blue { text-decoration:underline;}4）多类选择器<p class="one two three">5）ID选择器#four{ color:blue;}p#four{ font-style:italic;}

通用选择器*{margin:0;padding:0;}

伪类选择器1）链接伪类: link 超链接在未被访问前的样式: visited 超链接在其链接地址已被访问过时的样式2）动态伪类: hove 超链接在其鼠标悬停时的样式: active 超链接在鼠标点击与释放之间发生的样式: focus 设置对象成为输入焦点时的样式

3）其他:first-child 设置第一个子元素样式:lang设置元素使用特殊语言的内容的样式

伪元素选择器: first-letter设置元素内的第一个字符的样式: first-line设置元素内的第一行字符的样式: before 用来和content 属性一起使用，设置在对象前发生的内容: after用来和content 属性一起使用，设置在对象后发生的内容

属性选择器1）简单的属性选择h1[class] {color:green;}h1[id] { color:red;}

2）根据元素属性选择img[alt]{ border:3px solid red;}img[title]{ border:3px solid blue;}a[title][href]{border:3px solid green;}

3）根据具体的属性值选择a[href="http://www.xhtml.com"]{ color:red; font-weight:bold;}a[href="http://www.css.com"][title="Hello world,my name is CSS!!!"]{ color:blue; text-decoration:none;} p[class="one two hello"]{ text-decoration:underline;}

4）根据部分属性值选择p[class~="one"]{ text-decoration:overline;} img[title~="World"]{ border:3px solid green; background:#ccc;}

5）根据部分属性值选择-子串匹配属性选择器span[class*="orange"]{ font-style:italic; color:red;}span[class^="ap"]{ font-weight:bold; color:green;}span[class$="b"]{ text-decoration:underline;}img[src*="test"]{ border:3px solid red;}a[href*="yu"]{ text-decoration:none; color:#fc0;}

6）特定属性选择类型[lang|="en"]{ font-style:italic;}

7）后代选择器h1>strong{ color:red;}h1+p{ color:green;}H1 strong{ color:blue;}

选择器的特殊性* : 0 , 0 , 0 , 0

Style : 1 , 0 , 0 , 0选择器的特殊性* : E ：Class : Id : Style = 0 : 1 : 10 : 100 : 1000!important特殊性高于一切其他元素

特殊性遵循就近原则规划、组织和维护样式表富含语义的命名规则

样式应用富含语义的命名规则表象性名称表意的等价物 #header -（页眉） #branding -（头部信息） #sidebar -（工具条） #content_sub-（子内容） #footer -（页脚） #site_info-（站点信息）

命名规则对比差的命名好的命名red errortopNavmainNavinfo copyright

微格式微格式（Microformat），是通过语意相关让内容人机可读。网页上的允许的微格式数据包括事件、人物、地点等，它可以被其他的软件检测到，并提取出相应的信息，以及对信息进行索引、搜索、跨平台的参考，把这些信息以其他形式重复使用或组合。从技术上来说，这些数据是一些语义标记，用标准的(X)HTML中的class名称设置。他是开放、可用、自由的，可以被任何人使用。微格式扩展了XHTMl，并整合了所有精确含义带来的益处，为设计师们提供了更多的机会去用css格式化内容。

代码注释1）结构性注释/* ------------------------------------------------------------ Basic Style Sheet(for version 4 browers) version : 1.0 author : Adam Yu email : yydxp88@163.com qq : 106395181 msn : zatsl@hotmail.com ------------------------------------------------------------*/

/* Navigator------------------------------------------------------------*//* = Navigator------------------------------------------------------------*/

2）自我提示 /* 这个导航条在IE6下出现了清楚浮动的BUG,如果修复IE6的BUG,修复方法:http://www.yuyadong.com */

/* TODO : 表示某些东西需要以后进行修改*//* KLUDGE : 表示并不完善的解决方法*//* BUG : 表示代码或特定浏览器遇到的问题*/

@import规划网站CSS样式站点越大、越复杂、图形越丰富，CSS的管理就显的尤为重要，将CSS文件分割成多个样式表、按逻辑对样式表进行分组以及通过添加注释让代码变的更加容易理解和阅读。

浏览器渲染模式Quirks mode（诡异模式）

Almost standards mode（几乎标准模式）

Standards mode（标准模式）空白边叠加只有普通文档流中块级元素的垂直空白边才会发生空白边叠加。行内元素，浮动元素或者定位元素之间是不会产生空白边叠加的

元素的顶空白边与前面元素的底空白边发生叠加

元素的顶空白边与父元素的顶空白边发生叠加

元素的顶空白边与底空白边发生叠加

空元素中已经叠加的空白边与另一个空元素的空白边发生叠加

空白边叠加在元素之间维护了一致的距离

视觉格式化盒模型块级元素（block-level element）

内联元素（inline）display决定了盒模型的显示模式

定位概述CSS中有3种基本定位机制：普通流（normal flow）

定位（ position ）除非专门制定，否则默认情况下元素都为普通流

1）<html> 标准模式下，html元素表示文档内容渲染的整个表面2）<body>诡异模式下，body元素表示文档内容渲染的整个表面

文字排版五大字体家族 - font-family：Serif

FantasySerif Serif 字体成正比，而且有上下短线，所有字符根据其不同大小有不同宽度，例如小写i和小写m的宽度就不同。 Serif特定系列字体包括：Times，Georgia和New Century Schoolbook。

Sans-serif Sans-serif 字体成正比，而且没有上下短线。 Sans-serif 特定系列字体包括：Arial，Verdana，Geneva。

MonospaceMonospace字体不成正比，他们通常用于模拟打字机打出的文本，老式点阵打印机的输出，甚至更老的视频终端。每个字符的宽度都是完全相同的，例如小写字母i与小写字母m有相同宽度。这些字体可能有上下短线也可能没有，如果一个字体的字符宽度完全相同，则归类为Monospace字体。Monospace特定系列字体包括：Courier New， Courier，Andale Mono。

Cursive Cursive 字体模仿手写体，通常，它们主要由曲线和serif 字体中没有笔画装饰组成。例如大写字母A在其左腿底部可能有一个小弯。 Cursive 特定系列字体包括：Zapf Chancery， Author，Comic Sans。

Fantasy Fantasy 字体无法用任何特征来定义，无法将其规划到任何字体系列中。

max-width min-width max-height min-heightexpression((documentElement.clientWidth > 300) ? "300px" : "auto" )

分页媒体分页媒体是把文档表示处理为一系列的离散页面，这与屏幕媒体有所不同，屏幕媒体是一种连续型的媒体，在显示器上，文档可以表示为一个可以滚动的页面。打印资料，例如书本，杂志，漫画，激光打印输出等，都属于分页媒体。

屏幕与打印的区别首先除了物理设备上的差异外，屏幕和打印设计之间还有很多样式上的不同。最明显的差别体现在字体上，大多数设计人员会告诉你最适合屏幕设计的字体是Sans-serif，但是在打印媒体中 Serif 可读更好。因此在打印媒体中使用 Times 字体要比 Arial 字体更合适。

设置特定于媒体的样式表<link rel="stylesheet" type="text/css" href="print.css" media="print" /><style type="text/css" media="print"></style>

@import url(print.css) print;@media print { body { font-family:Times, serif; font-size:12pt; }}

Opera ShowOpera Show，将你的浏览器转变成高级演示工具 , 让你的浏览器看起来就像具有幻灯片功能。

Opera Show与传统幻灯片软件对比， Opera Show有以下优势:小巧快速的网页浏览器的标准功能。HTML作为文件格式，相比其他工具使用的专有格式，使得文档轻量级。网上发布你的演示轻而易举。相比其他演示工具，Opera非常廉价。不会用恶俗动画烦扰你的听众。

JavaScript FrameworkExt JSJQueryYahoo UI

AJAXAjax:Asynchronous JavaScript And XML（异步JavaScript和XML），是一种创建交互式网页应用的网页开发技术。xhtml和css的基于标准的表示技术

dom进行动态显示和交互

XML和XSLT进行数据交换和处理（JONS）

XMLHttpRequest进行异步数据检索

JavaScript将以上技术融合在一起DOM DOM文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展置标语言的标准编程接口。Html标签元素对应DOM树中的元素节点

Html文本对应DOM树中的文本节点

Html注释对应DOM树中的注释节点

Html标签属性对应DOM树中的属性节点图像替换FIR

sIFRFIRFIR由Todd Fahrner开创的FIR（Fahrner图像替换）是最早且有可能当时最流行的图像替换技术，比较有历史性意义。缺点：1.额外的标签2.可访问性问题，不适合屏幕阅读器阅读3.关闭图像打开css时无效

PharkPhark由Mike Rundle发明的一种适合阅读器阅读的图像替换技术，而且不需要添加额外的标签。优点：1.不需要添加额外的标签2.适合阅读器阅读缺点：1.关闭图像打开css时无效

Gilder/LevinGilder/Levin方法是由Tom Gilder与Levin Alexander一起发明的解决了对阅读器支持，关闭图像打开css时无效。优点：1.关闭图像打开css时无效2.适合阅读器阅读缺点：1.额外的标签

sIFRsIFR表示scalable Inman Flash Replacement，即“可伸缩Inman Flash替换”技术。是由Mike Davidson在IFR方法的基础之上扩展的一种技术。它通过Flash + JavaScript + CSS联合实现在不替换页面中文本元素的情况下，对文本进行更为细腻准确的效果渲染。

sIFRsIFR不需要更改(X)HTML代码，所有的工作由Javascript、Flash和CSS来完成

如果用户没有安装Flash或者不支持Javascript，那么(X)HTML的文本就会被CSS样式化后显示出来

sIFR是可缩放的，可以在渲染时更改为用户设置的缺省字体尺寸

sIFR兼容所有的屏幕阅读机

sIFR的文本可以被鼠标选择

sIFR不影响搜索引擎的定位和评定，不会隐藏真实的文本内容sIFRsIFR不需要更改(X)HTML代码，所有的工作由Javascript、Flash和CSS来完成

sIFR不影响搜索引擎的定位和评定，不会隐藏真实的文本内容sIFRsIFR技术的主要问题涉及装载时间。页面必须完全装载，然后JavaScript才能替换文本。因此，在所有文本被替换为Flash内容之前常常有短暂的闪烁。尽管这不是个大问题，但是会被访问者注意到，会给人留下页面装载慢的印象。另外，如果进行许多Flash替换，一些页面感觉起来有点儿迟钝。最好将替换减少到最少，只对主要标题使用这种技术。

sIFR生成嵌入特定字体的字符

网站重构&Web标准设计第二版

More Related Content

Viewers also liked (7)

Similar to 网站重构&Web标准设计第二版 (20)

Recently uploaded (20)

网站重构&Web标准设计第二版