多媒体技术与应用第3章超文本原理-修改

1、多媒体技术与应多媒体技术与应用第用第3 3章超文本原章超文本原理理2第3章 超文本原理学习提示：基于XML规范的多媒体应用有XHTML、SVG/XAML、X3D等，可形成媒体的整体解决方案。本章将系统叙述XML超文本应用XHTML的基本原理，为后文介绍超文本的具体应用奠定理论基础。本章主要以代码的方式叙述XHTML，建议结合第8章进行上机实验。本章学习目标如下：l理解XHTML是XML超文本媒体应用。l掌握XHTML常用元素的功能和用法l理解XHTML文档的布局机制。l理解XHTML文档内容与格式，掌握XHTML文档CSS样式的基本原理。l理解XHTML文档内容、格式与功能，了解XHTML结合

2、JScript、C#、Java等编程。93.5.1 XHTML文本XHTML是是XML在超文本领域的具体应用，所以文本定义是在超文本领域的具体应用，所以文本定义是XHTML的最基本功能。字符形成段落，段落形成文档，整个文的最基本功能。字符形成段落，段落形成文档，整个文档就是一页。如果一页超过满屏的高度或宽度，将提供滚动条档就是一页。如果一页超过满屏的高度或宽度，将提供滚动条滚动浏览。滚动浏览。XHTML文档没有分页的概念。文档没有分页的概念。XHTML是为定义是为定义(超超)文本文档而诞生的，所以文本文档而诞生的，所以XHTML设计为并设计为并不提供专门定义文本的元素不提供专门定义文本的元素(

3、而而XAML、X3D则分别面向二维图则分别面向二维图形动画、三维图形动画，都提供专门的文本定义元素，将分别形动画、三维图形动画，都提供专门的文本定义元素，将分别在在4.8节、节、5.8节叙述节叙述)。文本主要由段落类元素。文本主要由段落类元素p，列表类元素，列表类元素ol、ul、li，表格类元素，表格类元素table、tr、td，分块元素，分块元素div，内嵌元，内嵌元素素span等格式类元素定义并初步格式化，已在等格式类元素定义并初步格式化，已在3.4节结合布局节结合布局进行过详述，在此不赘述。上述元素定义文本后，可进一步通进行过详述，在此不赘述。上述元素定义文本后，可进一步通过过CSS样式

4、机制实现字体、背景、文本、布局、定位等强大的样式机制实现字体、背景、文本、布局、定位等强大的格式功能格式功能(将在将在3.6.9节详述节详述)。103.5.2 XHTML外部媒体、组件的引用1. 直接引用外部媒体直接引用外部媒体2. 引用组件引用组件(1) 组件本质上是程序代码。(2) 应用程序或系统软件必须开放式地提供组件的功能，然后各程序员根据应用程序或系统软件的组件规范编写组件。(3) 可以使用任何支持组件对象模型(COM)的编程语言(如C、C+、Java、Visual Basic或大量脚本编辑语言)编写组件。编写者提供组件给用户，同时提供用法说明。用户安装组件，根据用法说明调用组件的功

5、能。(4) 随着应用程序或系统软件的发展，可能会逐步提供当前以组件方式实现的功能，而不再需要安装组件。(5) 组件在XHTML文档中运行后，组件界面处的操作由组件响应，典型地如右键菜单是组件的右键菜单功能了，而不再是IE的右键菜单功能了。(6) XHTML文档中引用的组件是浏览器端的组件；ASPX文档中引用的是Web服务器端的组件。(7) 组件(Component)根据是否提供自身的界面、功能特点等又称为控件(Control)、插件(Plugin)等。能够在XHTML文档中引用(通过IE调用运行)的组件又称为Web组件、Web插件、ActiveX控件等。113.5.2 XHTML外部媒体、组件

6、的引用3. 通过组件引用外部媒体通过组件引用外部媒体引用外部媒体时，如果浏览XHTML文档的浏览器自身不能直接播放这些媒体(如在XHTML文档中引用.wmv、.rmvb、.mov等流式视频，.swf、.xaml等二维图形动画，.x3d三维图形动画)，必须首先引用相关的组件，再由组件引用该媒体。代码3-6是引用了.wmv、.swf、.xaml、.x3d的一个XHTML文档示例。参见教材P58123.6 XHTML格式与CSS3.6.1 CSS XHTML应用简介应用简介XHTML文档可理解为内容、格式、功能三类主要信息。前面叙述了XHTML中定义内容，内容需要进一步赋予格式，XHTML文档同XM

