《Web开发技术》课件第3章.ppt

1、第3章HTML基础知识3.1 HTML概述概述 3.2 HTML文件构成文件构成 3.3 表格与框架表格与框架 3.4 表单表单 3.5 使用多媒体使用多媒体 习题习题 3.1 HTML概述概述3.1.1 标记语言介绍标记语言介绍我们日常书写的语言，称为书面自然语言。如果在书面自然语言中为了标识某些信息而加入一些标记，这种书面自然语言就被称为标记语言(markup language)。比如在一段书面语言中，为了说明某一句话的重要性，在这句话下面添上下划线。为了计算机处理而设计的标记语言，其中所用到的标记，往往使用代表一定含义的文字或数字表示。通常的做法是，根据需要，先定义一套助意的标记，然后将

2、这套标记添加到书面语言中去，从而使书面语言变成标记语言。例如，为了让计算机了解一段书面语言中哪一部分是标题，哪一部分是作者名，哪一部分是正文，我们定义如下一套标记：、等，我们就可以将书面语言改写成标记语言，如下所示：什么是标记语言？比尔盖茨我们日常书写的语言，被称为书面自然语言。标记语言不同于一般的控制流程序设计语言(如C语言等)，它可以被视为是一种数据流的文档结构描述语言。在计算机处理过程中，标记语言的标记既可以作为数据，也可以作为控制语句来使用。1SGMLStandard Generalized Markup Language，简称SGML，翻译为“标准的通用标记语言”，是一种标记语言，实

3、际上它是一种通用的文档结构描述标记语言，主要用来定义文献模型的逻辑和物理类结构。SGML是ISO组织于1986年发布的ISO 8879国际标准。一个SGML语言程序由三部分组成，即语法定义、文件类型定义(Definition Type Document，简称DTD)和文件实例。语法定义是指文件类型定义和文件实例的语法结构；文件类型定义是指文件实例的结构和组成结构的元素类型；文件实例为SGML语言程序的主体部分。在实际使用中，每一个特定的DTD都定义了一类文件。例如，所有的新闻稿件都可以使用同一个DTD。因此，人们习惯上把具有某一特定DTD的SGML语言，称为某某标记语言。例如用于国际互联网的H

4、TML语言。这样SGML就成为派生其他语言的元语言。2XMLeXtensible Markup Language，简称XML，翻译为可扩展的标记语言，它是W3C组织于1998年2月发布的标准。制定XML标准的初衷是，定义一种互联网上交换数据的标准。W3C采取了简化SGML的策略，在SGML基础上去掉语法定义部分，适当简化DTD部分，同时增加部分互联网的特殊成分。因此，XML基本上是SGML的一个子集。由于XML也有DTD，因此XML也可以作为派生其他标记语言的元语言。3HTMLHyperText Markup Language，简称HTML，翻译为超文本标记语言，是SGML的一个实例，是专门为

5、在互联网上发布信息而设计的标记语言。其文本是由HTML命令组成的描述性文本。HTML命令可以用于说明文字、图形、动画、声音、表格、链接等。另外，HTML是网络的通用语言，它可以创建文本与图片相结合的复杂页面，这些页面可以被网上其他人浏览，无论他们使用的是什么类型的浏览器。4XHTMLXHTML是The eXtensible HyperText Markup Language(可扩展标识语言)的缩写。我们知道，HTML是一种基本的Web网页设计语言，XHTML是一个基于XML的标记语言，本质上说，XHTML是一个过渡技术，结合了部分XML功能及大多数HTML的简单特性。2000年底，国际W3C组

6、织公布了XHTML 1.0版本。XHTML 1.0是一种在HTML 4.0基础上优化和改进的新语言，目的是基于XML应用。XHTML是一种增强了的HTML，它的可扩展性和灵活性将满足未来网络应用更多的需求。虽然XML的数据转换能力强大，完全可以替代HTML，但由于面对成千上万已有的基于HTML语言设计的网站，直接采用XML还为时过早。因此，在HTML 4.0的基础上，用XML的规则对其进行扩展，产生了XHTML。所以，建立XHTML的目的就是实现HTML向XML的过渡。目前网站设计中推崇的Web标准就是基于XHTML应用的，即通常所说的CSS+DIV。5XML、SGML、HTML之间的关系之间

