网站的静态网页实现技术.ppt

1、网站的静态网页实现技术,网页的实质是什么？是图形？是文本？ 网页实际上是HTML标记语言程序，过去创建和管理网页是由训练有素的专业人员采用HTML语言手工编写程序来实现的。而现在有多种可视化程度很高的网页制作工具，无需掌握专业的网页制作技术就能够创作出富有特色、动感十足的网页来。 我们平时上网看到的各个网站的网页都是用Dreamweaver、FrontPage或其他网页制作工具编辑的，然后再加入一些动态语句。这些网页都是由Html语言编写生成，而我们在使用Dreamweaver、FrontPage编辑网页的同时，这个软件就已经自动生成这种语言了。,网站的静态网页主要是通过HTML实现的,即静态

2、网页是用HTML制作的。HTML（Hyper Text Markup Language）语言是超文本标识语言。HTML语言是一种描述文档结构的语言，使用描述性的标识符（称为标签）来指明文档的不同内容。标签是区分文本各个组成部分的分界符，用来把HTML文档划分成不同的逻辑部分（或结构），如段落、标题和表格等。一般来说，HTML文件是以“.htm”或“.html”作为文件的扩展名。,7.1 HTML基础知识,HTML是专门在Internet上进行传输，可以让设计者建立并能让所有Web的使用者读出的页面。HTML是一种标识语言，用来创建与系统平台无关的文档。也就是说，HTML不是编程语言而是一种描述

3、性标识语言。HTML是把一些信息根据需要链接起来的信息管理技术。人们可以通过超文本中的链接打开另外一个相关的文件，用鼠标点击文本中的高亮度或带下划线的文字，即可打开与之相链接的文本，获得所需的信息。,7.1 HTML基础知识,一、关于HTML(Hypertext Markup language)： Html是一种超文本标记语言，是创建网页时使用的语言。 就其本质而言，是一个基于文本的编码标准，是对网上信 息进行标记的一组规则，通过这些标记规则，告诉Web浏 览器如何显示文本和图形等网页元素。 标记：是一种功能的注释。由W3C组织定义。 超文本：是指含有超链接和多媒体文本。 超链接：从一个资源可

4、以瞬间跳转到另一个资源。 Html语言是主页的基础，你可以通过浏览器的“查看”-“源代 码“看到该页的HTML代码。不必看到语言就感到害怕， HTML和C语言不一样，它只是一系列标记的组合。,7.1 HTML基础知识,二、HTML文档编写方法 HTML文档是以纯ASCII文件存在的，扩展名为.htm 或.html。 1、手工直接编写：把标记写在记事本中，存盘时扩展名 为.htm 或.html。保存类型为文本文档。 在Internet exprorer中打开文件，查看源文件-修改-保 存-刷新。 2、使用可视化HTML编辑器如：Dreamweaver。 3、由WEB服务器上的程序（ASP，PHP

5、，JSP）动态的 生成。,7.1 HTML基础知识,三、HTML语法 标记总是封装在由“”组成的一对尖括号之中，是一些定义网页内容格式和显示的命令，而标记属性用于进一步控制网页内容的显示效果。标记只改变网页的形式方式，本身不会显示在窗口中。 例如：这是粗体,你好。 表示粗体开始，表示粗体结束，标记在浏览器里不显示。 HTML标记是不区分大小写的，但为了便于阅读，通常采用一致的大小写，空格、TAB键和换行等可以出现在文件的任何位置，浏览器将不显示它们，除非附加特殊标记。 另外，在HTML中没有语句的概念，也就是说，所有标记和内容都可以位于一行中。浏览器会根据不同的标记进行解释显示。当然，通常情况

6、下为了使HTML文档更容易阅读，建议采用合理的分段和缩进等格式（这些格式不影响网页的显示效果）。,1、双标记：必须成对出现。 语法：内容 其中： （1）“内容”就是被这对标记施加作用的部分。将文本内容 （2）第二个标记结束标记，总是用反斜线“/”开始。 例1：段落标记 虽然为一行，但我是一个段落 例2：突出对某段文字的显示 text to emphasize（通常会以斜体显示） 双标记元素提供了开始和结束标记，将文本包含在其中，故也称为容器（container）。,2、单标记：只需单独使用。单标记都是进行一些特定的操作。 语法： 例： 表示在一个段落未结束时，让显示强制换行。 3、标记属性：属

