《《网络编程技术》ppt课件》由会员分享,可在线阅读,更多相关《《网络编程技术》ppt课件(153页珍藏版)》请在金锄头文库上搜索。
1、第9章 网络编程技术,91 HTML 基础 92 ASP编程技术 93 JAVA语言的网络程序设计 94 JSP编程技术 95 习题9,91 HTML 基础 911 HTML 语言基础 HTML(Hyper Text Markup Language)超文本标记语言是网页设计的基础,源于标准通用标志语言SGML(Standard Markup Language)。利用HTML语言编写的Web网页,实质上就是纯文本文件,可用任何文本编辑器阅读和编辑。HTML文档通过标记(TAG)和属性对超文本的语义进行描述,这些TAG用于描述网页内容在浏览器中的显示方式,产生所需的各种效果。HTML作为一种标记语
2、言,用来创建与系统平台无关的文档,即任何可以运行浏览器的计算机都能阅读并显示HTML。,HTML有以下用途: 用标题、文本、表格、列表、照片等发布在线信息。 通过超文本链接,在鼠标点击时取得在线信息。 设计表格与远程服务通讯,查询信息、进行预订、订购产品等。 把样式表、视频剪辑、音频剪辑和其它应用程序包含在文档中。 浏览器能够阅读的HTML文本包括如下两种类型的信息: 标记信息:该部分信息用来控制文档内部的显示方式,并允许WEB设计人员指定与其他文档的连接。 内容信息:该部分信息就是浏览器显示的文本、图形和声音信息,简称为文件块。 HTML文档是由标记和文件块组成的。下面简单介绍HTML的使用
3、。,1HTML元素 HTML文件所有的控制语句称为标记(TAG),元素(Element) 由标记和文件块组成。标记全部放在一对尖括号之中,如“”的形式。在HTML中,典型的元素由三部分组成:起始标记、文件块和结束标记。格式为: 受影响的文本 元素的起始标记写作,其中ElementName为此元素的名称。元素结束标记为在元素名称前面加一斜杠,形如。例如: HTML的基本语法 对标记的使用有以下一些约定:,(1)大多数标记都是成对出现的,称为“双标记”,它由“起始标记”和“结束标记”两部分构成,而且必须成对使用。 例如:和为表的行标记,用于定义数据行。和为表的数据标记,用于定义每行内单元格。 也有
4、少部分标记无尾标记,称为“单标记”或“空标记”。它们只需要单独使用就能完整地表达意思,最常见的单标签是表示强迫换行。 (2)标记的字母可以大写,也可以小写,二者作用完全一样。因此说,与效果是一样的。 (3)标记可以联合使用,也可以嵌套。,2HTML元素的属性 HTML元素具有相关属性,可对这些属性赋予适当的值,制作各种效果。一个元素可以具有多个属性,其属性名和属性值都必须出现在该起始标记结束符之前,彼此以空格隔开,各属性的顺序可以是任意的,语法格式为: ,各属性之间无先后次序,属性也可省略(即取默认值)。 应该注意,属性名也是不区分大小写的,同时属性值中只能包含字母、数字、连字符或者句点。 3
5、HTML文件的注释 HTML文件注释的基本格式如下: ,4HTML文件的基本结构 所有的HTML文件的结构都可以划分成两个基本部分:文件头和文件主体它们可由三对标记构成: 头部信息 文档主体,正文部分 ,1)文挡标记 HTML文件以开头,以结尾。格式为: HTML文档内容 处于文档的最前面,表示HTML文档的开始,即浏览器从开始解释,直到遇到为止。 2)文件头标记 HTML文件头标记的格式为: 头部信息 本标记在HTML文件中不是必须的,如果没有,浏览器也会照常解读文件。 文件头部在之后,在开始标记和结束标记间定义。其内容可以是标题,文本文件地址、创作信息等网页信息说明,对应于相应的标记有:标
6、题、基地址、下一个标识 、索引文件 、相关资料 。,标题 (Title):给出文件的总标题,格式如下: 标题 一对标签用于显示Web页面的总标题。通常Web浏览器把总标题显示在一个特殊的区域内。例如Netscape把总标题显示在窗口顶端标题栏内。 基地址 (BASE):该元素用来指定涉及整个HTML文件各部分链接路径的起点。如果需要,必须在文件头部说明。例如:(BASEHREF= http:/ 下一个标识 (NEXTID) 当文本编辑器要给带有特定编号(ID)的页面进行标记时,根据NEXTID元素给出下一个页的ID的值,表示下一个标识,这里的属性“N=”向编辑器表明自己的编号。 索引文件 (I
7、NDEX):说明该文件是用户可以检索的索引文件。它告诉浏览器该文件可以检索。但服务器必须提供检索功能,否则,不起作用。,相关资料元素 (META):该元素用来说明与文本有关的资料信息,包括资料名称 (NAME)和内容说明(CONTENT)两个字段。 大部分头部元素可以省略。 例9.1 :设计网页。标题为:xample;网页显示文字内容为:没有使用head标记,而单独使用title标记仍起作用。 xample ,没有使用 标记仍起作用 例题中用到几个特殊的符号“<;”和“>;”,它们在网页中分别显示“”和“”。因为浏览器解释HTML文件时,是根据“”与“”来识别标记的,然后再确定这两个符
8、号中的内容是否为HTML文件标记。若是,则按其规则解读。所以,要在网页中显示“”和“”,就要使用特殊字符。其他常用的特殊符号见表1所示,表9.1 特殊替换字符,3)文件主体标记 文件主体标记一般不省略,位于头部之后,它是HTML文档的最主要部分,超文本的其他语句几乎都是写在主体部分中。主体元素还可以包含各种参数部分。格式如下: background=文件名text=颜色值link=颜色值vlink=颜色值alink=颜色值 BODY的属性定义为 BACKGROUND、BGCOLOR、TEXT、LINK、VLINK和ALINK,用来设定背景图象、背景颜色、前台文字颜色及超文本连接颜色。 LINK
9、设定未阅读过的超文本连接颜色,缺省值是蓝色。VLINK设定阅读过的超文本连接颜色,缺省值是紫色,ALINK设定动作中的超文本连接颜色,缺省值是紫色。,不设置时取相应属性的默认值。颜色可以用相应英文单词或以“”引导的一个十六进制数代码来表示,见表9.2所示,表9.2 颜色代码表,4)设置标题格式 在页面中,标题是一段文字内容的核心,可以通过设置字体大小不同的标题,为文章增加条理。与用 定义的网页标题不同,标题格式显示在浏览器窗口内,而不是显示在浏览器的标题栏中中。格式为: 标题 属性align用来设置文字的对齐方式:left(左对齐)、center(居中)、right(右对齐)。 属性n用来指定
10、标题文字的大小。N取1到6的整数值,取1时文字最大,缺省时是。在一个标题行中无法使用大小不同的字体。,)强制换行标记 格式为: 文字 浏览器解释时,从该处换行。这是一个单标记。 )设置文字格式 标记。标记可设定文字的字体、字号和颜色。格式为: 被设置的文字 size用来设置文字的大小。数字的取值从,size取1时最小,取7时最大。 face用来设置文字的字体。字体名可以为:宋体、楷体、黑体等汉字字体;也可以为Time New Roman等约,种字体。这里的字体名其实就是在ord的“字体”工具栏中显示的字体名字。 color用来设置文字的颜色,颜色的取值与的取值方法相同。当与标记同时对文字颜色进
11、行定义时,标记优先。 设置字型:字型就是文字的风格,如加粗、斜体、带下划线、上标、下标等。字型的控制标记见表9.3所示。,表 9.3 设置各种字型的标记,例9.2 :在网页上设置文字格式 设置文字格式 今天天气真好 显示红色黑体3号字 正常字显示带下划线显示 7)排 版,排版使用段落的成对标记和,和之间包含的一段文字为一个段落。标记 的参数align表示整个段落的对齐方式, 与标题标记的align格式相同,align的可选参数有left、center和right,分别为左、中和右对齐。中间对齐也可用成对标记完成。 例如: HTML语句 页面效果 左对齐的段落 左对齐的段落 右对齐右对齐的段落
12、右对齐的段落 中间对齐的段落 中间对齐的段落 中间对齐的段落 2 中间对齐的段落2,行缩进引用标记 来表示缩进。一对标记中的文字将向右缩进一段。 例如: HTML语句 页面效果 第一层 第一层 第二层 第二层 第三层 第三层 第二层 第二层 第一层 第一层 下面是一个最简单的Homepage源文件,页面效果参见图9.1:,例9.3 简单的主页实例 欢迎光临HTML世界。 html简单示例 其乐无穷! 欢迎学习使用HTML编制编制出自己的主页。 祝你成功! ,图9.1 HTML主页,5 加入超链接 通过前面的介绍就可以创建简单的HTML文档,但当文本较复杂时常常需将一份文档与另一份文档连接起来。
13、HTML的主要特性之一就是链接。要在Web页面中加入超链接,可按以下进行: (1)开始标记; (2)要链接的目标文档名; (3)要链接的文本(超文本) (4)结束标记。 要创建完整的链接标记,必须在开始标记中设置超文本引用(HREF)属性。HREF描 述了点击该链结后文档跳转的目的地。例如要创建一个指向文档间的链接,可以使用以下链接,微软公司 要创建超链接,必须指明链接目标文件的存储位置,如果目标文档与当前文档存储在同一计算机内,可以使用绝对(完全的)地址路径或相对地址路径指明该文件的位置。如果使用绝对地址,必须在超链接标记内写明目标文档的完整路径,绝对寻址方式的主要问题是移动文件困难,因为每
14、次移动文档的存储位置后,都必须修正每一条绝对路径;而使用相对寻址可以简化移动文件的过程。使用相对寻址方式,需要指明该文档相对与其他文档的位置。表9.4列出了相对寻址和绝对寻址的不同点。,表9.4 相对寻址和绝对寻址的不同点 路径名 寻址方式和绝对寻址的不同点 index.html 相对寻址。该超连接目标文件与源 HTML文件在同一目录下 temp/index.html 相对寻址。该超连接目标文件放在当前目录的temp子目录下 ?index.html 相对寻址。该超连接目标文件放在当前目录的上一级目录中c:tempindex.html 绝对寻址。该超连接目标文件放在c盘驱动器的temp目录下,在
15、大多数情况下,应该使用相对寻址。相对寻址很容易把全部文件从一个目录拷贝到另一个目录,从一个驱动器拷贝到另一个驱动器,或从一个平台拷贝到另一个平台。 HTML允许定义文档内部的链接, 例如 Anchor1 说 明 了 在“ Anchor 1” 前有一个跳转点。 用 Goto Anchor1 则可跳转至 Anchor1处。 6图象及动画的嵌入 1)图象的嵌入 图象嵌入的标记为,其属性为Src,Alt,Align,Width,Height,Border, HSpace和VSpace。 Src指定嵌入图象的图象文件名。例如 src=images/Red_flag.gif Alt指定图象文件尚未装入时,代替图象显示的文字。,例如 该语句表示将在图象尚未装入时显示一个箭头。 Width和Height分别指定图象的宽和高。 Border指定图象边框的宽度。 HSpace和VSpace分别指定图象外水平和竖直留空的宽度。 2) 动画的嵌入 浏览器支持GIF 格式的动画文件。只需生成这种动画文件,和图象文件完全一样, 嵌入HTML即可。可以用Gif Constructor工具来生成这种动画文件。 7