7、的关系HTML是SGML的一个实例，它的DTD作为标准被固定下来，因此，HTML不能作为定义其他标记语言的元语言。XML是SGML的一个子集。与HTML不同的是，XML有DTD，因而也可以像SGML那样，作为元语言来定义其他标记语言。如果把标记语言分为元标记语言和实例标记语言的话，SGML和XML都是元标记语言，而HTML和由XML派生的XHTML都是实例标记语言。XML、SGML、HTML之间的关系如图3.1所示。图3.1 XML、SGML、HTML之间的关系 3.1.2 HTML概述概述1993年6月，Tim Berners-Lee开发了HTML，该语言以文本格式为基础，可用任何编辑器和文

8、字处理器来处理，简单易用。随着20世纪90年代Web网络的迅速兴起，HTML迅速普及。1995年11月，IETF(Internet Engineering Task Force)在对浏览器标记进行整理的基础上，开发了HTML 2.0规范。到了1996年，World Wide Web Consorium(W3C)的HTML工作组推出了HTML 3.2。时至今日，HTML已经发布HTML 4.0版本，其规范更加统一，浏览器之间的统一性也更加完善。HTML的发展过程如表3.1所示。3.1.3 HTML的基本结构的基本结构HTML文件(字母大小写均可)由文件头(head)和文件体(body)两部分组成

9、。在文件的开始部分必须加上标记来说明此文件为HTML文件，只有这样浏览器才能识别它；在文件的结束部分还应加上文件的终止标记，这样，浏览器通过这个标记才会停止执行。文件头用于描述浏览器所需的信息。在起始标记到终止标记内的一切文本都属于HTML的文件头，负责定义HTML文件需要处理的一些预先说明，如文件总标题等。文件头并不属于文件本体部分，因此不在浏览器中显示，若不需头部信息则可省略此标记。文件体包含所要说明的具体内容。从起始标记到终止标记内的一切文本都属于HTML的文件主体，是HTML文件最重要的部分，表示正文内容。一个完整的HTML如下所示：头 部 信 息文档主体 正 文 部 分 将这段文字输

10、入在文本编辑器中，并起名为first.html，注意文件的类型一定是html或htm，同时需要将文件的保存类型设为*.*。这样保存后的first文件呈现Web浏览器图标(IE图标)，双击运行后如图3.2所示。点击IE功能“查看”，选择“源文件”，可看到HTML文档。图3.2 HTML运行效果在first.html文件中有许多用“”括起来的语句，“”称为超文本标记，用来分割和标记文本的元素，形成Web网页。超文本标记大致分以下三种：(1)单标记。某些标记称为“单标记”，因为它只需单独使用就能完整地表达意思，语法格式是：例如，单标记表示换行。(2)双标记。双标记由“始标记”和“尾标记”两部分构成，

11、必须成对使用，其中始标记告诉Web浏览器从此处开始执行该标记所表示的功能，而尾标记告诉Web浏览器在这里结束该功能。始标记前加一个斜杠(/)即成为尾标记。这类标记的语法是：内 容 其中，“内容”部分就是要被这对标记施加作用的部分。例如，要突出对某段文字的显示，就将此段文字放在 标记中：文 档 主 体(3)标记属性。许多单标记和双标记的始标记内可以包含一些属性，其语法是：各属性之间无先后次序，属性也可省略(即取默认值)。例如：其中，face属性表示文字的字体；size为文字的大小；color为文字的颜色。3.1.4 HTML的基本工具的基本工具HTML文档的创建和运行需要两种基本工具：HTML编

12、辑器和Web浏览器。HTML编辑器就是用于生成和保存HTML 文档的程序。Web浏览器就是用于浏览和测试HTML 文档的程序。HTML语言不需要编译，由Web浏览器(如Netscape、IE等)解释执行。HTML文本为ASCII码，即纯文本文件，可以用任何纯文本编辑器来编辑，如DOS下的edit、Windows下的记事本等，但这类编辑器在创建文档时只能看到HTML代码。另一类HTML编辑器为所见即所得(WYSIWYG)编辑器，在创建文档的同时可以显示出类似于浏览器窗口显示的效果结果，例如Dreamweaver 等软件。当前市场上已经有几十种优秀的所见即所得编辑器。但作为初学者，最好使用标准文本

