窗口与网络编程第4课Web编程技术基础oommtt.ppt.Convertor

第四课Web编程技术基础1主要内容HTML语言JavaScriptServlet4.1HTMLHTML语言简介HTML是为创建网页而设计的一种标记语言。HTML提供了一种描述文档中文本信息结构的方法。包含HTML内容的文件通常使用.htm或.html作为文件扩展名。34.1HTMLHTML文档基本结构htmlhead文档头/headbody文档体/body/html44.1HTMLHTML标记类型结构性标记描述HTML文档中文本的意图，如：h2购物车/h2常用结构性标记html：标记HTML内容的开始和结束。head：标记HTML文档头，包含不在正文中显示的关键字、标题和脚本等。title：标记HTML文档的标题。body：标记HTML文档正文的开始和结束。54.1HTMLHTML标记类型外观性标记描述文字的外观，如：b重要公告/b为了统一网站风格，很多网站使用层叠样式表取代重复的外观性标记。64.1HTMLHTML标记类型超文本标记将文档的一部分关联到其他文档，如：ahref=搜索引擎/a注释标记在文档中插入注释语句。如：!--这里是注释语句--74.1HTMLHTML标记类型框架页面标记描述网页如何显示框架页面，较低版本的浏览器不支持此功能。使用框架可以在浏览器窗口中显示多个HTML文档，框架标记如下：frameset/frameset84.1HTMLURL与超链接HTML使用超链接来链接到Web上的其他文档。ahref=表格定义表格：table/table定义行：tr/tr定义表头单元格·：th/th定义单元格：td/td104.1HTML表格tableborder=1trth表头1/thth表头2/th/trtrtd单元格1/tdtd单元格2/td/trtrtd单元格3/tdtd单元格4/td/tr/table114.1HTML表格定义表格的宽度和高度tableborder=1width=300height=80trtdwidth=80%height=80 /tdtd /td/tr/124.1HTML表格在表格中合并单元格tablewidth=450border=1trtd第1行，第1列/tdtdcolspan=2第1行的第2、3列/td/trtrtdrowspan=2第2行及第3行的第1列/tdtd第2行第2列/tdtd第2行第3列/td/trtrtd第3行第2列/tdtd第3行第3列/td/tr/table134.1HTML表格在表格中合并单元格144.1HTML表单与表单元素表单是网站与用户进行信息交互的主要手段。表单至少应该包括：说明性文字表单元素提交和重置按钮表单元素单行文本框、密码框、单选按钮、复选框、下拉列表、多行文本框、普通按钮、提交按钮、重置按钮和隐藏域154.1HTML表单的工作原理用户在表单中填写或选择所需的数据；用户按下【提交】按钮；所填数据通过网络传递给Web服务器；服务器端的后台应用程序获取用户提交的数据；服务器端程序对数据进行处理；服务器端程序将处理结果传递给客户端。164.1HTML定义表单基本语法结构formaction=urlmethod=get|postname=action：设定处理表单数据的程序的URL。method：指定数据传送到服务器的方式（get和post）。name：设定表单的名称。onrest和onsubmit：分别设定在按下相应按钮之后要执行的客户端程序。target：指定数据结果显示在哪个窗口。174.1HTML简单表单示例htmlheadtitle输入用户姓名/title/headbodyformaction=check_user.jspmethod=get请输入你的姓名：inputtype=textname=usernameinputtype=submitvalue=提交/form/body/html184.1HTML表单元素：input表单输入标记。用于在表单中提供：单行文本框、密码框、单选按钮、复选框、普通按钮、提交按钮、重置按钮和隐藏域等表单元素。语法格式：inputaligh=left|right|top|middle|bottomname=valuetype19formaction=process.jspmethod=post用户名:inputtype=textname=usernamebr密码：inputtype=passwordname=passwdbrinputtype=checkboxname=fruitvalue=apple苹果inputtype=checkboxname=fruitvalue=orangechecked桔子inputtype=checkboxname=fruitvalue=mango芒果brinputtype=radioname=drinkvalue=tea茶inputtype=radioname=drinkvalue=coffee咖啡inputtype=radioname=drinkvalue=juicechecked果汁brinputtype=submitvalue=提交inputtype=imagesrc=go.gifalt=提交NAME=img_submit/forminput标记基本用法示例20input标记的显示效果214.1HTML表单元素：select下拉列表标记。用于在表单中插入一个下拉列表。需与option标记配合使用：option标记定义了下拉列表中的每个选项。语法格式：selectname=textsize=#224.1HTML表单元素：option下拉列表选项标记。语法格式：optionselectedvalue=23formaction=process.jspmethod=postselectname=fruitoptionvalue=apple苹果optionvalue=orange桔子optionvalue=mango芒果/select selectname=drinkmultipleoptionvalue=tea茶optionvalue=coffee咖啡optionvalue=juice果汁/select/form下拉列表代码示例244.1HTML表单元素：textarea多行文本框标记。用于在表单中提供一个可输入多行文本信息的输入框。语法格式：textareaname=namecols=#rows25formaction=suggest.jspmethod=post请提宝贵意见：brtextareaname=suggestioncols=50rows=3/textareabrinputtype=submitvalue=提交/form264.1HTML框架（Frame）用于规划网页布局。使用框架能够在一个浏览器窗口中同时显示多个网页，每个框架内设定一个网页，各个网页相互独立。缺点：网站开发人员必须管理、跟踪更多的网页；难以打印整个整个网页。274.1HTML框架（Frame）frameset/frameset标记决定如何划分框架。cols属性：表示框架按列分布；rows属性：表示框架按行分布；rows和cols的值指明了每个行/列在屏幕上所占的大小。284.1HTML框架（Frame）frame标记用于定义每个框架中放入什么文件。src属性：指定了网页的路径和文件名。294.1HTML框架（Frame）htmlframesetcols=25%,75%framename=leftsrc=frame_left.htmframename=rightsrc=frame_right.304.1HTML框架（Frame）混合框架htmlframesetrows=20%,80%framesrc=banner.htmframesetcols=25%,75%framesrc=menu.htmframesrc=main.htm/frameset314.1HTML框架（Frame）混合框架324.1HTML框架（Frame）导航框架导航框架内包含一个网页，网页中包含了一个超链接列表，点击任何一个链接都会在另一个框架中显示点击中的网页。334.1HTML框架（Frame）导航框架htmlbodypalign=centerb目录/b/ppalign=centeratarget=mainhref=item1.htm项目1/a/ppalign=centeratarget=mainhref=item2.htm项目2/a/ppalign=centeratarget=mainhref=item3.htm项目3/a/p/344.1HTML框架（Frame）导航框架354.1HTML框架（Frame）导航框架的导航目标新浏览器窗口：ahref=urltarget=_blank当前框架：ahref=urltarget=_self父框架：ahref=urltarget=_parent整个浏览器窗口：ahref=urltarget=_top364.2客户端脚本语言JavaScript语言是一种脚本语言是基于对象的语言是事件驱动的语言是安全的语言是平台无关的语言374.2客户端脚本语言JavaScript常用对象JavaScript为开发人员提供了一些非常有用的常用内部对象和方法，这使得他们不需要用脚本来实现这些功能，只需直接调用这些功能。384.2客户端脚本语言JavaScript常用对象window：最顶层的对象，它描述的是一个浏览器窗口；screen：反映了当前用户的屏幕设置；navigator：包含了正在使用的浏览器的版本信息；history：包含了一个数组，存放客户端访问的URL历史信息；394.2客户端脚本语言JavaScript常用对象location：包含了关于当前URL的信息；document：表示含有当前文档信息的对象；Link：包含了文档中所有链接标记；Form：用于表单管理；Frame：用于框架管理。404.2客户端脚本语言JavaScript常用对象window对象JavaScript最高层对象之一。是其它大部分对象的共同祖先，在调用其方法和属性时，可以省略window对象的引用。使用当前窗口对象的任何方法或属性时可以省去窗口的实例名称。window.document.write(星期日);或document.write414.2客户端脚本语言JavaScript常用对象window对象提供了处理浏览器窗口的方法和属性。主要是窗口的打开、关闭；窗口状态的设置和定时执行程序；提供与用户简单交互的输入/输出方法。创建window对象的实例：遇到body、frameset或frame元素时自动建立；由window.open()方法创建。424.2客户端脚本语言对话框的使用1、confirm方法提供一个具有两个按钮（“确定”和“取消”）的对话框，每一个按钮对应一个确定的值。用户单击“确定”按钮时返回true,用户单击“取消”按钮时返回false。scriptlanguage='javascript'