网页建立与维护11HTML语言的结构 HIML(超文本标记语言)是一种描述文档结构的标注语言,它使用一些约定的标记对 WW上的各种信息进行标注。当用户浏览wWW上的信息时,浏览器会自动解释这些标 记的含义,并按照一定的格式在屏幕上显示这些被标记的文件。HIML的优点是其跨平台 性。即任何可以运行浏览器的计算机都能阅读并显示HIML文件,不管其操作系统是什么, 并且显示结果相同 HIML文件是标准的ASCI文件,且其后缀名为hm或html的文件。HIML文件看起 来象是加入了许多被称为链接签(tag)的特殊字符串的普通文本文件。从结构上讲,HTML 文件由元素( element)组成,组成HIML文件的元素有许多种,用于组织文件的内容和指 导文件的输出格式。绝大多数元素是“容器”,即它有起始标记和结尾标记。元素的起始标 记叫做起始链接签( start tag),元素结束标记叫做结尾链接签( end tag),在起始链接签和 结尾链接签中间的部分是元素体。每一个元素都有名称和可选择的属性,元素的名称和属 性都在起始链接签内标明。 下面来看一个 HTML文件 第一十乱的洲交件 西安电子科技大学经管院 这是第一个HTML的测试文件 1.2构成网页的基本元素 1.标记 ∏ILE>标记用来给网页命名,网页的名称写在与标记之间,显示 在浏览器的标题栏中。例如,在上图中所示的浏览器页面中,其标题栏所显示的“西电经管 院”是在HIML文件中的由西电经管院所定义的。 2.标记 到.标题元素有6种,用于表示文章中的各种题目。字体大小 到顺序减小。下面这个例子中分别使用了到的标题。其HIML文件如下所 示,在浏览器中的显示效果如右图所示 3.预格式化文本标记pre HIML的输出是基于窗口的,因而HTML文件在输出时都是要重新排版的,即把文本上任 何额外的的字符(如空格、制表符和回车符)都忽略,若确实不需要重新排版的内容,可以 用.通知浏览器。在左图和右图中显示了有无预格式化文本标记pe>的对比 i-e.mHt a, n 72. 荐漂一龙的棕努害幕m 高;操理一“宗含“, 4.和标记 用于强制换行。表示一个段落的开始。一般可不用 5.标记 这几个标记都是用来修饰所包含文档的。标记使文本加粗;<>标记使文本倾斜 标记给文本加下划线;标记给文本加删除线;标记使文本字体加重 面给出一个HIML源文件,其显示结果如下图所示
1 网页建立与维护 1.1 HTML 语言的结构 HTML(超文本标记语言)是一种描述文档结构的标注语言,它使用一些约定的标记对 WWW 上的各种信息进行标注。当用户浏览 WWW 上的信息时,浏览器会自动解释这些标 记的含义,并按照一定的格式在屏幕上显示这些被标记的文件。HTML 的优点是其跨平台 性。即任何可以运行浏览器的计算机都能阅读并显示 HTML 文件,不管其操作系统是什么, 并且显示结果相同。 HTML 文件是标准的 ASCII 文件,且其后缀名为 htm 或 html 的文件。HTML 文件看起 来象是加入了许多被称为链接签(tag)的特殊字符串的普通文本文件。从结构上讲,HTML 文件由元素(element)组成,组成 HTML 文件的元素有许多种,用于组织文件的内容和指 导文件的输出格式。绝大多数元素是“容器”, 即它有起始标记和结尾标记。元素的起始标 记叫做起始链接签(start tag),元素结束标记叫做结尾链接签(end tag),在起始链接签和 结尾链接签中间的部分是元素体。 每一个元素都有名称和可选择的属性,元素的名称和属 性都在起始链接签内标明。 下面来看一个 HTML 文件: 西安电子科技大学经管院 这是第一个 HTML 的测试文件 1.2 构成网页的基本元素 1.标记 标记用来给网页命名,网页的名称写在与标记之间,显示 在浏览器的标题栏中。例如,在上图中所示的浏览器页面中,其标题栏所显示的“西电经管 院”是在 HTML 文件中的由西电经管院所定义的。 2.标记 …到…标题元素有 6 种,用于表示文章中的各种题目。字体大小 到顺序减小。下面这个例子中分别使用了到的标题。其 HTML 文件如下所 示,在浏览器中的显示效果如右图所示。 3.预格式化文本标记 HTML 的输出是基于窗口的,因而 HTML 文件在输出时都是要重新排版的,即把文本上任 何额外的的字符(如空格、制表符和回车符)都忽略,若确实不需要重新排版的内容,可以 用…通知浏览器。在左图和右图中显示了有无预格式化文本标记的对比 4.和标记 用于强制换行。 表示一个段落的开始。一般可不用。 5. 标记 这几个标记都是用来修饰所包含文档的。标记使文本加粗;标记使文本倾斜; 标记给文本加下划线;标记给文本加删除线;标记使文本字体加重。下 面给出一个 HTML 源文件,其显示结果如下图所示
6.标记 .用来修改字体和颜色。其中 COLOR属性指定文字颜色,颜色的 表示可以用6位十六进制代码,如:SIZE属性指定相对尺寸。 另外,如果用户想要设置网页的背景色和文字颜色,可以将标记扩充为: 其中各个元素的说明如表8-1所示,表8-2列出了一些常用颜色的RGB值 Bgcolor 置网页背景颜色 设置网页非可链接文字的颜色 Link 设置网页可链接文字的颜色 Alink 置网页正被点击的可链接文字的颜色 Vlink 置网页已经点击的可链接文字的颜色 Background设置网页背景图案 mageURL设置网页背景图案的URL地址 代表颜色RGB值(格式为rgb)它是用16进制的红绿蓝( red-green-blue,RGB 来表示。各种常见的颜色的RGB值如表92所 RGB 黑色( Black) 橄榄色(Oive) 08000 红色(Red) Fo000 深表色(Teal) 暴色( Green) 恢色(Gray) 08080 蓝色(Blue) DOOOFF 深蓝色(Navy) 白色(Whte) FFFFF 浅绿色(Lime) OOFFOO 黄色( Yellow) FFFOO 紫红色( Fuchsia) FOOFF 银色( Silver) COCCO 紫色( Purple) 00080 浅色(Aqu DOFFFF 茶色( Maroon) 00000 23超文本链接指针 超文本链接指针是HIML最吸引人的优点之一,可以这样说,如果没有超文本链接 指针,就没有万维网。使用超文本链接指针可以使顺序存放的文件具有一定程度上随机访问 的能力,这更加符合人类的踊跃思维方式。超文本链接指针是指把并不连续的两段文字或两 个文件联系起来。 1.统一资源定位器URL 统一资源定位器( Uniform Resource Locator)是文件名的扩展。在单机系统中,如果要找 一个文件,需要知道该文件所在的路径和文件名:在互连网上同样找一个文件,除了要知道 以上内容之外,显然还需要知道该文件存放在哪个网络的哪台主机中才行。与单机系统不 样的是,在单机系统中所有的文件都由统一的操作系统来管理,因而不必给出访问该文件的 方法:而在互连网上,每个网络,每台主机的操作系统都不一样,因此必须指定访问该文件 的方法。一个URL包括了以上所有的信息。它的构成为: protocol: //machine name[: port]/ directory /filename http://www.xidian.edu.cn/file/index.html 2.建立一个链接 (1)链接到其它站点 在HIML文件中用链接指针指向一个目标。其基本格式为:
2 6.标记 …用来修改字体和颜色。其中 COLOR 属性指定文字颜色,颜色的 表示可以用 6 位十六进制代码,如;SIZE 属性指定相对尺寸。 另外, 如果用户想要设置网页的背景色和文字颜色,可以将标记扩充为: 其中各个元素的说明如表 8-1 所示,表 8-2 列出了一些常用颜色的 RGB 值。 标记 说明 Bgcolor 设置网页背景颜色 Text 设置网页非可链接文字的颜色 Link 设置网页可链接文字的颜色 Alink 设置网页正被点击的可链接文字的颜色 Vlink 设置网页已经点击的可链接文字的颜色 Background 设置网页背景图案 ImageURL 设置网页背景图案的 URL 地址 # 代表颜色 RGB 值(格式为 rrggbb)。它是用 16 进制的红-绿-蓝(red-green-blue,RGB) 值来表示。各种常见的颜色的 RGB 值如表 9-2 所示。 颜色 RGB 颜色 RGB 黑色(Black) 000000 橄榄色(Olive) 808000 红色(Red) FF0000 深表色(Teal) 008080 绿色(Green) 008000 灰色(Gray) 808080 蓝色(Blue) 0000FF 深蓝色(Navy) 000080 白色(White) FFFFFF 浅绿色(Lime) 00FF00 黄色(Yellow) FFFF00 紫红色(Fuchsia) FF00FF 银色(Silver) C0C0C0 紫色(Purple) 800080 浅色(Aqua) 00FFFF 茶色(Maroon) 800000 2.3 超文本链接指针 超文本链接指针是 HTML 最吸引人的优点之一,可以这样说,如果没有超文本链接 指针,就没有万维网。使用超文本链接指针可以使顺序存放的文件具有一定程度上随机访问 的能力,这更加符合人类的踊跃思维方式。超文本链接指针是指把并不连续的两段文字或两 个文件联系起来。 1. 统一资源定位器 URL 统一资源定位器(Uniform Resource Locator)是文件名的扩展。在单机系统中,如果要找 一个文件,需要知道该文件所在的路径和文件名;在互连网上同样找一个文件,除了要知道 以上内容之外,显然还需要知道该文件存放在哪个网络的哪台主机中才行。与单机系统不一 样的是,在单机系统中所有的文件都由统一的操作系统来管理,因而不必给出访问该文件的 方法;而在互连网上,每个网络,每台主机的操作系统都不一样,因此必须指定访问该文件 的方法。一个 URL 包括了以上所有的信息。它的构成为: protocol:// machine.name[:port]/directory/filename http://www.xidian.edu.cn/ file/index.html 2. 建立一个链接 (1)链接到其它站点 在 HTML 文件中用链接指针指向一个目标。其基本格式为:
zzz 其中zz可以是文字或图片并显示在网页中,当用户 单击它时,浏览器就会显示由href属性中的统一资源定位器(URL)所指向的目标,实际 上这个ZZZ在HIML文件中充当指针的角色,它一般显示为蓝色。href中的h表示超文本 而ref表示“访问”或“引用”的意思。例如:西电经管院 用户用鼠标单击“西电经管院”,即可看到西电经管院的主页内容。在这个例子中,充 当指针的是“西电经管院” (2)同一个文件中的链接 超链可以指向自己的计算机中的某一个文件这种链接方式叫做本地链接。前面曾提到过 个超文本链接指针包括两个部分,一个指向目标的链接指针,另一个是被指向的目标 标识一个目标的方法为: NAME属性将放置该标记的地方标记为KKK”,KKK是一个全文唯一的标记串, 和之间的内容可有可无。这样,就把放置标记的地方做了一个叫做“KKK”的标记(如 果对 Microsoft word很熟悉的话,这就相当于在Word中的定义“书签”)。做好标记后,可以 用下列方法来指向它。 转向下一处标记实现的,它有几个较为重要的属性。其中 SRC属性:指明图形的URL地址; HEIGHT属性:决定图形的高度 WIDTH属性:决定图形的宽度 BORDER属性:决定边框线的宽度 0表示无边框; ALT属性:指明图像显示的备用文本: 2.在HIML文件中利用图像建立链接 如果在链接标记和的中间放置一个标记,这个图像将会成为一个可击点,产 生一个链接。例如: 当用户单击这个图像后,浏览器就会显示 default. asp”这个文件的内容了 2.5框架结构的使用 框架能够将页面分成数个独立变化的窗口,每个窗口可以显示不同的web页面,并可以不 断更换显示的对象。使用框架结构,可以使屏幕的信息量增大,使web网页更加吸引读者。 有关框架内容的HIML语法为: . 其中中的内容显示在不支持分框的浏览器窗口中,因而 这里指向一个普通版本的HIML文件,以便使用不支持分框浏览器的用户阅读。 分框由指定,并且可以嵌套,分区中各部分显示的内容用指定 需要说明的是, frame许多浏览器不支持它。分框可以将窗口横向分成几个部分,也可以纵
3 zzz 其中 zzz 可以是文字或图片并显示在网页中,当用户 单击它时,浏览器就会显示由 href 属性中的统一资源定位器(URL)所指向的目标,实际 上这个 ZZZ 在 HTML 文件中充当指针的角色,它一般显示为蓝色。href 中的 h 表示超文本, 而 ref 表示“访问”或“引用”的意思。例如:西电经管院 用户用鼠标单击“西电经管院”,即可看到西电经管院的主页内容。在这个例子中,充 当指针的是“西电经管院”。 (2)同一个文件中的链接 超链可以指向自己的计算机中的某一个文件这种链接方式叫做本地链接。前面曾提到过 一个超文本链接指针包括两个部分,一个指向目标的链接指针,另一个是被指向的目标。 标识一个目标的方法为:……. NAME 属性将放置该标记的地方标记为“KKK”,KKK 是一个全文唯一的标记串, 和 之间的内容可有可无。这样,就把放置标记的地方做了一个叫做“KKK”的标记(如 果对 Microsoft Word 很熟悉的话,这就相当于在 Word 中的定义“书签”)。做好标记后,可以 用下列方法来指向它。 转向下一处 这时就可以点击“转向下一处”这段文字,浏览器就从标记名为 KKK 的部分开始显示此 HTML 文件的内容了。 2.4 在 HTML 文件中使用图像 1.在 HTML 文件中显示图像 在浏览器上显示的图像必须有特定的格式,目前使用的浏览器通常支持 GIF 和 JPEG 格式的 图像。在 HTML 网页中加图像是通过标记实现的,它有几个较为重要的属性。其中: SRC 属性:指明图形的 URL 地址; HEIGHT 属性:决定图形的高度; WIDTH 属性:决定图形的宽度; BORDER 属性:决定边框线的宽度, 0-表示无边框; ALT 属性:指明图像显示的备用文本; 2.在 HTML 文件中利用图像建立链接 如果在链接标记和的中间放置一个标记,这个图像将会成为一个可击点,产 生一个链接。例如: 当用户单击这个图像后,浏览器就会显示“default.asp”这个文件的内容了。 2.5 框架结构的使用 框架能够将页面分成数个独立变化的窗口,每个窗口可以显示不同的 Web 页面,并可以不 断更换显示的对象。使用框架结构,可以使屏幕的信息量增大,使 Web 网页更加吸引读者。 有关框架内容的 HTML 语法为: … … 其中...中的内容显示在不支持分框的浏览器窗口中,因而 这里指向一个普通版本的 HTML 文件,以便使用不支持分框浏览器的用户阅读。 分框由指定,并且可以嵌套,分区中各部分显示的内容用指定。 需要说明的是,frame 许多浏览器不支持它。分框可以将窗口横向分成几个部分,也可以纵
向分成几个部分,还可以混合分框 框架结构标记可以嵌套,用以实现大框架中的小框架。它主要有两个属性:ROwS 和COLS,它们可以将浏览器页面分为N行M列,当然也可以各自独立使用。下面来看 个框架结构的例子。其HIML源文件如下所示。 > 标记有以下主要属性: SRC属性指定框架单元的URL源,如第6行中指出的是当前主机当前目录下的“ahtm 文件。即在此框中显示“ahtm”的内容 NAME属性为该框架单元起个标识名,主要用来为将来改变框架内容提供入口 SCROLLING属性设置框架是否使用滚动务。有YES、NO和AUTO三个值,分别表 示强制使用滚动条,禁止使用滚动条和自动判断使用滚动条。 2.6表单的应用 1.什么是表单 HIML提供的表单是用来将用户数据从浏览器传递给Web服务器的。例如可以利用表单建 立一个录入界面,也可以利用表单对数据库进行查询。在这里需要声明的是,表单的操作是 与服务器进行交互的操作,而服务器端的操作是通过服务器端的程序来实现的。实现在服务 器端的操作有许多种方式,其中ASP(动态服务网页)的方式就是一种,它可以通过ADO 方式与多种数据库相连。 ASP( Active Server Page)程序是在服务器端工作,并且通过服务器端的编译动态 地送出HIML文件给客户端,它负责处理HIML文件与运行在服务器端的程序之间的数据 交换。当用户输入他们的信息(这个信息可以是查询条件,也可以是传送给服务器的某些内 容)并提交给服务器后,便激活了一个ASP程序。该ASP程序又可以调用操作系统下的其 他程序(例如数据库管理系统)完成读者的查询任务,当操作系统下的程序完成查询之后, 便把查询结果传给ASP,通过ASP传给Web服务器。由此可以看出,ASP程序在用户与服 务器之间进行交互查询时所起的重要作用 2.表单的标记 表单就是为 Internet网络用户在浏览器上建立一个交互接口,使 Internet网络用户可以在这 个接口上输入自己的信息,然后使用提交按钮,将 Internet网络用户的输入信息传送给web 服务器
4 向分成几个部分,还可以混合分框。 框架结构标记可以嵌套,用以实现大框架中的小框架。它主要有两个属性:ROWS 和 COLS,它们可以将浏览器页面分为 N 行 M 列,当然也可以各自独立使用。下面来看一 个框架结构的例子。其 HTML 源文件如下所示。 西电经管院 标记有以下主要属性: SRC 属性 指定框架单元的 URL 源,如第 6 行中指出的是当前主机当前目录下的“a.htm” 文件。即在此框中显示“a.htm”的内容。 NAME 属性 为该框架单元起个标识名,主要用来为将来改变框架内容提供入口。 SCROLLING 属性 设置框架是否使用滚动务。有 YES、NO 和 AUTO 三个值,分别表 示强制使用滚动条,禁止使用滚动条和自动判断使用滚动条。 2.6 表单的应用 1. 什么是表单 HTML 提供的表单是用来将用户数据从浏览器传递给 Web 服务器的。例如可以利用表单建 立一个录入界面,也可以利用表单对数据库进行查询。在这里需要声明的是,表单的操作是 与服务器进行交互的操作,而服务器端的操作是通过服务器端的程序来实现的。实现在服务 器端的操作有许多种方式,其中 ASP(动态服务网页)的方式就是一种,它可以通过 ADO 方式与多种数据库相连。 ASP(Active Server Page)程序是在服务器端工作,并且通过服务器端的编译动态 地送出 HTML 文件给客户端,它负责处理 HTML 文件与运行在服务器端的程序之间的数据 交换。当用户输入他们的信息(这个信息可以是查询条件,也可以是传送给服务器的某些内 容)并提交给服务器后,便激活了一个 ASP 程序。该 ASP 程序又可以调用操作系统下的其 他程序(例如数据库管理系统)完成读者的查询任务,当操作系统下的程序完成查询之后, 便把查询结果传给 ASP,通过 ASP 传给 Web 服务器。由此可以看出,ASP 程序在用户与服 务器之间进行交互查询时所起的重要作用。 2. 表单的标记 表单就是为 Internet 网络用户在浏览器上建立一个交互接口,使 Internet 网络用户可以在这 个接口上输入自己的信息,然后使用提交按钮,将 Internet 网络用户的输入信息传送给 Web 服务器
在HIML中,有一个专门的标记FORM提供表单的功能,由表单开始标记 FORM标记有以下主要属性: (1) ACTION属性是用来指出,当这个FORM提交后需要执行的驻留在Web服务器上的 程序名(包括路径)是什么。一旦 Internet网络用户提交输入信息后服务器便激活这个程序, 完成某种任务。例如:,> 其中TYPE属性是用来说明提供给用户进行信息输入的类型是什么。例如是文本框、单选按 钮或多选按钮。它的取值如下 TYPE=“TEXT 表示在表单中使用单行文本框 =“ PASSWORD”表示在表单中为用户提供密码输入框 =“RADO表示在表单中使用单选按钮 =“ CHECKBOX”表示在表单中使用多选按钮 =“ SUBMIT表示在表单中使用提交按钮 =“ RESET”表示在表单中使用重置按钮 (1)文字输入和密码输入 用一个例子说明文字输入和密码输入的制作 这是个测试页 请输入您的真实姓名: 您的主页的网址: 密码:
5 在 HTML 中,有一个专门的标记 FORM 提供表单的功能,由表单开始标记 和表单结束标记组成,表单中可以设置文本框、按钮或下拉菜单,它们也是通过 标记完成。在表单的开始标记中带有两个属性:ACTION 和 METHOD。书写表单的 HTML 格式如下 … FORM 标记有以下主要属性: (1)ACTION 属性是用来指出,当这个 FORM 提交后需要执行的驻留在 Web 服务器上的 程序名(包括路径)是什么。一旦 Internet 网络用户提交输入信息后服务器便激活这个程序, 完成某种任务。例如: … 当用户点击“提交”按钮以后,Web 服务器上的“login.asp”将接收用户输入的信息,以登记用 户信息。 (2)METHOD 属性是用来说明从客户端浏览器将 Internet 网络用户输入的信息传送给 Web 服务器时所使用的方式,它有两种方式:POST 和 GET。默认的方式是 GET,这两者的区 别是在使用 POST 时,表单中所有的变量及其值都按一定的规律放入报文中,而不是附加在 ACTION 所设定的 URL 之后。在使用 GET 时将 FORM 的输入信息作为字符串附加在 ACTION 所设定的 URL 的后面,中间用“?”隔开,即在客户端浏览器的地址栏中可以直接 看见这些内容。 3.HTML 中的 INPUT 标记 HTML 中的 INPUT 标记是表单中最常用的标记。我们在网页上所见到的文本框、按钮等等 都由这个标记引出的。下面是 INPUT 标记的标准格式: 其中 TYPE 属性是用来说明提供给用户进行信息输入的类型是什么。例如是文本框、单选按 钮或多选按钮。它的取值如下: TYPE = “TEXT” 表示在表单中使用单行文本框 = “PASSWORD” 表示在表单中为用户提供密码输入框 = “RADIO” 表示在表单中使用单选按钮 = “CHECKBOX” 表示在表单中使用多选按钮 = “SUBMIT”表示在表单中使用提交按钮 = “RESET” 表示在表单中使用重置按钮 (1)文字输入和密码输入 用一个例子说明文字输入和密码输入的制作 这是个测试页 请输入您的真实姓名: 您 的 主 页 的 网 址 : 密码:
INPUT TYPE= SUBMIT VALUE=”发送"> BODY> (2)复选框( Checkbox)和单选框( Radio button) HTMl> 这是个测试页 选择一种你喜爱的水果 香蕉 草莓 橘子 选择你所喜爱的运动 足球 篮球 排球 br> C /HTML> (3)按钮的制作 在上面几个例子中,都有两个按扭,一个是“发送”按钮,另一个“重置”按钮。其实“发送”按 钮真正的含义叫“提交”即当 Internet网络用户用鼠标单击这个按钮后,用户输入的信息便提 交给一个驻留在Web服务器上的程序,让服务器进行处理,其典型的格式:。提交按钮在FORM中是必不可少的,前几个例子只是 说明 INPUT语句中类型的使用,作为FORM语句并不完整,每个FORM中有且仅有一个 提交按钮。当设置“提交”按钮标记时,如果缺省ⅥALUE属性,则浏览器窗口中的按钮上出 现“ SUBMIT"的字样,这个字样也可以自己设定,改变按钮上的提示。例如:VLUE=提交”。 另一种在浏览器常用的按钮叫“重置”按钮,当 Internet网络用户用鼠标单击这个按 钮后,网络用户输入的信息被清除,让网络用户重新输入信息。其典型的格式:,而且在这个标记设置中如果缺省ⅥALUE属性,则浏览器 窗口中的按钮上出现“ RESET”的字样,这个字样也可以自己设定,来改变按钮上的提示,例 如:ⅥALUE=重新输入”。 (4)HIML中的 SELECT标记 在制做HIML文件时,使用 西安电子科技大学 6
6 (2)复选框(Checkbox) 和 单选框(Radio Button) 这是个测试页 选择一种你喜爱的水果: 香蕉 草莓 橘子 选择你所喜爱的运动: 足球 篮球 排球 (3)按钮的制作 在上面几个例子中,都有两个按扭,一个是“发送”按钮,另一个“重置”按钮。其实“发送”按 钮真正的含义叫“提交”即当 Internet 网络用户用鼠标单击这个按钮后,用户输入的信息便提 交给一个驻留在 Web 服务器上的程序,让服务器进行处理,其典型的格式:。提交按钮在 FORM 中是必不可少的,前几个例子只是 说明 INPUT 语句中类型的使用,作为 FORM 语句并不完整,每个 FORM 中有且仅有一个 提交按钮。当设置“提交”按钮标记时,如果缺省 VALUE 属性,则浏览器窗口中的按钮上出 现“SUBMIT”的字样,这个字样也可以自己设定,改变按钮上的提示。例如:VALUE=“提交”。 另一种在浏览器常用的按钮叫“重置”按钮,当 Internet 网络用户用鼠标单击这个按 钮后,网络用户输入的信息被清除,让网络用户重新输入信息。其典型的格式:,而且在这个标记设置中如果缺省 VALUE 属性,则浏览器 窗口中的按钮上出现“RESET”的字样,这个字样也可以自己设定,来改变按钮上的提示,例 如:VALUE=“重新输入”。 (4)HTML 中的 SELECT 标记 在制做 HTML 文件时,使用…标记可以在浏览器窗口中设置下拉式菜单 或带有滚动条的菜单,Internet 网络用户可以在菜单中选中一个或多个选项。 西安电子科技大学
请从下面课程中选择几门选择课: 网络技术 书法 音乐欣赏 现代文学 多媒体技术 人m早平「鱼扌 ORM景装 HTML> 27HIML中的表格 下面看一个表格的例子 从这个例子可以看出一个表格有一个标题( Caption,它表明表格的主要内容,并且一般位 于表的上方;表格中由行和列分割成的单元叫做“表元”(Cell),它又分为表头(用TH标记 来表示)和表数据(用TD标记来表示):表格中分割表示的行列线称为“框线”( B order) 1.表格的标记 个表格的基本框架如下所示 Ir tata o, hc://:.3-0t1/TMLA. Exe e24 IDX TD> (1) TABLE标记 一个表格至少一个 TABLE标记,由它来决定一个表格的开始和结束,而且 TABLE标记可 以嵌套。 TABLE标记有以下五种属性: BORDER属性,指定围绕表格的框的宽度(只能用像素)。 · CELLSPACING属性,指定框线的宽度 · CELLPADDⅠNG属性,用于设置表元内容与边框线之间的间距 ALIGN属性用来控制表格本身在页面上的对齐方式。其取值可是LEFT(左 对齐)、 CENTER(居中对齐)、RGHT(右对齐) · WIDTH属性,用来设置表格的宽度,可以以像素为单位,也可用占浏览器 窗口的百分比来定义 (2) CAPTION标记
7 请从下面课程中选择几门选择课: 网络技术 书法 音乐欣赏 现代文学 多媒体技术 2.7 HTML 中的表格 下面看一个表格的例子 从这个例子可以看出一个表格有一个标题(Caption),它表明表格的主要内容,并且一般位 于表的上方;表格中由行和列分割成的单元叫做“表元”(Cell),它又分为表头(用 TH 标记 来表示)和表数据(用 TD 标记来表示);表格中分割表示的行列线称为“框线”(B order)。 1.表格的标记 一个表格的基本框架如下所示: (1)TABLE 标记 一个表格至少一个 TABLE 标记,由它来决定一个表格的开始和结束,而且 TABLE 标记可 以嵌套。TABLE 标记有以下五种属性: • BORDER 属性,指定围绕表格的框的宽度(只能用像素)。 • CELLSPACING 属性,指定框线的宽度 • CELLPADDING 属性,用于设置表元内容与边框线之间的间距。 • ALIGN 属性用来控制表格本身在页面上的对齐方式。其取值可是 LEFT(左 对齐)、CENTER(居中对齐)、RIGHT(右对齐)。 • WIDTH 属性,用来设置表格的宽度,可以以像素为单位,也可用占浏览器 窗口的百分比来定义。 (2)CAPTION 标记
CAPTION标记用来标注表格标题的。 CAPTION标记必须紧接在 TABLE开始标记之后放在 第一个TR标记之前。通过该标记所定义的表格标题一般显示在表格的上方,而且其水平方 向是居中对齐。另外,如需要对表格的标题突出显示,可以在 CAPTION标记之间加入其它 对字体进行加重显示的标记。如: CAPTION> 表格标题强调 TABLE (3)TR标记 定义表格的一行。TR标记中有两个属性,一个是ALGN属性,用来设置表行中 的每个表元在水平方向的对齐方式,其取值可以是LEFT(左对齐)、 CENTER(居中对齐) RGHT(右对齐);另一个是VLGN属性,用来设置表行中的每个表元在垂直方向的对齐 方式,其取值可以是TOP(向上对齐)、 CENTER(居中对齐)、 BOTTOM(向下对齐)。例 如,要使表行中各单元的内容水平方向右对齐、垂直方向居中对齐,可使用如下源代码: (4)TD标记 TD标记用来表示一个表行中的各个单元。TD标记内几乎可以包含所有的HML标记,甚 至还可以嵌套表格。该标记与TR标记同样具有ALGN和 VALIGN属性,如果在TD标记 和TR标记中都设置了ALGN和 VALIGN属性,而且它们所设置的属性值不相同,这时以 TH标记所设置的属性值为准。另外,TD标记还有两个属性,一个是WDIH属性,用来 设置表元的宽度,另一个 HEIGHT属性,用来设置表元的高度。这两个属性的取值单位都 是像素。在同一行中将多个表元设置为不同高度,或者在同一列中将多个表元设置为不同宽 度,都有可能导致不可预料的结果 2.表格使用实例 在这个实例中,通过制作一个登记表格来给大家来说明如何制作一个比较复杂的表格。在表 格中经常会出现跨多行、多列的表元,这就要利用TD标记另外两个属性,即 COLSPAN和 ROWSPAN属性。例如 TD COLSPAN=3>登记照 表示这个表项标题将横跨三个表项的位置 登记照 表示这个表项标题将纵跨三个表项的位置 另外每个表元还可以设置其背景颜色。例如 登记照 还可以在表格中插入超级链接或在表格中插入图片,如果能对这个例子举一反三的 话,那么仅需制作一个无框线的表格,就可以把各种数据按照自己所希望的形式在页面进行 布置。 下面就给出一个具体的实例 HTML> 表格综合实例
8 CAPTION 标记用来标注表格标题的。CAPTION 标记必须紧接在 TABLE 开始标记之后放在 第一个 TR 标记之前。通过该标记所定义的表格标题一般显示在表格的上方,而且其水平方 向是居中对齐。另外,如需要对表格的标题突出显示,可以在 CAPTION 标记之间加入其它 对字体进行加重显示的标记。如: 表格标题强调 ………. (3)TR 标记 定义表格的一行。TR 标记中有两个属性,一个是 ALIGN 属性,用来设置表行中 的每个表元在水平方向的对齐方式,其取值可以是 LEFT(左对齐)、CENTER(居中对齐)、 RIGHT(右对齐);另一个是 VLIGN 属性,用来设置表行中的每个表元在垂直方向的对齐 方式,其取值可以是 TOP(向上对齐)、CENTER(居中对齐)、BOTTOM(向下对齐)。例 如,要使表行中各单元的内容水平方向右对齐、垂直方向居中对齐,可使用如下源代码: (4)TD 标记 TD 标记用来表示一个表行中的各个单元。 TD 标记内几乎可以包含所有的 HTML 标记,甚 至还可以嵌套表格。该标记与 TR 标记同样具有 ALIGN 和 VALIGN 属性,如果在 TD 标记 和 TR 标记中都设置了 ALIGN 和 VALIGN 属性,而且它们所设置的属性值不相同,这时以 TH 标记所设置的属性值为准。另外, TD 标记还有两个属性,一个是 WIDTH 属性,用来 设置表元的宽度,另一个 HEIGHT 属性,用来设置表元的高度。这两个属性的取值单位都 是像素。在同一行中将多个表元设置为不同高度,或者在同一列中将多个表元设置为不同宽 度,都有可能导致不可预料的结果。 2.表格使用实例 在这个实例中,通过制作一个登记表格来给大家来说明如何制作一个比较复杂的表格。在表 格中经常会出现跨多行、多列的表元,这就要利用 TD 标记另外两个属性,即 COLSPAN 和 ROWSPAN 属性。例如 登记照 表示这个表项标题将横跨三个表项的位置; 登记照 表示这个表项标题将纵跨三个表项的位置; 另外每个表元还可以设置其背景颜色。例如 登记照 还可以在表格中插入超级链接或在表格中插入图片,如果能对这个例子举一反三的 话,那么仅需制作一个无框线的表格,就可以把各种数据按照自己所希望的形式在页面进行 布置。 下面就给出一个具体的实例 HTML> 表格综合实例
大奖赛登记表 tD bgcolor= LightGoldenrodYellow>报名号 757 女 IDrowspan=2> 江小丽 推荐单位 宇宙公司 L上 三心 大奖影 67生另 名 若单位学宙谷面 网页脚本语言— JavaScript 21 JavaScript的基础知识 1.什么是脚本语言 脚本语言是一种简单的描术性语言,它是针对HIML语言不能很好地解决动态交互这个缺 点而引入的,它能对Web页面中的元素进行控制。一般来说,脚本语言是通过一个 的标记嵌入到HIML文档中,并可以被浏览器解释执行,插入的脚本语言就如同子程序 样被HTML元素所调用,成为HTML的一部分。目前比较流行的脚本语言有网景公司 ( Netscape)的 JavaScript和微软公司( Microsoft)的 VBScript。 JavaScript是基于 Netscape浏览器的,类似于Java编程语言的脚本语言,并且是 种基于对象的、面向 Internet或 Intranet的编程语言,使用它可以开发关于 Internet或 Intranet 客户端和服务器的应用程序,也可以方便地嵌入到计算机文件中。由于 JavaScript是第一个 在wwW上使用的脚本语言,因而它一度是最流行的Web站点脚本语言,用它可以方便地 编排HIML网页,同时还可以控制动态HIML Ⅴ SCript是 Microsoft公司在 isual basic编程语言的基础上设计的,由于其在企业 界广为流行,且与 Microsoft公司的其它产品有着密切的联系, VBScript的使用范围越来越 大,逐渐成为一种主要的脚本语言。 2. JavaScript的产生与发展 JavaScript语言起初并不叫此名称,它的早期是 Netscape的开发者们称之为 Mocha”的语言, 开始在网上进行β测试(由软件的多个用户在其实际的使用环境下进行的测试叫β测试〕时 名字改为 LiveScript”,Sun公司推出Java之后, Netscape引进了Sun的有关概念,在其发 行 Netscape20β测试版时才称其为“ Javascript”。它不仅支持Java的 Applet小程序,同时 向web页的制作者提供一种嵌入HIML文档进行编程的、基于对象的 Script(脚本)程序 设计语言,采用的许多结构与Java相似
9 大奖赛登记表 报名号 757 性别 女 姓名 江小丽 推荐单位 宇宙公司 二、 网页脚本语言——JavaScript 2.1 JavaScript 的基础知识 1. 什么是脚本语言 脚本语言是一种简单的描术性语言,它是针对 HTML 语言不能很好地解决动态交互这个缺 点而引入的,它能对 Web 页面中的元素进行控制。一般来说,脚本语言是通过一个 的标记嵌入到 HTML 文档中,并可以被浏览器解释执行,插入的脚本语言就如同子程序一 样被 HTML 元素所调用,成为 HTML 的一部分。目前比较流行的脚本语言有网景公司 (Netscope)的 JavaScript 和微软公司(Microsoft)的 VBScript。 JavaScript 是基于 Netscape 浏览器的,类似于 Java 编程语言的脚本语言,并且是 一种基于对象的、面向Internet或Intranet的编程语言,使用它可以开发关于Internet或Intranet 客户端和服务器的应用程序,也可以方便地嵌入到计算机文件中。由于 JavaScript 是第一个 在 WWW 上使用的脚本语言,因而它一度是最流行的 Web 站点脚本语言,用它可以方便地 编排 HTML 网页,同时还可以控制动态 HTML。 VBScript 是 Microsoft 公司在 Visual Basic 编程语言的基础上设计的,由于其在企业 界广为流行,且与 Microsoft 公司的其它产品有着密切的联系,VBScript 的使用范围越来越 大,逐渐成为一种主要的脚本语言。 2.JavaScript 的产生与发展 JavaScript 语言起初并不叫此名称,它的早期是 Netscape 的开发者们称之为“Mocha”的语言, 开始在网上进行β测试(由软件的多个用户在其实际的使用环境下进行的测试叫β测试)时, 名字改为“LiveScript”, Sun 公司推出 Java 之后,Netscape 引进了 Sun 的有关概念,在其发 行 Netscape 2.0β测试版时才称其为 “JavaScript”。它不仅支持 Java 的 Applet 小程序,同时 向 Web 页的制作者提供一种嵌入 HTML 文档进行编程的、基于对象的 Script(脚本)程序 设计语言,采用的许多结构与 Java 相 似
支持 JavaScript的 Navigator2.0的网络浏览器能够解释并执行嵌在HIML中的用 JavaScript语言书写的“程序”。 JavaScript具有很多采用 CGI/PERL编写的 Script(脚本)的 能力,其优点是可以引用主机资源,响应位于服务器Web页中相应语法元素要完成的功能, 而又不与主机服务器进行交互会话。 个简单的例子 JavaScript的编程工作复杂与否和HIML文档所提供的功能大小密切相关,下面用一个简单 的例子来介绍它的编程特点 This is a test 你好 document. write"Hello, JavaScript! > JavaScript源代码被嵌在一个HIML 文档中,而且它可以出现在文档头部(HEAD节)和文档体部(BODY节)。 SCRIPT标记 的一般格式为 aScript语句串 为了使老版本的浏览器(即 Navigator2.0版以前的浏览器)避开不识别的“ JavaScript 语句串”,用 JavaScript编写的源代码可以用注解括起来,即使用HIML的注解标记,而 Navigator2x可以识别放在注解行中的 JavaScript源代码。 说明:标记可声明一个脚本程序, LAN GUAGE属性声明该脚本是一 个用 JavaScript语言编写的脚本。在和之间的任何内容都视为脚本语句,会 被浏览器解释执行。在 JavaScript脚本中,用“/作为行的注释标注 22 JavaScript语言 1. JavaScript数据类型 在 JavaScript中,数据类型是十分宽松的,程序员在声明变量时可以不指定该变量的数据类 型, JavaScript会自动地按照需要来分配适当的数据类型。这一点和JAVA或C++是截然不 同的。 JavaScript有以下几种基本的数据类型: (1)数字类型 如:34,3.14表示为十进制数 034表示为八进制数,用十进行表示其值为2 0x34表示为十六进制数,用十进行表示其值为52。 (2)字符串类型 Hello! 3)逻辑值类型 其取值仅可能是“真”或“假”,用True或Flse来表示 (4)空值
10 支持 JavaScript 的 Navigator 2.0 的网络浏览器能够解释并执行嵌在 HTML 中的用 JavaScript 语言书写的“程序”。JavaScript 具有很多采用 CGI/PERL 编写的 Script(脚本)的 能力,其优点是可以引用主机资源,响应位于服务器 Web 页中相应语法元素要完成的功能, 而又不与主机服务器进行交互会话 。 3.一 个 简 单 的 例 子 JavaScript 的编程工作复杂与否和 HTML 文档所提供的功能大小密切相关,下面用一个简单 的例子来介绍它的编程特点 。 <HTML> <HEAD><TITLE>This is a test</TITLE> </HEAD> <BODY> 你好 <SCRIPT LANGUAGE="JavaScript"> document.write "Hello,JavaScript! " </SCRIPT> </BODY> </HTML> JavaScript 源代码被嵌在一个 HTML 文档中,而且它可以出现在文档头部(HEAD 节)和文档体部 (BODY 节 )。SCRIPT 标记 的一般格式为: <SCRIPT LANGUAGE="JavaScript"> <!-- JavaScript 语 句 串 · · · --> </SCRIPT> 为了使老版本的浏览器(即 Navigator2.0 版以前的浏览器)避开不识别的“JavaScript 语句串”,用 JavaScript 编写的源代码可以用注解括起来,即使用 HTML 的注解标记<!--…-- >,而 Navigator2.x 可以识别放在注解行中的 JavaScript 源代码。 说明:<SCRIPT>标记可声明一个脚本程序,LANGUAGE 属性声明该脚本是一 个用 JavaScript 语言编写的脚本。在和之间的任何内容都视为脚本语句,会 被浏览器解释执行。在 JavaScript 脚本中,用“//”作为行的注释标注。 2.2 JavaScript 语言 1.JavaScript 数据类型 在 JavaScript 中,数据类型是十分宽松的,程序员在声明变量时可以不指定该变量的数据类 型,JavaScript 会自动地按照需要来分配适当的数据类型。这一点和 JAVA 或 C++是截然不 同的。JavaScript 有以下几种基本的数据类型: (1)数字类型 如: 34,3.14 表示为十进制数; 034 表示为八进制数,用十进行表示其值为 28; 0x34 表示为十六进制数,用十进行表示其值为 52。 (2)字符串类型 如:"Hello!"; 3)逻辑值类型 其取值仅可能是“真”或“假”,用 True 或 False 来表示。 (4)空值