W3C标准深入体验(体验版).pdf

《W3C标准深入体验(体验版).pdf》由会员分享，可在线阅读，更多相关《W3C标准深入体验(体验版).pdf（47页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、 文 档 编 号 产品版本 密级 witShare08-03-1 1.0 内部 项目名称：W3C 标准规范全面体验技术参考书 共 118 页 W3C 标准规范全面体验 标准规范全面体验 技 术 参 考 书 技 术 参 考 书 业务名称 W3C 标准规范全面体验 总体规划 王豫翔 方案编制 王豫翔 江海 教学监察 王豫翔 质量控制 傅晓霞 审校和存档 傅晓霞 上级监管 国家劳动和社会保障部中国就业促进会 教学机构 华大锐志 IT 实训中心（华师大古北校区）编制日期 2008 年 3 月 1 日 上海锐学计算机有限公司 版权所有 不得复制 版权所有 不得复制 写在扉页 华大锐志的技术专家告诉您：学

2、习计算机语言和学习人类语言一样，我们鼓励首先通过大量的示例开始学习，因为向别人学习是一种很自然的方式，可以使学习变得轻松有趣。但是模仿也只能带你走这么远。示例的方法既有优点，也存在缺点。通过示例来学习，只能学到一些表面的东西，不能达到彻底全面掌握的境界。要想做到真正的“熟练”，必须要学会如何在各种不同的情况下使用语言，这就需要学习理论知识来进行辅助，同时通过大量的练习和实战来巩固学习的效果。另外还要记住，计算机的语言比人类语言精确的多，必须正确使用语法，否则它就不会起到应有的作用。在已经能熟练地使用语言后，如果还想要成为该语言的真正专家，就必须形成自己的风格：这就意味着不仅要知道什么是合适的，

3、更要知道什么是有效的，同时还必须要考虑他人的阅读、维护和效率等问题。我们编写这一系列教程的目的，正是为了帮助你熟练掌握计算机语言，精通语法、语义、主流工具、经验技巧以及其他各方面能使你成为“专家”的一切。我们采用最自然的学习模式，也就是通过“全程案例”来进行教学。通过案例推导原理，从简单到复杂、从基础到高级、从实践到理论，我们将陪伴你走过这个美妙的体验过程。我们将告诉你哪些是可行，哪些是不可行；我们也知道哪些能让你兴奋莫名，哪些将让你迷惑苦恼；我们将为你高兴，给你鼓励！为了让你更快、更快乐地学习编程，刚开始我们也许会忽略一些概念或你应该知道的技巧，但随着示例的深入，你将会学到所有你应该知道的一

4、切这个就是涡轮式的教学法的妙不可言之处。华大锐志将帮助你实现你的梦想 对这一点，我们非常坚信！目目 录录 一、W3C 介绍.7 1.1W3C 推出的主要规范.7 1.2 规范应用分类.8 二、XHTML 规范.8 2.1 纯净严格的的 XHTML.9 2.1.1XHTML 基本语法规范.9 2.1.2XHTML 文档组成部分.10 2.1.3XHTML 文件类型.10 2.1.4 实体字符.10 2.2 模块化的 XHTML1.1.11 2.2.1 使用 XHTML 模块的原因.11 2.2.2 XHTML 模块模型列表.12 2.3 XHTML 的样式.13 2.3.1 基于内容的样式.13

5、 2.3.2 基于物理样式.13 2.4 体验 XHTML.13 2.4.1 一个最小的 XHTML 文档.14 2.4.2 在 XHTML 中使用其他命名空间.14 2.4.3 XHTML 允许直接在 body 元素下出现的标记.15 2.4.4 基于内容的 XHTML 标记.16 2.4.5 链接的运用.16 2.4.6 通过 javascript 扩展链接.17 2.4.7 在中定义.18 2.4.8 在 XHTML 中定义表格.19 2.4.9 列表定义.20 2.4.10 展示图片.21 2.4.11XHTML 的元素占用位置.21 2.4.12 关 XHTML 中的元素和元素.22