13、编辑器来编辑。文本编辑器要求手工编码HTML，需要亲自输入标志和属性，而不是由软件自动输人，这样可以帮助你一步一步地学习HTML标记和文档结构。下面介绍几种软件。UltraEdit32是文本编辑器。Studio MX是一套软件，它包含开发网站所需的一系列软件，功能十分强大。Dreamweaver作为开发网页的最流行的软件，与Flash、Fireworks并称为Macromedia网页制作三剑客。1UltraEdit32IDM Computer Solutions公司出品的著名文本编辑器UltraEdit已经发布了最新的10.0版本，相应的官方汉化版也已经推出。UltraEdit功能强大，可以编

14、辑文字、Hex、ASCII码，内建英文单字检查、C+及VB指令突显，可同时编辑多个文件，而且即使开启很大的文件，速度也不会太慢。其功能完全超越了记事本。2Studio MXMacromedia Studio MX包括Flash MX、Dreamweaver MX、Fireworks MX、FreeHand、Coldfusion MX等多个软件，为Web开发提供了各个方面的专业需求。开发人员可以使用 Dreamweaver建立Web站点和应用程序；使用Flash创建交互内容；使用Fireworks生成Web图形；使用FreeHand添加矢量图形。3Dreamweaver Dreamweaver是

15、美国Macromedia公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别开发的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。启动Dreamweaver，出现如图3.3所示窗口。图3.3 Dreamweaver的编辑窗口图3.3说明如下：主菜单，在这里可以找到编辑窗口的绝大部分功能。：工具栏，是Dreamweaver MX的新增功能。：对象面板(Objects)，在网页编辑的过程中，通过单击对象面板的按钮来为网页添加相应的元素，如图片、表格、层。Flash称这些元素为对象。单击对象栏上的“插入”的右边的任何

16、一个标签，就能插入其他类型的对象，如特殊字符(Characters)、表单(Forms)等。：属性面板，用于显示所选中的网页元素的属性，并可在属性面板上修改。选择不同的网页元素，属性面板所显示的内容也有所不同，例如图片和表格所显示的属性是不一样的。此外，单击属性面板右下角的小三角，可以根据使用的需要，缩小或展开属性面板。建议一般情况下都设置为展开模式。：面板组，Dreamweaver还有很多其他的面板，可以根据自己的喜好，将不同的面板重新组合，这就是所谓的面板组。在Photoshop中，也有类似的概念。：编辑区域，以“所见即所得”的方式显示被编辑的网页内容。3.2 HTML文件构成文件构成首先

17、，看一个HTML文件：TML文档是由若干个元素、属性和事件组成的，下面依次介绍。3.2.1 HTML元素元素HTML元素用来标记文本，表示文本的内容。比如body、p、title等。元素用Tag表示，Tag以“”结束。目前HTML的Tag不区分大小写，如和是相同的意思。3.2.2 HTML属性属性HTML属性可以扩展HTML元素的能力。例如下面的bgcolor属性，使得页面背景色成为红色：再例如，可以使用border这个属性，将一个表格设成一个无边框的表格：HTML属性通常由属性名和属性值成对组成，如bgcolor和border就是属性名，red和0就是属性值。属性值一般用双引号引起来。属性通

18、常附加给HTML的起始 Tag，而不是终止Tag。3.2.3 HTML事件事件H TML元素可以识别和响应某些操作行为，这些操作行为称为事件。HTML 4.0 的新特性之一是使HTML事件触发浏览器中的行为，比如说当用户点击一个 HTML 元素时启动一段 JavaScript。【例3.1】HTML事件举例。3.2.4 HTML元素标记元素标记HTML元素繁多，如表3.2所示。下面就HTML元素中核心的标记进行介绍。1.扩展标记扩展标记META用来描述一个HTML网页文档的属性，如作者、日期和时间、网页描述、关键词、页面刷新等，如表3.3所示。使用格式如下：表3.3中的Page-Enter和Pa

