怎样从编程入门到软件高级人才

第8章超媒体与Web系统8.1超媒体系统的组成8.2Web超媒体系统8.3智能超媒体系统58同城招聘

http://8.1超媒体系统的组成8.1.1超媒体的概念和发展历史1.超文本和超媒体的概念在当今的信息社会，信息以爆炸形式增长，如何来有效的利用这些信息？1950年在计算机普及之前，世界范围内信息量的增长速度是每150年翻一番；随着计算机的广泛应用，1950-1960年间信息量的增长达到每10年翻一番；1960-1992年间缩短为每5年翻一番。人们预计2020年以后信息量每73天就要翻一番。治疗癌症的方法信息的存储与检索机制文本文本是我们最熟悉的信息表示方式。通常以字、句子、段落、节、章作为文本内容的逻辑单位，以字节、行、页、册、卷为物理单位。最显著的特点是它在组织上是线性的和顺序的人脑的记忆机制人类的记忆是联想式的记忆。网状结构。和线性结构单一路径不同，可能有多条路径。不同的联想检索必然导致不同的路径。冬天-->结冰-->河-->鱼-->宴会-->婚礼冬天-->冷-->太阳-->飞船-->宇航员-->吃饭-->多宝鱼-->农民-->…用文本无法管理这种互联的网状信息结构。8.1.1超媒体的概念和发展历史超文本（hypertext）超文本结构类似于人类这种联想记忆结构，采用一种非线性的网状结构组织块状信息，没有固定的顺序，也不要求读者按照某个顺序来读。超文本把文本按其内部固有的独立性和相关性划分成不同的基本信息块，称为结点（node）；结点之间按它们的自然关联，用链连接成网。超文本的简洁定义：超文本是由信息结点和表示信息结点间相关性的链构成的一个具有一定逻辑结构和语义的网络。在超文本信息管理技术中，结点是基本单位。超媒体＝多媒体＋超文本8.1.1超媒体的概念和发展历史图超文本结构A…..*

..*.B…*..

.*..C…...

*...D…...

E…...