6、 2.4.13 使用空元素.23 三、CSS 规范.24 3.1 风格特立的 CSS.24 3.1.1CSS 的语法.24 3.1.2 层叠的含义.25 3.1.3CSS 的嵌入模式.25 3.1.4 神奇的滤镜：你还需要 Photoshop 吗？.26 3.1.5CSS 的不足.27 3.2 理解 CSS 的盒子模型.27 3.2.1 CSS 的 BOX 概念.27 3.2.2 左邻右里：边框、边距和空白.28 3.2.3 泼墨大写意、留白小题诗.31 3.2.4 绝对与相对.32 3.2.5 漂浮的自由感觉：CSS 的流动。.34 3.3 体验 CSS.36 3.3.1 修饰前景、背景和字

7、体.36 3.3.2 修饰超链接.37 3.3.3 修饰可见性和显示性.38 3.3.4 串行和块.39 3.3.5 修饰边框.40 3.3.6 列表变菜单.41 3.3.7 行间距.43 3.3.8 文本定位.43 3.3.9 行的修饰.44 3.3.10 块的定位.45 3.3.11 用 CSS 产生表格效果.47 3.4 体验 CSS 的神奇滤镜.47 3.4.1 渐变透明：Alpha.47 3.4.2 模模糊糊：Blur.47 3.4.3 颠来倒去：FlipH,FlipV.47 3.4.4 单色透明：Chroma.47 3.4.5 如影随行：DropShadow.47 3.4.6 光辉

8、一瞬：Glow.47 3.4.7 一江春水向东流：Wave.47 3.4.8 曾经的胶卷底片：Invert.47 3.4.9xray.47 3.4.10 灰色天空：Gray.47 3.4.11 要有光：Light.47 3.4.12 水乳交融：blendTrans.47 四、JScript 详解.47 4.1JScript 语法概览.47 4.1.1 数据类型和声明定义.47 4.1.2 执行 JScript 次序和 HTML 的位置关系.47 4.1.3 无类型的逻辑比较结果.47 4.1.3 结构化语句控制.47 4.1.4 运算符.47 4.2 函数.47 4.2.1 函数定义和声明.4

9、7 4.2.2 函数的实际获取参数.47 4.2.3 引用当前执行的函数自身.47 4.2.4 函数的实参的数量判断.47 4.2.5 恐怖的函数定义及执行次序.47 4.3 深入体验 JScript 的面向对象.47 4.3.1 对象的创建和初始化.47 4.3.2 属性的定义和枚举.47 4.3.3 使用构造函数创建对象并声明属性和方法.47 4.3.4 原型对象引用.47 4.3.5 实现实例成员和类成员.47 4.3.6 子类父类的关系和实现.47 4.4 深入继承模型.47 4.5 打造 JScript 面向对象版本的 CollectionBase.47 4.5.1 定义 Colle

10、ctionBase 框架.47 4.5.2 实现 CollectionBase 的功能.47 4.5.3 设计 CashItem 对象.47 4.5.4 实现从 CollectionBase 继承的 CashCollection 类.47 4.5.6 在 HTML 页面实现最终效果.47 五、DOM.47 5.1 了解 DOM 服务的概念.47 5.1.1 文档和结点.47 5.1.2 节点的类型.47 5.1.3 节点包含的属性值对.47 5.1.4 文档的装载和解析.47 5.1.5 使用 JScript 获取 HTML DOM 节点元素的常用方式.47 5.2 了解 HTML DOM 和

11、 JScript 的关系.47 5.2.1 认识 HTML DOM 对象和 HTML 元素的映射关系.47 5.2.2 用于浏览器交互的 JScritp 重要对象.47 5.3 深入体验 JScript 和 HTML DOM 的客户端交互能力.47 5.3.1 读取 HTML 组件的预定义属性和自定义属性.47 5.3.2 扩展系统的 setTimeout 函数.47 5.3.3 自动表格值计算.47 六、DHTML.47 6.1 浏览器对象模型分析.47 6.1.1 浏览器对象层次结构.47 6.1.2 浏览器对象事件支持.47 6.1.2 浏览器对象 CSS 支持.47 6.2 在线 CS

