数据库原理及应用开发技术_客户端开发技术

Web开发技术综述1三大支撑技术2开发技术综述URLHTTPHTML客户端开发技术服务器端开发技术Web开发技术1三大支撑技术URLHTTPHTML（UnifiedResourceLocator）统一资源标志符，互联网上进行统一命名和定位的一种标准机制。（HyperTextTransportationProtocol）Web服务器与客户进行传输信息的标准协议。(HyperTextMarkupLanguage)超文本标记语言。“超”文本的含义：不限于普通文本，利用普通文本表达多媒体信息。。Web开发技术2开发技术综述两条主线：HTML—Javascript（动态网页）—CSS—flash—XMLCGI—ASP—PHP—JSP—.NET重点理解概念HTMLJavascript、CSSJSP、.NET第四章客户端开发技术教学目的介绍HTML、CSS等开发技术及相应标准，并简要介绍JavaScript等技术。重点是理解掌握基本的HTML语法，能手工编写简单的静态页面，能看懂较复杂的HTML页面的语法结构，为后面服务器端开发技术的学习做准备。基本教学内容HTML基本文件结构文本相关语法图像相关语法表格语法超链接语法表单使用方法框架使用样式表脚本语言JavaScript简介Flash简介JavaApplet简介学习重点与难点重点：•HTML基本语法结构•表格使用方法•表单使用方法难点：•表格的复杂使用方法•利用表单与后台程序进行交互的原理及规则HTML简介概念：HTML（HyperTextMarkupLanguage），基于HTTP协议，在Web上以超文本方式出版本信息的国际化语言特点：•非线性•基本单元：超文本结点•以链接实现不同结点间的联系•国际性的规范•纯文本格式HTML的基本文档结构!doctypehtmlpublic-//W3C//DTDHTML4.0Transitional//ENhtmlheadtitleNewDocument/titlemetaname=Generator“content=EditPlusHTML的基本文档结构metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/headbodypHello!Goodmorning!/p/body/htmlHTML的基本文档结构文档头：HEAD…/HEAD要素：TITLE：显示窗口的标题META：文档的最基本的元信息。除了提供文档字符集、使用语言、作者等基本信息外，还涉及对关键词和网页描述的设定。一般给浏览器或编辑人员用，不会直接显示出来HTML的基本文档结构文档体：BODY…/BODY浏览器真正要展现的部分。主要元素类型：文本图像表格表单框架超链接HTML的基本文档结构注意：大多数元素/子元素为成对出现，许多元素内部可包含其它元素，但各元素间不得出现错位嵌套的情况！即如下情况绝不允许出现！tag1tag2实际内容/tag1/tag2页面背景控制BODYbgcolor=whitebackground=”/images/bg.jpg”bgsoundsrc=lovestory.midloop=infinitebgsoundsrc=lovestory.midloop=“3字体与颜色标题H1H2……H6H1这是一级标题/H1FontFONTcolor=redsize=6face=宋体字体控制/FONT文本类元素用法1）空格•通常会将多个空格压缩为单个• 被浏览器解释为不可压缩的字符，当需要显示多个空格时可用到2）字体属性控制FONTcolor=redsize=6face=宋体字体控制/FONT文本类元素用法3）行与段落控制段落控制：P：相关字体大小，颜色控制行控制：BR预先格式化文本PRE它保留了空格和换行文本块DIV列表控制无序列表ulli项目1/lili项目2/lili项目3/li/ul编号列表olli项目1/lili项目2/lili项目3/li/ol定义式列表DLDT项目1/DTDD项目1.1/DDDT项目2/DD/DL图像控制1）标准用法IMGSRC=“images/lotus.GIF”width=“80%”height=80border=32）Align用法：IMGSRC=URLalign=left|right|top|texttop|middle|absmiddle|baseline|bottom|absbottom其中left和right用以指定图像的水平位置，使图像向左或向右对齐成为浮动图像，此时，图像下面及侧面的文字和图像将在右侧或左侧环绕该图像。图像控制其余各选项值则是控制图像和文本的垂直相对位置。其中：top：使图像与文本的最高点对齐；texttop：使图像与本行的最高文本对齐（通常与top效果相同，但不完全相同）；middle：使当前行的基准线与图像中线对齐；absmiddle：使当前行中线与图像中线对齐；baseline：使图像基准线与当前行基准线对齐；bottom：使图像底部与当前行基准线对齐；absbottom：使图像底部与当前行底部对齐。超链接语法1）一般用法ahref=index.htmindex/a2）书签链接ahref=“index.htm#First”书签链接示例/aaname=“First”书签/a超链接语法3）分块链接利用一个图像，使该图像的不同部分指向不同的链接。例如：mapname=FPMap0areahref=fface.htmshape=circlecoords=571,256,103areahref=bface.htmshape=rectcoords=262,156,423,325areahref=nface.htmshape=defaultareahref=nface.htmcoords=0,0,10000,10000shape=rect/mapimgborder=0src=baby.JPGwidth=1024height=768usemap=#FPMap0表格相关语法1）基本语法tableborder=1theadtrth姓名/thth性别/thth年龄/th/tr/theadtbodytrtd张三/tdtd男/tdtd55/td/tr/tbody/table表格相关语法2）表格的合并多列合并的表格tableborder=1trtdcolspan=3人员统计/td/trtrtd张三/tdtd李四/tdtd王五/td/trtrtd34/tdtd21/tdtd45/td/tr/table表格相关语法多行合并的表格tableborder=1trtdrowspan=2人员统计/tdtd张三/tdtd李四/tdtd王五/td/trtrtd34/tdtd21/tdtd45/td/tr/table表格尺寸/位置控制tableborder=1width=332align=righttrtdwidth=30%align=center张三/tdtdwidth=30%align=center男/tdtdwidth=40%align=center55/td/tr/table表单form标签•用于为用户输入创建HTML表单。•表单能够包含input元素，比如文本字段、复选框、单选框、提交按钮等等。•表单还可以包含menus、textarea、fieldset、legend和label元素。•表单用于向服务器传输数据。表单控制属性值描述actionURL规定当提交表单时，向何处发送表单数据。属性值描述acceptMIME_type规定通过文件上传来提交的文件的类型。accept-charsetcharset服务器处理表单数据所接受的字符集。enctypeMIME_type规定表单数据在发送到服务器之前应该如何编码。method•get•post规定如何发送表单数据。namename规定表单的名称。target•_blank•_parent•_self•_top•framename规定在何处打开actionURL。必选可选表单元素按钮（button）复选框单选框菜单（下拉选择框）文本框（单行，多行）文件选择控件隐藏控件图形（image）表单表单元素的基本标签•FORM•INPUT•TEXTAREA•SELECTCSSCSS:•级联样式表（CascadingStyleSheet）简称“CSS基本功能：•更有效地控制网页外观，便于页面总体风格的统一和改变常用功能：•控制文字的大小、颜色、字体CSS基本语法CSS规则•由两个主要的部分构成：选择器，以及一条或多条声明。•selector{declaration1;declaration2;...declarationN}CSS基本语法层叠次序•样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字4拥有最高的优先权。•1浏览器缺省设置•2外部样式表LINKhref=”sample.css”rel=”stylesheet”type=”text/css”•3内部样式表（位于head标签内部）•4内嵌样式（在HTML元素内部）CSS基本语法几种常用控制方法•P{font-size:9px;}•P.classname1{font-size:12px;}•P#New{font-size:18px;}•.First{color:red;}•#Second{font-size:18px;}pID=“Second”Class=“First”Sample!/pCSS基本语法ID与CLASS区别•1、在CSS文件里书写时，ID加前缀#；CLASS用.•2、id一个页面只可以使用一次；class可以多次引用。•3、ID是一个标签的标识，用于区分不同的结构和内容•4、id是先找到结构/内容，再给它定义样式；class是先定义好一种样式，再套给多个结构/内容。常见属性字体属性font-size:9px;1)xx-small|x-small|small|medium|large|x-large|xx-large2)9px;9pt;font-family:宋体,TimesNewRoman;颜色属性Color:red;Color:#FF0000;Background-color:white;常见属性文本属性Text-align:left;left|right|center|justifyVertical-align:top;top|bottom|middle|baseline行高属性Line-height:9px;120%空白margin-top:margin-bottomCSS基本语法典型应用举例a:link{color:rgb(0,0,102);text-decoration:none;}a:visited{color:#FF00FB;}a:active{color:rgb(153,0,255);}a:hover{color:red;}HTML/CSS的注意事项各类标记一定要成对出现CSS的作用范围一定要清晰注意ID与Class的作用JavaScript简介JavaScript是客户端脚本语言，•