Web技术应用基础.ppt

《Web技术应用基础.ppt》由会员分享，可在线阅读，更多相关《Web技术应用基础.ppt（87页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。

1、第第2篇篇Web客户端程序设计基础客户端程序设计基础第第4 4章章 HTMLHTML 1HTML HTMLHTML的基本知识与结构的基本知识与结构 熟练掌握熟练掌握HTMLHTML应用应用 HTMLHTML 知识点与技术要求知识点与技术要求 2HTML4.1 HTML4.1 HTML概述概述4.1.1 HTML4.1.1 HTML入门入门一个简单一个简单HTMLHTML案例案例3HTML例例4.14.1：具有网页最基本的功能：具有网页最基本的功能：跳转跳转 HTML样例样例源代码源代码4HTML 简单的简单的html案例案例欢迎欢迎!请单击请单击HelloWorld！5HTML文件名文件名ex

2、04-01_1.htmlHelloWorld！祝贺你，初试成功！祝贺你，初试成功！6HTML2HTML与网页制作与网页制作1.1.制制作作纯纯文文本本格格式式。可可用用WordWord、记记事事本本、写写字字板板等等文文本本编编辑辑器器编编写写，但但一一定定要要存存为为纯纯文文本本格格式式（*.txt.txt或或*.*.*文文件件），不不能能有有格格式式控控制制编编码码 (如如wordword文文本本)。最最好好用用记记事事本。本。2.2.转转换换为为*.html.html格格式式。在在纯纯文文本本格格式式基基础础上上，将将文文本本命命名名 为为 name.htmname.htm或或 name