12、S 所见即所得编辑器.47 七、XML.47 7.1XML 基本语法规则.47 7.1.1 一个简单的 XML 文档.47 7.1.2 命名空间.47 7.1.3 实体和 CDATA.47 7.1.4 编码.47 7.2 XML 的样式表 XSL.47 7.2.1 XSL 的声明.47 7.2.2 语法元素.47 7.2.3 函数.47 7.2.4 XSL 的样式使用.47 7.3 数据岛.47 7.3.1 支持 Data Islands 的 XHTML 元素.47 7.3.2 属性式的数据岛绑定呈现.47 7.3.3 子元素的数据岛绑定呈现.47 7.3.4 无刷新翻页数据岛绑定.47 7.

13、3.5 配合 JScript 的复杂数据岛处理.47 八、深入体验 W3C 的综合技术.47 一、一、W3C 介绍介绍 自从 Web 诞生以来，Web 的每一步发展、技术成熟和应用领域的拓展，都离不开成立于 1994 年 10 月的 W3C 的努力。W3C 是专门致力于创建 Web 相关技术标准并促进 Web 向更深、更广发展的国际组织。W3C 是 World Wide Web Consortium（万维网联盟）的缩写。他和 ISO、IEEE 共同作为现代程序员需要关注的三大标准组织之一。W3C 是维护 WEB 开发标准的非盈利组织。W3C 并不是关注 WEB 的某一个标准，而是所有关于在 I

14、nternet 上基于 WEB 开发的一系列的集合。无论你的 WEB 开发是基于 ASP、ASP.Net、JSP、PHP 等开发，或者你希望在你的 WEB应用中运用 DIV+CSS、Javascript、XML、Ajax、XHTML、WEB2.0 等新颖概念，又或者你仅仅想要作一个最最简单的 HTML 网页，所有的一切，你都必须要遵循 W3C 在 WEB 体系的一系列标准，否则你的应用无法在 Internet 上与他人共享交互。1.1W3C 推出的主要规范推出的主要规范 到目前为止，W3C 已开发了超过 50 个规范(草案)。这些规范(草案)全面的为 WEB开发工作提供了世界级的标准，让世界各

15、地的开发人员在共同的标准上可信安全的 WEB 应用程序。WEB 应用分类应用分类 标准集合标准集合 HTML Basic HTML4.01/HTML5 XHTML1.0/1.1/XHTML Basic CSS1.0/2.0/3.0 XML XML1.0 DTD/Schema XML DOM XSL/XSLT/XSL-FO/XPath/XQuery XLink/XPointer/XForms SOAP/WSDL RSS WAP WAP Web Services（WSDL、SOAP、UDDI）Browser Scripting JavaScript HTML DOM DHTML AJAX E4X

16、WMLScript ECMAScript Multimedia Learn Media Learn SMIL Learn SVG 1.2 规范应用分类规范应用分类 在大量的规范中，W3C 依据 WEB 开发的分层规范，将所有的技术分类到三个部分：标准分层规范标准分层规范 应用技术应用技术 结构（Structure）层 XHTML/XML 表现（Presentation）层 CSS 行为（Behavior）层 DOM/Script 二、二、XHTML 规范规范 XHTML 是 The Extensible Hypertext Markup Language(可扩展标识语言)的缩写。2000 年底

17、，W3C 公布发行了 XHTML 1.0 版本。XHTML 1.0 是一种在 HTML 4.0 基础上优化和改进的新语言，目的是基于 XML 应用。XHTML 是一种增强了的 HTML,它的可扩展性和灵活性将适应未来网络应用更多的需求。XML 虽然数据转换能力强大，完全可以替代 HTML，但面对成千上万已有的基于 HTML语言设计的网站，直接采用 XML 还为时过早。因此，在 HTML4.0 的基础上，用 XML 的规则对其进行扩展，得到了 XHTML。所以，建立 XHTML 的目的就是实现 HTML 向 XML 的过渡。目前国际上在网站设计中推崇的 WEB 标准就是基于 XHTML 的应用（