7、性在双标记的开始标记或单标记的尖括号 内中指定。 语法：如果一个标记有多个属性，那么不同属性之间应该用空 格隔开。各属性之间无先后次序，也可不指定，直接使用浏 览器的默认值。,例1：虽然为一行，但我是一个段 落，并且在右边. 例2：单标记表示在文档当前位置画一条水平线，此标记允许带一些属性： ,4、注释语句 格式： 作用:文字不会显示在网页上, 实例：HTML实例06如何在HTML中注释天才在于勤奋 只有勤奋的人才能获得理想的成功！,HTML不是编程语言，而只是一些标记的集合， 这些标记嵌在文本文件中，可以被浏览器识别，使 文本文件在浏览器中以一定方式显示出来。由于多 数标记成对地出现，所以H

8、TML又被称为容器式的 注释语言。在HTML文件中，不同标记的使用、搭 配以及嵌套、链接，就构成了不同风格的网页。因 此，正确地使用HTML中的代码标识即标记是建立 HTML文件的关键。,5、HTML其它 （1）开始越早，关闭越晚。标记是嵌入的。 例如：Your text 这样是不起作用的。正确的顺序是： Your text （2）一些标记有可选项-属性，使用值改变标记的行为。 例如：的对齐属性让你改变段落的默认对齐方式。 段落的居中。,HTML是一个随时变化的语言，老的浏览器不 支持新的标记。当一个浏览器看到一个它不认识的标记时， 它就会忽略。这样，你在页面里添加最新的新的浏览器可以 识别的

9、标记，在旧的浏览器也不会引起问题。另一方面，如 果你犯了一个错误，你就不会看到什么出错信息。所以，在 你的浏览器里察看页面是否和你想象的相同，这很重要。实 际上，应该用不同的浏览器检测你的页面，因为不是所有的 浏览器都用同样的方式处理HTML。,四、网页（HTML文档）的基本结构不管网页的内容多么丰富、版式多么复杂，网页的基本结构却都是一 样的。 网页的基本结构：（主题部分，一般来说是不可见的）（正文部分，在浏览器中是可见的）HTML文件的内容有三大部分：文件头、文件体和一些注释。,7.1 HTML基础知识,五、HTML的标签 下面介绍HTML的四个最重要的标签 （1） ：标签放在HTML文件

10、的最开始处，用以告诉浏览器这个文件为HTML文件，而在文件的最后，当然是的结束标签了，虽然这个标签可以省略不用，但希望还是要养成使用该标签的习惯。 （2） ：标签一般放在标签的后面，用来标明文件题目或定义。构成HTML文档的开头部分，在此标记之间可以使用 、 和等标记对，此部分内容是不会在浏览器窗口中显示出来的，只是提供一些与Web页面有关的特定信息。两个标志必须一块使用。,7.1 HTML基础知识,（3）：标签用来设定文件的标题，一般用来注释这个文件的内容，浏览器通常会将文件标题显示在浏览器窗口的左上角。 （4）：构成HTML文档的主体部分，其内容是浏览器页面中显示的主体内容。Web页的所有

11、内容，文字、图形、链接以及其他页面元素都包含在该标记内。在此标志对之间可包含、等等众多的标志，它们所定义的文本、图像等将会在浏览器的框内显示出来。两个标志必须一块使用。当然，HTML远没有如此简单，每个标签后面可定义各种各样的特性，这需要读者逐步掌握。当看到一个优秀的页面时，可以看看它的源文件，这样对提高制作水平很有帮助。下面看一个最基本的HTML文件具有怎样的结构。,7.1 HTML基础知识,这是测试文件HTML文件的内容就写在这里把它存为一个HTML文件，然后用浏览器打开它，其 显示效果如图7-1所示。下面分别对这些标志进行介绍。,7.1 HTML基础知识,图7-1 浏览器显示效果,7.2