7、L文档一样，选用CSS样式技术(参见2.6节)格式化文档。CSS是Web标准之一(/TR/CSS/)。关键是了解CSS的语法和所有属性的基本功能，然后通过软件辅助(如Expression Web)具体实现CSS。还必须提及的是，由于兼容历史的原因，XHTML一些定义文本的元素(如、等)具有直接样式化文本的功能。但这些元素的种类是有限的，只能对文档的样式进行微弱的控制。为了对XHTML文档格式进行更强大的控制，如字体、背景、文本、布局、定位等，必须使用CSS。133.6.2 CSS代码结构、属性1. CSS代码结构基本结构代码结构基本结构2. CSS属性概述属性概

8、述1) 颜色(Color)2) 背景(Background)3) 字体(Font)4) 文本(Text)5) 用户界面(Interface)6) 布局(Layout)143.6.3 CSS代码编辑与浏览1. CSS编辑编辑2. XHTML文档浏览文档浏览153.6.4 CSS颜色CSS颜色属性是用来为元素的文本内容或背景颜色属性是用来为元素的文本内容或背景等指定颜色的。下面的示例为元素的文本内容等指定颜色的。下面的示例为元素的文本内容指定红色：指定红色：li color: rgb(255,0,0) /*指定所有的文本内容为红色，rgb(255,0,0)使用的是RGB颜色表示方式来表示红色，该方

9、法可满足任何颜色的表示 */颜色机制参见颜色机制参见1.3.1节。为了方便使用和兼顾兼节。为了方便使用和兼顾兼容性，容性，CSS颜色可以选用如下表示方法：颜色可以选用如下表示方法： (1) 可以用一个颜色关键词。(2) 一个rgb()函数来表示。(3) #符号后紧跟6位十六进制的数值来表示。163.6.5 CSS背景CSS背景属性可以为一个具有布局属性的元素指定背背景属性可以为一个具有布局属性的元素指定背景颜色或以一个背景图像来获得所需要的背景效果。景颜色或以一个背景图像来获得所需要的背景效果。下面的示例为元素指定红色背景色：下面的示例为元素指定红色背景色：td background-colo

10、r: rgb(0,255,0) /*指定所有的背景色为绿色*/下面的示例为元素指定一个背景图像：下面的示例为元素指定一个背景图像：td background-image: url(background.gif) /* 指定所有的背景图像, 背景图像通过url(background.gif)函数来获取,其中参数background.gif是一个图像文件的url*/当使用背景图像时，背景图像的原始尺寸可能与元素当使用背景图像时，背景图像的原始尺寸可能与元素的尺寸不相等，这时可附加的尺寸不相等，这时可附加background-repeat、repeat、 repeat-x、 repeat-y 、no

11、-repeat等属性来等属性来控制背景的重复属性。控制背景的重复属性。173.6.6 CSS字体1. font-family2. font-style3. font-size183.6.7 CSS文本1. text-align2. vertical-align3. text-decoration4. letter-spacing5. word-spacing193.6.8 CSS用户界面CSS用户界面属性用来指定用户界面相关用户界面属性用来指定用户界面相关的一些特性，其中经常使用到的是的一些特性，其中经常使用到的是cursor属性。属性。cursor属性为鼠标指定一个光标类属性为鼠标指定一个光

12、标类型型(如如auto、crosshair、default.、pointer、move、text、wait和和help 等等)下下面是一个示例：面是一个示例：p cursor :move /*指定当鼠标在所有位置上时显示移动方式类型的光标*/203.6.9 CSS布局1. 元素尺寸、填塞、边框、边白元素尺寸、填塞、边框、边白1) 元素尺寸2) 填塞3) 边框4) 边白2. 显示显示3. 层层4. 流式定位、绝对定位、相对定位流式定位、绝对定位、相对定位5. CSS布局思考布局思考213.6.10 CSS继承像面向对象的程序机制那样，像面向对象的程序机制那样，CSS支持继承。支持继承。CSS继继