3、.html name.html(Windows(Windows系系 统统),或或name.html(Unixname.html(Unix系统系统)。3.3.使使用用浏浏览览器器（I.E.I.E.）阅阅读读。I.E.I.E.地地址址：C C：My My WebWebname.htmname.htm。4 4HTMLHTML只只能能作作静静态态的的、单单向向的的展展示示网网页页,由由服服务务器器演演示给用户。为了双向服务，尚需示给用户。为了双向服务，尚需ASPASP、JSPJSP等语言。等语言。74.1.2HTML文件的结构文件的结构文件头文件头文件体文件体关于文件的说明信息关于文件的说明信息不和文

4、件一起显示不和文件一起显示文件要显示的内容文件要显示的内容标题、段落、列表、标题、段落、列表、图形、超文本连接图形、超文本连接HTML8HTML4.1.3 HTML 4.1.3 HTML 标记和元素标记和元素 与平台无关与平台无关跨网络的超文本链接跨网络的超文本链接格式化的标记语言格式化的标记语言文档文档=控制标记控制标记+显示内容显示内容9HTMLHTMLHTML标记的格式标记的格式HTML语言元素语言元素标记大多成对出现标记大多成对出现标记与大小写无关标记与大小写无关 标记可以联合使用标记可以联合使用 标记可以带有一个或多个属性参数标记可以带有一个或多个属性参数 注释标记注释标记!-不在浏

5、览器中显示不在浏览器中显示10HTML4.1.4 4.1.4 页面结构标记页面结构标记1.标记标记2.文件头标记文件头标记 标题标记标题标记11HTMLbase 基地址标记基地址标记描述描述HTMLHTML文档的元信息，被文档的元信息，被WebWeb检索引擎、检索引擎、WebWeb服服务器或其它程序利用。务器或其它程序利用。其属性为：其属性为：Meta name=,例：例：Meta name=其中其中namename项项:常用常用keyword,description,author,keyword,description,author,可可用用http-equiv http-equiv 代替，

6、代替，例：例：meta http-equiv=content content项：根据项：根据name name 和和http-equivhttp-equiv填写相应的字符填写相应的字符串串 注意：注意：FrontpageFrontpage 的的HTML HTML 有自己的规定有自己的规定文件头标记文件头标记12简单的简单的html案例案例欢迎！欢迎！请单击请单击HelloWorld!ex4-00.html13BodyBody标记的属性标记的属性（1 1）backgroundbackground属属性性。指指定定一一个个图图形形文文件件(常常为为GIFGIF或或JPEGJPEG文文件件)作作为背

7、景图案。为背景图案。例例 body “URL”其其中中URLURL为为图图形形文文件件所所在在位位置置。下同。下同。（2 2）bgcolorbgcolor属属性性。直直接接改改变变网网页的背景颜色。页的背景颜色。例例body “yellow”其其中中颜颜色色可可用用颜颜色色名名或或十十六六进进制值表示。制值表示。颜颜色色RGBRGB值值颜颜色色RGBRGB值值颜颜色色RGBRGB值值blackblack#000000#000000redred#FF0000#FF0000silversilver银银灰灰#C0C0C0#C0C0C0greengreen#008000#008000blueblue#

8、0000FF#0000FFoliveolive橄橄榄榄#808000#808000whitewhite#FFFFFF#FFFFFFpurplepurple紫紫#800080#800080navynavy藏藏兰兰#000080#000080yelloyellow w#FFFF00#FFFF00GreyGrey灰灰#808080#808080limelime草草绿绿#00FF00#00FF0014（3 3）texttext属性。设置文字颜色。属性。设置文字颜色。例例 （4 4）linklink、vlinkvlink、alinkalink属属性性。分分别别设设置置未未阅阅读读过过、已已阅阅读读过过及

9、及正正动作中的链接文字的颜色。动作中的链接文字的颜色。Welcome Welcome body =yellow text=blue link=red This is another a This is another test=ex4-01_1.html test colorcolor ex4-19.html15HTML4.2 HTML4.2 HTML页面修饰标记页面修饰标记4.2.1标题文字标记标题文字标记语法：语法：标题文字标题文字 /HTMLHTML提供提供6 6个层次的标题个层次的标题。这是第一层标题这是第一层标题 这是第二层标题这是第二层标题 这是第三层标题这是第三层标题 这是第四层

10、标题这是第四层标题 这是第五层标题这是第五层标题 这是第六层标题这是第六层标题 ex4-20.html16HTML 4.2.2文字样式标记文字样式标记 设置基本字型设置基本字型 /。改变字型改变字型font color=。其中字体大小有其中字体大小有绝对字体大小，介于绝对字体大小，介于1717（小（小 大），默认值为大），默认值为3 3。相对字体大小，在基本字体基础上加大（相对字体大小，在基本字体基础上加大（+n+n）或）或缩小（缩小（.n.n）级）级17文字置中文字置中 size=2 基本字体大小：基本字体大小：2/2 绝对字体大小：绝对字体大小：11 相对字体大小：基本字体相对字体大小：基

11、本字体(2)+2=(4)(2)+2=(4)ex4-21.html184.2.3 特定文字样式标记文本样式文本样式描述标记描述标记类别类别粗体粗体物理物理斜体斜体物理物理下划线下划线物理物理删除划线删除划线物理物理上标上标物理物理下标下标物理物理大字体大字体物理物理小字体小字体物理物理重点突出显示重点突出显示(粗体粗体)逻辑逻辑突出显示突出显示(斜体斜体)逻辑逻辑电子邮件和网址电子邮件和网址(缩小缩小+斜体字斜体字)逻辑逻辑按代码显示按代码显示(缩小字体缩小字体)逻辑逻辑19HTML4.2.4段落标记段落标记 分段标记分段标记 换行标记换行标记 水平线标记水平线标记 预格式化标记预格式化标记 2

12、0文件段落文件段落 用于标记一段文字的开始和结束，其中用于标记一段文字的开始和结束，其中可省略。用可省略。用alignalign属属性设置段落对齐方式性设置段落对齐方式段落练习段落练习这是第一段这是第一段这是第二段。这是第二段。不同段落之间会强迫换行，不同段落之间会强迫换行，而且空白较大；而且空白较大；同一个段落的文字则根据页面宽度自动换行，同一个段落的文字则根据页面宽度自动换行，只是空白较小。只是空白较小。这是第三段这是第三段ex4-23.html21强迫换行强迫换行浏浏览览器器自自动动忽忽略略HTML文文件件中中的的多多余余空空格格及及换换行行符符号号，若要强迫换行需要加入若要强迫换行需要

13、加入。例例白日依山尽，白日依山尽，黄河入海流黄河入海流若若无无br则则显显示示为为：白白日日依依山山尽尽，黄黄河河入入海流。海流。22产生水平线，起分隔作用产生水平线，起分隔作用，其属性有：，其属性有：（1）size属属性性，设设置置水水平平线线的的高高度度。（象象素素点点数数目）目）（2）width属性，设置水平线的宽度。属性，设置水平线的宽度。（象象素素点点数数目目）或或（相相对宽度）对宽度）（3）align属性，指定水平线的靠左对齐、靠右对齐或居中。属性，指定水平线的靠左对齐、靠右对齐或居中。、或或（4）color属性，设置水平线颜色。属性，设置水平线颜色。（5）noshade属属性性，

14、使使水水平平线线不不具具备备阴阴影影效效果果，默默认认值值为为有有阴阴影影。若不要阴影（凃黑），需加：若不要阴影（凃黑），需加：上述属性可同时存在，顺序可互调，属性之间用空格隔开上述属性可同时存在，顺序可互调，属性之间用空格隔开23范例范例hr hr size=5 size=5 size=10 size=10 size=20 size=20 width=70%width=70%width=50%align=centerwidth=50%align=centernoshadenoshade hr ex4-22.html24以原始格式显示以原始格式显示 白日依山尽，黄河入海流白日依山尽，黄河入海流

15、 欲穷千里目，更上一层楼欲穷千里目，更上一层楼以下文字将以原始面貌呈现以下文字将以原始面貌呈现白日依山尽，黄河入海流白日依山尽，黄河入海流欲穷千里目，更上一层楼欲穷千里目，更上一层楼ex4-24.html25HTML文字对齐标记文字对齐标记 26HTML页面修饰标记应用页面修饰标记应用显示显示2号标题字号标题字显示蓝色隶显示蓝色隶书字体书字体显示删除划线显示删除划线(显示地址显示地址)27HTML显示上标：显示上标：x3显示下标：显示下标：x2预格式化标记应用预格式化标记应用*例例4.228特殊符号特殊符号在在HTMLHTML文件中文件中 abadcd显示为显示为adad，中间的，中间的bc被

16、被浏览器忽略，所以规定：浏览器忽略，所以规定：（大于符号）为（大于符号）为>gt，”（双引号）为（双引号）为"quot，不可分的空格为不可分的空格为 nbsp（non breaking spacenon breaking space）。）。例如例如 mr.linmr.lin 由于版面关系分成两行，将由于版面关系分成两行，将mrmr.和和linlin两字之间的空格定义为两字之间的空格定义为 nbsp。29当需求量当需求量>gt库存量，需进货库存量，需进货当库存量当库存量<lt警戒库存，需进货警戒库存，需进货当管理队伍和体系都基本建立之后，如何使当管理队伍和体系

17、都基本建立之后，如何使ERPERP成功上线并真正成功上线并真正产生作用就成为最重要的事情。总经理的产生作用就成为最重要的事情。总经理的"quot责任责任"quot基本完成基本完成之后，副总经理、财务总监之后，副总经理、财务总监mr. linmr. lin、信息中心主任和项目实、信息中心主任和项目实施经理等角色出场了施经理等角色出场了Ch4-34.html30HTML4.3 4.3 页面多媒体技术页面多媒体技术4.3.14.3.1图像标记图像标记（1 1）图象来源（图象来源（srcsrc）属性。）属性。（2 2）替代文字（）替代文字（altalt）属性。）属性。当

18、图象未到达前或图象关闭时代替当图象未到达前或图象关闭时代替图象的说明文字。图象的说明文字。（3 3）对齐方式（）对齐方式（alignalign）属性。）属性。指明紧接在图形后的文字的排列指明紧接在图形后的文字的排列方式。方式。align=top/middle/bottom （4 4）图象宽度、高度（）图象宽度、高度（widthwidth与与heightheight）属性。）属性。31HTML例例4.3图像标记的应用图像标记的应用美丽的湖美丽的湖新疆喀纳斯湖新疆喀纳斯湖ex4-03.html32HTML4.3.2 4.3.2 背景音乐标记背景音乐标记 Src LoopLoop 33范例范例3.8

19、背景音乐背景音乐这个范例会反复播放这个范例会反复播放一段背景音乐一段背景音乐2次次ex4-25.html34HTML4.3.3 4.3.3 音乐和影像文件音乐和影像文件 35例例4.44.4 自动播放音乐文件自动播放音乐文件 自动播放音乐文件自动播放音乐文件 embed=true loop=trueex4-04.html视频文件视频文件36HTML4.4 4.4 表格与列表标记表格与列表标记4.4.1.表格标记表格标记 与与之间：表格标题、表头及单元格中的内之间：表格标题、表头及单元格中的内容。容。（1 1）borderborder属性。属性。table border 或或;否则表格无框线。否

20、则表格无框线。（2 2）cellspacingcellspacing 属性。设置单元格之间的间距，默认值属性。设置单元格之间的间距，默认值为为2 2。（3 3）cellpaddingcellpadding 属性。调置单元格和其内容的间距。属性。调置单元格和其内容的间距。37设置表格行。设置表格行。/，任何一列都必须，任何一列都必须夹在这组标记之间。夹在这组标记之间。（1 1）alignalign属属性性。设设置置同同一一列列文文字字水水平平方方向向的的排排列列方方式，式，leftleft、middlemiddle或或rightright。（2 2）valignvalign属属性性。设设置置同同

21、一一列列文文字字垂垂直直方方向向的的排排列列方式，方式，toptop、middlemiddle、bottombottom或或baselinebaseline。38设置表格单元格。设置表格单元格。（1 1）rowspanrowspan属性。设置单元格所占的列高属性。设置单元格所占的列高（2 2）colspancolspan属性。设置单元格所占的行宽属性。设置单元格所占的行宽 (3)align(3)align及及valignvalign属性。属性。范例：范例：rowspanrowspan 示例示例 一一 td =2二二 三三 /39 四四 五五 /colspancolspan 示例示例 td=2一

22、一二二 /三三四四五五 /ex4-26.html40设置表头。设置表头。类似于。类似于，默认值为粗体且居中对齐。默认值为粗体且居中对齐。设置表格标题。设置表格标题。默认值。默认值置于表格上方之中间，也可强制置于下方，用置于表格上方之中间，也可强制置于下方，用。41HTML使用格式：使用格式：表格标题表格标题第一列表头第一列表头第二列表头第二列表头 第一行、一列表项第一行、一列表项第一行、二列表项第一行、二列表项 第二行、一列表项第二行、一列表项第二行、二列表项第二行、二列表项 ex4-27.html42HTML例例4.6：课表代码清单课表代码清单：表格标记应用案例表格标记应用案例0705331

23、课表课表节次节次星期一星期一星期二星期二星期三星期三星期四星期四  星期五星期五43HTML1、2英语英语操作系统操作系统网络基础网络基础英语英语数据库原理数据库原理3、4Java数据库原理数据库原理实验实验Java操作系统操作系统5、6网络基础网络基础实验实验实验实验实验实验例例4.644小结小结1定义表格区段。定义表格区段。2设置表格标题。设置表格标题。3设置表头。设置表头。4设置表格行。设置表格行。5设置表格单元格。设置表格单元格。表格综合设计表格综合设计 45范例范例 4-54-5body=white综合表格范例综合表格范例 x=3x 文件文件/姓名：姓名：/维纳斯维纳

24、斯td=3=p3.jpg width=75 height=88 /46 电话：电话：/(02)12345678(02)12345678 生日：生日：/某年某月的某一天某年某月的某一天 /住址：住址：/td=2快乐市欢喜路快乐市欢喜路100100号号 维纳斯公馆维纳斯公馆 /公司：公司：/td=2爱心传播公司爱心传播公司 /47 a =p4.jpgtd=2abcxyz.edu.twabcxyz.edu.tw /td=3 备注：备注：/td=2欢迎光临！欢迎光临！这是一个表中表。这是一个表中表。/ex4-28.html484.4.2 4.4.2 列表标记列表标记1.1.无序列表标记无序列表标记 属

25、性属性typetype，type type 取值：取值：typetypediskdisk：实心园点：实心园点(默认默认)typetypecirclecircle：空心园点：空心园点 typetypesquaresquare：实心方块：实心方块 49 例例4.74.7无序列表标记应用案例无序列表标记应用案例 无序列表无序列表11 第一项。第一项。/第二项。第二项。/无序列表无序列表22 type=circle 第一项。第一项。/第二项。第二项。/例4.7502.有序列表标记有序列表标记属性属性type和和start。type取值取值type1：1、2、3等标识等标识,默认值默认值typeA：大写

26、字母：大写字母A、B、C等标识等标识typea：小写字母：小写字母a、b、c等标识等标识typeI：大写罗马字母标识：大写罗马字母标识typei：小写罗马字母标识：小写罗马字母标识51 head 有序列表标记应用案例有序列表标记应用案例有序列表的属性有序列表的属性 type=I 有序列表标记具有属性有序列表标记具有属性start,start,指定列表编号的开头指定列表编号的开头 /有序列表标记具有属性有序列表标记具有属性type/type type=1 start=6 typetype1 1，缺省值，用数字，缺省值，用数字1 1，2 2，3 3等标识各项。等标识各项。/typetypeA A，

27、用大写字母，用大写字母A A，B B，C C等标识各项。等标识各项。/typetypea a，用小写字母，用小写字母a a，b b，c c等标识各项。等标识各项。/typetypeI I，用大写罗马字母标识各项。，用大写罗马字母标识各项。/type value=3typei i，用小写罗马字母标识各项。，用小写罗马字母标识各项。/例例4.8523.定义列表标记定义列表标记 术语术语 术语的定义术语的定义1 1 术语的定义术语的定义2 2 术语术语 术语的定义术语的定义53例例4.94.9定义标记应用案例定义标记应用案例定义列表的使用定义列表的使用 列表列表 数据项的有序集合。数据项的有序集合。

28、标号标号 程序中指令的标识符。程序中指令的标识符。磁盘文件的标识说明记录。磁盘文件的标识说明记录。数据集中或附加在数据集上的字符，它数据集中或附加在数据集上的字符，它包括数据集的信息。包括数据集的信息。列表列表 数据项的有序集合。数据项的有序集合。例4.954多层次列表多层次列表多层次列表范例多层次列表范例第一层的项目一第一层的项目一第二层的子项一第二层的子项一第三层的子项一第三层的子项一第三层的子项二第三层的子项二第二层的子项二第二层的子项二第一层的项目二第一层的项目二第一层的项目三第一层的项目三ex4-29.html55HTML4.5 4.5 超链接标记超链接标记 用用,称作锚（称作锚（a

29、nchoranchor）,整合世界各地整合世界各地的图、文、影、音数据。的图、文、影、音数据。超链接的分类超链接的分类（1 1）远程链接（不在同一网站）。远程链接（不在同一网站）。（2 2）近端链接（在同一网站）。又分近端链接（在同一网站）。又分 （A A）文件外链接（不在同一网页）文件外链接（不在同一网页）（B B）文件内链接（在同一网页）文件内链接（在同一网页）56超链接的寻址超链接的寻址1远远程程链链接接。其其中中URL标标记方式为：记方式为：网际网络服务协议网际网络服务协议服务方法服务方法例例超文本文件传输协议超文本文件传输协议http：/http:/www.tku.edu.tw文件传

30、输协议文件传输协议ftp：/ftp:/ftp.tku.edu.twGopher传输协议传输协议Gopher：/Gopher:/gopher.Esc.Gov.tw远程登录传输协议远程登录传输协议telnet：/telnet:/bbs.tku.edu.tw文件存放文件存放File：/File:/E:/mgweb/index.btmNetnews传输协议传输协议News：News:news.tku.edu.tw电子邮件传输协议电子邮件传输协议mailto：mailto:57范例范例 3.13.1超级链接范例超级链接范例a 淡江大学淡江大学WWWWWW首页首页a 淡江大学淡江大学FTPFTP服务器服务

31、器a 国科会国科会GopherGopher服务器服务器a 淡江大学淡江大学BBSBBS主机主机a 淡江大学淡江大学NewsNews主机主机a=“mailto:”写信给本书作者写信给本书作者ex4-30.html5859近端链接近端链接（1）文件外链接。）文件外链接。A相对路径法相对路径法（a）目标文件与源文件位于同一层目录。）目标文件与源文件位于同一层目录。（b）目标文件）目标文件“位于位于”源文件下一层目录。源文件下一层目录。（c）目标文件）目标文件“位于位于”源文件上一层目录。源文件上一层目录。B.绝对路径法绝对路径法。，其中开头的代表网站的根目录其中开头的代表网站的根目录60范例范例3-

32、2范例范例3-2近端连结近端连结相对路径法：相对路径法：目的节点在同一层目录：目的节点在同一层目录：ex4-10_1.html目的节点在上一层目录：目的节点在上一层目录：回首回首页页（index.htm）61目的节点在下一层目录：目的节点在下一层目录：ex4-04-a.html绝对路径法：绝对路径法：目的节点在其它目录：目的节点在其它目录：c:test.txtex4-31.html62（2）文件内链接）文件内链接1在在目目的的区区段段开开始始处处标标明明标标记记名名称称2在在源源节节点点处处指指明明目目的的节节点点位位置置 例例Internet系系列列图片图片其它系列图片其它系列图片 63范例

33、范例ex4-32.html64HTML 相互链接：相互链接：ex4-10.html超链接标记应用超链接标记应用下一页下一页超链接标记的功能超链接标记的功能例例4.1065ex4-10_1.htmlex4-10_1.html超链接标记应用超链接标记应用a=ex4-10.html上一页上一页 超链接标记是超文本的基本结构，它可以从当前超链接标记是超文本的基本结构，它可以从当前WebWeb页面定义的位置跳转到其他位置，包括同一页面的其他页面定义的位置跳转到其他位置，包括同一页面的其他位置、位置、InternetInternet上的另一个上的另一个WebWeb页面、本地硬盘或局域网页面、本地硬盘或局域

34、网上的文件、声音或图像文件、上的文件、声音或图像文件、FTPFTP或或TelnetTelnet站点、电子信站点、电子信箱等。箱等。66HTML链接电子信箱链接电子信箱 语法规则：语法规则：a 电子信箱地址电子信箱地址以图象作为超链接源点以图象作为超链接源点以图象作为超链接源点以图象作为超链接源点1设置超链接地址。设置超链接地址。2加入图象。加入图象。注意：注意：的作用范围的作用范围范例范例 ex4-33.html67HTML4.6 4.6 表单标记表单标记4.6.1表单的功能表单的功能 提供图形用户界面和用户输入数据元素提供图形用户界面和用户输入数据元素 处理程序处理程序 客户端程序客户端程序

35、 服务器端处理程序服务器端处理程序68HTML4.6.2表单标记表单标记设置表单区段。设置表单区段。（1 1）actionaction属性。指定处理表单数据的方式。属性。指定处理表单数据的方式。（A A）E-mailE-mail地址，将表单数据传至该电子信箱。地址，将表单数据传至该电子信箱。（B B）JSPJSP或或ASPASP程序，该程序置于服务器，表单数据送去被程序，该程序置于服务器，表单数据送去被处理。处理。（2 2）methodmethod属性。设置所输入数据的传送方式，常设置为属性。设置所输入数据的传送方式，常设置为postpost或或getget，差别仅在于参数传递方式之不同。，差

36、别仅在于参数传递方式之不同。（3 3）entypeentype属性。设置数字的编码格式。属性。设置数字的编码格式。69HTML/4.6.3 4.6.3 输入组件输入组件 （1 1）typetype属性。标记输入对象的属性。属性。标记输入对象的属性。（A A）单行文本框）单行文本框 input type=（B B）单选按钮）单选按钮 input type=（C C）复选框）复选框 input type=（D D）密码文本框）密码文本框 input type=（E E）提交按钮）提交按钮 input type=（F F）重置按钮）重置按钮 input type=70 （2 2）namename属属

37、性性。用用来来指指明明输输入入对对象象的的名名称称，类类似似于于程程序语言中的变量名称，供以后处理使用。序语言中的变量名称，供以后处理使用。（3 3）valuevalue属性。设置输入对象的默认值或输入值。属性。设置输入对象的默认值或输入值。（4 4）maxlengthmaxlength属属性性。设设置置输输入入文文本本框框的的最最大大可可输输入入字字符数。符数。（5 5）sizesize属性。设置输入文本框的显示宽度（字符数）属性。设置输入文本框的显示宽度（字符数）（6 6）checkedchecked属性。将单选按钮或复选框激活。属性。将单选按钮或复选框激活。71范例范例 4-64-6 范

38、例：表单对象范例：表单对象 姓名：姓名：input type=text name=性别：性别：男男 女女 /婚姻：婚姻：72已婚已婚未婚未婚喜欢的运动（可复选）：喜欢的运动（可复选）：高尔夫高尔夫球球篮球篮球桌球桌球网球网球ex4-35.html73多行文本框多行文本框，产产生生带带有有滚滚动动条条的的多多行行文本框文本框（1）name属性。指明输入对象的名称属性。指明输入对象的名称（2）rows属性。设置可见总行数属性。设置可见总行数（3）cols属性。设置可见总列数。属性。设置可见总列数。范例范例结果结果746.5.4下拉式列表下拉式列表（1）multiple属属性性。设设置置表表中中项目

39、具有复选框项目具有复选框（2）name属性。设置对象的名称属性。设置对象的名称（3）size属性。设置可见的项目数属性。设置可见的项目数（4）用）用产生选择项目产生选择项目（A）selected属性。将某选项设置为选取状态。属性。将某选项设置为选取状态。（B）value属性。对象的默认值。属性。对象的默认值。范例范例结果结果756.5.5表单的回收表单的回收（1）在在服服务务器器端端由由其其CGI或或ASP/JSP程程序处理序处理（2）通过）通过E-mail回收回收表单内容：表单内容：76范例范例传送结果传送结果姓名姓名=林小成林小成班别班别=A课程课程=多媒体技术及应用多媒体技术及应用意见意

40、见=内容丰富实用内容丰富实用建议增加程序设计建议增加程序设计B1=传送传送77HTML4.6.64.6.6表单标记的应用案例表单标记的应用案例 表单标记的应用表单标记的应用form method=post action请输入姓名：请输入姓名：input type=text name=6请输入密码：请输入密码：input type=password name=6上载的文件：上载的文件：input type=file name=filename size=12=6性别：性别：      nbsp;   &nbs

41、p; select name=;男男 女女78HTML请选择旅游城市，可做多项选择请选择旅游城市，可做多项选择input type=checkbox name=checked 北京北京input type=checkbox name=上海上海input type=checkbox name=西安西安input type=checkbox name=昆明昆明请选择付款方式请选择付款方式input type=radio name=1 信用卡信用卡input type=radio name=1 checked 现金现金留言：留言：cols=50 rows=4请与我们联系请与我们联系/inp

42、ut type=reset name=input type=submit name=旅游旅游79HTML4.7 4.7 窗口框架标记窗口框架标记 4.7.1 4.7.1 设置框架区段设置框架区段。其内再设。其内再设置每个框架属性置每个框架属性（1 1）rowsrows属性。设置行数与行高。属性。设置行数与行高。n1n1、n2n2及及n3n3。其中。其中n n的表的表示方法有三：示方法有三：（A A）整数（代表象素点数目）；整数（代表象素点数目）；（B B）百分数（代表浏览器窗口，高度百分比）；）百分数（代表浏览器窗口，高度百分比）；（C C）n*n*（表示总高度所占比例，如（表示总高度所占比例

43、，如row=row=“3*3*，5*5*”指第指第一个框为窗口高度的一个框为窗口高度的3/83/8每二个框为每二个框为5/85/8）（2 2）colscols属性。设置列数与列宽属性。设置列数与列宽804.7.2设置框架属性设置框架属性（1 1）name=“name=“设置框架名称设置框架名称”（2 2）longdesclongdesc=“=“链接至链接至URL”URL”(3)(3)srcsrc=“=“初始文档初始文档URL”URL”。frame =“URL”相当于相当于a =“URL”（4 4）frameborderframeborder=“yes 10”=“yes 10”（5 5）marg

44、inwidthmarginwidth=“=“左右空白象素点数左右空白象素点数”（6 6）marginheightmarginheight=“=“上下空白象素点数上下空白象素点数”（7 7）nosizenosize=使框架大小不可变使框架大小不可变 （8 8）scrolling=“auto/yes/no”scrolling=“auto/yes/no”设置滚动条设置滚动条814.7.4同一框架中显示多个文档。同一框架中显示多个文档。在页面左侧显示超链接目录，左右侧固定位置。在页面左侧显示超链接目录，左右侧固定位置任意显示超链接的目标文件。任意显示超链接的目标文件。框架内的源程序：框架内的源程序：8

45、2HTML4.7.3 4.7.3 例例4.144.14 窗口框架应用案例窗口框架应用案例 frame name=top frame =left.html target=main frame name=main 框架框架834.8HTML动态效果应用案例动态效果应用案例例例4.15例例4.16例例4.17例例4.1884HTML 1.网页的基本元素网页的基本元素(1)文本文本(2)图像图像(3)超链接超链接(4)表格表格(5)表单表单(6)框架框架(7)动态元素动态元素85 2.2.设计网页的步骤设计网页的步骤拟定网页主题拟定网页主题搜集相关资料搜集相关资料规划网页内容规划网页内容绘制结构草图绘制结构草图开始制作网页开始制作网页上传与测试上传与测试推广网页推广网页更新与维护更新与维护前前期期准准备备中中期期制制作作后后期期维维护护86参考电子教程参考电子教程http:/