《浏览器端开发技术》PPT课件.ppt

1、网络数据库管理与设计,信息科学与技术学院 周文峰,2,第5章 浏览器端开发技术,概述 HTML VBScript （自学）,3,概述,HTML（ HyperText Markup Language，超文本标记语言） HTML是指在Web上建立超文本文件的语言，是一种描述文档结构的语言。 它使用描述性的标记符来指明文档的结构。这些标记符是区分文档各个部分的分界符。 标记符为浏览器提供了HTML文件的格式信息，使得文档在浏览器中能够正确显示。,4,概述,HTML（ HyperText Markup Language，超文本标记语言） 采用HTML语言编写的网页文档是普通的文本文件，与平台无关，可被

2、任何文本编辑器进行编辑。 文件中包含两部分信息，其一是文本，其二是页面结构和格式等标记符，保存的文件类型应为纯文本文件且文件的扩展名应为.htm或.html 。,5,概述,DHTML（Dynamic HTML，动态HTML） 是Microsoft对HTML 4.0版的增强，是HTML的一种扩展和延伸。目前，高版本的浏览器都支持DHTML。 DHTML是一种在网页下载到浏览器以后仍然能够随时变换的HTML，HTML中能够做的一切在网页下载后还能够再重复。 “动态”的含义不仅仅是指页面中加入了动画、影像或声音，更重要的是指页面具有交互性，可以对页面中的内容进行控制与改变。,6,概述,XML（eXt

3、ensible Markup Language，可扩展标记语言） 由于HTML难以扩展，交互性和语义性差，缺乏弹性，人们改进了HTML从而形成了XML。 XML有利于信息的表达和结构化组织，使信息检索更为有效。 它能够根据自己的需要灵活而又容易地添加新的标记，同时又不破坏标记语言格式的统一性。,7,概述,VBScript（Microsoft Visual Basic Scripting Edition） VBScript是Visual Basic的一个子集，它将灵活的Script应用于更广泛的领域。 VBScript是ASP的缺省语言，在ASP网页中也可以使用其他脚本语言，如JavaScrip

4、t、PerlScript等。 VBScript既可以作为客户端编程语言，也可以作为服务器端编程语言。,8,HTML,HTML基本标记 用来限定文档的显示格式，分为头部标记和体部标记。 1.头部标记 和：HTML文件头部的起始和结束标记。 和：HTML文件的标题，是显示于浏览器标题栏的字符串。 和：CSS（层叠样式表，用来控制web页面外观）样式定义。,9,HTML,HTML基本标记 1.头部标记 ：该标记位于与标记之间，提供用户不可见的信息。通常用来为搜索引擎定义页面主题以及页面刷新等信息。其属性有以下几种： Name：Meta名字。 Content：定义页面内容，一些特定内容要与http-e

5、quiv属性配合使用。 Http-equiv：说明content属性内容的类别。,10,HTML,HTML基本标记 1.头部标记 例：头部标记应用实例 头部标记演示实例 ,11,HTML,HTML基本标记 2.体部标记：有Body、文字显示和段落控制标记、设置图像和超链接、列表和预定义格式标记等。 (1)和标记：表明HTML文件体部的开始和结束。,12,HTML,Body标记本身可含有属性，见表所示：,13,HTML,HTML基本标记 注意： HTML文件中颜色取值有两种表示法： RGB值表示：用颜色的十六进制RGB值，为“#RRGGBB”，分别表示三种颜色分量。例如“#ff0000”表示红色

6、，“#00ff00”表示绿色，“#0000ff”表示蓝色。 英文单词颜色常量表示：如“Red”表示红色；“Blue”表示蓝色。 无论是RGB表示，还是单词常量表示，都不区分大小写。,14,HTML,HTML基本标记 例:体部标记应用实例 体部标记演示实例 这是一个HTML语言实例 ,15,HTML,16,HTML,HTML基本标记 文字显示和段落控制标记： 文字显示属性主要有字体、字号、颜色； 段落控制显示对象的分段。,17,18,HTML,HTML基本标记 例:文字显示和段落控制标记应用实例： 文字显示和段落控制标记演示实例 你好！-位于左侧 你好！-位于中央 你好！-粗体文字 你好！-蓝色

7、宋体字 ,19,HTML基本标记,20,HTML,HTML基本标记 (3) 图像标记和：在Web上有很多种图像格式可以被浏览器解释。 其中常见的有以下几种：GIF格式（.gif文件）、位图格式（.bmp文件）、JPEG格式（.jpg、.jpeg文件）和PNG格式（.png）等。 用标记可以向页面中插入一幅图像。,21,HTML,Img标记的属性见表所示：,22,HTML,HTML基本标记 (4)超链接标记和 ：HTML最显著的优点就在于它支持文档的超链接，用户可以很方便地在不同文档以及同一文档的各个位置之间跳转。 超链接由两部分组成：锚标和目标点。锚标是显示在本页面中的可被触发的超链文本或图像