18、即通常所说的CSSDIV）。2.1 纯净严格的的纯净严格的的 XHTML XHTML 是当前 HTML 版的继承者。HTML 语法要求比较松散，这样对网页编写者来说，比较方便，但对于机器来说，语言的语法越松散，处理起来就越困难，对于传统的计算机来说，还有能力兼容松散语法，但对于许多其他设备，比如手机，难度就比较大。因此产生了由 DTD 定义规则，语法要求更加严格的 XHTML。大部分常见的浏览器都可以正确地解析 XHTML，即使老一点的浏览器，XHTML 作为HTML 的一个子集，许多也可以解析。也就是说，几乎所有的网页浏览器在正确解析 HTML的同时，可兼容 XHTML。当然，从 HTML

19、完全转移到 XHTML，还需要一个过程。跟 CSS（Cascading Style Sheets，层叠式样式表）结合后，XHTML 能发挥真正的威力；这使实现样式跟内容的分离的同时，又能有机地组合网页代码，在另外的单独文件中，还可以混合各种 XML 应用，比如 MathML、SVG。因此我们可以认识到，XHTML 是 W3C 定义的，基于 XML 技术的纯净严格的 HTML版本。那为什么需要一个纯净严格的 HTML 版本呢？目前市场上浏览器越来越多，参与的用户也越来越多，因此必须要有一个可以持续扩展的 WEB 网页标准。另外，某些浏览器则运行在移动电话、手持设备或更小的设备上，而这些扩展设备往

20、往没有足够强大的运算能力来计算解释语意模糊的 HTML。2.1.1XHTML 基本语法规范基本语法规范 为实现纯净严格的要求，XHTML 对格式有非常严格的规范 元素必须被正确的嵌套 元素必须被关闭 空元素也必须被关闭 元素必须是小写 文档必须有一个根 属性名必须小写 属性值必须加引号 属性不能简写 用 id 属性代替 name 属性 XHTML DTD 定义了强制使用的 HTML 元素 2.1.2XHTML 文档组成部分文档组成部分 一个 XHTML 文档有三个主要的部分 DOCTYPE Head Body 2.1.3XHTML 文件类型文件类型 如果你希望将页面验证为正确的 XHTML，那

21、么页面中必须含有文件类型声明。因为XHTML 文档是根据文档类型声明（DTD）进行验证的。只有将正确的 DTD 添加到文件的首行，XHTML 文件才会被正确地验证。XHTML 文件类型由 DOCTYPE 的不同描述代表了三种不同类型的 XHTML 文档类型。文档类型文档类型 含义含义 DTD 定义定义 STRICT 严格型 TRANSITIONAL 过渡型 FRAMESET 框架型 严格 DTD 包含没有被反对使用的或不出现在框架结构中的元素和属性 过渡 DTD 包含严格 DTD 中的一切，外加那些不赞成使用的元素和属性 框架 DTD 包含过渡 DTD 中的一切，外加框架 2.1.4 实体字符

22、实体字符 实体字符，就是 XHTML 所提供的一组特殊字符。在很多情况下，我们需要显示一些特殊的文本。这些字符有时候会出现在文档中，但不能以本身的样式进行拼写。比如 1/4，1/2 的特殊写法。有时候要显示的字符是 XHTML 中具有特殊意思的字符。比如，&等。有些字符在键盘上没有对应的按钮，比如、对于一些非换行的的不可见字符。下 面 的 表 格 简 单 的 描 述 了 一 些 常 用 的 实 体。具 体 详 细 信 息 请 参 阅：http:/www.w3.org/TR/html4/sgml/entities.html 实体实体 描述方式描述方式 实体实体 描述方式描述方式&&

23、;>"'1/4¼1/2½®©°±¢¤￥¥£所有的实体都是以&符号开头，&和后面的描述字符之间不能有空格。如果仅描述&本身也需要通过实体的方式来描述的。有意思的是，最后的;符号可以忽略，但如果有;符号的话，也必须和前面的描述字符相连，不允许有空格。2.2 模块化的模块化的 XHTML1.1 2.2.1 使用使用 XHTML 模块的原因模块的原因 XHTML 是简单而庞大的语言，而且 XHTML 包含了网站开发者需要的大多数功能。不过对于某些特殊的用途，XHTML