19、ge-Exit的属性transition的取值说明如表3.5所示。【例3.2】新浪网站的META内容。2文件标记文件标记在前面讲述HTML文件结构时，介绍了一些HTML的文件标记。如表示文件的性质为html，整份文件必须处于与之间。为HTML文件的开头，包含TITLE、META、LINK、STYLE等。为标题，只可出现于HEAD部分，表示页面标题。表示HTML文件的具体内容。【例3.3】文件标记举例。浏览器运行结果如图3.4所示。例3.3意义如下：Text：文字颜色；bgcolor：背景色；background：设定背景墙纸；leftmargin/topmargin：设定内容的左/上边距;bg

20、properties：当卷动文字时墙纸会不会跟着卷动；scroll：是否有滚动条。图3.4 文件标记运行结果3图形标记图形标记在网页中加入一些色彩绚丽的图形(图像)，可以得到图文并茂的显示效果。超文本支持的图形格式一般有Bitmap、GIF、JPEG等。图形的标记是，其格式为：SRC属性指明了所要链接的图形文件地址，这个图形文件可以是本地机器上的图形，也可以是位于远端主机上的图形，地址为“文件的链接”中URL地址的表示方法。标记没有结束标记，当浏览器读到这个标记时会显示它所代表的图形。【例3.4】图形标记举例。冰山一角运行结果如图3.5所示。表示的属性及功能说明如下：Src：图片来源(带目录设

21、置)；width、height：设定图片大小(宽度、高度)；hspace、vspace：设定图片边沿空白，以免文字或其他图片过于贴近(例)；border：图片边框厚度；align：调整图片旁边文字的位置，即文字在图片的偏上方/中间/底端/左右等，可选值有top、middle、bottom、left、right；alt(title)：描述该图形的文字。图3.5 图形标记运行结果4排版标记排版标记排版标记有如下几种：(1)注释标记()。注释标记提供注解功能。浏览器会忽略此标记中的文字而不作显示，一般用于添加说明。例如：(2)段落标记。段落标记为文字、图片、表格等之间留一空白行，从HTML 2.0开

22、始已不需要作结尾。例如：居右显示；居左显示；居中显示。(3)换行标记。换行标记使文字、图片、表格等隔行显示。浏览器会自动忽略原码中空白和换行的部分。例如输入如下文本：566 E Boston Post RDMamaroneck NY 10543-9982United States of America浏览器运行后，只是在一行上显示，并没有达到3行显示的效果。要达到3行的显示效果，需要作如下的修改：566 E Boston Post RD Mamaroneck NY 10543-9982 United States of America(4)预设格式标记。该标记允许保留原码中输入的文字格式。例如

23、：锄禾锄禾日当午汗滴禾下土谁知盘中餐粒粒皆辛苦(5)水平线标记。水平线格式如下：解释如下：Size：线条厚度，以像素为单位；width：线条长度，可以是绝对值(以像素作单位)或相对值，默认为100%；color：线条颜色，默认为黑色，也可用颜色名称，如blue等。(6)居中标记。由于很多Web浏览器不支持标记中的参数align=“center”，因而引入单独的CENTER标记。例如：Chriss First HomepageWhats newMy profile(7)区隔标记。区隔标记设定文字、图片、表格等标记的摆放位置，适用于CSS(样式表)，具有强大的html格式显示效果。我们将在后面给出

24、详细讲解。区隔标记(DIV)与段落标记(P)不同，它需要关闭标记。例如：(8)不折行标记。该标记可设置文字不换行显示，适用于地址、数学算式、一行数字、程式码等。【例3.5】不折行标记举例。If you want to know how to create your own homepage quickly,dont miss Chriss Creation of Webpage which will help you a lot。浏览器显示结果如图3.6所示。图3.6 不折行标记效果读者可以将html文件中的不折行标记取出，然后比较显示的结果有何区别。5字体标记字体标记字体标记分为实体标记和逻

25、辑标记。实体标记有固定的显示效果，逻辑标记则依据浏览器的不同而不同。实体标记有：逻辑标记有：(1)加粗标记。、两者都能产生字体加粗的效果，但当文件被设为Gb2312编码时，两者所标示的中文不会在Netscape 中显示粗体效果。例如：粗体效果粗体效果(2)斜体标记。斜体标记包括：它们在IE中都能产生斜体效果。其中，在Netscape中无效；自身包括换行效果，所以不必在它前面加换行标记。例如：Creation of WebpageCreation of WebpageCreation of WebpageCreation of WebpageCreation of WebpageCreation

