浏览器端开发技术.ppt

网络数据库管理与设计 信息科学与技术学院 周文峰 1 第5章 浏览器端开发技术 n概述 nHTML nVBScript （自学） 2 概述 nHTML（ HyperText Markup Language， 超文本标记语言） HTML是指在Web上建立超文本文件的语言，是一 种描述文档结构的语言。 它使用描述性的标记符来指明文档的结构。这 些标记符是区分文档各个部分的分界符。 标记符为浏览器提供了HTML文件的格式信息， 使得文档在浏览器中能够正确显示。 3 概述 nHTML（ HyperText Markup Language， 超文本标记语言） 采用HTML语言编写的网页文档是普通的文本文件 ，与平台无关，可被任何文本编辑器进行编辑。 文件中包含两部分信息，其一是文本，其二是页 面结构和格式等标记符，保存的文件类型应为纯 文本文件且文件的扩展名应为.htm或.html 。 4 概述 nDHTML（Dynamic HTML，动态HTML） 是Microsoft对HTML 4.0版的增强，是HTML的一 种扩展和延伸。目前，高版本的浏览器都支持 DHTML。 DHTML是一种在网页下载到浏览器以后仍然能够 随时变换的HTML，HTML中能够做的一切在网页 下载后还能够再重复。 “动态”的含义不仅仅是指页面中加入了动画、 影像或声音，更重要的是指页面具有交互性， 可以对页面中的内容进行控制与改变。 5 概述 nXML（eXtensible Markup Language，可 扩展标记语言） 由于HTML难以扩展，交互性和语义性差，缺乏 弹性，人们改进了HTML从而形成了XML。 XML有利于信息的表达和结构化组织，使信息检 索更为有效。 它能够根据自己的需要灵活而又容易地添加新 的标记，同时又不破坏标记语言格式的统一性 。 6 概述 nVBScript（Microsoft Visual Basic Scripting Edition） VBScript是Visual Basic的一个子集，它将灵 活的Script应用于更广泛的领域。 VBScript是ASP的缺省语言，在ASP网页中也可 以使用其他脚本语言，如JavaScript、 PerlScript等。 VBScript既可以作为客户端编程语言，也可以 作为服务器端编程语言。 7 HTML nHTML基本标记 用来限定文档的显示格式，分为头部标记和体部 标记。 1.头部标记 n和：HTML文件头部的起始和结束标记。 n和：HTML文件的标题，是显示于浏览 器标题栏的字符串。 n和：CSS（层层叠样样式表，用来控制 web页页面外观观）样式定义。 8 HTML nHTML基本标记 1.头部标记 n：该标记位于与标记之间，提供 用户不可见的信息。通常用来为搜索引擎定义 页面主题以及页面刷新等信息。其属性有以下几种： Name：Meta名字。 Content：定义页面内容，一些特定内容要与http- equiv属性配合使用。 Http-equiv：说明content属性内容的类别。 9 HTML nHTML基本标记 1.头部标记 n例：头部标记应用实例 头部标记演示实例 10 HTML nHTML基本标记 2.体部标记：有Body、文字显示和段落控制标记、 设置图像和超链接、列表和预定义格式标记等。 n(1)和标记：表明HTML文件体部的开始 和结束。 11 HTML nBody标记本身可含有属性，见表所示： 属性名 取值 设置含义 默认值 Bgcolor 颜色值 页面背景颜色设置 #FFFFFF Text 颜色值 HTML文件中文字的颜色 #000000 Link 颜色值 HTML文件中待链接的超链接对象的颜色 无 Alink 颜色值 HTML文件中链接中的超链接对象的颜色 无 Vlink 颜色值 HTML文件中已链接的超链接对象的颜色 无 Background 图像文件 名 页面的背景图像 无 Topmargin 整数 页面显示区距窗口上边框的距离，以像素点 为单位 0 Leftmargin 整数 页面显示区距窗口左边框的距离，以像素点 为单位 0 12 HTML nHTML基本标记 注意： HTML文件中颜色取值有两种表示法： RGB值表示：用颜色的十六进制RGB值，为 “#RRGGBB”，分别表示三种颜色分量。例如 “#ff0000”表示红色，“#00ff00”表示绿色 ，“#0000ff”表示蓝色。 英文单词颜色常量表示：如“Red”表示红色； “Blue”表示蓝色。 无论是RGB表示，还是单词常量表示，都不区分大 小写。 13 HTML nHTML基本标记 例:体部标记应用实例 体部标记演示实例 这是一个HTML语言实例 14 HTML 15 HTML nHTML基本标记 n文字显示和段落控制标记： n文字显示属性主要有字体、字号、颜色； n段落控制显示对象的分段。 16 属性名内含属性设置含义 Face控制文字的显示字体 Size控制文字的显示字号 Color控制文字的显示颜色 控制文字的加粗显示 控制文字的斜体显示 控制文字的带下划线显示 控制文字的所选文字大字体显示 控制文字的所选文字小字体显示 控制标题的级别，数字越大，显示标题字越小 Align Center控制文字的居中显示 Left控制文字的居左显示 Right控制文字的居右显示 块容器标记符，其中的内容是一个独立的段落 分隔线标记符，属性中可含Width（分隔线宽度）、Color（分 隔线颜色） 换行标记符作用相当于插入一个回车符 用于划分段落，控制文本放置，常可以省略 用于控制文字居中对齐 用于控制文字左对齐 用于控制文字右对齐 17 HTML nHTML基本标记 n例:文字显示和段落控制标记应用实例： 文字显示和段落控制标记演示实例 “你好！-位于左侧“ “你好！-位于中央“ 你好！-粗体文字 你好！-蓝色宋体字 18 nHTML基本标记 19 HTML nHTML基本标记 (3) 图像标记和：在Web上有很多 种图像格式可以被浏览器解释。 n其中常见的有以下几种：GIF格式（.gif文件 ）、位图格式（.bmp文件）、JPEG格式（.jpg 、.jpeg文件）和PNG格式（.png）等。 n用标记可以向页面中插入一幅图像。 20 HTML nImg标记的属性见表所示： 属性名 设置含义 Src 图像文件的地址。该属性值必须指明。值的形式可以 是一个本地文件名，也可以是一个URL形式，例如： /images/logo.gif Border 图像边框粗细。值为整数，若为0，表示无边框，值 越大，边框越粗 Width 图像宽度。值为整数，单位为屏幕像素点，若不指出 该属性值，则浏览 器根据图像的实际尺寸显示 Height 图像高度。单位为屏幕像素点，若不指出该属性值， 则浏览 器根据图像实际尺寸显示 Alt 若设置了该属性值，则当鼠标移至该图像区域时， 将以小标签显 示该属性的值 21 HTML nHTML基本标记 (4)超链接标记和 ：HTML最显著的优点就 在于它支持文档的超链接，用户可以很方便地在 不同文档以及同一文档的各个位置之间跳转。 超链接由两部分组成：锚标和目标点。锚标是显 示在本页面中的可被触发的超链文本或图像，目 标点是用来描述当超链接被触发后要链接到的 URL地址信息。 超链接标记的格式为： 超链接文本或图像 22 HTML nHTML基本标记 例:超链接标记应用实例 超链接标记演示实例 网络数据库应用技术 第一章 概述 第二章 SQL语言 第三章 网络数据库基础 第四章 网络数据库管理系统SQL Server 2000 第二章 SQL语言 21 概述 22 SQL的数据定义 23 SQL的数据查询 24 SQL的数据更新 25 嵌入式SQL语言 23 nHTML基本标记 24 HTML nHTML基本标记 (5)列表标记：列表标记是HTML的一个基本结构， 有三种类型列表： n无序列表（Unordered list）：列表项。通 过和来实现。 n有序列表（Ordered list）：列表项。通过 和来实现。 n定义列表（Definition list）：列表项。 通过、和来实现。 25 HTML nHTML基本标记 例:列表标记应用实例 列表标记演示实例 以下是无序列表清单： 概述 SQL的数据定义 SQL的数据查询 SQL的数据更新 嵌入式SQL语言 以下是有序列表清单： Li概述 SQL的数据定义 SQL的数据查询 SQL的数据更新 嵌入式SQL语言 以下是定义列表清单： 第二章 SQL语言 概述 SQL的数据定义 第三章 网络数据库基础 通信协议 网络数据库 26 nHTML基本标记 27 HTML nHTML基本标记 (6) 预定格式（Preformatted）标记：可以使信息 完全按照HTML文件中编排的格式原样显示于浏览 器中，该标记的格式为：预定格式的信息 。 一般来说，如果不使用预定格式标记，浏览器在 显示HTML文件时只保留格式符，而忽略源文件中 的回车和空格，并根据需要对原文件的字体、大 小进行调整。 28 HTML nHTML基本标记 例:预定格式标记应用实例 预定格式标记演示实例 概述 21 SQL的数据定义 22 SQL的数据查询 23 SQL的数据更新 24 嵌入式SQL语言 29 nHTML基本标记 30 HTML n表格（Table） 1表格的定义 标题内容 表格内容 表格内容 31 HTML n表格（Table） 其中，：标志表格结构的起始和结束。 ：是可选项，该标记中的内容是表 格的标题。 ：标志一个表格行的开始和结束。 ：一个表格行中可以包含多个表格项，该标记 对用来标志每个表格项的内容和显示特性。 32 n表格（Table） 2表格属性 n标记、和的属性用来定义表格的显 示特性。 n其中的各属性描述整个表格的显示特性。 n行控制标记的各属性定义该行的显示特性。 n表格项控制标记的各属性定义该项的显示特性。 HTML 33 n表格（Table） n标记属性见表所示： 属 性 名含 义 Border 表格边框粗细，该值为0，则表格没有边框，值越大，则表格边框越 粗。 Width 表格宽度，以相对于充满窗口的百分比计（如60%）或以屏幕像素点 数计 Cellpadding每个表项内容与表格边框之间的距离，以像素点为单位 Cellspacing表格边框之间的距离，以像素点为单位 Bordercol表格边框的颜色 Background表格的背景图 Align表格的位置 34 n表格（Table） n标记属性见表所示： 属性名含 义 Align本表格项的横向排列方式 Bgcolor本表格项的背景色 Valign本表格项的纵向排列方式 Width本表格项宽度（受Table和Tr的Width属性值制约） Height本表格项高度，以像素点为单位（受Tr的Height属性值制约） Background本表格项的背景图像 Colspan按列横向结合。例如该值为2，表示本表格项在宽度上占用2列 Rowspan按行纵向结合。例如该值为2，表示本表格项在高度上占用2行 35 HTML n表格（Table） 例： 表格演示实例 专业设置表 系名 专业 计算机科学与工程系 计算机及应用专业 36 n表格（Table） 计算机控制专业 计算机教育专业 化学与化学工程系 化学工程专业 化学教育专业 37 n表格（Table） 38 HTML n表单控制（Form） 1表单定义 n表单定义的语法格式如下： Textarea 定义 Select定义 39 HTML n表单控制（Form） 1表单定义 nForm标记的属性含义为： Method属性：取值为Post或Get，二者的区别是Get 方法将在浏览器的URL栏中显示所传递变量的值， 而Post方法则不显示。另外，在服务器端的数据提 取方式也不同。 Action属性：指出了用户所提交的数据将由哪个服 务器的哪个程序处理，可处理用户提交数据的服务 器程序种类较多，如CGI程序、ASP脚本程序、 PHP程序等 。 40 HTML n表单控制（Form） 2表单的输入域 n有三类定义方式：Input、Textarea和Select。 以标记定义的多种输入域，包括Text， Radio，Checkbox，Password，Hidden，Button、 Submit和Reset等。 以标记定义的文本域。 以标记和定义的下拉列表框 。 41 HTML n表单常用的输入域如表所示： 输入域名称说 明 Text（文本框）可输入一行文字 Radio（单选按钮）当有多个选项时，只能选其中一项 Checkbox（复选框）当有多个选项时，可以选其中多项 Submit（提交按钮）将数据传递给服务器 Password（密码输入框 ） 用户输入的字符以“*”显示 Reset（重置按钮）将用户输入的数据清除 Hidden（隐藏域） 在浏览器中不显示，但可通过程序取其值或改变值。它主要用于 浏览器向服务器传递数据而不想让浏览器用户知道的情形 Button（按钮）普通按钮，按下后的操作需设计程序完成 Textarea（文本域）可输入多行文字 Select（下拉列表）在多个可选项中进行选择，定义方法见下面的说明 42 n表单控制（Form） 例： 表单演示实例 欢迎，请登录！ 用户 名称 性别 43 n表单控制（Form） 男 女 用户 密码 年龄 所在 城市 44 n表单控制（Form） 北京市 天津市 上海市 山西省 河北省 江苏省 爱好 文学 音乐 体育 45 n表单控制（Form） 个人简历 46 n表单控制（Form） 47 HTML n框架（Frame） 1框架的定义：首先确定如何分割窗口，然后建 立描述窗口分割的主文件，再为每个框架建立相 应的HTML文件。 主文件的定义方法是： 头部标记 字符串 48 HTML n框架（Frame） 其中，标记定义窗口分割的方式（横向或纵 向）和大小。 可以嵌套，内层的表示对已分割 的窗口再进行分割的方式和大小。 标记指明框架所对应的HTML文件。标记 的个数应与其所属的标记分割的框架数目相 同，与窗口的对应关系是按排列顺序逐个对应。 标记定义了若浏览器不支持框架时所显示的 内容。 49 2框架属性： n标记的属性见表所示： 属 性 名 取 值 含 义 默认值 Rows 百分比表 示 将窗口上下（横向）分割，每个框架高度占整个 窗口高度的百分比。例如：“25%,75%”表示将 窗口分为上下两个框架，高度分别为总 窗口高度 的“25%和75%”。值的一部分也可用“*”表示 ，例如“25%，*”表示最后一个框架的高度是除 去其他框架已用去的高度 无 整数表示 将窗口上下（横向）分割，每个框架高度的像素 点数。例如：“100,600”表示将窗口分为上下两 个框架，高度分别为100和600个像素点。值的一 部分也可用“*”表示，含义同上 Cols 百分比表 示 将窗口左右（纵