第2章 Web编程技术基础

浙江工商大学计算机与信息工程学院第2章Web编程技术基础浙江工商大学计算机与信息工程学院2.1HTML语言•HTML语言简介–HTML是为创建网页而设计的一种标记语言。–HTML提供了一种描述文档中文本信息结构的方法。–包含HTML内容的文件通常使用.htm或.html作为文件扩展名。浙江工商大学计算机与信息工程学院2.1HTML语言•HTML文档基本框架htmlhead文档头/headbody文档体/body/html浙江工商大学计算机与信息工程学院2.1HTML语言•HTML标记类型–结构性标记•描述HTML文档中文本的意图，如：h2购物车/h2•常用结构性标记–html：标记HTML内容的开始和结束。–head：标记HTML文档头，包含不在正文中显示的关键字、标题和脚本等。–title：标记HTML文档的标题。–body：标记HTML文档正文的开始和结束。浙江工商大学计算机与信息工程学院2.1HTML语言•HTML标记类型–外观性标记•描述文字的外观，如：b重要公告/b•为了统一网站风格，很多网站使用层叠样式表取代重复的外观性标记。浙江工商大学计算机与信息工程学院2.1HTML语言•HTML标记类型–超链接•将文档的一部分关联到其他文档，如：ahref=搜索引擎/a–注释标记•在文档中插入注释语句。如：!--这里是注释语句--浙江工商大学计算机与信息工程学院2.1HTML语言•URL与超链接–URL即网址，是Internet上标准的资源地址表示形式。–格式：@example.com:992/animal/bird?species=seagull#wings主机名路径协议片段登录信息查询端口浙江工商大学计算机与信息工程学院2.1HTML语言•URL与超链接–HTML使用超链接来链接到Web上的其他文档。ahref=浙江工商大学计算机与信息工程学院2.1HTML语言•表格–定义表格：table/table–定义行：tr/tr–定义表头：th/th–定义单元格：td/td浙江工商大学计算机与信息工程学院2.1HTML语言•表格tableborder=1trth表头1/thth表头2/th/trtrtd单元格1/tdtd单元格2/td/trtrtd单元格3/tdtd单元格4/td/tr/table浙江工商大学计算机与信息工程学院2.1HTML语言•表格–定义表格的宽度和高度tableborder=1width=300height=80trtdwidth=80%height=80 /tdtd /td/tr/table浙江工商大学计算机与信息工程学院2.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/table浙江工商大学计算机与信息工程学院2.1HTML语言•表格–在表格中合并单元格浙江工商大学计算机与信息工程学院2.1HTML语言•表单与表单元素–表单•是网站与用户进行信息交互的主要手段。•表单至少应该包括：–说明性文字–表单元素–提交和重置按钮–表单元素•单行文本框、密码框、单选按钮、复选框、下拉列表、多行文本框、普通按钮、提交按钮、重置按钮和隐藏域浙江工商大学计算机与信息工程学院2.1HTML语言•表单的工作原理①用户在表单中填写或选择所需的数据；②用户按下【提交】按钮；③所填数据通过网络传递给Web服务器；④服务器端的后台应用程序获取用户提交的数据；⑤服务器端程序对数据进行处理；⑥服务器端程序将处理结果传递给客户端。浙江工商大学计算机与信息工程学院2.1HTML语言•定义表单–基本语法结构formaction=urlmethod=get|postname=valueonreset=functiononsubmit=functiontarget=window/formaction：设定处理表单数据的程序的URL。method：指定数据传送到服务器的方式（get和post）。name：设定表单的名称。onrest和onsubmit：分别设定在按下相应按钮之后要执行的客户端程序。target：指定数据结果显示在哪个窗口。浙江工商大学计算机与信息工程学院2.1HTML语言•简单表单示例htmlheadtitle输入用户姓名/title/headbodyformaction=check_user.jspmethod=get请输入你的姓名：inputtype=textname=usernameinputtype=submitvalue=提交/form/body/html浙江工商大学计算机与信息工程学院2.1HTML语言•表单元素：input–表单输入标记。–用于在表单中提供：单行文本框、密码框、单选按钮、复选框、普通按钮、提交按钮、重置按钮和隐藏域等表单元素。–语法格式：inputaligh=left|righ|top|middle|bottomname=valuetype=text|textarea|password|checkbox|radio|submit|reset|file|hidden|image|buttonvalue=valuesrc=urlcheckedmaxlength=#size=#onclick=functiononselect=function浙江工商大学计算机与信息工程学院formaction=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标记基本用法示例浙江工商大学计算机与信息工程学院input标记的显示效果浙江工商大学计算机与信息工程学院2.1HTML语言•表单元素：select–下拉列表标记。–用于在表单中插入一个下拉列表。–需与option标记配合使用：•option标记定义了下拉列表中的每个选项。–语法格式：selectname=textsize=#multiple浙江工商大学计算机与信息工程学院2.1HTML语言•表单元素：option–下拉列表选项标记。–语法格式：optionselectedvalue=value浙江工商大学计算机与信息工程学院formaction=process.jspmethod=postselectname=fruitoptionvalue=apple苹果optionvalue=orange桔子optionvalue=mango芒果/select selectname=drinkmultipleoptionvalue=tea茶optionvalue=coffee咖啡optionvalue=juice果汁/select/form下拉列表代码示例浙江工商大学计算机与信息工程学院2.1HTML语言•表单元素：textarea–多行文本框标记。–用于在表单中提供一个可输入多行文本信息的输入框。–语法格式：textareaname=namecols=#rows=#wrap=off|hard|soft浙江工商大学计算机与信息工程学院formaction=suggest.jspmethod=post请提宝贵意见：brtextareaname=suggestioncols=50rows=3/textareabrinputtype=submitvalue=提交/form浙江工商大学计算机与信息工程学院2.1HTML语言•框架（Frame）–用于规划网页布局。–使用框架能够在一个浏览器窗口中同时显示多个网页，每个框架内设定一个网页，各个网页相互独立。–缺点：•网站开发人员必须管理、跟踪更多的网页；•难以打印整个整个网页。浙江工商大学计算机与信息工程学院2.1HTML语言•框架（Frame）–frameset/frameset标记•决定如何划分框架。•cols属性：表示框架按列分布；•rows属性：表示框架按行分布；•rows和cols的值指明了每个行/列在屏幕上所占的大小。浙江工商大学计算机与信息工程学院2.1HTML语言•框架（Frame）–frame标记•用于定义每个框架中放入什么文件。•src属性：指定了网页的路径和文件名。浙江工商大学计算机与信息工程学院2.1HTML语言•框架（Frame）htmlframesetcols=25%,75%framename=leftsrc=frame_left.htmframename=rightsrc=frame_right.htm/frameset/html浙江工商大学计算机与信息工程学院2.1HTML语言•框架（Frame）–混合框架htmlframesetrows=20%,80%framesrc=banner.htmframesetcols=25%,75%framesrc=menu.htmframesrc=main.htm/frameset/frameset/html浙江工商大学计算机与信息工程学院2.1HTML语言•框架（Frame）–混合框架浙江工商大学计算机与信息工程学院2.1HTML语言•框架（Frame）–导航框架•导航框架内包含一个网页，网页中包含了一个超链接列表，点击任何一个链接都会在另一个框架中显示点击中的网页。浙江工商大学计算机与信息工程学院2.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/body/html浙江工商大学计算机与信息工程学院2.1HTML语言•框架（Frame）–导航框架浙江工商大学计算机与信息工程学院2.1HTML语言•框架（Frame）–导航