8、，目标点是用来描述当超链接被触发后要链接到的URL地址信息。 超链接标记的格式为： 超链接文本或图像 ,23,HTML,HTML基本标记 例:超链接标记应用实例 超链接标记演示实例 网络数据库应用技术 第一章 概述 第二章 SQL语言 第三章 网络数据库基础 第四章 网络数据库管理系统SQL Server 2000 第二章 SQL语言 21 概述 22 SQL的数据定义 23 SQL的数据查询 24 SQL的数据更新 25 嵌入式SQL语言,24,HTML基本标记,25,HTML,HTML基本标记 (5)列表标记：列表标记是HTML的一个基本结构，有三种类型列表： 无序列表（Unordered

9、 list）：列表项。通过和来实现。 有序列表（Ordered list）：列表项。通过和来实现。 定义列表（Definition list）：列表项。通过、和来实现。,26,HTML,HTML基本标记 例:列表标记应用实例 列表标记演示实例 以下是无序列表清单： 概述 SQL的数据定义 SQL的数据查询 SQL的数据更新 嵌入式SQL语言 以下是有序列表清单： Li概述 SQL的数据定义 SQL的数据查询 SQL的数据更新,嵌入式SQL语言 以下是定义列表清单： 第二章 SQL语言 概述 SQL的数据定义 第三章 网络数据库基础 通信协议 网络数据库 ,27,HTML基本标记,28,HTML

10、,HTML基本标记 (6) 预定格式（Preformatted）标记：可以使信息完全按照HTML文件中编排的格式原样显示于浏览器中，该标记的格式为：预定格式的信息 。 一般来说，如果不使用预定格式标记，浏览器在显示HTML文件时只保留格式符，而忽略源文件中的回车和空格，并根据需要对原文件的字体、大小进行调整。,29,HTML,HTML基本标记 例:预定格式标记应用实例 预定格式标记演示实例 概述 21 SQL的数据定义 22 SQL的数据查询 23 SQL的数据更新 24 嵌入式SQL语言 ,30,HTML基本标记,31,HTML,表格（Table） 1表格的定义 标题内容 表格内容 表格内容

11、 ,32,HTML,表格（Table） 其中，：标志表格结构的起始和结束。 ：是可选项，该标记中的内容是表 格的标题。 ：标志一个表格行的开始和结束。 ：一个表格行中可以包含多个表格项，该标记 对用来标志每个表格项的内容和显示特性。,33,表格（Table） 2表格属性 标记、和的属性用来定义表格的显示特性。 其中的各属性描述整个表格的显示特性。 行控制标记的各属性定义该行的显示特性。 表格项控制标记的各属性定义该项的显示特性。,HTML,34,表格（Table） 标记属性见表所示：,35,表格（Table） 标记属性见表所示：,36,HTML,表格（Table） 例： 表格演示实例 专业设置

12、表 系名 专业 计算机科学与工程系 计算机及应用专业,37,表格（Table） 计算机控制专业 计算机教育专业 化学与化学工程系 化学工程专业 化学教育专业 ,38,表格（Table）,39,HTML,表单控制（Form） 1表单定义 表单定义的语法格式如下： Textarea 定义 Select定义 ,40,HTML,表单控制（Form） 1表单定义 Form标记的属性含义为： Method属性：取值为Post或Get，二者的区别是Get方法将在浏览器的URL栏中显示所传递变量的值，而Post方法则不显示。另外，在服务器端的数据提取方式也不同。 Action属性：指出了用户所提交的数据将由哪

13、个服务器的哪个程序处理，可处理用户提交数据的服务器程序种类较多，如CGI程序、ASP脚本程序、PHP程序等 。,41,HTML,表单控制（Form） 2表单的输入域 有三类定义方式：Input、Textarea和Select。 以标记定义的多种输入域，包括Text，Radio，Checkbox，Password，Hidden，Button、Submit和Reset等。 以标记定义的文本域。 以标记和定义的下拉列表框 。,42,HTML,表单常用的输入域如表所示：,43,表单控制（Form） 例： 表单演示实例 欢迎，请登录！ 用户名称 性别 ,44,表单控制（Form） 男 女 用户密码 年龄

14、 所在城市 ,45,表单控制（Form） 北京市 天津市 上海市 山西省 河北省 江苏省 爱好 文学 音乐 体育,46,表单控制（Form） 个人简历 ,47,表单控制（Form）,48,HTML,框架（Frame） 1框架的定义：首先确定如何分割窗口，然后建立描述窗口分割的主文件，再为每个框架建立相应的HTML文件。 主文件的定义方法是： 头部标记 字符串,49,HTML,框架（Frame） 其中，标记定义窗口分割的方式（横向或纵向）和大小。 可以嵌套，内层的表示对已分割的窗口再进行分割的方式和大小。 标记指明框架所对应的HTML文件。标记的个数应与其所属的标记分割的框架数目相同，与窗口的对应关系是按排列顺序逐个对应。 标记定义了若浏览器不支持框架时所显示的内容。,50,2框架属性： 标记的属性见表所示：,51,框架（Frame） 标记的属性见表所示：,52,HTML,框架（Frame） 例:框架应用实例：利用框架将窗口分成三个子窗口，上窗口是标题，文件名为top.html，左窗口是内容介绍，文件名为left.html，右窗口是目录内容，文件名为right.html。主文件chap8-10.html的内容： 框架