12、 HTML基本标识与使用,7.2.1 HEAD中的标识 HEAD出现在HTML文档的起始处，用来标明当前文档的有关信息（如文档标题），检索引擎可用的关键词以及不属于文档内容的其他数据。HEAD元素的起始和结束标识都是可选的。在HEAD的起始标识和结束标识之间最重要的两个元素是TITLE和META。 1.TITLE元素 TITLE元素通常不被视为文本的部分，其内容能够被显示，但会显示为文档标题或窗口标题。每个HTML只能有一个标题，也就是说，每个HTML文档的HEAD部分只能有个TITLE元素。TITLE元素的起始标识和结束标识都是必需的。,说明： 1）title除了标识文件内容外，当某一主页存

13、入书签或文件 时，title还用作书签名或默认的文件名。 2）title的长度没有限制，但过长的标题会导致折行，一般情 况下它的长度不应超过64个字符。由于title的作用是标明文 件内容，所以太短也是不可取的； 3）一个好的标题应该能使读者从中判断出该文件的大概。,7.2 HTML基本标识与使用,3.META元素 META元素被用来描述HTML文档的元信息（Meta Information），即关于文档的自身信息。这些信息可以被Web检索引擎、Web服务器或其他程序利用。 META元素是HTML 3.0以后版本中定义的元素。META元素需要标识，但不能有结束标识。META元素定义元信息时，可

14、以用NAME属性指出信息的类型，用Content属性指出它的定义。例如：使用上述语句可以产生关于文档作者和关键词的元信息。,7.2 HTML基本标识与使用,还可以用来产生特殊的HTTP头标，送给Web服务器，用来激活客户端的特殊功能。可以使用HTTPEQUIV属性指明头标名，用Content属性指明其内容。例如：上面的语句将产生如下的HTTP头标：empires:Mon,10 Sep 2000 09:42:05 GMT,7.2 HTML基本标识与使用,但是不能用META元素来描述其他元素处理好的HTML文档的任何部分，如不能用它给出文档的标题，因为这是TITLE元素所做的事。也不应用META元

15、素替换Web服务器已经产生的标题（例如Content-type或Date），否则会扰乱服务器或客户端，或者两者都会被扰乱。,7.2.2 文本标识,1.标题元素虽然读者可以根据浏览器标题栏显示的TITLE里 的内容，知道你的主页的标题。但是由于内容大多 在浏览器窗口的客户区内，所以在BODY部分加上 一个标题，可以让人一目了然。正如传统的书本一 样，HTML中也规定了标题格式。HTMI中的标题元 素使用格式为：,它一共支持六级标题，其元素内容分别为：h1、 h2、h3、h4、h5和h6。h1（一级标题）显示最大, h6（6级标题）显示最小。即标记号越小，标题字体 越大，也就是标题越大。标题字体支

16、持ALIGN属性，用它可以指定对象 的排版格式，其属性值有LEFT、RIGHT和 CENTER等。请看下面的例子，其浏览器的显示效 果如图7-2所示。,7.2.2 文本标识,图7-2 浏览器显示效果,7.2.2 文本标识,显示上述效果图的HTML原代码为：How to make Webs标题元素显示效果1标题元素显示效果2标题元素显示效果3标题元素显示效果4标题元素显示效果5标题元素显示效果6,7.2.2 文本标识,2.字体元素字体元素FONT用来设置文档的字体，通过改变其属性可 以对字体进行不同的设置。其常用的属性有三个：SIZE、 COLOR和FACE。SIZE用来指定字体大小，COLOR

17、指定字 体颜色，FACE用来指定一种字体名或一种字体列表。 （1）SIZE的使用格式为： #=1,2,3, 4,5,6,7 （2）COLOR的使用格式为： （3）FACE的使用格式为：,7.2.2 文本标识,（4）字体元素的综合应用实例下面是一个FONT元素应用的综合例子，其浏览器显示效果如图7-3。New DocumentFONT的综合应用1/fontFONT的综合应用2/fontFONT的综合应用3/fontFONT的综合应用4/font,7.2.2 文本标识,图7-3 浏览器显示效果,值得注意的是：如果浏览者的计算机上没有安 装你设置的字体，那么文字就不会按照这个字体显 示，而是使用标准