24、 太大且太复杂，而对于其他的用途，它又太简单了。通过将 XHTML 分为若干模块，W3C 已经创造出数套小巧且定义良好的 XHTML 元素，这些元素既可被独立应用于简易设备，又可以与其他 XML 标准并入大型且更复杂的应用程序。通过使用模块化的 XHTML，产品和软件设计者可以：选择被某个使用标准 XHTML 构件的设备所支持的元素。在不打破 XHTML 标准的情况下，使用 XML 对 XHTML 进行扩展。针对诸如掌上电脑、移动电话、电视机和家用电器之类的设备，对 XHTML 进行简化。通过添加新的 XML 功能(比如 MathML,SVG,语音和多媒体)，针对复杂的应用对 XHTML 进行

25、扩展。定义 XHTML 框架，比如 XHTML BASIC(针对移动设备的 XHTML 子集)。2.2.2 XHTML 模块模型列表模块模型列表 模块名称模块名称 描述描述 Base Module(基础模块)定义基本元素 Base Module(基础模块)定义基本元素 Basic Forms Module(基础表单模块)定义基本的表单元素(forms)。Basic Tables Module(基础表格模块)定义基本的表格元素(table)。Bi-directional Text Module(双向文本模块)定义 bdo 元素。Client Image Map Module(客户端图像映射模块)

26、定义浏览器端图像映射元素(image map elements)。Edit Module(编辑模块)定义编辑元素删除和插入。Forms Module(表单模块)定义所有在表单中使用的元素 Frames Module(框架模块)定义 frameset 元素。Hypertext Module(超文本模块)定义 a 元素 Iframe Module(内联框架模块)定义 iframe 元素 Image Module(图像模块)定义图像元素(img)。Intrinsic Events Module 定义事件属性 Link Module(链接模块)定义链接(link)元素 List Module(列表模块

27、)定义列表元素 ol,li,ul,dd,dt,和 dl Metainformation Module(元信息模块)定义 meta 元素 Object Module(对象模块)定义对象元素(object)和 param 元素 Presentation Module(表现模块)定义表现元素比如 b 和 i Scripting Module(脚本模块)定义脚本(script)和无脚本(noscript)元素 Server Image Map Module(服务器端图像映射模块)定义服务器端图像映射(server side image map)元素 Structure Module(结构模块)定义以下

28、元素：html,head,title and body Style Attribute Module(样式属性模块)定义样式属性 Style Sheet Module(样式表模块)定义样式元素 Tables Module(表格模块)定义用于表格中的元素 Target Module(Target 模块)定义 target 属性 Text Module(文本模块)定义文本容器元素(text container)，比如 p 和h1 2.3 XHTML 的样式的样式 我们编写 XHTML 文档的时候，总希望能让呈现的页面精致并让阅读者有更好的体验。同时 HTML/XHTML 都提供了一写允许改变文本外

29、观的能力。但从 W3C 的标准来看，我们应该努力实现 XHTML 仅描述文档的内容和结构，而把呈现交由 CSS 实现。2.3.1 基于内容的样式基于内容的样式 使用内容标签将告诉浏览器它所包含的文本具有的特殊含义，上下文或用法。虽然有些内容标签会影响输出的格式效果，但必须了解：浏览器仅是标准该内容是某种特地的上下文，而不是格式化。基于内容样式，对于将来的自动化处理是非常重要的手段。并且在扩展设备上，基于内容样式的 XHTML 尤为重要。2.3.2 基于物理样式基于物理样式 XHTML 有写标记可以让你控制显示的物理样式，但除非在极少数情况下，都应该尽量的避免使用物理标签。2.4 体验体验 XH

30、TML 要体验 XHTML 是非常简单的事情，不需要太多复杂的工具或者系统环境。你只要使用任意的支持 Intrenet 的操作系统：Windows、Unix、MAC、Linux。然后使用最简单的支持 ASCII 的文本编辑器你就可以创建支持 W3C 标准的 XHTML 了。不过，如果你要高效的开发 XHTML 应用，我们建议你还是使用专业的工具。还有一个另人哭笑不得的问题要考虑，如果你的 XHTML 应用不打算仅仅满足 95%的主流 IE 用户，那你还要安装足够多的浏览器来测试。2.4.1 一个最小的一个最小的 XHTML 文档文档 一个最小的 XHTML 文档 一个能通过严格验证的 XHTM