*..ABCDE8.1.1超媒体的概念和发展历史2.超媒体的发展简史概念产生时期（1945-1965）标志性的事件Bush提出Memex（memoryextender），Engelbart的NLS系统Nelson创造Hypertext8.1.1超媒体的概念和发展历史鼻祖:美国著名科学家V.Bush(1890-1974)1945，“AsWeMayThink”，《大西洋月刊》Memex(Memoryextender的缩写,即存储扩充器)设想（1932年和1933提出）；8.1.1超媒体的概念和发展历史提出设想的原因科学信息量迅速增长：他担心即使是某一门学科的专家也不可能跟踪该学科的发展情况。200多年来印刷技术没有什么突破性的进展，有关共享与表现信息的方法也很少,不敷应用。检索困难：当要查找某一信息时,要遍历所有对象逐一查找，信息的定位繁琐；Memex是什么？一种专门存储书籍、档案和信件的设备；是机械的。8.1.1超媒体的概念和发展历史组成与结构信息存在缩微胶片中；有一个扫描器输入新的资料；可以在页边用手加注释和说明。元素之间链连成对,任意元素都可以随意、迅速而且自动地选择另一元素《时代》和《生活》刊登了Memex模型8.1.1超媒体的概念和发展历史先驱者DouglasEngelbart受Bush的影响斯坦福研究所开展Augment课题AugmentHumanIntellect扩展人类智力开发一个计算机系统帮助人类思维实验工具NLS(oN-LineSystem,联机系统)1968年,在美国秋季联合计算机会议上作了精彩的表演；他利用NLS与500英里外的同事一起建立一超文本文献。有些人认是Engelbart发明了超文本8.1.1超媒体的概念和发展历史TedNelson杜撰了“超文本”1960年，毕业后又回到哈佛大学进修“计算机程序设计”；他提出了一“文本处理”系统作为课程设计题目；60年代末应布朗大学邀请共同研究超文本问题；提出了Xanadu系统的设想，撰写超文本研究专著“Xanadu”8.1.1超媒体的概念和发展历史概念系统的研究时期（1967-1985）1967年,布朗大学AndyvanDam等研制第一个可运行超文本系统TheHypertextEditingSystem;1968年,DouglasEngelbart在FJCC上演示NLS系统;1968年,布朗大学推出FRESS;1975年,CMU推出ZOG(现为KMS);1978年,MIT建筑机械组推出第一个超媒体视频盘片系统AspenMovieMap8.1.1超媒体的概念和发展历史成熟与发展时期（1985－）1985年,JanetWalker研制的SymbolicsDocumentExaminer；1985年,布朗大学推出Intermedia系统,在Macintosh上运行;1986年,OWL引入Guide,这是第一个广泛应用的超文本;1987年,Xerox公司推出Notecards,苹果公司BillAtkinson研制Hypercard；1991年,美国Asymetrix公司推出ToolBook系统;1990年,位于日内瓦的欧洲量子物理实验室CERN开发的运行于Internet的WWW系统,对人类社会产生深远影响.8.1.2超媒体的组成要素1.结点结点是超文本表达信息的一个基本单位，其大小可变，结点的内容可以是文本、图形、图像、音频、视频等，也可以是一段程序。结点的表示方法在不同的系统中是不同的。常见的基本类型有：媒体类结点动作与操作结点组织结点推理结点8.1.2超媒体的组成要素2.链组成超文本的基本单位，形式上是从一个结点指向另一个结点的指针，本质上表示不同结点上存在着的信息的联系。链定义了超文本的结构并提供浏览和探索结点的能力。比较典型的链型基本结构链基本链，交叉索引链，节点内注释链组织链和推理链索引链，执行链其他链型自动链接，类型链8.1.2超媒体的组成要素3.热标热标是确定信息关联的链源，由它将引起向相关内容的转移。热标的形式一般有：热字－－……@图8-1所示|Example.jpg@……热区－－在图像中直接指明。矩形，多边形热元－－图元热点－－时基类媒体，[b，a，c]热属性－－数据库中的属性作为热源8.1.2超媒体的组成要素4.宏节点链接在一起的结点群，更确切的说，一个宏结点就是超文本网络的一部分（有某种共同特征的子集）分层是简化网络拓扑结构最有效的方法宏文本和微文本:表示不同层次的超文本。微文本又称小型超文本,它支持对结点信息的浏览;宏文本又称大型超文本,支持对宏结点的查找与索引。宏结点的引入虽然简化了网络结构,却增加了管理与检索的层次。8.1.2超媒体的组成要素图宏结点8.1.3超媒体系统的Dexter模型目标为开发分布信息之间的交互操作和信息共享提供一种标准或者参考规范。Dexter模型分为三层：存储层运行层元素内部层各层之间通过两个接口：锚定接口表现规范运行层表现规范存储层锚定接口元素内部层8.1.3超媒体系统的Dexter模型存储层描述成员之间的网状关系。成员描述系统的基本对象,包括结点和链等。原子成员是最小成员单位,也即超文本中的结点,其内容可为不同媒体的信息。复合成员是具有嵌套层次的成员,由原子成员和链复合而成。链是表示元素与元素之间关系的一种实体。一般由两个或多个成员“结点”构成。8.1.3超媒体系统的Dexter模型存储层（续）每个成员都有一个唯一的标识符，称为UID。超文本由一个有限个成员组成的集合和2个函数构成。Hypertext=(E1,E2,…,En,F1,F2)F1,F2是用于检索定位的函数，分别称为访问函数和分解函数。定义了由多个函数组成的操作集合，用于实时地对超文本系统进行访问和修改。8.1.3超媒体系统的Dexter模型元素内部层描述超文本中各个成员的内容和结构，对应于各个媒体单个应用成员。从结构上分为简单结构复杂结构简单结构就是每个成员内部仅由同一种数据媒体构成复杂结构的成员内部又由各个子成员构成。这种嵌套结构的成员定义为描述复杂的混和类型成员提供了灵活性。8.1.3超媒体系统的Dexter模型运行层支持用户和超文本交互作用的机制，可直接访问和操作在存储层和成员内部层定义的网状数据模型。定位机制通过锚定接口完成其基本成分是锚（anchor），锚由两部分组成：锚号和锚值。锚和链的差别在于链仅指向元素，而锚可指向成员内的具体内容。表现规范规定了同一数据呈现给用户的不同表现性质8.2Web超媒体系统8.2.1分布式超媒体系统wwwWWW采用客户/服务期体系结构Web超文本系统可以分为三层结构表现层，即用户接口层由运行在用户计算机上的客户浏览器管理超文本抽象机层：存储节点和链由HTML和HTTP组成超文本信息库层：存储数据，共享数据和网络访问由Internet上遍及全球的称为“服务器”的计算机组成8.2.2www中的超媒体协议与标记语言1.HTTP：超文本传输协议HTTP的运作方式8.2.2www中的超媒体协议与标记语言HTTP的消息结构客户发出的请求消息请求消息＝请求行*（通用消息头|请求头|实体头）CRLF[实体内容]请求行＝方法请求URLHTTP版本号CRLF方法＝“GET”|“HEAD”|“POST”|扩展方法URL＝协议名称＋宿主名＋目录与文件名8.2.2www中的超媒体协议与标记语言HTTP的消息结构（续）服务器发出的响应消息响应消息＝状态行*（通用消息头|响应头|实体头）CRLF[实体内容]状态行＝HTTP版本号状态码原因叙述1××：表示保留，HTTP未用2××：表示请求成功地接收3××：表示为了完成请求，客户必须进一步细化请求4××：表示客户错误5××：表示服务器错误8.2.2www中的超媒体协议与标记语言2.HTML：超文本标记语言WWW基本概念HTML基本概念HTML文字排版格式HTML标题格式HTML字体HTML表格8.2.2www中的超媒体协议与标记语言WWW的基本概念WWW也就是WorldWideWeb，俗称万维网，或环球信息网，也有简称为3w，Web等。WWW是一个基于超文本方式的信息查询工具。它利用链接从一个站点到达另一个站点，并提供一种友好的信息查询接口，即用户仅需提出查询要求，而到什么地方查询及如何查询则由WWW自动完成。WWW的信息查询主要靠网页来完成，网页采用超文本标记语言（HTML）格式写成，可为WWW浏览器识别显示。8.2.2www中的超媒体协议与标记语言网页制作的目标内容丰富，速度快，页面漂亮，经常维护更新。信息的组织主要是根据信息的特点来确定其组织的形式，现在网页的制作中主要流行帧结构(Frame)。网页制作语言网页开发都用HTML语言，必要时可嵌入一些脚本语言来增强功能，如JavaScript，VBScript等。网页制作工具理论上，只要一个记事本即可，现在出现了很多集成化工具，如Frontpage，DreamWeaver,Netscape编辑器等8.2.2WWW中的超媒体协议与标记语言什么是HTMLHTML即超文本标记语言（HypertextMakeupLanguage）一种利用专用符号以显示某些特征或功能的超文字的语言。HTML被广泛用于创建存储在WWW服务器和客户端的多媒体文档，并能被浏览器解释浏览。HTML不需要专门的编辑器。HTML所生成的文档是解释执行的，可以用任何文本编辑器来完成超文本文档的制作。8.2.2WWW中的超媒体协议与标记语言HTML的模板文件形式如下：<HTML>HTML文件起始标志，表示以下为HTML文件<HEAD>HTML文件头开始标志<TITLE>…</TITLE>之间是文件标题…</HEAD>HTML文件头结束标志