26、 of Webpage(3)其他标记。其他标记包括：、：设置每个字母有相等宽度，在Netscape中无效。：加底线的标记。：加上删除线的标记。：字体加大。：字体变细。：下标字(仅剩的数学标记)。：上标字(仅剩的数学标记)。【例3.6】举例。Creation of Webpage Creation of WebpageCreation of WebpageCreation of WebpageCreation of Webpage字母均以固定宽度显示。Creation of Webpage Creation of WebpageCreation of WebpageCreation of Web

27、pageCreation of Webpage123457 67899浏览器显示结果如图3.7所示。图3.7 字体标记运行结果(4)标题标记。至变粗、变大、加宽的程度逐渐减小。每个标题标记所标示的字句将独占一行且上下留一空白行。例如：Header Level 1Header Level 2Header Level 3Header Level 4Header Level 5Header Level 6浏览器显示结果如图3.8所示。图3.8 标题标记运行结果(5)字体标记。、均用来设定文字的大小、字形和颜色。例如：Webpage属性参数解释如下：face：设定文字的字体；size：设定文字的大小(

28、17)，可以是绝对值(不受的影响)或相对值(在内定值的基础上增加或减小大小级数)，只有绝对值表示法；color:设定文字的颜色，#008000表示绿色。【例3.7】字体标记举例。WebpageWebpageWebpageWebpageWebpageWebpage请读者运行例3.7，解释为什么会出现这样的效果。6链接标记链接标记超级链接(HyperLink)使得HTML文件与其他网络节点上的HTML文件相互通信，从而将分散于世界各地的HTML文件链接起来。它使得浏览者可以根据链接标记中的统一资源定位器(Universal Resource Locator，简称URL)连接至服务器，可以在任意的网

29、络节点中跳跃，实现“冲浪”的感觉。链接标记为锚标记，用来创建连接另一个文档的链接。锚可以指向网络上的任何资源，比如一张HTML页面、一幅图像、一个声音或视频文件等。其格式如下：超链接名称在这里，HREF属性取值有绝对路径和相对路径两种表示方法：(1)相对路径是以引用文件的网页所在位置为参考基础来建立目录路径的。因此，当不同的网页引用同一个文件时，其所使用的路径都不相同，故称之为相对。(2)绝对路径是以Web站点的根目录为参考基础的目录路径。之所以称为绝对，意思是指当所有网页引用同一个文件时，所使用的路径都是一样的。其实绝对路径与相对路径的不同处在于描述目录路径时，所采用的参考点不同。对网站上所

30、有文件而言，根目录这个参考点对所有文件都是一样的。因此，运用以根目录为参考点的路径描述方式，称为绝对路径。网路资源众多，网络服务五花八门，不同的服务有不同的链接方法，如表3.6所示。1)链接标记的参数(1)target属性。target属性定义被链接的文档在何处显示。它在标记后使用。target的意思是“目标”，也就是网页链接的指向目标，该参数在框窗(frame)里尤为重要。target属性取值如表3.7所示。(2)name属性。name属性用于创建被命名的锚。当使用命名锚时，我们可以创建直接跳至页面中某个节的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息。name属性适用于框架，指

31、定链接的内容显示到哪一个框窗中。2)两种链接方式(1)网页内部的链接。当网页显示内容较多时，我们可以利用网页的内部链接，使得浏览者快速地找到所需资源。其原理是：在欲链接处作个记号(这在网页的任何地方都可以)，然后，链接时就会寻找这个记号，快速定位。网页内部链接的使用方法有以下两个步骤：先在欲链接处作记号，例如：这里是你想链接的点 设定链接，例如：链接【例3.8】网页内部的链接。See also Chapter 4.Chapter 1This chapter explains Chapter 1Chapter 2This chapter explains Chapter 2Chapter 3Th