18、字体。因为你不可能知道浏览者 的计算机上会不会有这种字体，FACE属性允许你 列出多个字体，浏览器会根据顺序使用合适的字体 显示。像这一句：你的机器有这个字体。，如果浏览者 的计算机上有“隶书”，就用隶书显示，没有的话就 用“幼圆”，再没有就用“宋体”。,7.2.2 文本标识,3、字符修饰元素HTML中规定了大量的字符修饰处理元素，它们能够在不 改变字体、字号的基础上对字形进行改变。这些元素分为 物理样式和逻辑样式两大类，它们一般不支持任何属性。 可对字符进行粗体、斜体等修饰操作。 （1）物理样式 B元素：指定一段文本，使浏览器将该段文本以粗体显示。. I元素：指定一段文本，使浏览器将该段文本

19、以斜体显示。 . u元素：指定一段文本，使浏览器将其显示为带下划线的文字。. TT元素：指定一段文本，使浏览器将它显示为固定大小的字体字符。（输出打字机风格字体的文本）,7.2.2 文本标识,SUP元素：.指定一段文本，使浏览器用较小的字体将其显示为上标，上端和正常文字对齐。 SUB元素：.指定一段文本，使浏览器用较小的字体将其显示为下标，底端和正常文字对齐。 例如：文字 上标 下标 显示结果： 文字 上标 下标 S元素：指定段文本，使浏览器将它显示为带删除线的文字。. STRIKE元素：指定一段文本，使浏览器将它显示为带删除线的文字。,（2）逻辑样式HTML作为一种用于展示文档的语言，包含了

20、一些使用其功能而不是 效果来命名的标记，这就是逻辑型字体标记。逻辑型字体标记一般适用 于英文字体。另外，一般主页制作时很少使用这些标记，因为他们的显 示结果，一般都可以使用、等这些标记达到。不过， 稍微了解一下，可以帮助我们看懂别人的HTML代码。 强调：EM中的文字是想要特别强调的部分。（通常会以 斜体加黑体显示） 例如：第三章是这本书的重点。 特别强调: 用来表示强调，中间的文字用黑体显示。 例如：一个也不能少 引文: 用来表示一段引用的文字，也可以用来表示一 个书名。（输出引用方式的字体，通常会以斜体显示） 例如：HTML新手上路 是一本讲述主页制作的书。,大字 ：.使文字相对于前面的文

21、字增大一级 小字： . 例如：正常 大字 小字 显示结果： 正常 大字 小字 CODE元素：CODE用来专门显示计算机代码（如JAVE、C+源程序 等）。不过一般是比较短的代码。大量的代码，可以使用来保留 原来的格式。CODE中文字的字体没有变化，而且是一种等间距（等宽） 字体。例如：response.write “Hello, World!“ SAMP元素：指定一个样本名称，浏览器一般用等宽字体显示它。,DFN(definition)：表示对某个事物的定义。用斜体表示。 例如：老虎是猫科动物。 KBD（KEYBOAR）键盘：用来显示表示用户输入的部分，使用等间距的打字机字体显示。 例如：输入

22、 your name VAR（variable）：用来表示计算机程序中提到的变量。使用斜体表示。,实例：文本格式看看这里再看看那里这里是斜体的大字那里是斜体的小字硫酸的分子式是H2SO4392=1521,7.2.2 文本标识,4.分行控制元素 浏览器是忽略HTML文档中的自然行与段落的，分行和段落设置必须通过HTML标识来实现。（1）分段元素 分段元素p用来定义文档中的个段落，段落的缩进、第一个字符前面的空格及其他特性通常由浏览器确定。标识是段落的开始，是段落的结尾，单独一个，会添加一个空行。p元素的结束标记，经常可以不写。（2）换行元素 换行元素br在HTML文档中增加一个换行，指示浏览器执

23、行个断行动作，与p元素不同，它只是用来换行，其他字符和段落格式保持不变。br元素没有结束标志。,7.2.2 文本标识,5.预格式化文本元素当用其他编辑工具编排好了一段文字后，其中很可能有一些HTML文 件不支持的控制符号，如回车、多个空格、Tab键等。如果希望在浏览网 页时仍保留在编辑工具中已经排好的段落格式，可以使用标记符 将预先排好的格式保留下来。预格式化文本元素PRE使文本块以等宽字体 显示，并保留预排列的格式。 （1）预格式化文本元素使用规则 在预格式化文本内：文本中的分行会予以保留，从下一行显示文本。不应该使用标记，如果使用此标记，会处理为换行。可以使用超链接和突出显示字符元素。不应