<BODY>…</BODY>文件主体结束标志，表示文件主体到此结束</HTML>HTML文件结尾标志8.2.2WWW中的超媒体协议与标记语言就上面所讲的模板举一个简单的例子：<HTML><HEAD><TITLE>HelloWorldPage</TITLE></HEAD><BODY>HelloWorld!</BODY></HTML>8.2.2WWW中的超媒体协议与标记语言图一个简单的HTML实例8.2.2WWW中的超媒体协议与标记语言排版标签<BR>文字转行

………….….<BR><P>段落

……………..…..<P><PRE>原始文字样式

<PRE>…….</PRE><CENTER>居中对齐

<CENTER>…</CENTER>8.2.2WWW中的超媒体协议与标记语言文字换行标签格式…...<BR>一个无<BR>标签的例子<HTML><HEAD><TITLE>普通格式的文件</TITLE></HEAD><BODY>

空山不见人但闻人语声反景赴山林复照青苔上

</BODY></HTML>8.2.2WWW中的超媒体协议与标记语言图无<BR>标签实例图8.2.2WWW中的超媒体协议与标记语言带<BR>标签实例<HTML><HEAD><TITLE>文字转行标签的应用</TITLE></HEAD><BODY>

空山不见人<BR>

但闻人语声<BR>

反景赴山林<BR>

复照青苔上<BR></BODY></HTML>8.2.2WWW中的超媒体协议与标记语言图有<BR>标签实例图8.2.2WWW中的超媒体协议与标记语言<BR>标签作用由浏览器看到的文字转行方式跟编辑的HTML文件不同，当浏览器读入HTML文件时，只会判别标签及其文字，并不会判别Enter键，所以文字会同一行输出。文字转行标签的作用在于强迫文字转行，使文字按用户的意思转行，而不会因浏览器窗口的大小而打乱顺序。8.2.2WWW中的超媒体协议与标记语言段落格式………<P>作用：段落标签<P>出现的位置会有一个空白行出现。文件实例：8.2.2WWW中的超媒体协议与标记语言<HTML> <HEAD> <TITLE>段落标签</TITLE> </HEAD> <BODY>

空山不见人<BR>

但闻人语声<BR>

反景赴山林<BR>

复照青苔上<P>

朝辞白帝彩云间<BR>

千里江陵一日还<BR>

两岸猿声啼不住<BR>

轻舟已过万重山<P> </BODY></HTML>8.2.2WWW中的超媒体协议与标记语言图带<P>标签文件实例8.2.2WWW中的超媒体协议与标记语言原始文字样式格式<PRE>…….</PRE>下面我们先看一个无<PRE>标签的例子<HTML> <HEAD> <TITLE>文字转行</TITLE> </HEAD> <BODY>

李白<BR>

朝辞白帝彩云间<BR>

千里江陵一日还<BR>

两岸猿声啼不住<BR>

轻舟已过万重山<BR> </BODY></HTML>8.2.2WWW中的超媒体协议与标记语言图不带<PRE>标签文件实例图8.2.2WWW中的超媒体协议与标记语言一个带<PRE>标签的例子<HTML><HEAD><TITLE>带有PRE标签的例子</TITLE></HEAD><BODY><PRE>

李白朝辞白帝彩云间千里江陵一日还两岸猿声啼不住轻舟已过万重山

</PRE></BODY></HTML>8.2.2WWW中的超媒体协议与标记语言图带<PRE>标签文件实例图8.2.2WWW中的超媒体协议与标记语言<PRE>标签作用浏览器无法判别超过一个以上的半角空白字符，因而“李白”文字前的空格不被识别。<PRE>的作用是使得文件在浏览器中所呈现的效果与在编辑器中看到的一样，即“所见即所得”，并省略了每一行输入<BR>的麻烦。8.2.2WWW中的超媒体协议与标记语言居中对齐格式<CENTER>……</CENTER>作用：将标签之间的文字居中对齐8.2.2WWW中的超媒体协议与标记语言<HTML><HEAD><TITLE>居中对齐</TITLE></HEAD><BODY><CENTER>

李白<BR>

朝辞白帝彩云间<BR>

千里江陵一日还<BR>

两岸猿声啼不住<BR>

轻舟已过万重山<BR> </CENTER> </BODY></HTML>8.2.2WWW中的超媒体协议与标记语言图居中对齐实例图8.2.2WWW中的超媒体协议与标记语言HTML标题格式<H>标题格式<HX>……….</HX>X=1,2,3,4,5,6标题对齐格式缺省情况下向左对齐，通过<HX>标签的ALIGN属性可以控制标题的输出位置。ALIGN=“LEFT”靠左输出ALIGN=“RIGHT”靠右输出ALIGN=“MIDDLE”居中输出8.2.2WWW中的超媒体协议与标记语言标题格式举例说明<HTML> <HEAD> <TITLE>标题格式</TITLE> </HEAD> <BODY> <H1ALIGN="LEFT">标题一靠左对齐</H1> <H2ALIGN="CENTER">标题二居中对齐</H2> <H3ALIGN="RIGHT">标题三靠右对齐</H3> </BODY></HTML>8.2.2WWW中的超媒体协议与标记语言图标题格式实例8.2.2WWW中的超媒体协议与标记语言HTML字体格式

<FONT>……</FONT>属性SIZE，COLOR用法<FONTSIZE=N,COLOR=#VALUE>其中N在1到7之间，也可用(+)(-)来表示相对大小VALUE值在0000到FFFF（16进制）之间SIZE，COLOR两者可单独出现8.2.2WWW中的超媒体协议与标记语言<HTML><HEAD><TITLE>字型测试</TITLE></HEAD><BODY><FONTSIZE=+2>空山不见人</FONT><FONTCOLOR=#0000FF>但闻人语声</FONT><FONTSIZE=-1COLOR=#FF0000>反景赴山林</FONT>

复照青苔上