32、is chapter explains Chapter 3Chapter 4This chapter explains Chapter 4Chapter 5This chapter explains Chapter 5(2)网页外部的链接。网页外部的链接用于链接到本网页之外去，从而实现“网上冲浪”，在Web的不同地方进行浏览。【例3.9】链接标记举例。和“动态效果.html”文件同目录：动态效果页面 使“动态效果.html”文件在当前文件的上一级目录：动态效果页面 图片链接。图片链接指使用者通过在图形上单击，就能链接到某个地址上去。其基本格式如下：例如：百度网址 在当前窗口打开新页面：动态效果

33、页面 在新窗口打开新页面：动态效果页面动态效果页面 在框架中有效，若当前页面未使用框架，则无效：动态效果页面动态效果页面【例3.10】电子邮件链接举例。This is a mail link:Send MailNote:Spaces between words should be replaced by%20 to ensure that the browser will display your text properly.浏览器显示结果如图3.9所示。图3.9 例3.10运行结果注意：例3.10必须在安装邮件客户端程序后才能工作。7.跑马灯标记跑马灯标记跑马灯标记为和，可以用来制作移动或卷

34、动的文字。例如：Hello 的属性如表3.8所示。【例3.11】跑马灯标记举例。Im a small MARQUEEThis is a slide effect撞来撞去，啊！我昏啦哗！太快了，我又昏啦8闪烁文字闪烁文字闪烁文字标记为和，用来使文字闪烁，只适用于Netscape浏览器，在IE中没有该显示功能。3.3 表表格格与与框框架架3.3.1 表格标记表格标记表格不仅用于装载数据，还可通过将其所在区域划分为行和列来实现网页的布局，其标记为，其属性如表3.9所示。【例3.12】表格显示。请读者运行这段代码，会看到如图3.10所示的结果。图3.10 例3.12运行结果如果将例3.12修改为如下代

35、码：即加入了bordercolordark=red。由于设置了bordercolordark属性而使得bordercolor无效，所以显示结果不同于例3.12。3.3.2 表格显示表格显示首先，运行下面的代码。【例3.13】表格显示。11111 22222 33333 其中，、等的含义如表3.10所示。浏览器显示结果如图3.11所示。当修改为 后，效果如图3.12所示。图3.11 例3.13运行结果 图3.12 例3.13修改后的运行结果 1表格跨行表格跨行【例3.14】表格跨行问题。11111 22222 33333 44444 55555 66666 77777 88888 99

36、999 浏览器显示结果如图3.13所示。当修改44444为44444，删去77777后，则效果如图3.14所示。图3.14 例3.14修改运行结果 图3.13 例3.14运行结果 2.表格跨列表格跨列【例3.15】表格跨列问题。11111 22222 33333 44444 浏览器显示结果如图3.15所示。当修改33333为33333，删去44444后，效果如图3.16所示。图3.16 例3.15修改后的运行结果 图3.15 例3.15运行结果 3.3.3 表格举例表格举例【例3.16】表格举例1。第一列第一栏 第一列 之 第二栏及第三栏 第二列及第三列 之 第一栏 第二列第二栏 第二列第三栏

37、 第三列第二栏 第三列第三栏 图3.17 例3.16运行结果【例3.17】表格举例2。网页速成 八月份访客浏览器使用分析 Month%of IE visitor%of NC visitor August61%39%浏览器显示结果如图3.18所示。图3.18 例3.17运行结果3.3.4 序列标记序列标记序列标记基本上可分为两种：“无序条列”和“有序条列”。所谓“无序条列”，是指各条列间并无顺序关系，纯粹只是利用条列式方法来呈现资料而已。此种无序条列在各条列前面均有一符号以示区隔。“有序条列”是指各条列之间是有顺序的，从1，2，3一直延伸下去。1无序条列无序条列无序条列标记为，每增加一列内容，就

38、必须加一个。type属性说明如表3.11所示。2有序条列有序条列有序条列标记为，指各条列之间是有顺序的。用start来设定起始数值，type可取值1、A、a、I、i。3定义列表标记定义列表标记定义列表标记为，定义列表通常包含交替出现的定义术语，其标记为，以及定义描述，其标记为。另外，标记具有compact属性，该属性不需要赋值，使得定义术语和定义描述在一行输出。【例3.18】列表标记举例。艺术的形式 文学 音乐 绘画 科学与技术的内涵科学科学是严谨的。技术技术需要实践的。浏览器显示结果如图3.19所示。图3.19 例3.18运行结果3.3.5 框架框架框架(Frames)是一种不同于的HTML