24、该使用定义段落格式化元素（如标题、地址等）。,7.2.2 文本标识,（2）预格式化文本使用格式 预格式化文本使用格式为：6.地址元素 HTML规定了用地址元素ADDRESS来指定作者的所有权、名字、地址（常规地址和E-mail）、电话和传真等。ADDRESS元素常放在文档结束处，浏览器多以斜体字显示ADDRESS的内容，并在其后加一个换行。该元素不支持任何属性。其使用格式如下例所示：,7.2.2 文本标识,Newsletter editor:cool TEL:(0731)6688575E_Mail:,7.2.2 文本标识,7.文字块引用元素文字块引用元素BLOCKQUOTE用来在文档中引用来自

25、其他资源的文字，浏览器显示其内容时，会将相应的文字缩进，并在其上下各加一个窄行，有的浏览器还用斜体字显示其内容。其使用格式为：,7.2.2 文本标识,8.分隔线元素分隔线元素HR是文本之间的分界，通常是一个全宽的水平线。其使用格式为：,7.2.3 超链接标识,HTML的链接是从一个Web资源到另一个Web资 源的连接。虽然概念简单，但它却是Web获得成功 的关键因素之一。既然作为链接，当然要有两个端 点和一个方向，要指明哪里是源端，哪里是目的端。 链接可指向多种Web资源，例如HTML文档、图像、 视频、声音、程序或当前文档等。链接也可指向一 个锚（anchor）。锚是HTML文档内的命名区域

26、， 其中可包括文本和其他对象。,7.2.3 超链接标识,HTML中定义链接的元素有两个，它们是LINK和A。LINK只能出现在HTML文档中的HEAD段中，A只能出现 在HTML文档的BODY段中。 （一）超链接元素HTML的优势并不是页面的排版功能，它最大的优势是其 超链接能力。超链接虽然使用起来并不复杂，但它却可以链 接到世界任何地方。 超链接的实现主要是通过元素A（Anchor element）来实现 的。简单地说，通过A标识一些文本，使其成为超文本链接 的起点或目的地。A元素可支持较多属性，其中最重要的是 HREF属性和NAME属性。,7.2.3 超链接标识,（1） HREF属性如果元

27、素中包含HREF属性，则该元素的起始标记和结束标记之间 的文本就变成为超文本（Hypertext）。如果此文本被选中，就会转移到 另一个文档中，或者本文档中的另一个位置。另一个文档的URL或本文当中的位置就由HREF属性来指定。在浏览 器中，超文本通常会以不同颜色且带下划线的字符表示。一般未访问、 正选中和已访问用不同颜色表示，浏览器有默认颜色，但颜色也可以 修改。在HTML4.0中，我们一般引入CSS进行文档外观的各种设置， 当然链接（超）文本的属性也是其中的一项。定义链接： 北京大学的web站点 （2） NAME属性锚是文档中的一块区域，用一个标识符来标识，以方便对该区域的引 用。锚点在浏

28、览器中的显示就是链接，所以有一些HTML文献直接称锚点 为链接，即认为锚点就是链接。,定义锚： 这是锚一所在位置 ;假定上述锚所在的文档是one.html，则对锚的链接可以 采用相对URL：详细内容请参阅锚一。也可采用绝对URL：详细内容请参阅 锚一如果链接与锚在同一文档中，则可直接指定：详细内容请参阅锚一注意：HREF属性值的URL，不仅可以是“http:/“形式，也可以是 “ftp:/“，“gopher:/“，“mailto:“形式。,例如：我们可以通过mailto形式的URL建立一个与邮件地址 的链接：如有任何问题和建议，请与我们联系.用户选中这类链接后，浏览器会激活邮件对话框，使用户

