Web技术应用基础.ppt

1,第2篇Web客户端程序设计基础,第4章HTML,2,HTML,HTML的基本知识与结构熟练掌握HTML应用,HTML,知识点与技术要求,3,HTML,4.1HTML概述4.1.1HTML入门,一个简单HTML案例,4,HTML,例4.1：具有网页最基本的功能：跳转,HTML样例,源代码,5,HTML,简单的html案例欢迎!请单击HelloWorld！,6,HTML,文件名ex04-01_1.htmlHelloWorld！祝贺你，初试成功！,7,HTML,2HTML与网页制作,1.制作纯文本格式。可用Word、记事本、写字板等文本编辑器编写，但一定要存为纯文本格式（*.txt或*.*文件），不能有格式控制编码(如word文本)。最好用记事本。2.转换为*.html格式。在纯文本格式基础上，将文本命名为name.htm或name.html(Windows系统),或name.html(Unix系统)。3.使用浏览器（I.E.）阅读。I.E.地址：C：MyWebname.htm。4HTML只能作静态的、单向的展示网页,由服务器演示给用户。为了双向服务，尚需ASP、JSP等语言。,8,4.1.2HTML文件的结构,文件头,文件体,HTML,9,HTML,4.1.3HTML标记和元素,与平台无关跨网络的超文本链接格式化的标记语言文档=控制标记+显示内容,10,HTML,HTML标记的格式HTML语言元素标记大多成对出现标记与大小写无关标记可以联合使用标记可以带有一个或多个属性参数注释标记不在浏览器中显示,11,HTML,4.1.4页面结构标记1.标记2.文件头标记标题标记,12,HTML,基地址标记描述HTML文档的元信息，被Web检索引擎、Web服务器或其它程序利用。其属性为：,例：其中name项:常用keyword,description,author,可用http-equiv代替，例：content项：根据name和http-equiv填写相应的字符串注意：Frontpage的HTML有自己的规定,文件头标记,13,简单的html案例欢迎！请单击HelloWorld!,ex4-00.html,14,Body标记的属性,（1）background属性。指定一个图形文件(常为GIF或JPEG文件)作为背景图案。例其中URL为图形文件所在位置。下同。（2）bgcolor属性。直接改变网页的背景颜色。例其中颜色可用颜色名或十六进制值表示。,15,（3）text属性。设置文字颜色。例（4）link、vlink、alink属性。分别设置未阅读过、已阅读过及正动作中的链接文字的颜色。WelcomeThisisanothertestcolor,ex4-19.html,16,HTML,4.2HTML页面修饰标记4.2.1标题文字标记语法：标题文字HTML提供6个层次的标题。这是第一层标题这是第二层标题这是第三层标题这是第四层标题这是第五层标题这是第六层标题,ex4-20.html,17,HTML,4.2.2文字样式标记设置基本字型。改变字型。其中字体大小有绝对字体大小，介于17（小大），默认值为3。相对字体大小，在基本字体基础上加大（+n）或缩小（.n）级,18,文字置中基本字体大小：2绝对字体大小：1相对字体大小：基本字体(2)+2=(4),ex4-21.html,19,4.2.3特定文字样式标记,20,HTML,4.2.4段落标记分段标记换行标记水平线标记预格式化标记,21,文件段落,用于标记一段文字的开始和结束，其中可省略。用align属性设置段落对齐方式段落练习这是第一段这是第二段。不同段落之间会强迫换行，而且空白较大；同一个段落的文字则根据页面宽度自动换行，只是空白较小。这是第三段,ex4-23.html,22,强迫换行,浏览器自动忽略HTML文件中的多余空格及换行符号，若要强迫换行需要加入。例白日依山尽，黄河入海流若无br则显示为：白日依山尽，黄河入海流。,23,产生水平线，起分隔作用，其属性有：,（1）size属性，设置水平线的高度。（象素点数目）（2）width属性，设置水平线的宽度。（象素点数目）或（相对宽度）（3）align属性，指定水平线的靠左对齐、靠右对齐或居中。、或（4）color属性，设置水平线颜色。（5）noshade属性，使水平线不具备阴影效果，默认值为有阴影。若不要阴影（凃黑），需加：上述属性可同时存在，顺序可互调，属性之间用空格隔开,24,范例,hrsize=5size=10size=20width=70%width=50%align=centernoshade,ex4-22.html,25,以原始格式显示,白日依山尽，黄河入海流欲穷千里目，更上一层楼以下文字将以原始面貌呈现白日依山尽，黄河入海流欲穷千里目，更上一层楼,ex4-24.html,26,HTML,文字对齐标记,27,HTML,页面修饰标记应用显示2号标题字显示蓝色隶书字体显示删除划线aaaa(显示地址),28,HTML,显示上标：x3显示下标：x2预格式化标记应用*,例4.2,29,特殊符号,在HTML文件中ad显示为ad，中间的被浏览器忽略，所以规定：（大于符号）为否则表格无框线。（2）cellspacing属性。设置单元格之间的间距，默认值为2。（3）cellpadding属性。调置单元格和其内容的间距。,38,设置表格行。，任何一列都必须夹在这组标记之间。,（1）align属性。设置同一列文字水平方向的排列方式，left、middle或right。（2）valign属性。设置同一列文字垂直方向的排列方式，top、middle、bottom或baseline。,39,设置表格单元格。,（1）rowspan属性。设置单元格所占的列高（2）colspan属性。设置单元格所占的行宽(3)align及valign属性。范例：rowspan示例一二三,40,四五colspan示例一二三四五,ex4-26.html,41,设置表头。类似于，默认值为粗体且居中对齐。设置表格标题。默认值置于表格上方之中间，也可强制置于下方，用。,42,HTML,使用格式：表格标题第一列表头第二列表头第一行、一列表项第一行、二列表项第二行、一列表项第二行、二列表项,ex4-27.html,43,HTML,例4.6：课表代码清单：表格标记应用案例0705331课表节次星期一星期二星期三星期四  星期五,44,HTML,1、2英语操作系统网络基础英语数据库原理3、4Java数据库原理实验Java操作系统5、6网络基础实验实验实验,例4.6,45,小结,1定义表格区段。2设置表格标题。3设置表头。4设置表格行。5设置表格单元格。表格综合设计,46,范例4-5综合表格范例x文件姓名：维纳斯,47,电话：(02)12345678生日：某年某月的某一天住址：快乐市欢喜路100号维纳斯公馆公司：爱心传播公司,48,.tw备注：欢迎光临！这是一个表中表。,ex4-28.html,49,4.4.2列表标记1.无序列表标记属性type，type取值：typedisk：实心园点(默认)typecircle：空心园点typesquare：实心方块,50,例4.7无序列表标记应用案例无序列表1第一项。第二项。无序列表2第一项。第二项。,例4.7,51,2.有序列表标记属性type和start。type取值type1：1、2、3等标识,默认值typeA：大写字母A、B、C等标识typea：小写字母a、b、c等标识typeI：大写罗马字母标识typei：小写罗马字母标识,52,有序列表标记应用案例有序列表的属性有序列表标记具有属性start,指定列表编号的开头有序列表标记具有属性typetype1，缺省值，用数字1，2，3等标识各项。typeA，用大写字母A，B，C等标识各项。typea，用小写字母a，b，c等标识各项。typeI，用大写罗马字母标识各项。typei，用小写罗马字母标识各项。,例4.8,53,3.定义列表标记术语术语的定义1术语的定义2术语术语的定义,54,例4.9定义标记应用案例定义列表的使用列表数据项的有序集合。标号程序中指令的标识符。磁盘文件的标识说明记录。数据集中或附加在数据集上的字符，它包括数据集的信息。列表数据项的有序集合。,例4.9,55,多层次列表,多层次列表范例第一层的项目一第二层的子项一第三层的子项一第三层的子项二第二层的子项二第一层的项目二第一层的项目三,ex4-29.html,56,HTML,4.5超链接标记用,称作锚（anchor）,整合世界各地的图、文、影、音数据。超链接的分类（1）远程链接（不在同一网站）。（2）近端链接（在同一网站）。又分（A）文件外链接（不在同一网页）（B）文件内链接（在同一网页）,57,超链接的寻址,1远程链接。其中URL标记方式为：,58,范例3.1超级链接范例淡江大学WWW首页淡江大学FTP服务器国科会Gopher服务器淡江大学BBS主机淡江大学News主机写信给本书作者,ex4-30.html,59,60,近端链接,（1）文件外链接。A相对路径法（a）目标文件与源文件位于同一层目录。（b）目标文件“位于”源文件下一层目录。（c）目标文件“位于”源文件上一层目录。B.绝对路径法。，其中开头的代表网站的根目录,61,范例3-2范例3-2近端连结相对路径法：目的节点在同一层目录：ex4-10_1.html目的节点在上一层目录：回首页（index.htm）,62,目的节点在下一层目录：ex4-04-a.html绝对路径法：目的节点在其它目录：c:test.txt,ex4-31.html,63,（2）文件内链接,1在目的区段开始处标明标记名称2在源节点处指明目的节点位置例Internet系列图片其它系列图片,64,范例,ex4-32.html,65,HTML,相互链接：ex4-10.html超链接标记应用下一页超链接标记的功能,例4.10,66,ex4-10_1.html超链接标记应用上一页超链接标记是超文本的基本结构，它可以从当前Web页面定义的位置跳转到其他位置，包括同一页面的其他位置、Internet上的另一个Web页面、本地硬盘或局域网上的文件、声音或图像文件、FTP或Telnet站点、电子信箱等。,67,HTML,链接电子信箱语法规则：电子信箱地址以图象作为超链接源点1设置超链接地址。2加入图象。注意：的作用范围范例,ex4-33.html,68,HTML,4.6表单标记4.6.1表单的功能提供图形用户界面和用户输入数据元素处理程序客户端程序服务器端处理程序,69,HTML,4.6.2表单标记设置表单区段。（1）action属性。指定处理表单数据的方式。（A）E-mail地址，将表单数据传至该电子信箱。（B）JSP或ASP程序，该程序置于服务器，表单数据送去被处理。（2）method属性。设置所输入数据的传送方式，常设置为post或get，差别仅在于参数传递方式之不同。（3）entype属性。设置数字的编码格式。,70,HTML/,4.6.3输入组件（1）type属性。标记输入对象的属性。（A）单行文本框（B）单选按钮（C）复选框（D）密码文本框（E）提交按钮（F）重置按钮,71,（2）name属性。用来指明输入对象的名称，类似于程序语言中的变量名称，供以后处理使用。（3）value属性。设置输入对象的默认值或输入值。（4）maxlength属性。设置输入文本框的最大可输入字符数。（5）size属性。设置输入文本框的显示宽度（字符数）（6）checked属性。将单选按钮或复选框激活。,72,范例4-6范例：表单对象姓名：性别：男女婚姻：,73,已婚未婚喜欢的运动（可复选）：高尔夫球篮球桌球网球,ex4-35.html,74,多行文本框,，产生带有滚动条的多行文本框（1）name属性。指明输入对象的名称（2）rows属性。设置可见总行数（3）cols属性。设置可见总列数。范例结果,75,6.5.4下拉式列表,（1）multiple属性。设置表中项目具有复选框（2）name属性。设置对象的名称（3）size属性。设置可见的项目数（4）用产生选择项目（A）selected属性。将某选项设置为选取状态。（B）value属性。对象的默认值。范例结果,76,6.5.5表单的回收,（1）在服务器端由其CGI或ASP/JSP程序处理（2）通过E-mail回收表单内容：,77,范例传送结果姓名=林小成班别=A课程=多媒体技术及应用意见=内容丰富实用建议增加程序设计B1=传送,78,HTML,4.6.6表单标记的应用案例表单标记的应用请输入姓名：请输入密码：上载的文件：性别：男女,79,HTML,请选择旅游城市，可做多项选择北京上海西安昆明请选择付款方式信用卡现金留言：请与我们联系,旅游,80,HTML,4.7窗口框架标记4.7.1设置框架区段。其内再设置每个框架属性（1）rows属性。设置行数与行高。