13、承是指后代元素自动承是指后代元素自动“遗传遗传”祖先元素样式的机制，祖先元素样式的机制，是简化样式生成的捷径。当为一个元素指定了样式时，是简化样式生成的捷径。当为一个元素指定了样式时，无须特别声明即可将其样式属性赋予其后代元素。无须特别声明即可将其样式属性赋予其后代元素。如果有如下一个如果有如下一个CSS定义：定义：bodyfont-size:50;示例中只定义了示例中只定义了的样式。但因为包含在的样式。但因为包含在中的所有元素都是中的所有元素都是的后代，如果这些的后代，如果这些元素没有专门指定元素没有专门指定CSS属性，这些元素将继承属性，这些元素将继承的的CSS属性，即所有包含在属性，即所

14、有包含在中的元素中的元素的文本内容都以的文本内容都以50像素的大小显示。像素的大小显示。223.6.11 CSS类型、层级机制一个一个XHTML元素可能会应用到多重的元素可能会应用到多重的CSS定义，这时需要通过定义，这时需要通过CSS层级机制来层级机制来解决样式冲突。解决样式冲突。CSS 层级机制是当多个层级机制是当多个CSS样式定义应用到同一个样式定义应用到同一个XHTML元素元素时，分配一个权重给每一个样式定义，最时，分配一个权重给每一个样式定义，最高权重的样式定义优先。下面是层级的规高权重的样式定义优先。下面是层级的规则。图则。图3-10 XHTML_Casscade.htm的运的运行

15、结果行结果(1) 外部CSS、内部CSS、嵌入式CSS三种方式的样式定义的权重依次增大。(2) 同一方式的样式定义发生冲突时，后定义样式的权重大于先定义的样式。XHTML_Casscade.htm的运行结果如图的运行结果如图 3 10所示。所示。233.6.12 CSS类1. 关于关于CSS类类2. 类型类类型类3. 通用类通用类4. 假类假类243.6.13 CSS选择器1. 嵌入式嵌入式CSS与与style (样样式式)特性选择器特性选择器2. element(元素元素)选择器选择器3. class(类类)特性选择器特性选择器4. id(标识标识)特性选择器特性选择器253.7 XHTML

16、功能HTML文档可理解为内容、格式、功能三文档可理解为内容、格式、功能三类主要信息。前面叙述了类主要信息。前面叙述了XHTML文档内文档内容定义，并通过容定义，并通过CSS格式化格式化XHTML文档。文档。本节概述本节概述XHTML文档功能，例如超链接、文档功能，例如超链接、通过表单与服务器通信等。此外，通过表单与服务器通信等。此外，XHTML文档还可通过文档还可通过JScript、C#、Java等程序语言扩展强大的功能，但涉及系统等程序语言扩展强大的功能，但涉及系统的编程知识，根据立体化课程观，将在后的编程知识，根据立体化课程观，将在后续课程详述。续课程详述。263.7.1 XHTML超链接

17、1. 关于超链接关于超链接2. 跳转到其他文件的超链跳转到其他文件的超链接接3. 跳转到跳转到XHTML文档文档(自身自身或其他或其他)中预定义部分的超中预定义部分的超链接链接273.7.2 XHTML表单XHTML文档放置在文档放置在Web服务器端，服务器端，由客户端的浏览器装载并运行。为由客户端的浏览器装载并运行。为了实现浏览器端和服务器端之间的了实现浏览器端和服务器端之间的信息交互，信息交互，XHTML文档必须有向文档必须有向Web服务器端提交信息的机制，这服务器端提交信息的机制，这就要通过表单来实现。就要通过表单来实现。XHTML表单由表单由嵌套嵌套等称为表单域的元素来实现，代码等称为

18、表单域的元素来实现，代码3-15是含有表单的是含有表单的XHTML文档示例。文档示例。参见教材P77283.8 小 结本章根据本章根据XHTML布局、布局、XHTML内容、内容、XHTML格式格式(CSS样式样式)、XHTML功能的思路，系统叙述了功能的思路，系统叙述了XML在在Web超文本领域的应用超文本领域的应用XHTML的基本原理。的基本原理。XHTML是是Web上信息进行超文本传播的标准。上信息进行超文本传播的标准。XHTML拥有许多预定义的拥有许多预定义的XHTML元素，可用来将文本、图形图像、元素，可用来将文本、图形图像、音频等听觉和视觉媒体进行样式化和集成传播，并使它们具有超链接音频等听觉和视觉媒体进行样式化和