</BODY></HTML>8.2.2WWW中的超媒体协议与标记语言图HTML字体应用实例8.2.2WWW中的超媒体协议与标记语言<BODY>标签属性BGCOLOR背景颜色

<BODYBGCOLOR=#VALUE>BACKGROUND背景图形<BODYBACKGROUND=“图片文件”>TEXT文字颜色<BODYTEXT=#VALUE>8.2.2WWW中的超媒体协议与标记语言<HTML><HEAD><TITLE>BODY属性</TITLE></HEAD><BODYbackground="bg.gif"TEXT=#0000FF>

空山不见人<BR>

但闻人语声<BR>

反景赴山林<BR>

复照青苔上<BR></BODY></HTML>8.2.2WWW中的超媒体协议与标记语言图背景文字属性实例8.2.2WWW中的超媒体协议与标记语言HTML表格表格定义<TABLE>……</TABLE>行定义<TR>…….</TR>列定义<TD>……</TD><TR><TD>…</TD>…<TD>…</TD></TR>

表格标题

<CAPTIONALIGN=TOP/BOTTOM>…...</CAPTION>8.2.2WWW中的超媒体协议与标记语言表格属性BORDER表格边线厚度属性<TABLEBORDER=n〉WIDTH表格宽度属性<TABLEWIDTH=X〉X单位为pixel或%CELLSPACING框线厚度属性CELLPADDING数据与边框距离属性BGCOLOR背景颜色属性8.2.2WWW中的超媒体协议与标记语言表格制作例子<HTML><HEAD><TITLE>表格定义及其属性</TITLE></HEAD><BODY><TABLEBORDER=6WIDTH=80%CELLSPACING=2><CAPTIONALIGN=TOP><B><BIG>诗人爱好</BIG></B></CAPTION><TR><TD>明月</TD><TD>清风</TD><TD>醇酒</TD></TR><TR><TD>李白</TD><TD>东坡</TD><TD>最爱</TD></TR></TABLE></BODY></HTML>8.2.2WWW中的超媒体协议与标记语言图表格属性实例8.2.2WWW中的超媒体协议与标记语言单元格属性单元格定义<TH>……</TH><TD>……</TD>

单元格属性WIDTH宽度属性HEIGHT高度属性ALIGN对齐方式BGCOLOR背景颜色属性表格合并属性ROWSPAN<TDROWSPAN=N>合并N个垂直单元格COLSPAN<TDCOLSPAN=N>合并N个水平单元格注：这些属性可在<TH>,<TD>标签中通用8.2.2WWW中的超媒体协议与标记语言单元格属性举例<HTML><HEAD> <TITLE>合并单元格</TITLE></HEAD><BODY><TABLEBORDER=1WIDTH=600><TR><TH>Header1</TH><TH>Header2</TH><TH>Header3</TH></TR><TR><TDCOLSPAN=3>第一格</TD></TR><TR><TDROWSPAN=2>第二格</TD><TD>第三格</TD><TD>第四格</TD></TR><TR><TD>第五格</TD><TD>第六格</TD></TR></TABLE></BODY></HTML>8.2.2WWW中的超媒体协议与标记语言图单元格属性实例8.2.2WWW中的超媒体协议与标记语言HTML的重大意义HTML对整个WWW这几年的蓬勃发展、知识和信息的流通，可以说是第一功臣，更直接带动了一波前所未有的信息革命，不管是在网络上做生意，或者是和世界上的其他网友作文件交流，人人都得学着用HTML写网页，HTML在短短数年内，俨然已成为信息交流下，通行最广的标准格式。8.2.2WWW中的超媒体协议与标记语言HTML的内在缺陷在Web发展的早期它很完美--用到的文档都基于文本，只有标题、项目列表和指向其它文档的超链接等。而随着应用和发展，人们需要有关于多媒体和页面设计方面的更多性能。HTML就开始经历着痛苦的成长。直接的内联图形是不错的，可是你无法很好地放置图形，因此页面的设计就遇到的问题。而且图形的映射(其中有超链接的图形)也产生了新的问题有待解决。后来出现了闪烁的文本、表格、帧和DHTML。每次我们扭转方向时都有人力图给HTML增加新的东西，而每次结束时都给我们带来了新的不兼容性和对新标准的需求。8.2.2WWW中的超媒体协议与标记语言HTML的内在缺陷（续）HTML不具有可扩展性。多年来，微软添加了许多只有适用于IE的标记而网景添加了只用于Navigator的标记，可是作为网页创作者却无法添加自己的标记。HTML作为页面布局体系带来的限制常常使人们经受挫折。开发人员呼唤接受和运用已经引入的新标记和元素，但是要真正用来设计网站，还需要更多的东西。因而出现了CGI、JavaScript、ASP、PHP以及Java等持续的发展，它们使得HTML更加强大。层叠样式表(CSS)和DHTML等技术的发展为更完备地定制Web设计提供了必要的能力，可是这些新增的简单技术反而使正在严重的问题更为突出。要实现网页设计的完全定制化和自动化还只是网站开发者们脑海中的美妙幻想。8.2.2WWW中的超媒体协议与标记语言3XML：可延伸或扩展的标记语言XML简介XML声明XML元素和属性DTD关联XML文件和DTDXSLT8.2.2WWW中的超媒体协议与标记语言为什么使用XML?HTML本身存在很多的缺点，例如，内容和页面的排版、表现形式混在一起，过度的膨胀。数据库存储的信息，经过CGI,ASP,JSP,PHP等的解释和转换为HTML格式后，信息原有的格式已变得面目全非。电子商务的逐渐流行，HTML本身的种种缺点却阻碍了他的发展。8.2.2WWW中的超媒体协议与标记语言XML简介XML是可扩展标记语言(ExtensibleMarkupLanguage)的简称，它定义了结构化表达数据的标准格式。XML的产生来源于最直接而且是最有效的思想：把强大的SGML运用于具有活力和应用前景的Web；同时把HTML加以规范，把数据内容从表现中分离出来XML保留了SGML80%的功能，而其复杂程度则降低到原来的20%8.2.2WWW中的超媒体协议与标记语言关于XML和HTML几个容易混淆的问题XML并不是标记语言。它只是用来创造标记语言(比如HTML)的元语言。XML和HTML是不一样的，它的用途比HTML广泛得多。XML并不是HTML的替代产品。XML不是HTML的升级，它只是HTML的补充，为HTML扩展更多功能。我们仍将在较长的一段时间里继续使用HTML。(但值得注意的是HTML的升级版本XHTML的确正在向适应XML靠拢。)不能用XML来直接写网页。即便是包含了XML数据，依然要转换成HTML格式才能在浏览器上显示。8.2.2WWW中的超媒体协议与标记语言XML的优势方便不同系统之间的信息交流XML本身具有的特性，使得他成为B2B公司对公司的商务带来前所未有的方便。更方便的信息搜索文件的内容和外观设计是完全分开的，外观变动时，XML文件本身不受影响。对信息进行搜索时，只要对XML文件进行搜索，就可以得到自己想要的有用信息。使用XML将使编程更加简单；XML便于学习和创建；XML代码将清晰和便于阅读理解；8.2.2WWW中的超媒体协议与标记语言<?xmlversion="1.0"encoding="GB2312"?><?xml-stylesheet