39、文件结构。如果要将一个浏览器窗口划分成多个区域(子窗口)，每个窗口为一个HTML文件，那么使用框架可将多个HTML文件同时显示在同一个浏览器窗口中，每个窗口有自己独立的名字，并且窗口之间可以互动。1框架标记框架标记1)标记将、标记对放在框架的主文档的、标记对的外边，也可以嵌在其他框架文档中。此标记用来定义主文档中有几个窗口并且各个窗口是如何排列的。属性如表3.12所示。将窗口分割为几块，横向分用ROWS属性，纵向分用COLS属性，每一块的大小可以由这两个属性的值来实现。COLS和ROWS的取值可以是百分数、绝对像素值或星号(“*”)。其中星号用来代表那些未被说明的空间，由浏览器自动设置其大小。

40、2)标记标记放在标记对之间，用来定义一个具体的窗口(帧)。属性如表3.13所示。首先编辑文件a.html、b.html和c.html，这些文件将在排列多个窗口时应用。(1)a.html文件：a.html A(2)b.html文件：b.html B(3)c.html文件：c.html C下面，我们依次介绍排列多个窗口的几种方式：(1)纵向排列多个窗口。例如：(2)横向排列多个窗口。例如：/将100像素以外的窗口平均分配 (3)纵横排列多个窗口。在很多网页设计中都用到框架，各个窗口之间的相互操作应用很广泛。由Frames分出来的几个窗口的内容并不是静止不变的，往往一个窗口的内容随着另一个窗口内容的

41、变化而不断变化，从而保证了信息的统一性。为了完成各窗口之间的相互操作，我们必须为每一个窗口起一个名字，这个名字用属性name来定义，即：【例3.19】多个窗口举例。如图3.20所示，框架文件为index.htm；左侧文件为a.htm；右上文件为b.htm；右下文件为c.htm。index.html文件内容如下：index.html 图3.20 例3.19运行结果注意：、标记对与、标记对是不能同时使用的。但是，如果一段文本包含有标记，则必须将这段文字嵌套于、标记内。如例3.20所示。【例3.20】标记。Your browser does not handle frames!2浮动窗口浮动窗口 I

42、FRAME又称为浮动帧标记，可用来将一个HTML文档嵌入在另一个HTML中，使两个HTML文件内容相互融合，成为一个整体。IFRAME格式如下：属性如表3.14所示。【例3.21】IFRAME举例。Here is a Floating Frame读入页面 A读入页面 B读入页面 C注意：例3.21中的A.html、B.html和C.html分别为例3.19中的文件。3.4 表表 单单表单(Form)相当于一个容器，主要负责数据采集，是HTML页面与浏览器端实现交互的重要手段。利用表单可以收集客户端提交的有关信息,比如你可以采集访问者的名字、E-mail地址和留言簿等，通过提交(submit)操

43、作将表单内容从客户端浏览器传送到服务器上，由JSP或ASP等服务器程序进行处理。一个表单有三个基本组成部分：(1)表单标签。表单标签包含处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。(2)表单域。表单域包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。(3)表单按钮。表单按钮包括提交按钮、复位按钮和一般按钮，主要用于将数据传送到服务器上的CGI脚本，还可以用来控制其他脚本的处理工作。3.4.1 表格标记表格标记表格标记的功能主要用于申明表单，定义采集数据的范围，允许用户在表单(比如文本域、下拉列表、单选框、复选框等)中输入信息，然后将数据提交给

44、服务器或者电子邮件。的格式如下：.表格标记说明如表3.15所示。【例3.22】表格标记举例。您的姓名:您的网址:浏览器显示结果如图3.21所示。图3.21 例3.22运行结果说明：例3.22中表单将以post的方式向user.jsp提交，提交的结果在新的页面显示。数据提交的媒体方式是默认的application/x-www-form-urlencoded方式。表单的两种提交方式get与post有4点区别，如表3.16所示。3.4.2 标记标记标记必须放在和之间才有意义，其作用是说明一个可以接收输入的元件，它使得浏览器可以接收浏览者所传送的数据。根据中所指定的METHOD(get或post)传送