29、能够给mailto所指向的邮件地址 自动发送Email，并自动将邮件地址填入。A元素定义的链接和锚是不允许嵌套的。例如以下示例是 错误的。 This text contains an outer anchor and link and an inner anchor and link。,7.2.3 超链接标识,如何使用锚标签热点文本1 热点文本2 热点文本3,7.2.3 超链接标识,建立与远端Web的链接与远端Web上的文件建立链接时，在HREF参数中写入要链接的文件名和路径，其中文件名要用双引号，并在文件名和HREF之间写上等号，而它的文件名是远端文件的URL。例如要想让网页链接到英文雅虎

30、、中文搜狐、263在线等站点上，需要加入如下链接到远端文件的超链接。,7.2.3 超链接标识,如何使用锚标签英文雅虎中文搜狐263在线 ,（二）LINK元素LINK元素用于文档的HEAD段中（出现次数不 限），定义媒体无关的链接。LINK与外部样式表及搜索引擎关系比较密切， 我们下面我们主要介绍LINK元素与搜索引擎的关 系，与外部样式表的关系我们会在讲到CSS时进行 介绍。,7.2.4 图像标识,1. 图像标识的基本用法图像元素IMG用来将图像插入到HTML文档中。IMG的两个基本属性为SRC和ALT，SRC属性用来指定图像的URL。此处的URL只能嵌入图像，不能嵌入HTML文本，但URL的

31、写法是标准的。ALT指定对图像进行说明的一段文字，也就当浏览器没有完全读入图像，或浏览器不支持内联图像，或用户将图像设置为不显示时，在图像位置显示的文字。还可以用BORDER元素给图像加上边框，当图像建有与另一文档的超链接时，通常使用边框进行提示。,7.2.4 图像标识,下面的示例说明了IMG的基本用法：,7.2.4 图像标识,2.图像对齐与布局IMG支持的另个重要属性是ALIGN，用以指定图像的对齐与布局方式。ALIGNleft和ALIGN=right使图像浮动，并向页面窗口左边或者右边对齐，此时图像附近的文本则相应地在图像的右侧或左侧环绕。其他属性值则指定图像与文本的相对对齐方式（垂直方向

32、）：,7.2.4 图像标识,ALIGN=top：使图像与本行的最高点对齐。ALIGN=texttop：使图像与本行的最高文本对齐。ALIGN=middle：使当前行的基准线与图像的中线对齐。ALIGN=absmiddle：使当前的中线与图像的中线对齐。ALIGN=baseline：使图像的基准线与当前的基准线对齐。ALIGN=bottom：使图像的底部与当前基准线对齐。ALIGN=absbottom：使图像的底部与当前的底部对齐。,设置页面背景图像单纯使用一种颜色作为背景显然有些单调， 网页设计者也可选择特定图案作为页面的背景，使 用BODY标记符的background属性即可。HTML语 句

33、为：,7.3 高级HTML标识的使用,7.3.1 表格（Table） 表格用Table元素定义。表格的开始是标题（可以省略不写），后面是一个或多个表行。表格的每一行由若干表元组成，浏览器将它们分成名称表元和数据表元。在默认的情况下，名称表元居中显示，数据表元居左显示。 命令格式其主要命令格式为：定义表格的开始与结束；定义表格的行；定义表头；定义表格的单元格：定义表格的标题。,、是表格中最常用的四个 标记， 是对整个表格的相关属性进行设置的 标记，是对表格中某行的属性进行设置的标记 ，是对某个单元格的数据属性进行设置的标记 ，定义为表头的单元格。,1、表格与表格的标题 1）表格大小 HTML表格

34、的大小有两种调整方式。一种是指定了 每行和每列的大小后，自动计算出表格的宽度和高 度；另一种是指定整个表格的宽度和高度。width指定表格的宽度，height指定表格的高度， X1、X2可以是绝对值也可以是相对值。,2）表格的颜色 整个表格的 背景颜色可以通过中的bgcolor 属性指定。3）边框宽度 默认的表格边框的宽度为1，通过boder属性指定表 格中边框的宽度。特殊的是当boder属性为0时，表格将不会显示边框。,4）单元格间距 与单元格相关的两个属性分别是cellpadding 和 Cellspacing。前者控制单元格的内间距，后者控制 两个单元格之间的距离。它们的单位都是像素。