href="style.css"type="text/css"?><推荐丛书> <书籍> <名称>C++Primer</名称> <作者>Stanley</作者> <售价货币单位="人民币">128</售价> </书籍> <书籍> <名称>ComputerNetworks</名称> <作者>Andrew</作者> <售价货币单位="人民币">48</售价> </书籍></推荐丛书>8.2.2WWW中的超媒体协议与标记语言XML声明（Declaration）<?xmlversion="1.0"encoding="GB2312"?>Version指明了XML的版本号，这个字段是必需的Encoding指明了文字符号的编码方式，这个字段是可选的。如果省略的化，则文字符号必须是Unicode。8.2.2WWW中的超媒体协议与标记语言XML中的PI和样规链接在XML中有一种标注，PI（ProcessingInstruction）格式，<?…?>XML声明常被人看作是PI的一个特例，但严格讲来不是PI通常是给解析器的下游程序提供信息的，例如我们想要使用样规（stylesheet）来美化前面的xml代码，不管是采用CSS，还是XSL，都必须有个机制让浏览器知道从那里去找到样规。8.2.2WWW中的超媒体协议与标记语言样规的格式：<?xml-stylesheet

href="style.css"type="text/css"?>Xml-stylesheet称作是PI的目标（target），以上的PI是告诉浏览器去取一个style.css的文档<?xml-stylesheet

href="style.xsl"type="text/xsl"?>8.2.2WWW中的超媒体协议与标记语言XML元素和属性通常所说的标签（tags）包括2部分元素（elements）属性（attributes）例如：作者属于推荐丛书父元素下面的子元素货币单位则属于售价元素的一个属性货币单位是属性名人民币是属性值8.2.2WWW中的超媒体协议与标记语言XML文件注意事项必须格式正确（well-formed）格式不正确的XML文件，会使XML解析器在解析该文件时解析失败，什么事情都作不成所有的元素都要正确的关闭标签之间不能交叉所有属性都得加上引号8.2.2WWW中的超媒体协议与标记语言所有的元素都要正确的关闭所有的元素，不管其中包括了多少数据，包含了多少子元素，到最后都必须由一个像HTML中的结束标签一样把这个元素“包起来”。<author>chen</author>根据HTML的规定，很多标签，如<p>,<tr>,<td>的结束标签</p>,</tr>,</td>都可以省略掉，但是，在XML中，绝对不可以省略。对于单元素的标签，如<br>,<img