31、L 文档必须依照以下标准 必须指定三种验证 DTD 的一种 文档的根元素必须是 根元素必须用 xmlns 属性修饰到 http:/www.w3.org/1999/xhtml 在根元素之前，必须有一个 DOCTYPE 声明 强烈建议在文档的第一行，使用 xml 声明 2.4.2 在在 XHTML 中使用其他命名空间中使用其他命名空间 在 XHTML 中引用其他命名空间 A Math Example 下面是引用了数学标记语言（MathML）的命名空间 3 X XHTML 规范要求，不能直接包含纯文本。2.4.3 XHTML 允许直接在允许直接在 body 元素下出现的标记元素下出现的标记 允许在

32、body 下直接出现的标记 h1号标题 h2号标题 h3号标题 h4号标题（接近常用字体大小）这个是常用字体，p元素表示一个段落，在上下都有明显的距离分开 h5号标题 h6号标题 div指定渲染HTML 的容器 在pre的控制下，可以把原文件中的空格,回车,换行,tab 键表现出来 address特定信息，如地址、签名、作者、此文档的原创者 fieldset在字段集包含的文本和其它元素外面绘制一个方框 ins指定被插入到文档中的文本 del表明文本已经从文档中删除 为更符合规范，我们建议所有的内容放置在 div 标记中。2.4.4 基于内容的基于内容的 XHTML 标记标记 常用的 XHTML

33、 内容标记 描述计算机代码 描述键盘输入 描述计算机样例代码 描述电报文本 描述变量 描述预格式文本 这是缩写W3C 这是首字母缩写WWW 这是地址中国。上海 文本从右到左：上海 文本从左到右：上海 这是：长引用 这是：短引用 这是：引用 这是：术语定义 虽然不同的内容描述会引起外观的变化，但要理解，这还是对内容的描述，而不是对呈现的描述。2.4.5 链接的运用链接的运用 XHTML 中使用链接&锐学主页 跳到最下面 在新的窗口打开锐学主页 在当前窗口打开锐学主页 发送邮件给我发送邮件给我 跳到第二个链接 对于 XHTML 的链接有两个地方值得注意 XHTML 中不再支持通过 targ

34、et 属性的语法，也许 W3C 专家认为不经过用户同意，没有明确提示就打开一个新窗口是不礼貌的。在 mailto 的链接中使用&字符也必须转为&实体描述。2.4.6 通过通过 javascript 扩展链接扩展链接 通过 javascript 扩展链接 function externallinks()if(!document.getElementsByTagName)return;var anchors=document.getElementsByTagName(a);for(var i=0;ianchors.length;i+)var anchor=anchorsi;if(ancho

35、r.getAttribute(href)&&anchor.getAttribute(rel)=external)anchor.target=_blank;window.onload=externallinks;在新的窗口打开锐学主页 在 XHTML 中强烈建议将脚本文件和页面文件分开，否则脚本中的&;等字符会让你非常烦恼。2.4.7 在在中定义中定义 在 XHTML 中使用 meta meta标签共有两个属性，它们分别是http-equiv属性和name属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。2.4.8 在在 XHTML 中定义表格中定义表格

36、在 XHTML 中定义表格 序号内容摘要金额 1上月余额18000 2购买原材料-2400 3A客户支付货款7281.23 小计22881.23 2.4.9 列表定义列表定义 有序、无序和自定义描述性列表定义 C#SQL Server&OracleW3CJavaC+C#SQL Server&OracleW3CJavaC+C#.Net第一开发语言SQL Server&Oracle主流数据库W3CWEB开发全标准Java跨平台语言 XHTML 已经不再支持列表中的 type 属性。2.4.10 展示图片展示图片 展示图片 在 XHTML 规格中 img 的 alt 属性为必