35、5）表格标题 很多表格是需要标题的，使用标记来为表 格增加标题，通常标记位于标记 的后面。学生成绩表,2、行与单元格 使用、可以对行与单元格的相关属 性进行设置 1）单元格的背景色 与标记类似，也是通过bgcolor属性进行设置 的。,7.3 高级HTML标识的使用,2）单元格的 跨行与跨列 HTML的表格也可以是不规则的表格，也就是说，表元可以跨多列或多行，跨列用属性COLSPAN实现，跨行用ROWSPAN实现，其属性值为所跨的行数或列数。 例1：表元跨三列的实例。考试成绩计算机英语数学788082,7.3 高级HTML标识的使用,例2：表元跨三行的实例。考试成绩计算机78英语80数学82,

36、表格的嵌套：表格嵌套表格1 表格2, 表格2表格2 表格2表格2表格3 表格3表格3,7.3.2 表单（Form）,1.表单的概念表单的作用是从用户方收集信息，当用户填好表单上所需信息并将表单提交后，服务器就可以得到表单中包含的信息，并经公共网关接口程序进行处理。表单中使用的主要元素包括：FORM 在文档中产生表单。INPUT 输入字段。SELECT 定义可选择的若干选项，实际上般为列表框。OPTION SELECT选项中的选项。TEXTAREA 多行文本的输入字段,7.3.2 表单（Form）,每一个可变的字段都要由INPUT、TEXTAREA和OPTION元素来定义，并且必须用NAME属性

37、来标识其值。2.Form标识 FORM在包含文件结构性标识的同时，还有一系列输入标记，其中属性包括：ACTION 用于设定互动式表单的处理方式，通常指明一个处理函数的URL地址。METHOD 用于设定互动式表单的资料传输方式，如POST或GET方式。ENCTYPE 用于以编码方式来传送表单的资料。,7.3.2 表单（Form）,3.输入域INPUT元素用来定义一个用户可以在表单上输入信息的输入域，每一个输入域给特定名称及资料类型的变量分配个值。INPUT元素有很多属性，可使用的参数组取决于TYPE属性，一般命令格式为：,7.3.2 表单（Form）,（1）文字和密码输入希望用户输入文字时，应将

38、TYPE属性设置为TEXT；希望用户输入密码时，应将TYPE属性设置为PASSWORD，表单将不显示用户输入的字符。 规定TYPE=TEXT时，还可以使用以下三个INPUT的属性：MAXLENGTH：限定用户能够输入的字符数，默认值为无限。SIZE：定义输入区域分配的显示空间大小，默认值由浏览器决定。VALUE：提供输入区域的初始值。,7.3.2 表单（Form）,下面的例子说明了文字与密码属性的使用。您的姓名:您的主页的网址:密码:,7.3.2 表单（Form）,（2）复选框与单选框INPUT元素支持的另外两个TYPE属性就是复选框（Checkbox）和单选框（Radio Button），其

39、对应的TYPE属性值为CHECKBOX和RADIO。如果要将复选框或单选框初始化为己选中，则可以在INPUT元素中使用CHECKED属性。例1：复选框。,7.3.2 表单（Form）, 柠檬 苹果 香蕉 橘子 ,7.3.2 表单（Form）,例2：单选框。 宁檬 苹果 香蕉 橘子,7.3.2 表单（Form）,（3）隐藏表单组件 有时由于某种需要，可能希望将表单组件中的一个或多个组件隐藏起来。INPUT元素的TYPE属性值为HIDDEN时就提供了这个功能。 下面是隐藏表单的一个实例。这里有隐藏的表单,7.3.2 表单（Form）,（4）提交与重置组件 TYPE属性的另外两个可选值分别是SUBM

40、IT和RESET，它们分别用来提交表单数据和重新初始化表单域，在前面的例子中已经使用了这两种TYPE值。4文本框 当用户的输入文本超过一行时，可以使用文本框。文本框由TEXTAREA元素定义，其常用属性有三个：（1）NAME 规定文本框的名字。（2）ROWS 定义文本框的行数。（3）COLS 定义文本框的列数。,7.3.2 表单（Form）,其使用格式为：文本框中的内容.对于文本框中较长的行，可以设置文本是否进行换行。文本换行由WRAP属性规定，WRAP=OFF时，表示不换行；WRAP=ON时，表示软换行（即显示时换行，但实际发送时不换行）；WRAP=HARD时，表示硬换行（即插入回车符）。,