src=“a.html”>如何处理？<元素/><元素属性1=“foo”属性2=“bar”/>8.2.2WWW中的超媒体协议与标记语言标签之间不能交叉一个标签交叉的例子<书籍><名称>C++Primer<作者></名称>Stanley</作者>在XML中规定，所有的元素排列必须时严谨的树状结构。否则，就犯了标签之间不能交叉的大忌。8.2.2WWW中的超媒体协议与标记语言所有属性都得加上引号在HTML中，我么已经被宠坏，常常忘了或懒的用引号把各标签的属性值引起来，网页浏览器对这样的写法通常都能够处理，照单全收，让这个漏加引号的现象更加普及。甚至连一些网页开发、转换工具都这么作（Office2000所存成的HTML代码）。这对HTML不是什么问题，但拿到XML中，却会惨遭被XML解析器判出局的命运。因此，加引号的习惯，越早养成越好。8.2.2WWW中的超媒体协议与标记语言合法的XML文件是否满足前面的3个注意事项的XML文件就是正确的，合法的呢？举例：把前面提到的第二笔的书籍资料改为：<书籍><名称>ComputerNetworks</名称><作者>Andrew</作者><售价货币单位="人民币">48</售价><售价货币单位="人民币">28</售价></书籍>8.2.2WWW中的超媒体协议与标记语言DTD的引入很明显，我们需要定义一套法则来规范它，我们管这套法规叫DTD(Documenttypedefinition)，也就是对某种XML文件在格式上的定义可以用DTD来确认其正确性的XML文件成为合法的（valid）XML文件。8.2.2WWW中的超媒体协议与标记语言<?xmlversion="1.0"encoding="GB2312"?><!ELEMENT推荐丛书(书籍*)><!ELEMENT书籍(名称,作者+,售价*)><!ELEMENT名称(#PCDATA)><!ELEMENT作者(#PCDATA)><!ELEMENT售价(#PCDATA)><!ATTLIST售价货币单位(人民币|港币|美元)"人民币">8.2.2WWW中的超媒体协议与标记语言元素类别声明在上面的例子中，一共有<书名>,<作者>,<售价>三个不含更小元素的元素。很明显，Element后面是元素名，接着是它的内容模型，通俗的说，就是用抽象的表示法，定义<元素>***</元素>之间的***区域可以出现什么样的内容。按规定，这个模型需要用()引起来8.2.2WWW中的超媒体协议与标记语言DTD中的量词量词是用来修饰它前面的单元的。黄金万两，其中的万两就是作为量词来修饰黄金的在DTD中，常用的量词有3中? 0个或1个*任意个数，从0个到无限多个+至少有1个，从1个到无限多个DTD中元素的出现次序<!ELEMENT书籍(名称,作者+,售价*)>用逗号和量词定义了书籍元素下的各个子元素的出现的先后次序和各个子元素的数量。8.2.2WWW中的超媒体协议与标记语言DTD中的属性类别声明<!ATTLIST售价货币单位(人民币|港币|美元)"人民币">属性定义的3个要件属性名属性类别缺省值如果有缺省值的化，在XML文件中的<售价>48</售价>会被处理XML文件的程序自动转换为<售价货币单位=“人民币”>48</售价>8.2.2WWW中的超媒体协议与标记语言关联XML文件和DTD两种方法：外联，内联外联在XML文件的<?xmlversion="1.0"encoding="GB2312"?>后面添加<!DOCTYPE推荐丛书SYSTEM"book.dtd">内联<!DOCTYPE推荐丛书[<!ELEMENT推荐丛书(书籍*)>

]>8.2.2WWW中的超媒体协议与标记语言XSLT目前的浏览器只能解释HTML文件，所以XML在被浏览器解释前，必须先转换为HTML文件格式有两种转换方式Server动态即时转换批量转换client8.2.2WWW中的超媒体协议与标记语言图使用IE的缺省样规8.2.2WWW中的超媒体协议与标记语言图使用自定义的样规8.2.2WWW中的超媒体协议与标记语言JavascriptJavaScript简介JavaScript函数JavaScript事件JavaScript和HTML的连接方式8.2.2WWW中的超媒体协议与标记语言JavaScript简介JavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言。使用它的目的是与HTML（超文本标记语言）、Applet（Java小应用程序）一起实现在一个Web页面种链接多个对象，与Web客户交互作用。8.2.2WWW中的超媒体协议与标记语言JavaScript的特点是一种脚本编写语言基本结构形式与C，C++，VB等十分类似，但它不需要预先编译，而是在程序运行过程种被逐行的解释执行基于对象的语言可以运用自己已经创建的对象，许多功能来自于脚本环境中对象的方法与脚本的相互作用简单性基于Java基本语句，数据类型采用弱类型8.2.2WWW中的超媒体协议与标记语言JavaScript的特点安全性不允许访问本地硬盘，不能将数据存到服务器上，不允许队网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互，从而有效的防止数据的丢失动态性可以直接对用户的输入作出反应，无须经过Web服务器程序。它对用户的反应，是采用以事件驱动的方式进行的。如鼠标事件等跨平台性依赖于浏览器本身，与操作系统环境无关，只要能运行浏览器的计算机，并支持JavaScript的浏览器就可以正确执行8.2.2WWW中的超媒体协议与标记语言脚本的格式<scriptlanguage=“JavaScript”>functionmyFunc(){//函数体}</script>8.2.2WWW中的超媒体协议与标记语言第一个JavaScript例子使用alert函数弹出一个提示信息对话框<html> <head> <title>我的第一个JavaScript</title> <scriptlanguage="JavaScript">

alert("Hello,World!"); </script> </head></html>8.2.2WWW中的超媒体协议与标记语言图第一个JavaScript实例效果图8.2.2WWW中的超媒体协议与标记语言JavaScript函数的定义格式Function函数名（参数表）{

函数体；

return返回值；}函数名：调用函数时需要通过函数名进行调用。函数的命名一般要用能够描述函数功能的词语，有利于提高脚本的可读性。参数表：用于向函数传递数据，可以根据需要决定要不要设立参数函数体：用于完成函数的功能。用一对花括号{}括起来返回值：使用return语句完成8.2.2WWW中的超媒体协议与标记语言一个JavaScript函数的例子functionMyAdd(oper1,oper2){ result=oper1+oper2; msg=oper1+"+"+oper2+"="+result; alert(msg);}函数的执行<bodyonload="MyAdd(1,3)">即在页面加载完成之后调用MyAdd函数8.2.2WWW中的超媒体协议与标记语言图JavaScript函数执行效果图8.2.2WWW中的超媒体协议与标记语言JavaScript事件什么是事件？在浏览网页的过程中常伴随着一些事件的发生。例如用鼠标指向或者点击网页上的按钮或者超链接，或者移动鼠标都会产生事件。JavaScript是靠事件来激活函数，所以可以这样说，设计JavaScript脚本的过程就是以事件驱动为核心，将处理函数同事件对应起来的过程。8.2.2WWW中的超媒体协议与标记语言JavaScript事件处理一种捕捉事件的方法是定义一个事件句柄，这是针对HTML标记对象而言的，不同的HTML标记对应不同的对象，不同的对象又对应不同的事件句柄。主要的事件<A>onClick

用户点击超链接onMouseOver

鼠标移动到超链接上边onMouseOut

鼠标离开超链接8.2.2WWW中的超媒体协议与标记语言JavaScript的常见事件<body>onLoad

页面下载完成的时候onUnload

退出这个页面的时候<form>onReset

按下Reset按钮的时候onSubmit

按下Submit按钮的时候<inputtype=“button|checkbox|radio”onClick

鼠标点击的时候<inputtype=“select”onClick

鼠标点击的时候onChange

用户改变了下拉列表中的选项8.2.2WWW中的超媒体协议与标记语言一个多事件的演示请看MultiEvent.html8.2.2WWW中的超媒体协议与标记语言JavaScript和HTML的连接方式内联直接在响应的HTML文件中，把JavaScript函数定义在<script>标签对中。外联把相关的JavaScript函数定义到一个文件中，如MyTest.js，并使用下面的语句进行关联：<scriptlanguage=“JavaScript”src=“MyTest.js”></script>8.2.2WWW中的超媒体协议与标记语言CSSCSS简介定义CSS样式运用CSS的方式8.2.2WWW中的超媒体协议与标记语言CSS全称是CascadingStyleSheet。为什么要推出CSS在以前的HTML版本中，各种功能的实现是通过标记元素实现的，这也造成了各个浏览器厂商标新立异创建各种标记，而且互不支持。例如微软的走马灯效果（MARQUEE）和网景的闪烁效果（BLINK），这两种效果无法在对方的浏览器上正常显示。8.2.2WWW中的超媒体协议与标记语言CSS简介作为动态HTML（DHTML）的基础之一，CSS功能强大。它的优点在于可以将一类相似的特征用同一样式类表示，可以同时被多个标记元素所继承。这样就可以很好的把握网站的整体风格，随心所欲的对自己的网页进行外观和动态的设计，并且使网页具有交互性。同样的，对于一个具有复杂属性的对象，也可以用多个样式类对它进行定义，这样可以使代码条理清晰。CSS最大的优点在于把对象真正引入到了HTML中，使得可以使用脚本程序（JavaScript，VBScript）调用对象属性，并且可以改变对象属性，实现动态效果。8.2.2WWW中的超媒体协议与标记语言CSS简介由于CSS所具有的特性，如果需要改变一个大网站中的样式，则只需要改变相应的那一个样式即可。例如：在一个网站中，需要用到很多水平线，如果一个个的定义<hrwidth=“70%”height=“2”color=“black”align=“center”>，那工作量将是巨大的。但如果使用样式表，则只需要指定一个参数便可以被整个网状使用。这样，网站变的易于管理了。CSS的另一个贡献就是简化了HTML中各种繁琐的标记，使得各个标记的属性更具有一般性和通用性，并且扩展了原先的标记功能，能够实现更多大的效果。样式单甚至超越了Web页面的本身显示功能，扩展到多种媒体上，显示了难以抗拒的魅力！8.2.2WWW中的超媒体协议与标记语言定义CSS样式选择器DIV和SPAN伪类和伪元素8.2.2WWW中的超媒体协议与标记语言定义CSS样式－－选择器格式：Selector{property:value;property:value}类别HTML标记类（Class）ID两个特性继承性优先级8.2.2WWW中的超媒体协议与标记语言CSS－－HTML样式举例p{color:green;font-weight:bold}h1{color:red}body{color:blue}实例代码<h1>我是<I>红色的</I>标题1</h1>我是蓝色的文字。<br>我是蓝色的文字。<br><p>

我是绿色的段落。<br>

我是绿色的段落。<br></p>8.2.2WWW中的超媒体协议与标记语言图CSS－－HTML样式举例效果图8.2.2WWW中的超媒体协议与标记语言CSS－－类和ID举例p.one{color:green;font-weight:bold}.niceFont{color:red;font-size:18pt}#blackwhite{background-color:black;color:white}实例代码<pclass=one>我是绿色的段落。<br>我是绿色的段落。<br></p><pclass=niceFont>

我是红色的段落。<br>

我是红色的段落。<br></p><spanclass=niceFont>红色的SPAN</span>和

<spanid=blackwhite>黑底白字的ID</span>8.2.2WWW中的超媒体协议与标记语言图CSS－－类和ID举例效果图8.2.2WWW中的超媒体协议与标记语言CSS－－DIV和SPANCLASS和ID只能用来定义样式表，而<DIV>和<SPAN>则可以用来调用所有的样式表属性。<DIV>定义的是包含文本和HTML标签的一个块，块之间用换行标签间隔，它对显示文字的整个一行都会起作用，只有通过换行才能改变属性。<SPAN>是一个内联标签，可以存在于内容的任何地方，它的作用范围只是<SPAN>内的文字，而不是整个一行。8.2.2WWW中的超媒体协议与标记语言CSS－－DIV和SPAN举例DIV{background-color:black;color:green}SPAN{background-color:black;color:white}实例代码<p>下面的内容将使用DIV标签</p><DIV>这里使用了DIV标签</DIV><P>下面的标签将使用SPAN标签，<span>这里使用了SPAN标签</span>，并且不对后面的空白位置产生作用。</P>8.2.2WWW中的超媒体协议与标记语言图CSS－－DIV和SPAN实例效果8.2.2WWW中的超媒体协议与标记语言CSS－－伪类和伪元素伪类和伪元素是特殊的类和元素，能自动地被支持CSS的浏览器所识别。伪类区别开不同种类的元素，伪元素指元素的一部分。格式选择符:伪类{属性：值}选择符:伪元素{属性：值}8.2.2WWW中的超媒体协议与标记语言伪类的使用举例A:link{color:red}A:active{color:blue;font-size:125%}A:visited{color:green;font-size:85%}A:hover{color:purple;font-size:200%}伪元素的使用举例P:first-letter{font-size:300%}8.2.2WWW中的超媒体协议与标记语言图CSS－－伪类和伪元素实例效果8.2.2WWW中的超媒体协议与标记语言运用CSS的方式内联式<pstyle=“color:green”>welcome</p>嵌入式

<styletype=“text/css”>p{color:green}</style>8.2.2WWW中的超媒体协议与标记语言运用CSS的方式链接式<linkrel=stylesheet

href=“mystyle.css”type=“text/css”>Import导入

<styletype=“text/css”>@importURL(mystle.css)</style>8.2.2WWW中的超媒体协议与标记语言HTML表单Form的概念Form的组成元素Form的标记Form的提交过程8.2.2WWW中的超媒体协议与标记语言为什么需要表单（Form）可以通过表单（Form）建立交互性的网页喜欢在网络上四处为家的人，不难发现表单的存在。诸如“会员登录”，“文卷调查”等的一个个的栏位填写，其实都是一个个的表单。这些引起网络客户端用户和服务器端进行交互的网页就称作表单。需要由网页设计师和程序设计师共同完成。建立一份新的表单，其实就是跟用户之间建立一个新的交互渠道，表单的制作可以说是交互网页最基础的一环。8.2.2WWW中的超媒体协议与标记语言表单的组成要件提供用户输入资料的“表单栏位”单行文字<inputtype=“text”…>多行文字<textarea…>密码文字<inputtype=“password”…>复选框<inputtype=“checkbox”…>单选框<inputtype=“radio”…>下拉列表<select><option>..</option>…隐藏文字<inputtype=“hidden”…>文件传送<inputtype=“file”…>8.2.2WWW中的超媒体协议与标记语言表单的组成要件向服务器端传送资料的“提交按钮”提交按钮<inputtype=“submit”…>大小适中、清晰明了的“表单界面设计”8.2.2WWW中的超媒体协议与标记语言表单标记格式<form…>…</form>常用属性表单名字name=“MyForm1”表单提交方式method=“Get|Post”处理表单的URLaction=“/cgi-bin/myform.cgi”8.2.2WWW中的超媒体协议与标记语言一个表单的实例表单格式定义：<formname="UserInfoForm"method="Get"action="/cgi-bin/userinfo.cgi"><inputtype="text"name="name"value=""size="20"maxlength="16"><selectname="age"> <optionvalue="20"selected>20</option> <optionvalue="21">21</option> <optionvalue="22">22</option> <optionvalue="23">23</option> <optionvalue="24">24</option> </select>8.2.2WWW中的超媒体协议与标记语言一个表单的实例（续）<inputtype=“radio”name=“sex”checkedvalue=“male”>男

<inputtype="radio"name="sex"value=“female”>女<inputtype="submit"name="submit"value="Login"><inputtype="reset"name="reset"value="Reset">8.2.2WWW中的超媒体协议与标记语言图表单的实例效果图8.2.2WWW中的超媒体协议与标记语言表单的信息提交过程用户输入表单所规定的基本信息姓名年龄性别用户按下提交信息按钮Login按钮客户端脚本程序检查用户输入的信息是否合法如果用户输入的信息合法，则把数据提交到服务器端；否则给出错误提示信息，再给用户一次修改的机会8.2.2WWW中的超媒体协议与标记语言通用网关接口（CGI）CGI概念CGI工作原理标准输入与标准输出服务器端嵌入（SSI）编写外部程序（CGI）8.2.2WWW中的超媒体协议与标记语言通用网关接口CGICGI是Web服务器和您编写的外部程序之间的一个接口。CGI可以使您编写的程序处理WWW上客户端送来的表单和数据，并对此作出某种反应。这种反应可以是HTML文件、图片、声音、视频等可以在浏览器窗口上出现的任何数据。两个含义为客户端用户通过WWW获取Internet上的其它服务，如Archie，WAIS等提供了一个接口是您编写的外部程序和Web服务器间的接口标准8.2.2WWW中的超媒体协议与标记语言CGI是如何工作的当客户端的浏览器向Web服务器请求一个HTML文件时，服务器在收到请求后就去寻找并将找到的文件传送给客户端。当客户端的请求时一个CGI程序时，Web服务器将激活客户端所请求的CGI程序，此时Web服务器所起的作用就好像时客户端和CGI程序间的中间人。8.2.2WWW中的超媒体协议与标记语言CGI工作的步骤客户端发出请求Web服务器激活CGI程序CGI程序对客户端的请求作出反应Web服务器将CGI程序的处理结果传送给客户端Web服务器中断和客户端的连接Web浏览器将CGI的输出显示在浏览器的窗口8.2.2WWW中的超媒体协议与标记语言CGI的标准输入和标准输出Web服务器和CGI交换数据的方式环境变量标准输入和标准输出对于一个CGI程序来说，当CGI程序被服务器激活后，它的标准输入（stdin）被连接到Web服务器的标准输出（stdout）上，而CGI程序的标准输出（stdout）被连到Web服务器的标准输入（stdin）上，这就形成了一个标准的管道循环。8.2.2WWW中的超媒体协议与标记语言从CGI程序这一方来看，它从标准输入读信息就是从Web服务器的标准输出读信息，而它向标准输出写信息就是向Web服务器的标准输入写信息。8.2.2WWW中的超媒体协议与标记语言SSI简介SSI的全称是ServerSideInclude事实上，不用进行任何编程工作就可以制作出一些简单的动态Web网页。例如可以在网页上自动显示HTML文件的最后修改日期而不用每次都去手工修改。通过使用SSI8.2.2WWW中的超媒体协议与标记语言SSI简介（续）SSI的命令标识符和HTML的命令标识符相类似。这些SSI命令标识符被包含在普通的HTML文件中，当这类HTML文件被WWW上的客户端用户调用时，SSI命令就会被Web服务器执行，而它们的输出结果则被Web服务器放在原来HTML文件中SSI命令标识符所在的地方。一般来说，Web服务器是通过文件的后缀名来了解文件中是否包含SSI命令的。包含SSI命令的HTML文件通常具有特殊的后缀名，缺省情况下是.shtml,.shtm或者.sht8.2.2WWW中的超媒体协议与标记语言常用的SSI命令SSI命令格式<!--#命令符命令变量=“命令变量值”-->常用的SSI命令Echo在Web页中显示一些SSI命令的值Fsize

在Web页中显示某一文件的大小值Flastmod

在Web页中显示某一个文件的最后修改时间8.2.2WWW中的超媒体协议与标记语言常用的SSI命令Exec执行系统命令或者CGI程序，并将输出结果插入到Web页中Config