《数据库原理及应用开发技术客户端开发技术》由会员分享，可在线阅读，更多相关《数据库原理及应用开发技术客户端开发技术（53页珍藏版）》请在金锄头文库上搜索。
1、Web开发技术综述开发技术综述 1 三大支撑技术三大支撑技术 2 开发技术综述开发技术综述 URL HTTP HTML客户端开发技术客户端开发技术 服务器端开发技术服务器端开发技术数据库原理及应用开发技术客户端开发技术数据库原理及应用开发技术客户端开发技术Web开发技术开发技术 1 三大支撑技术三大支撑技术 URL HTTP HTML（Unified Resource Locator）统一资源标志）统一资源标志符，互联网上进行统一命名和定位的一种标准符，互联网上进行统一命名和定位的一种标准机制。机制。 （HyperText Transportation Protocol ）Web服务器与客户进
2、行传输信息的标准协议服务器与客户进行传输信息的标准协议 。 (HyperText Markup Language)超文本标记语超文本标记语言。言。“超超”文本的含义：不限于普通文本，利文本的含义：不限于普通文本，利用普通文本表达多媒体信息。用普通文本表达多媒体信息。 。 数据库原理及应用开发技术客户端开发技术数据库原理及应用开发技术客户端开发技术Web开发技术开发技术 2开发技术综述开发技术综述两条主线：两条主线：HTMLJavascript（动态网页）（动态网页） CSS flash XMLCGI ASP PHP JSP.NET重点理解概念重点理解概念 HTML Javascript、CSS
3、JSP、.NET数据库原理及应用开发技术客户端开发技术数据库原理及应用开发技术客户端开发技术第四章第四章 客户端开发技术客户端开发技术教学目的介绍介绍HTMLHTML、CSSCSS等开发技术及相应标准，并简等开发技术及相应标准，并简要介绍要介绍JavaScriptJavaScript等技术。重点是理解掌握基本的等技术。重点是理解掌握基本的HTMLHTML语法，能手工编写简单的静态页面，能看语法，能手工编写简单的静态页面，能看懂较复杂的懂较复杂的HTMLHTML页面的语法结构，为后面服务页面的语法结构，为后面服务器端开发技术的学习做准备。器端开发技术的学习做准备。数据库原理及应用开发技术客户端开
4、发技术数据库原理及应用开发技术客户端开发技术基本教学内容基本教学内容 n nHTMLHTML基本文件结构基本文件结构n n文本相关语法文本相关语法n n图像相关语法图像相关语法n n表格语法表格语法n n超链接语法超链接语法n n表单使用方法表单使用方法n n框架使用框架使用n n样式表样式表n n脚本语言脚本语言JavaScriptJavaScript简介简介n nFlashFlash简介简介n nJavaAppletJavaApplet简介简介数据库原理及应用开发技术客户端开发技术数据库原理及应用开发技术客户端开发技术学习重点与难点学习重点与难点n n重点：HTMLHTML基本语法结构基本
5、语法结构 表格使用方法表格使用方法表单使用方法表单使用方法n n难点：表格的复杂使用方法表格的复杂使用方法利用表单与后台程序进行交互的原理及规则利用表单与后台程序进行交互的原理及规则数据库原理及应用开发技术客户端开发技术数据库原理及应用开发技术客户端开发技术HTML简介简介 n n概念：概念： HTMLHTML（HyperText Markup LanguageHyperText Markup Language），基于），基于HTTPHTTP协议，协议，在在WebWeb上以超文本方式出版本信息的国际化语言上以超文本方式出版本信息的国际化语言n n特点：特点： 非线性非线性 基本单元：超文本结点
6、基本单元：超文本结点 以链接实现不同结点间的联系以链接实现不同结点间的联系 国际性的规范国际性的规范 纯文本格式纯文本格式数据库原理及应用开发技术客户端开发技术数据库原理及应用开发技术客户端开发技术HTML的基本文档结构的基本文档结构 New Document 数据库原理及应用开发技术客户端开发技术数据库原理及应用开发技术客户端开发技术HTML的基本文档结构的基本文档结构 Hello ! Good morning !数据库原理及应用开发技术客户端开发技术数据库原理及应用开发技术客户端开发技术HTML的基本文档结构的基本文档结构文档头：要素：TITLE：显示窗口的标题META：文档的最基本的元信
7、息。除了提供文档字符集、使用语言、作者等基本信息外，还涉及对关键词和网页描述的设定。 一般给浏览器或编辑人员用，不会直接显示出来数据库原理及应用开发技术客户端开发技术数据库原理及应用开发技术客户端开发技术HTML的基本文档结构的基本文档结构文档体：文档体：浏览器真正要展现的部分。浏览器真正要展现的部分。 主要元素类型：主要元素类型：文本图像表格表单框架超链接数据库原理及应用开发技术客户端开发技术数据库原理及应用开发技术客户端开发技术HTML的基本文档结构的基本文档结构 注意：大多数元素/子元素为成对出现，许多元素内部可包含其它元素，但各元素间不得出现错位嵌套的情况！即如下情况绝不允许出现！ 实
8、际内容 数据库原理及应用开发技术客户端开发技术数据库原理及应用开发技术客户端开发技术页面背景控制页面背景控制 n n n n 数据库原理及应用开发技术客户端开发技术数据库原理及应用开发技术客户端开发技术字体与颜色字体与颜色n n标题标题 这是一级标题这是一级标题n nFONT color=red size=6 字体控制字体控制数据库原理及应用开发技术客户端开发技术数据库原理及应用开发技术客户端开发技术文本类元素用法文本类元素用法 1）空格 通常会将多个空格压缩为单个通常会将多个空格压缩为单个 被浏览器解释为不可压缩的字符，当被浏览器解释为不可压缩的字符，当需要显示多
9、个空格时可用到需要显示多个空格时可用到2）字体属性控制 FONT color=red size=6 字体控制字体控制数据库原理及应用开发技术客户端开发技术数据库原理及应用开发技术客户端开发技术文本类元素用法文本类元素用法3）行与段落控制n n段落控制： ：相关字体大小，颜色控制n n行控制： n n预先格式化文本 它保留了空格和换行它保留了空格和换行n n文本块 数据库原理及应用开发技术客户端开发技术数据库原理及应用开发技术客户端开发技术列表控制列表控制n n无序列表 项目项目11项目项目22项目项目33 n n编号列表项目项目11项目项目22项目项目33 n n定义式列表项目项目11项目项目
10、1.11.1项目项目22数据库原理及应用开发技术客户端开发技术数据库原理及应用开发技术客户端开发技术图像控制图像控制1 1）标准用法）标准用法 IMG SRC=“images/lotus.GIF” width=“80%” height=80 border=32 2）AlignAlign用法：用法：IMG SRC=URL align=left | right | top | texttop | middle | absmiddle | baseline | bottom | absbottom其中其中leftleft和和rightright用以指定图像的水平位置，使图像向用以指定图像的水平位置，
11、使图像向左或向右对齐成为浮动图像，此时，图像下面及左或向右对齐成为浮动图像，此时，图像下面及侧面的文字和图像将在右侧或左侧环绕该图像。侧面的文字和图像将在右侧或左侧环绕该图像。数据库原理及应用开发技术客户端开发技术数据库原理及应用开发技术客户端开发技术图像控制图像控制其余各选项值则是控制图像和文本的垂直相对位置。其余各选项值则是控制图像和文本的垂直相对位置。其中：其中：toptop：使图像与文本的最高点对齐；：使图像与文本的最高点对齐； texttoptexttop：使图像与本行的最高文本对齐（通常与：使图像与本行的最高文本对齐（通常与toptop效效果相同，但不完全相同）；果相同，但不完全相
12、同）； middlemiddle：使当前行的基准线与图像中线对齐；：使当前行的基准线与图像中线对齐； absmiddleabsmiddle：使当前行中线与图像中线对齐；：使当前行中线与图像中线对齐； baselinebaseline：使图像基准线与当前行基准线对齐；：使图像基准线与当前行基准线对齐； bottombottom：使图像底部与当前行基准线对齐；：使图像底部与当前行基准线对齐； absbottomabsbottom：使图像底部与当前行底部对齐。：使图像底部与当前行底部对齐。数据库原理及应用开发技术客户端开发技术数据库原理及应用开发技术客户端开发技术超链接语法超链接语法 1）一般用法i
13、ndex2）书签链接书签链接示例书签数据库原理及应用开发技术客户端开发技术数据库原理及应用开发技术客户端开发技术超链接语法超链接语法3 3）分块链接）分块链接利用一个图像，使该图像的不同部分指向不同的链接。例如：利用一个图像，使该图像的不同部分指向不同的链接。例如：n nn nn nn nn nn nimg border=0 src=baby.JPG width=1024 height=768 usemap=#FPMap0数据库原理及应用开发技术客户端开发技术数据库原理及应用开发技术客户端开发技术表格相关语法表格相关语法 1 1）基本语法）基本语法 姓名姓名 性别性别 年龄年龄 张三张三 男男
14、 55 55数据库原理及应用开发技术客户端开发技术数据库原理及应用开发技术客户端开发技术表格相关语法表格相关语法2 2）表格的合并）表格的合并多列合并的表格多列合并的表格 人员统计人员统计 张三张三 李四李四 王五王五342145342145数据库原理及应用开发技术客户端开发技术数据库原理及应用开发技术客户端开发技术表格相关语法表格相关语法多行合并的表格多行合并的表格 人员统计人员统计张三张三 李四李四 王五王五342145342145数据库原理及应用开发技术客户端开发技术数据库原理及应用开发技术客户端开发技术表格尺寸表格尺寸/位置控制位置控制 张三张三 男男 55 55 数据库原理及应用开发
15、技术客户端开发技术数据库原理及应用开发技术客户端开发技术表单表单 n n 标签标签用于为用户输入创建用于为用户输入创建用于为用户输入创建用于为用户输入创建 HTML HTML 表单。表单。表单。表单。表单能够包含表单能够包含表单能够包含表单能够包含 input input 元素元素元素元素，比如文本字段、复，比如文本字段、复，比如文本字段、复，比如文本字段、复选框、单选框、提交按钮等等。选框、单选框、提交按钮等等。选框、单选框、提交按钮等等。选框、单选框、提交按钮等等。表单还可以包含表单还可以包含表单还可以包含表单还可以包含 menusmenus、textareatextarea、fields
16、etfieldset、legendlegend 和和和和 label label 元素元素元素元素。表单用于向服务器传输数据。表单用于向服务器传输数据。表单用于向服务器传输数据。表单用于向服务器传输数据。数据库原理及应用开发技术客户端开发技术数据库原理及应用开发技术客户端开发技术表单控制表单控制属性值描述actionURL规定当提交表单时，向何处发送表单数据。属性值描述acceptMIME_type规定通过文件上传来提交的文件的类型。accept-charsetcharset服务器处理表单数据所接受的字符集。enctypeMIME_type规定表单数据在发送到服务器之前应该如何编码。metho
17、dgetpost规定如何发送表单数据。namename规定表单的名称。target_blank_parent_self_topframename规定在何处打开 action URL。必选必选可选可选数据库原理及应用开发技术客户端开发技术数据库原理及应用开发技术客户端开发技术表单元素表单元素 n n按钮（button）n n复选框n n单选框n n菜单（下拉选择框）n n文本框（单行，多行）n n文件选择控件n n隐藏控件n n图形（image）数据库原理及应用开发技术客户端开发技术数据库原理及应用开发技术客户端开发技术表单表单表单元素的基本标签FORMFORMINPUTINPUTTEXTARE
18、ATEXTAREASELECTSELECT数据库原理及应用开发技术客户端开发技术数据库原理及应用开发技术客户端开发技术CSS n nCSS:级联样式表（级联样式表（级联样式表（级联样式表（Cascading Style SheetCascading Style Sheet）简称）简称）简称）简称“ “CSSCSSn n基本功能：更有效地控制网页外观，便于页面总体风格的更有效地控制网页外观，便于页面总体风格的更有效地控制网页外观，便于页面总体风格的更有效地控制网页外观，便于页面总体风格的统一和改变统一和改变统一和改变统一和改变n n常用功能：控制文字的大小、颜色、字体控制文字的大小、颜色、字体控
19、制文字的大小、颜色、字体控制文字的大小、颜色、字体数据库原理及应用开发技术客户端开发技术数据库原理及应用开发技术客户端开发技术CSS基本语法基本语法 n nCSS 规则规则由两个主要的部分构成：选择器，以及一条或由两个主要的部分构成：选择器，以及一条或由两个主要的部分构成：选择器，以及一条或由两个主要的部分构成：选择器，以及一条或多条声明。多条声明。多条声明。多条声明。selector declaration1; declaration2; . selector declaration1; declaration2; . declarationN declarationN 数据库原理及应用开发
20、技术客户端开发技术数据库原理及应用开发技术客户端开发技术CSS基本语法基本语法n n层叠次序层叠次序样式会根据下面的规则层叠于一个新的虚拟样样式会根据下面的规则层叠于一个新的虚拟样样式会根据下面的规则层叠于一个新的虚拟样样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字式表中，其中数字式表中，其中数字式表中，其中数字 4 4 拥有最高的优先权。拥有最高的优先权。拥有最高的优先权。拥有最高的优先权。1 1浏览器缺省设置浏览器缺省设置浏览器缺省设置浏览器缺省设置2 2外部样式表外部样式表外部样式表外部样式表n nLINK href=”sample.css” rel=”stylesheet”
21、type=”text/css”3 3内部样式表（位于内部样式表（位于内部样式表（位于内部样式表（位于 标签内部）标签内部）标签内部）标签内部）4 4内嵌样式（在内嵌样式（在内嵌样式（在内嵌样式（在 HTML HTML 元素内部）元素内部）元素内部）元素内部） 数据库原理及应用开发技术客户端开发技术数据库原理及应用开发技术客户端开发技术CSS基本语法基本语法n n几种常用控制方法P font-size:9px; P font-size:9px; P.classname1 font-size:12px; P.classname1 font-size:12px; P#New font-size:18
22、px; P#New font-size:18px; .First color :red;.First color :red;#Second font-size:18px; #Second font-size:18px; Sample!Sample!数据库原理及应用开发技术客户端开发技术数据库原理及应用开发技术客户端开发技术CSS基本语法基本语法n nID 与与 CLASS 区别区别1 1、在、在、在、在CSSCSS文件里书写时，文件里书写时，文件里书写时，文件里书写时，IDID加前缀加前缀加前缀加前缀#；CLASSCLASS用用用用. . 2 2、idid一个页面只可以使用一次；一个页面只可以
23、使用一次；一个页面只可以使用一次；一个页面只可以使用一次；classclass可以多次可以多次可以多次可以多次引用。引用。引用。引用。 3 3、IDID是一个标签的标识，用于区分不同的结是一个标签的标识，用于区分不同的结是一个标签的标识，用于区分不同的结是一个标签的标识，用于区分不同的结构和内容构和内容构和内容构和内容4 4、idid是先找到结构是先找到结构是先找到结构是先找到结构/ /内容，再给它定义样式；内容，再给它定义样式；内容，再给它定义样式；内容，再给它定义样式；classclass是先定义好一种样式，再套给多个结构是先定义好一种样式，再套给多个结构是先定义好一种样式，再套给多个结构
24、是先定义好一种样式，再套给多个结构/ /内内内内容。容。容。容。数据库原理及应用开发技术客户端开发技术数据库原理及应用开发技术客户端开发技术常见属性常见属性pp字体属性字体属性font-size:9px;font-size:9px;1) xx-small | x-small | small | medium | large | x-large 1) xx-small | x-small | small | medium | large | x-large | xx-large| xx-large2) 9px; 9pt; 2) 9px; 9pt; font-family:font-family:
25、宋体宋体, Times New Roman;, Times New Roman;n n颜色属性颜色属性 Color:red; Color:#FF0000;Color:red; Color:#FF0000; Background-color:white; Background-color:white;数据库原理及应用开发技术客户端开发技术数据库原理及应用开发技术客户端开发技术常见属性常见属性n n文本属性文本属性Text-align: left; Text-align: left; Vertical-align: top;Vertical-align: top;n n行高属性行高属性Line-h
26、eight:9px; 120%Line-height:9px; 120%n n空白空白margin-top: margin-bottommargin-top: margin-bottom数据库原理及应用开发技术客户端开发技术数据库原理及应用开发技术客户端开发技术CSS基本语法基本语法n n典型应用举例典型应用举例n na:link color: rgb(0,0,102); text-decoration: none;n na:visited color: #FF00FB; n na:active color: rgb(153,0,255); n na:hover color: red; 数据库
27、原理及应用开发技术客户端开发技术数据库原理及应用开发技术客户端开发技术HTML/CSS的注意事项n n各类标记一定要成对出现各类标记一定要成对出现n nCSS的作用范围一定要清晰的作用范围一定要清晰n n注意注意ID与与Class的作用的作用数据库原理及应用开发技术客户端开发技术数据库原理及应用开发技术客户端开发技术JavaScript简介简介n nJavaScript是客户端脚本语言，是客户端脚本语言，avaScriptavaScript是在用户的浏览器上运行，不需要服是在用户的浏览器上运行，不需要服是在用户的浏览器上运行，不需要服是在用户的浏览器上运行，不需要服务器的支持而可以务器的支持而
28、可以务器的支持而可以务器的支持而可以 独立运行独立运行独立运行独立运行，可以减少服务器，可以减少服务器，可以减少服务器，可以减少服务器的压力。的压力。的压力。的压力。n n基于基于JAVA和和C,C+等多种语法结构等多种语法结构n n代码加载前需要解释后运行，运行速度较代码加载前需要解释后运行，运行速度较慢慢n n程序编写简单，但安全性相对较差。程序编写简单，但安全性相对较差。数据库原理及应用开发技术客户端开发技术数据库原理及应用开发技术客户端开发技术JavaScript简介简介使用方法n n外部脚本文件外部脚本文件n n混合在混合在HTMLHTML文档中，一般位于头部文档中，一般位于头部n
29、nn n内嵌脚本内嵌脚本n n document.write( document.write(这是第一个这是第一个JavaScriptJavaScript文件文件!)!) 数据库原理及应用开发技术客户端开发技术数据库原理及应用开发技术客户端开发技术数据类型数据类型n n动态类型：var a n n数值型:var a = 3;var a = 3; n n布尔值:Booleanvar x=true var y=falsevar x=true var y=false n n字符型 var myname=“var myname=“小王小王小王小王;n n数组var students=new Array
30、(); students0=“wang; var students=new Array(); students0=“wang; students1=“li; students2=“zhang;students1=“li; students2=“zhang; 数据库原理及应用开发技术客户端开发技术数据库原理及应用开发技术客户端开发技术对对 象象n n引用JavaScript内部对象n n由浏览器环境中提供n n创建新对象 数据库原理及应用开发技术客户端开发技术数据库原理及应用开发技术客户端开发技术常用内部对象常用内部对象 n nwindow对象全局变量是全局变量是全局变量是全局变量是 windo
31、w window 对象的属性。对象的属性。对象的属性。对象的属性。全局函数是全局函数是全局函数是全局函数是 window window 对象的方法。对象的方法。对象的方法。对象的方法。window.innerHeight - window.innerHeight - 浏览器窗口的内部高度浏览器窗口的内部高度浏览器窗口的内部高度浏览器窗口的内部高度window.innerWidth - window.innerWidth - 浏览器窗口的内部宽度浏览器窗口的内部宽度浏览器窗口的内部宽度浏览器窗口的内部宽度n n document对象document.getElementById(header);
32、document.getElementById(header);n n内建对象：内建对象： String、Date、Array 等等。等等。数据库原理及应用开发技术客户端开发技术数据库原理及应用开发技术客户端开发技术事件处理与交互性的实现事件处理与交互性的实现 n n键盘事件 n n鼠标事件 n n焦点事件 n n选择事件 n n状态改变事件 n nonAbort 数据库原理及应用开发技术客户端开发技术数据库原理及应用开发技术客户端开发技术事件处理与交互性的实现事件处理与交互性的实现n n键盘事件：OnKeyUpOnKeyUpOnKeyDownOnKeyDownOnKeyPressOnKeyP
33、ress数据库原理及应用开发技术客户端开发技术数据库原理及应用开发技术客户端开发技术事件处理与交互性的实现事件处理与交互性的实现n n鼠标事件OnMouseDownOnMouseDownOnMouseUpOnMouseUpOnClickOnClickOnDbClickOnDbClickOnMouseOverOnMouseOverOnMouseMoveOnMouseMoveOnMouseOutOnMouseOut数据库原理及应用开发技术客户端开发技术数据库原理及应用开发技术客户端开发技术事件处理与交互性的实现事件处理与交互性的实现n n焦点事件OnFucusOnFucusOnBlurOnBlur
34、n n状态改变事件OnLoadOnLoadOnUnLoadOnUnLoadOnChangeOnChange数据库原理及应用开发技术客户端开发技术数据库原理及应用开发技术客户端开发技术JavaScript简介简介JavaScript中的几个常见应用n n校验表单输入的正确性n n控制表单提交n n控制动态显示数据库原理及应用开发技术客户端开发技术数据库原理及应用开发技术客户端开发技术JavaScript中的几个常见应用中的几个常见应用n n校验表单项 FORM . . FORM onSubmit=”VerifyForm()” . . 数据库原理及应用开发技术客户端开发技术数据库原理及应用开发技术
35、客户端开发技术JavaScript中的几个常见应用中的几个常见应用n n控制表单提交控制表单提交 . . function SubmitForm()function SubmitForm() form1.submit();form1.submit(); 数据库原理及应用开发技术客户端开发技术数据库原理及应用开发技术客户端开发技术Flash简介简介优点：优点：n n动画是矢量的，（不论放大多少倍依然清晰，而动画是矢量的，（不论放大多少倍依然清晰，而不象一般的图形文件，当放大他们的时候，会出不象一般的图形文件，当放大他们的时候，会出现马赛克效应，看到的是一个个方形的色块。）现马赛克效应，看到的是一
36、个个方形的色块。）n nFlashFlash文件可以做得很小文件可以做得很小n n用用FlashFlash生成的文件是代码保护的，别人无法看到生成的文件是代码保护的，别人无法看到其源代码，还可禁止下载。其源代码，还可禁止下载。n nFlashFlash使用起来很容易（凡是用过类似使用起来很容易（凡是用过类似photoshopphotoshop等等类似的图形软件的人就可以很轻松的掌握用类似的图形软件的人就可以很轻松的掌握用FlashFlash制作动画。）制作动画。）数据库原理及应用开发技术客户端开发技术数据库原理及应用开发技术客户端开发技术Flash简介简介n nFlash的播放是采用流技术，动画是边下载边演示，如果速度控制得好是几乎感觉不到文件还没完全下载的。 缺点：n n必须安装插件PLUG-IN，才能被浏览器所接受。这样做显然使用户在第一次浏览时会增加一些麻烦，但另一方面，它却避免了浏览器之间的差异。数据库原理及应用开发技术客户端开发技术数据库原理及应用开发技术客户端开发技术JavaApplet简介简介 优点：n n功能较强n n无须插件缺点：n n编程较复杂数据库原理及应用开发技术客户端开发技术数据库原理及应用开发技术客户端开发技术
