《因特网技术基础第二章.ppt》由会员分享,可在线阅读,更多相关《因特网技术基础第二章.ppt(48页珍藏版)》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、2023/2/21第二章第二章 WebWeb开发基础开发基础一、一、HTML语言简介语言简介1 HTML基础基础HTML是用来表示Web文档的规范,它使用标记来确定网页显示的格式。静态网页是标准的HTML文件,动态网页经过应用程序服务器的处理后也将生成标准的HTML文件。2 HTML工作原理工作原理HTML是一种规范,是用于Web文档的格式化语言。HTML通过标记(Tag)来标记要显示的网页中的各个部分,以告诉Web浏览器应该如何显示网页,即确定网页内容的格式。浏览器按照顺序阅读HTML文件,然后根据内容附近的HTML标记来解释和显示各种内容,这个过程称为语法分析。例如,如果为某段文字添加了标
2、记,浏览器将会以比一般文字大的粗体字来显示这段文字。总结说明总结说明HTML 是用来描述网页的一种语言。是用来描述网页的一种语言。HTML 指的是超文本标记语言指的是超文本标记语言(Hyper Text Markup Language)HTML 不是一种编程语言,而是一种标记语言不是一种编程语言,而是一种标记语言(markup language)标记语言是一套标记标签标记语言是一套标记标签(markup tag)HTML 使用标记标签来描述网页使用标记标签来描述网页 HTML 标签标签HTML 标记标签通常被称为标记标签通常被称为 HTML 标签标签(HTML tag)。HTML 标签是由尖括
3、号包围的关键词,比如标签是由尖括号包围的关键词,比如 HTML 标签通常是成对出现的,比如标签通常是成对出现的,比如 和和 标签对中的第一个标签是开始标签,第二个标签是结束标签标签对中的第一个标签是开始标签,第二个标签是结束标签 开始和结束标签也被称为开放标签和闭合标签开始和结束标签也被称为开放标签和闭合标签 HTML 文档文档=网页网页HTML 文档描述网页文档描述网页 HTML 文档包含文档包含 HTML 标签和纯文本标签和纯文本 HTML 文档也被称为网页文档也被称为网页 Web 浏览器的作用是读取浏览器的作用是读取 HTML 文档,并以网页的形式显示出它们。浏览器不会显示文档,并以网页
4、的形式显示出它们。浏览器不会显示 HTML 标签,而是使用标签来解释页面的内容:标签,而是使用标签来解释页面的内容:3 标记基础标记基础HTML语言是控制网页内容显示格式的标记集合,标记给浏览器提供了格式化Web文档的指令。1).基本的基本的HTML语法语法在HTML语言中,所有的标记都必须用尖括号(即小于号“”)括起来。例如,、等。大部分标记都是成对出现的,包括开始标记和结束标记,开始标记和相应的结束标记定义了标记所影响的范围;结束标记与开始标记名称相同,但结束标记总是以一个斜线符号开头的。例如,和、和等。也有一些标记只要求单一标记符号,例如换行标记就是这样。HTML标记不区分大小写,推荐使
5、用小写。标记不区分大小写,推荐使用小写。2).标记符的属性标记符的属性大多数标记都拥有一个属性集,通过这些属性可以对作用的内容进行更多的控制。在HTML语言中,所有属性都放置在开始标记的尖括号内。This is a headerThis is a paragraph.3).关于关于HTML版本版本本课程中主要讲解的是本课程中主要讲解的是HTML 4.01为什么使用为什么使用 HTML4.0?最初的最初的 HTML 绝没有打算要包含支持格式化文档的标签。绝没有打算要包含支持格式化文档的标签。HTML 标签原打算用于定义标签原打算用于定义文档的的内容。文档的的内容。This is a paragr
6、aphThis is a heading当诸如当诸如 这样的标签和这样的标签和 color 属性被加入属性被加入 HTML3.2 的规范当中,它开始成为开发的规范当中,它开始成为开发者的一场噩梦。那些不得不将字体和文字信息添加到每个单一网页的站点,其开发过程者的一场噩梦。那些不得不将字体和文字信息添加到每个单一网页的站点,其开发过程最终变成了漫长、昂贵和极其痛苦的过程。最终变成了漫长、昂贵和极其痛苦的过程。HTML4.0 的优秀特性的优秀特性通过使用通过使用 HTML4.0,所有的格式化信息都可以从,所有的格式化信息都可以从 HTML 文件中剥离,并植入一个独立文件中剥离,并植入一个独立的样式
7、表。因为的样式表。因为 HTML4.0 将文档的表现与其结构分离,我们从而得到了我们一直需要将文档的表现与其结构分离,我们从而得到了我们一直需要的东西:在不把文档内容搞糟的情况下,对表现层进行完全的控制。的东西:在不把文档内容搞糟的情况下,对表现层进行完全的控制。官方的官方的 HTML4.01 标准推荐使用小写的标签。标准推荐使用小写的标签。4 HTML文档的基本结构文档的基本结构一个基本的HTML文档通常包含以下三对顶级标记。1).HTML标记标记.HTML标记是全部文档内容的容器,是开始标记,是结束标记,它们分别是网页的第一个标记和最后一个标记,其他所有HTML代码都位于这两个标记之间。H
8、TML标记告诉浏览器或其他程序:这是一个Web文档,应该按照HTML语言规则对文内的标记进行解释。.标记是可选的,但最好不要可以省略这两个标记,以保持Web文档结构的完整性。2).首部标记首部标记.首部标记用于提供与Web页有关的各种信息。在首部标记中,可以使用和标记来指定网页的标题,使用和标记来定义CSS样式表,使用和标记来插入脚本,等等。3).正文标记正文标记.正文标记包含了文档的内容,文字、图像、动画、超链接以及其他HTML元素均位于该标记中。正文标记有下列属性。(1)BACKGROUD:指定文档背景图像的URL地址,图像平铺在页背景上。(HTML4.0以前使用,现在不推荐使用,现在可以
9、用style属性或CSS代替)(2)BGCOLOR:指定文档的背景颜色。(现在不推荐使用,现在可以用style属性或CSS代替)(3)TEXT:指定文档中文本的颜色。(现在不推荐使用,现在可以用style属性或CSS代替)(4)ONLOAD:指定文档首次加载时调用的事件处理程序。(5)ONUNLOAD:用于指定文档卸载时调用的事件处理程序。在上述属性中,各个颜色属性的值有两种表示方法:使用颜色名称来指定,例如红色、绿色和蓝色分别用red、green和blue表示;使用十六进制格式数值#RRGGBB来表示,RR、GG和BB分别表示颜色中的红、绿、蓝三基色的两位十六进制数据。4).关于关于styl
10、e属性(可以应用在属性(可以应用在 等标签中,等标签中,用于设置用于设置HTML 元素的样式,如格式化文本)元素的样式,如格式化文本)style 属性用于改变 HTML 元素的样式。可以通过“=”对属性进行赋值,style 属性可以设置下列属性值,如:设置背景颜色:background-color设置背景图像:background-image设置字体:font-family设置字颜色:color设置字体大小:font-size(以像素为单位px)设置文本对齐方式:text-align(center、left、right)style属性应用实例A paragraph.This is a head
11、ingThis is a text.5).HTML文档的基本结构文档的基本结构HTML文档的基本结构可以表示如下:标题文字文本、图像、动画、HTML指令等5 添加注释添加注释在HTML语言中,注释由开始标记构成,这两个标记之间的文字被浏览器解释为注释,而不在浏览器窗口中显示。6 设置文本格式设置文本格式分段与换行分段与换行段落是文档的基本信息单位。将文档划分为段落,可以通过使用分段标记、换行标记、标题标记或插入水平线来实现。1).分段标记分段标记P分段标记定义了一个段落,使用该标记时要跳过一个空行,使后续内容隔一行显示。若同时使用和,则将段落包围起来,表示一个分段的块;若省略结束标记,可以将开
12、始标记放在段、尾。分段标记的常用属性是ALIGN(现在可以用style属性或CSS代替),用于设置段落的水平对齐方式。2).换行标记换行标记BR标记强行规定了当前行的中断,使后续内容在下一行显示。3).标题标记标题标记Hn标题标记用于设置文档中的标题和副标题,其中n的取值是1到6;.标记表示字体最大的标题,标记表示字体最小的标题。4).水平线标记水平线标记HRHR标记在文档中添加一条水平线,用来分开文档的两个部分。该标记有以下属性:(1)ALIGN:指定线的对齐方式,取值为left(左对齐)、center(居中对齐)或right(右对齐),默认值为center。(2)COLOR:指定线的颜色。
13、(3)NOSHADE:若指定该项,则显示一条无阴影的实线。(4)SIZE:指定线的宽度,以像素为单位。(5)WIDTH:指定线的长度,单位可以是像素或百分比(占页面宽度的百分比)。7 设置段落对齐方式设置段落对齐方式在网页中有四种段落对齐方式:左对齐、右对齐、居中对齐和两端对齐。在HTML语言中,可以使用ALIGN属性来设置段落的对齐方式。(现在可以用style属性或CSS代替)ALIGN属性可以应用于多种标记,例如分段标记.、标题标记.以及水平线标记等。ALIGN属性的取值可以是:left(左对齐)、center(居中对齐)、right(右对齐)以及justify(两边对齐)。两边对齐是指将
14、一行中的文本在排满的情况下向左右两页边对齐,以避免在左右页边出现锯齿状。对于不同的标记,ALIGN属性的默认值是有所不同的。对于分段标记和各个标题标记,ALIGN属性的默认值为left;对于水平线标记,ALIGN属性的默认值为center。若要将文档中的多个段落设置成相同的对齐方式,可将这些段落置于和标记之间组成一个节,并使用ALIGN 属性(现在可以用style属性或CSS代替)来设置该节的对齐方式。8 设置字体、字号和颜色设置字体、字号和颜色在HTML语言中,可以使用字体标记.来设置文本的字符格式,为此可以将文本置于和标记之间,并通过FACE、SIZE和COLOR属性来设置文本的字体、字号
15、和颜色。(现在不推荐使用,现在使用style属性或CSS)FACE属性指定一种字体,或者给出一个字体列表,各种字体名称用逗号来分隔,可以按照作者的喜好程度来排列。例如:超文本标记语言SIZE属性指定字体的大小(即字号),其取值可以从1到7,默认值为3。SIZE属性值越大,显示的字号就越大。相对于基本字体(BASEFONT)的大小,也可使用或号来指定相对字号。如:超文本标记语言ASP动态网页设计COLOR属性指定文本的颜色,可以用颜色名称表示,也可以用十六进制RGB格式表示。例如:超文本标记语言ASP动态网页设计9 设置字符样式设置字符样式通过设置字符样式可以为某些字符设置特殊格式,例如粗体、斜
16、体、下划线、删除线、上标、下标等。常用的设置字符样式的标记如下:.粗体粗体.大字体.斜体.删除线.小字体.删除线.上标.下标.固定宽度字体.下划线10 插入特殊字符插入特殊字符 设计网页时,经常要插入一些空格。这本来是一个十分简单的问题,但在HTML网页中却变得比较麻烦。在输入文本时按了多次空格键,但在浏览器中打开网页时却只能看到一个空格。另外,在网页中有时可能要插入一些特殊符号,如版权符号和注册符号等。当遇到这种情况时,可以使用两种方式来输入特殊符号:即使用字符实体名称或数字表示方式。例如,若要在网页中输入一个无间断空格,可以输入“ ”或“ ”,等等。显示显示>11
17、 使用图像使用图像在网页中插入图像在网页中插入图像在HTML语言中,可使用IMG标记在网页中插入一个行内图像。1).SRC和和ALT属性属性IMG标记有许多属性,其中最常用的是SRC和ALT属性,分别用于设置图像的位置和替换文本。SRC属性给出图像文件的URL地址,图像可以是JPEG文件、GIF文件或PNG文件。ALT属性给出图像的简单文本说明,这段文本在浏览器不能显示图像时显示出来,或图像加载时间过长时先显示出来。2).指定图像的高和宽指定图像的高和宽当使用IMG标记在网页中插入一个图像时,可以通过HEIGHT和WIDTH属性来设置图像的高度和宽度,所用单位可以是像素或百分数。如果只给出了高
18、度或宽度,则图像将按比例进行缩放。12 设置图像格式与布局设置图像格式与布局使用标记使用标记IMG在网页中插入一个图像时,除了使用在网页中插入一个图像时,除了使用SRC、ALT、HEIGHT和和WIDTH属性来指定图像的来源、替换文本以及图像的尺寸之属性来指定图像的来源、替换文本以及图像的尺寸之外,还可以使用外,还可以使用IMG标记的其他属性对图像的格式布局进行设置。标记的其他属性对图像的格式布局进行设置。1).设置图像的边框设置图像的边框使用使用IMG标记的标记的BORDER属性可以给图像添加边框效果,该属性的取值属性可以给图像添加边框效果,该属性的取值为正整数,单位为像素。例如:为正整数,
19、单位为像素。例如:2).设置图像与文本之间的空白设置图像与文本之间的空白使用使用IMG标记的标记的HSPACE和和VSPACE属性可以设置图像与文本之间的空属性可以设置图像与文本之间的空白,前者指定图像的左、右边距,后者指定图像的上、下边距,两者的白,前者指定图像的左、右边距,后者指定图像的上、下边距,两者的单位均为像素。单位均为像素。3).设置图像在页面上的对齐方式设置图像在页面上的对齐方式如果插入的图像在页面上单独占一行,则可以将IMG标记置于和标记之间,并通过P标记的ALIGN属性来设置图像在页面上的对齐方式。例如:4).设置图像与文本的对齐方式设置图像与文本的对齐方式当在页面中进行图文
20、混排时,可以使用IMG标记的ALIGN属性来设置图像与文本在垂直方向的对齐方式,此时ALIGN属性的取值如下:ltop:图像与文本顶部对齐。lmiddle:图像与文本中央对齐。lbottom:图像与文本底部对齐。l通过设置IMG标记的ALIGN属性,也可以在图像的左、右绕排文本,此时ALIGN属性的取值为:lleft:图像居左,文本居右。lright,图像居右,文本居左。13 使用表格使用表格1).创建基本表格创建基本表格若要创建一个基本的表格,可以使用以下若要创建一个基本的表格,可以使用以下HTML代码:代码:标题标题标题标题标题标题数据数据数据数据数据数据数据数据数据数据数据数据数据数据数
21、据数据数据数据2).设置表格的属性设置表格的属性创建表格时,可以通过TABLE标记的下列属性来对表格的格式进行设置:(1)ALIGN:指定表格的对齐方式,取值可以是left(默认值)、center或right。(2)BACKGROUND:指定用作表格背景图片的URL地址。(3)BGCOLOR:指定表格的背景颜色。(4)BORDER:指定表格边框的宽度,以像素为单位。如果省略该属性,则默认值为0。(5)BORDERCOLOR:指定表格边框颜色,应与BORDER属性一起使用。(6)CELLPADDING:指定单元格内数据与单元格边框之间的间距,以像素为单位。(7)CELLSPACING:指定单元格
22、之间的间距,以像素为单位。(8)WIDTH:指定表格的宽度,以像素或百分比为单位。3).设置行的属性设置行的属性表格中的每一行是用TR标记来定义的,可以通过该标记的下列属性对指定行的格式进行设置:(1)ALIGN:指定行中单元格的水平对齐方式,取值为left(默认值)、center或right。(2)BACKGROUND:给出图像文件的URL,该图像用作指定行的背景。(3)BGCOLOR:指定行的背景颜色。(4)BORDERCOLOR:指定行的边框颜色,该属性只有当TABLE标记的BORDER属性取非零值时才起作用。(5)VALIGN:指定行中单元格内容的垂直对齐方式,该属性的取值可以是top
23、(顶端对齐)、middle(居中对齐)、bottom(底端对齐)或baseline(基线对齐)。4).设置单元格的属性设置单元格的属性通过TD标记的下列属性可以对指定单元格的格式进行置:(1)ALIGN:指定单元格内文本的水平对齐方式,取值为left(默认值)、center或right。(2)BACKGROUND:指定图像的URL,该图像用作单元格的背景。(3)BGCOLOR:指定单元格的背景颜色。(4)BORDERCOLOR:指定单元格的边框颜色。(5)COLSPAN:指定合并单元格时一个单元格跨越的表格列数。(6)NOWRAP:若指定该属性,则避免Web浏览器将单元格里的文本换行。(7)R
24、OWSPAN:指定合并单元格时一个单元格跨越的表格行数。(8)VALIGN:指定单元格中文本的垂直对齐方式,取值可以是top、middle(默认值)、bottom或baseline。14 使用超链接使用超链接 1).理解超链接超链接是由源端点到目标端点的一种跳转。源端点可以是网页中的一段文本或一幅图像等。目标端点可以是任意类型的网络资源,例如可以是一个网页、一幅图像、一首歌曲、一段动画或一个程序等。超链接标签:通过使用 href 属性,创建指向另外一个文档的链接(或超链接)如:文件按照目标端点的不同,可以将超链接分为以下几种形式。(1)文件链接:这种链接的目标端点是的一个文件,它可以位于当前网
25、页所在的服务器,也可以位于其他服务器。(2)锚点链接:这种链接的目标端点是网页中的一个位置,通过这种链接可以从当前网页跳转到本页面或其他页面中的指定位置。(3)E-mail链接:通过这种链接可以启动电子邮件客户端程序(如Outlook或FoxMail等),并允许访问者向指定的地址发送邮件。2).理解路径理解路径路径是指从站点根文件夹或当前文件夹起到目标文件所经过的路线,可以使用路径来指定超链接中目标端点的位置。路径有以下几种类型:(1)绝对路径:也称为绝对URL,它给出目标文件的完整URL地址,包括传输协议在内。如果要链接的文件位于外部服务器上,则必须使用绝对路径。(2)相对路径:也称为相对U
26、RL,是指以当前文档所在位置为起点到目标文档所经过的路径。若要将当前文档与处在同一文件夹中的另一个文档链接,或者将同一站点中不同文件夹下的文档相互链接,都可以使用相对路径,此时可以省去当前文档与目标文档完整URL中的相同部分,只留下不同部分。(3)根相对路径:是指从站点根目录到被链接文件的路径。使用这种路径是指定站点内文档链接的最好方式。3).创建邮件链接创建邮件链接使用A标记创建邮件链接,该标记的HREF属性应由三个部分组成:第一部分是电子邮件协议名称mailto,第二部分是电子邮件地址,第三部分是可选的邮件主题,其形式为“subject=主题”。第一部分与第二部分之间用冒号(:)分隔,第二
27、部分与第三部分之间用问号(?)分隔。例如:给我写信当访问者在浏览器窗口中单击邮件连接时,将会自动启动电子邮件客户端程序(例如Outlook Express或FoxMail等),并将指定的主题填入“主题”栏中。15 使用表单使用表单什么是表单?表单是用来收集站点访问者信息的域集。表单从用户收集信息,然后将这些信息提交给服务器进行处理。表单可以包含允许用户进行交互的各种控件,例如文本框、列表框、复选框和单选按钮等。如何使用表单?站点访问者填表单的方式是输入文本、单击单选按钮与复选框,以及从下拉菜单中选择选项。在填好表单之后,站点访问者便送出所输入的数据,该数据就会根据所设置的表单处理程序,以各种不
28、同的方式进行处理。16 创建表单创建表单在HTML语言中,表单通过FORM标记来定义,基本语法格式如下:FORM标记具有以下属性:(1)NAME:指定表单的名称,以标识表单。命名表单后,可以使用脚本语言(如VBScript或JScript)来引用或控制该表单(2)METHOD:指定将表单数据传输到服务器的方法,其取值可以是:lpost:在HTTP请求中嵌入表单数据。lget:将表单数据附加到请求该页的URL中。(3)ACTION:指定将要接收表单数据的服务器端程序或动态网页的网址。(4)onSubmit:指定提交表单时调用的事件处理程序。(5)onReset:指定重置表单时调用的事件处理程序。
29、(6)TARGET:指定一个目标窗口,其取值为:l_blank:在未命名的新窗口中打开目标文档。l_parent:在显示当前文档的窗口的父窗口中打开目标文档。l_self:在提交表单所使用的窗口中打开目标文档。l_top:在当前窗口内打开目标文档,确保目标文档占用整个窗口。17 使用输入型表单控件使用输入型表单控件为了让用户通过表单输入数据,可以使用INPUT标记创建各种输入型表单控件。通过将INPUT标记的TYPE属性设置为不同的值,可以创建不同类型的输入型表单控件,包括单行文本框、密码框、复选框、单选按钮、文件域以及按钮等。1).在表单中添加单行文本框在表单中添加单行文本框如果要获取站点访
30、问者提供的一行信息,可以在表单中添加单行文本框。为此,可以在.之间添加一个INPUT标记,并将其TYPE属性指定为“text”。创建单行文本框的基本语法格式为:其中NAME属性指定文本框的名称,通过它可以在脚本中引用该文本框控件;VALUE属性指定文本框的初始值;SIZE属性指定文本框的宽度;MAXLENGTH属性指定允许在文本框内输入的最大字符数。当提交表单时,该文本框的名称和内容都会包含在表单结果中。2).在表单中添加密码域在表单中添加密码域如果要求站点访问者输入密码后才能进入站点时,则应在表单如果要求站点访问者输入密码后才能进入站点时,则应在表单中添加密码域。密码域其实只是一个单行的文本
31、框。当站点访问中添加密码域。密码域其实只是一个单行的文本框。当站点访问者在这个域中键入数据时,大部分的者在这个域中键入数据时,大部分的Web浏览器都会以星号显示密浏览器都会以星号显示密码以保机密。若要创建一个密码域,请在码以保机密。若要创建一个密码域,请在.之间之间添加一个添加一个标记,并将其标记,并将其TYPE属性指定为属性指定为“password”。创创建密码域的基本语法格式为:建密码域的基本语法格式为:其中其中NAME属性用于指定密码域的名称,通过这个名称可以在属性用于指定密码域的名称,通过这个名称可以在脚本中引用该控件;脚本中引用该控件;VALUE属性用于指定密码域的初始值;属性用于指
32、定密码域的初始值;SIZE属性指定密码域的宽度;属性指定密码域的宽度;MAXLENGTH属性用于指定允许在密码属性用于指定允许在密码域内输入的最大字符数。当提交表单时,该域的名称和内容都会域内输入的最大字符数。当提交表单时,该域的名称和内容都会被包含在表单结果中。被包含在表单结果中。3).在表单中添加按钮在表单中添加按钮使用标记可以在表单中添加三种类型的按钮:即提交按钮、重置按钮和自定义按钮。创建按钮的基本语法格式为:对该标记的属性说明如下:(1)TYPE:指定按钮的类型,取值可以是:submit:创建一个提交按钮。reset:创建一个重置按钮。button:创建一个自定义按钮。(2)NAME
33、:指定按钮的名称。(3)VALUE:指定显示在按钮上的标题文本。4).在表单中添加图形化按钮在表单中添加图形化按钮在表单中可以添加图片作为提交按钮使用。在填写表单后,站点访问者单击图片以提交表单,那么表单上的数据,包括图片域名称,就会被提交到表单处理程序。图形化的提交按钮使用标记来创建,方法是将该标记的TYPE属性设置为image”,语法格式为:其中TYPE属性表示以一个图像作为提交按钮,所用图像的URL地址由SRC属性给出,NAME或VALUE属性提供图像的替换文本。5).在表单中添加复选框在表单中添加复选框如果想让站点访问者去选择一个或多个选项或都不选取时,可以在表单中添加复选框。若要创建
34、复选框,可以在.之间使用标记,并将TYPE属性设置为“checkbox”,基本语法格式如下:选项文本其中NAME属性指定复选框的名称;VALUE属性指定提交时的值;CHECKED属性是可选的,若使用该属性,则当第一次打开表单时该复选框处于选中状态。当提交表单时,假如复选框被选中,它的内部名称和值都会包含在表单结果中。否则,只有名称会被纳入表单结果中,但值为空白。6).在表单中添加单选按钮在表单中添加单选按钮如果想让站点访问者从一组选项中选择其中之一,可以在表单中添加单选按钮。在一组单选按钮中,一次只能选择一个。若要创建单选按钮,可以在.之间使用标记,并将TYPE属性设置为“radio”,基本语
35、法格式如下:选项文本其中NAME属性指定单选按钮的名称,若干个名称相同的单选按钮构成一个控件组,在该组中只能选中一个选项;VALUE属性指定提交时的值;CHECKED属性是可选的,若使用该属性,则当第一次打开表单时该单选按钮处于选中状态。当提交表单时,该单选按钮组名称和所选取的单选按钮指定值都会包含在表单结果中。如果没有任何单选按钮被选取,组名称会被纳入表单结果中,但值为空白。7).在表单中添加文件域在表单中添加文件域文件域由一个文本框和一个“浏览”按钮组成,用户既可以在文本框中输入文件的路径和文件名,也可以通过单击“浏览”按钮从磁盘上查找和选择所需文件。如果想让站点访问者通过表单来选择文件,
36、可以在表单中添加文件域。在和之间添加标记,并将其TYPE属性设置为“file”,即可创建文件域,语法格式为:其中NAME属性指定文件域的名称,VALUE属性给出初始文件名,SIZE属性指定文件名输入框的宽度。18 使用其他表单控件使用其他表单控件1).在表单中添加滚动文本框在表单中添加滚动文本框若要接受站点访问者输入多于一行的文本,请在表单中添加滚动文本框。在和之间添加TEXTAREA标记,即可创建滚动文本框,其基本语法格式如下:.其中NAME属性指定滚动文本框控件的名称,ROWS属性指定该控件的高度(以行为单位),COLS属性指定该控件的宽度(以字符为单位),READONLY属性指定滚动文本
37、框的内容不被用户修改。创建滚动文本框时,在和标记之间输入的文本将作为该控件的初始值。当提交表单时,该域名称和内容都会包含在表单结果中。2).在表单中添加选项菜单在表单中添加选项菜单若要创建选项菜单,应在和之间添加标记,并使用标记将每个选项列出来,基本语法格式如下:选项1选项2其中NAME属性指定选项菜单控件的名称;SIZE属性指定在列表中一次可以看到的选项数目;布尔属性MULTIPLE指定是否允许作多项选择;SELECTED属性指定该选项的初始状态为选中。当提交表单时,菜单的名称会被包含至表单结果中,其后并有一份所有选项值的列表。19 提交和处理表单提交和处理表单当用户填完成表单数据后,单击提
38、交按钮即可将表单数据提交给Web服务器上的表单处理程序。提交信息表单处理程序的方法由FORM标记的METHOD属性来确定。提交表单的方法有两种:即get方法和post方法。get方法将表单的名称/值对进行程序编码,并将该信息赋予给一个叫做QUERY_STRING的服务器变量;post方法直接将名称/值对传送至表单处理程序作为输入。表单处理程序的URL地址由FORM标记的ACTION属性来确定。如果要处理表单数据,需要在服务器端编写脚本(CGI或ASP等)作为表单处理程序。20 插入字幕插入字幕MARQUEE标记在页面中插入一个字幕,用于滚动显示文本信息。语法标记在页面中插入一个字幕,用于滚动显
39、示文本信息。语法如下:如下:要滚动显示的文本信息要滚动显示的文本信息MARQUEE标记的主要属性有:标记的主要属性有:(1)ALIGN:指定字幕与周围文本的对齐方式,其取值可以是指定字幕与周围文本的对齐方式,其取值可以是top、middle或或bottom。(2)BEHAVIOR:指定文本动画的类型,其取值可以是指定文本动画的类型,其取值可以是scroll、slide或或alternate。(3)BGCOLOR:指定字幕的背景颜色。指定字幕的背景颜色。(4)DIRECTION:指定文本的移动方向,其取值可以是指定文本的移动方向,其取值可以是down、left、right或或up。(5)HEIG
40、HT:指定字幕的高度,以像素或百分比为单位。指定字幕的高度,以像素或百分比为单位。(6)HSPACE:整数,指定字幕的外部边缘与浏览器窗口之间的左右边距整数,指定字幕的外部边缘与浏览器窗口之间的左右边距(像素)。(像素)。(7)LOOP:指定字幕的滚动次数。指定字幕的滚动次数。(8)SCROLLAMOUNT:整数,指定字幕文本每次移动的距离,以像素为整数,指定字幕文本每次移动的距离,以像素为单位。单位。(9)SCROLLDEALY:整数,指定与前段字幕文本延迟多少整数,指定与前段字幕文本延迟多少ms后重新开始后重新开始移动文本。移动文本。(10)VSPACE:整数,指定字幕的外边缘与浏览器窗口
41、之间的上下边距整数,指定字幕的外边缘与浏览器窗口之间的上下边距(像素)。(像素)。21 框架结构框架结构1)、框架结构的文件格式2)、框架结构标记的使用3)、FRAME标记4)、TARGET属性的使用返回首页1)、框架结构的文件格式框架结构的文件格式框架结构有开始标记和结束标记,框架所有内容都应该在和之间。在 标记内使用标记来指定框架中每个小(子)窗口的内容。其具体格式如下:返回本节2)、框架结构标记的使用框架结构标记的使用格式:功能:定义一个框架容器。主要属性见如2-16所示。标记属性功能rows=size设置多重框架的高度cols=size设置多重框架的宽度onload=script设置框
42、架被载入的事件onunload=script 设置框架被卸载的事件返回本节3)、FRAME标记标记格式:功能:在网页中定义框架。FRAME是一个单一标记,使用时放在FRAMESET的开始和结束标记之间。它有6个属性来描述每个子窗口的风格,属性值的功能如表所示。标记属性功能src=URL设置要链接到的HTML文件name=framename表示子窗口的名字marginheight=size用来控制显示内容和窗口上下边界的距离,默认为1scrolling=scrollingstyle指定子窗口是否使用滚动条,有YES/NO/AUTO三个值,默认为AUTO,即根据窗口内容决定是否有滚动条noresize使用该属性后,指定窗口不能调整窗口大小主要属性值返回本节例:FRAMESET示例示例 框架结构的使用总结总结HTML标记标记首部标记首部标记正文标记正文标记注释标记注释标记分段标记分段标记P换行标记换行标记BR标题标记标题标记Hn水平线标记水平线标记HR和和样式属性样式属性字符样式字符样式.特殊字符特殊字符 .IMG标记标记表格表格超链接超链接表单表单字幕字幕