37、选。除了保留了 height、width、longdesc、usmap、ismap 等少数可选属性外，其他原先 HTML 属性被放弃了。2.4.11XHTML 的元素占用位置的元素占用位置 XHTML 对元素和元素之间的空格以及回车一般都会忽略，每一个元素默认有自己的占行的呈现能力（在没有用或元素修饰情况下）。很多他元素默认在呈现内容前后加入换行标记。也就是说元素要独占一行。元素的占行呈现 pppblockquotedeladdressins 观察和调整上面的代码，理解元素的默认占行。2.4.12 关关 XHTML 中的中的元素和元素和元素元素 在很多设计中，程序员感觉和在呈现效果上大体一致。

38、所以需要重申 XHTML关心的是内容而不是呈现。描述该内容是一个段落。描述一下元素在一个内容块中。和 hello phello divhello phello p 所有的标记都必须要有一个相应的结束标记 所有标签的元素和属性的名字都必须使用小写 所有的 XHTML 标记都必须合理嵌套 所有的属性必须用引号括起来 把所有和&特殊符号用编码表示 给所有属性赋一个值 不要在注释内容中使“”2.4.13 使用空元素使用空元素 当一个元素在开始标记和结束标记之间没有子元素和任何文本，该元素就是空元素。XHTML 对元素 a、br 等默认为空元素，空元素有两种写法。以下是一个表格 序号内容摘要金额 1上月

39、余额18000 2购买原材料-2400 3A客户支付货款7281.23 小计22881.23 三、三、CSS 规范规范 CSS 是 Cascading Style Sheets（层叠样式表）的缩写。CSS 语言是一种标记语言，它不需要编译，可以直接由浏览器执行（所以我们称它是浏览器解释型语言）。当然它同样有W3C 组织维护和解释。在 XHTML 中，我们没有描述如果显示不同的字体，或者字体颜色，甚至，我们都没有描述文本内容的位置（这在 HTML 开发中似乎不可想象的），但的确如此，我们要克服使用 HTML 将内容和呈现混合开发的模式。对于页面，W3C 推荐使用 CSS 进行定义。页面的呈现的字

40、体大小、颜色、位置等等所有关于呈现的一切，我们都应该由 CSS 来实现。或者，CSS 有更令你想象不到的奇妙能力。3.1 风格特立的风格特立的 CSS CSS 的语法模式，和使用模式和常见的语言都有所不同。其语法外观比较特殊，书写风格非常灵活。3.1.1CSS 的语法的语法 CSS 的语法分为三个部分 selector 选择器 property 属性 value 属性 selector property:value 选择器：选择器：描述任何 XHTML 中的元素，多个元素之间用（,）分隔。用（#）描述元素的 id 属性。用（.）描述元素的 class 属性。用（）描述空格后的元素是空格前元素子