45、方式，将数据传给服务器中的CGI处理程序。标记没有终止标记，其说明如表3.17所示。1文本框、密码框和隐藏框文本框、密码框和隐藏框文本框是接收输入内容的表单对象，通常被用来填写单个字或者简短的回答，如姓名、地址等。密码框是一种特殊的文本域，用于输入密码。当访问者输入文字时，文字会被星号或其他符号代替，而输入的文字会被隐藏。隐藏域是用来收集或发送信息的不可见元素，对于网页的访问者来说，隐藏域是看不见的。当表单被提交时，隐藏域就会将信息，即设置时定义的名称和值发送到服务器上。代码格式：input type=“text”name=“.”size=“.”maxlength=“.”value=“.”文本

46、框、文本框和隐藏框属性说明如表3.18所示。【例3.23】文本框、密码框和隐藏框举例。浏览器显示结果如图3.22所示。图3.22 例3.23运行结果注意：为什么图3.22中只出现了两个input框而不是三个？在第一个框内输入hello和在第二个框内输入hello有何区别？2单选框和复选框单选框和复选框复选框允许在待选项中选中一项以上的选项。每个复选框都是一个独立的元素，必须有其唯一的名称。如果访问者在待选项中只选择一项，则应使用单选框。【例3.24】单选框、复选框举例1。b1b2B1B2浏览器显示结果如图3.23所示。图3.23 例3.24运行结果注意：同名的为一组，掌握checked的用法。

47、【例3.25】单选框、复选框举例2。经常来这里偶尔来看看浏览器显示结果如图3.24所示。注意：label的for属性值应该与input中的id值一样。图3.24 例3.25运行结果3accessKey属性属性accessKey属性用来定位输入焦点，方法是alt+字母。它有如下两种使用方式：(1)配合Label元素使用。【例3.26】accessKey举例1。姓名(N)：电子邮件(E)：联系电话(P)：留言(S)：浏览器显示结果如图3.25所示。当用alt+S键，光标就会定位在“留言”的输入框中。图3.25 例3.26运行结果当用alt+S键，光标就会定位在“留言”的输入框中。【例3.27】ac

48、cessKey举例2。经常来这里(H)偶尔来看看(L)浏览器显示结果如图3.26所示。图3.26 例3.27运行结果(2)直接使用。【例3.28】accessKey举例3。热键alt+s进入新浪热键alt+b进入百度4文件上传框文件上传框文件上传框看上去和其他文本域差不多，只是它还包含了一个浏览按钮。访问者可以通过输入需要上传的文件的路径或者点击浏览按钮选择需要上传的文件。文件上传控件说明如表3.19所示。注意：在使用文件域以前，请先确定你的服务器是否允许匿名上传文件。表单标签中必须设置ENCTYPE=“multipart/form-data”来确保文件被正确编码；另外，表单的传送方式必须设置

49、成POST。代码格式：input type=“file”name=“.”size=“15”maxlength=“100”运行结果如图3.27所示。图3.27 文件上传框运行结果5按钮控件按钮控件一般按钮用来控制其他定义了处理脚本的处理工作。其代码格式为：input type=“button”name=“.”value=“.”onClick=“.”按钮控件说明如表3.20所示。【例3.29】按钮控件举例。浏览器显示结果如图3.28所示。图3.28 例3.29运行结果6提交和复位按钮提交和复位按钮通常我们填完表单之后，都会有一个送出按钮以及清除重写的按钮，它们分别利用TYPE=SUBMIT 及TY

50、PE=RESET 来产生，相当简单易用。提交按钮用来将输入的信息提交到服务器。复位按钮用来重置表单。【例3.30】提交和复位按钮举例。姓名浏览器显示结果如图3.29所示。图3.29 例3.30运行结果3.4.3 标记标记如果读者需要输入大量的文字，文本框就显得功能不足了。多行文本框又称滚动文本框，可以实现此功能。和其他的输入类型不同，多行文本框不是通过来指定，而是用、标记对来实现的。其基本格式为：标记说明如表3.21所示。【例3.31】标记举例。浏览器显示结果如图3.30所示。图3.30 例3.31运行结果3.4.4 及及标记标记、及、标记对用来创建下拉选择框或者复选的列表框，允许在一个有限的