41、7.3.2 表单（Form）,下面的实例设计了一个10行、30列、采用硬换行的文本框。,7.3.2 表单（Form）,5.列表框 HTML还允许使用列表框，包括下拉式列表框和滚动式列表框两种。列表框用SELECT和OPTION两种元素实现。SELECT元素用来定义列表框，支持NAME、SIZE和MULTIPLE三种属性。NAME属性指定SELECT元素的名字，SIZE属性定义列表框的大小， 即用户次可以看到的列表项的数目，使用MULTIPLE属性时，表示允许用户进行多项选择。OPTION元素定义列表框的各选项，可以使用属性SELECTED来表示预先已经选定，还可以使用属性VALUE来指定用户选

42、择某项后的返回值。 具基本使用格式为：,7.3.2 表单（Form）,请看下面实例，一个是下拉式列表，只允许用户进行单项选择；另个是滚动式列表，允许用户进行多项选择。 例1：下拉式列表。狮子 大象 老虎,7.3.2 表单（Form）,例2：滚动式列表。大象 狮子 水牛 老虎 猎豹,7.3.2 表单（Form）,6.选项HTML用户对表单的处理是从给文件提供初始状态的域开始的，用户可以修改被域类型限制的域。当用户通过提交按键或图形输入来指示提交表单时，则根据METHOD、ACTION URL及ENCTYPE来处理表单数据组。如果表单中仅有一个单行文本输入域，浏览器则应在此域中接受Enter作为提

43、交表单请求。,7.3.2 表单（Form）,（1）表单URL编码类型 所有表单的默认编码是application/x-www-form-urlencoded。表单数据组的表示方法如下：避免表单域的名及值用“”符号来替代空格，而保留字符用URL来避开。换句话说，就是用HH来替换非字母及数字字符。这里，一个百分号和两个十六进制数表示该字符的ASC码。,7.3.2 表单（Form）,按照在文件中的显示顺序对域进行排列使用“=”符号把名从值中隔开，而域之间是用&隔开的。可以省略掉零值域。特别要注意的是，不应该在编码数据中出现没有选择的Radio Button及Check Box，但应出现VALU

44、E参数的隐藏域。（2）表单查询METHOD=GET如果表单处理很简单，所提交的数据很少并且该数据的安全性并不重要，那么采用GET方式比较好，该方式可以实现用最简单的方法从客户端向服务器传输数据。,7.3.2 表单（Form）,（3）表单提交METHOD=POSTPOST方式输入的请求串长度不受限制，并且在浏览器的请求地址内也看不到用户的输入信息。,7.3.3 框架（Frame）,1.框架的概念 HTML支持框架（Frame）功能，Frame可以将浏览器分隔为多个部分，每一部分可以保持相对独立的操作。简单她说，Frame的功能是把窗口划分为几块，每块称为一个框架，所有框架称为框架集（总框架），因

45、此，在HTML文档中首先要定义个框架集，然后逐个定义框架，并应保证支持框架功能的浏览器能够正常用来浏览。2.生成框架 （1）设计框架的三个主要元素,7.3.3 框架（Frame）,设计框架的三个主要元素是：FRAMESET元素：定义框架集（总框架）。FRAME元素：定义每一个框架。NOFRAMES元素：用来显示没有框架时的信息（由于有的浏览器不支持框架功能）。（2）基本命令语句 基本命令语句是：,7.3.3 框架（Frame）,由于框架从根本上改变了HTML文档的结构，所以有如下规定：在出现FRAMESET元素的文档中，不要再使用BODY元素。框架文档的基本结构如以下代码所示：,7.3.3 框架（Frame）,7.3.3 框架（Frame）,3.使用框架FRAMESET元素有以下两个重要属性：COLS属性：规定按纵向将窗口划分为若干框架。ROWS属性：规定按横向将窗口划分为若下框架。 其属性值可以按窗口尺寸的百分比给定，通常几个百分比之和应该等于100；也可以按照框架尺寸的实际像素值给定。两种情况下都可以只给定需要严格限定的值，而将其余值以“*”号表示。,