41、元素。属性：属性：描述需要对选择元素的修饰范围。属性由 CSS 规范设定。注释：注释：使用/*/注释模式。3.1.2 层叠的含义层叠的含义 XHTML 中大部分元素都允许有子元素的存在。所以 CSS 引入层叠的概念。层叠性就是继承性。其意义是，子元素会继承父元素的修饰定义。对子元素的修饰如果没有涉及到父元素修饰的内容，则继续保持父元素的修饰。如果和父元素冲突，则使用子元素的修饰。3.1.3CSS 的嵌入模式的嵌入模式 嵌入方式嵌入方式 推荐性推荐性 外部 CSS 文件 强烈推荐的模式，可以被多份文件使用 内联 CSS 样式 无法被多文件分享，并会造成 XHTML 过大 元素级内联 CSS 样式

42、 不推荐，但可以小范围的修饰一个元素 外部 CSS 文件的嵌入方式 CSS 在设计的时候，要求能跨越显示设备，因此通过 media 属性来描述支持的媒体设备。设备设备 描述描述 Screen 输出到电脑屏幕 Print 输出到打印机 TV 输出到电视机 Projection 输出到投影仪 Aural 输出到扬声器 Braille 输出到凸字触觉感知设备 Tty 输出到电传打字机 All 输出到以上所有设备 内联 CSS 的模式 hr color:sienna p margin-left:20px body color:black 元素级内联 CSS 模式 This is a paragraph

43、 3.1.4 神奇的滤镜：你还需要神奇的滤镜：你还需要 Photoshop 吗？吗？CSS2 提供了滤镜的能能力，允许我们对元素进行类似 PS 般神奇的处理能力。CSS 的滤镜语法是：filter:filtername(fparameter1,fparameter2.)滤镜名称滤镜名称 效果效果 Alpha 设置透明层次 blur 创建高速度移动效果，即模糊效果 Chroma 制作专用颜色透明 DropShadow 创建对象的固定影子 FlipH 创建水平镜像图片 FlipV 创建垂直镜像图片 glow 加光辉在附近对象的边外 gray 把图片灰度化 invert 反色 light 创建光源在

44、对象上 mask 创建透明掩膜在对象上 shadow 创建偏移固定影子 wave 波纹效果 Xray 使对象变的像被 x 光照射一样 3.1.5CSS 的不足的不足 CSS 毕竟不是用于计算和逻辑的语言，其没有逻辑判断的表达能力，没有统计的能力。只有对元素内容有表达能力，对元素的属性没有表达能力。3.2 理解理解 CSS 的盒子模型的盒子模型 3.2.1 CSS 的的 BOX 概念概念 CSS 把任何元素所占据的矩形范围都称为盒子。BOX 是 CSS 修饰中的重要属性。对BOX 的理解越深刻，越能更好的掌握和控制 CSS。CSS 的的 BOX 属性层次（从里向外）属性层次（从里向外）conte

45、nt 内容 Padding 空白 Border 边框 margin 边距 这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也具有这些属性，所以叫它盒子模式。边框就是盒子本身了；至于边界则是各个盒子之间的间距。填充只有宽度属性，是内容和盒子边框的间距。内容就是实际文字或图片的大小。每个盒子都可以独立定义其的位置，大小，背景颜色，字体等修饰内容。3.2.2 左邻右里：边框、边距和空白左邻右里：边框、边距和空白 属性属性 含义含义 用途用途 border 边框 设定一个元素的边线 盒子的修饰 标题区（褐色边框）导航区（红色边框）内容区（蓝色边框）页脚区（银灰色边框

46、）body font-family:Arial,Helvetica,sans-serif;font-size:12px;height:auto;width:760px;border-right:fuchsia thin solid;border-top:fuchsia thin solid;border-left:fuchsia thin solid;border-bottom:fuchsia thin solid;margin-left:auto;margin-right:auto;text-align:center;#header height:100px;background-repea

47、t:no-repeat;border-right:maroon thin solid;border-top:maroon thin solid;margin 边距 设置一个元素所占空间的边缘到相邻元素之间的距离 padding 空白 设置元素内容到元素边界的距离 border-left:maroon thin solid;border-bottom:maroon thin solid;#nav height:25px;list-style-type:none;border-right:red thin solid;border-top:red thin solid;border-left:re

48、d thin solid;border-bottom:red thin solid;#content height:auto;border-right:blue thin solid;border-top:blue thin solid;border-left:blue thin solid;border-bottom:blue thin solid;#footer height:50px;text-align:center;border-right:silver thin solid;border-top:silver thin solid;border-left:silver thin s

49、olid;border-bottom:silver thin solid;代码描述了如何通过对 BOX 的修饰，改变元素的大小，位置，边框颜色。学员可以将元素中的文字去掉，然后在观察效果。3.2.3 泼墨大写意、留白小题诗泼墨大写意、留白小题诗 在下面的代码中，我们对原来的代码作了修正。请注意观察 边距和空白 标题区（褐色边框）导航区（红色边框）和上面的边距20 内容区（蓝色边框）页脚区（银灰色边框）向上留20的空白 body font-family:Arial,Helvetica,sans-serif;font-size:12px;height:auto;width:760px;border

50、-right:fuchsia thin solid;border-top:fuchsia thin solid;border-left:fuchsia thin solid;border-bottom:fuchsia thin solid;margin-left:auto;margin-right:auto;text-align:center;#header height:100px;background-repeat:no-repeat;border-right:maroon thin solid;border-top:maroon thin solid;border-left:maroon