第9章 Web应用程序开发.ppt

第第9章章Web应用程序开发应用程序开发Web应用程序开发第9章第第9章章Web应用程序开发应用程序开发9.1 Web概述概述9.3 基本基本HTML标记标记9.4 WebWeb脚本简介脚本简介9.2 网页基础网页基础第第9章章Web应用程序开发应用程序开发9.1 9.1 WebWeb概述概述第第9章章Web应用程序开发应用程序开发WWW(WorldWWW(World Wide Web)Wide Web)万维网万维网或或WebWeb。由一些应用软。由一些应用软件及一系列协议和约定组成，是一种可进行信息浏览件及一系列协议和约定组成，是一种可进行信息浏览和信息发布的网络和信息发布的网络。WWWWWW以超文本标记语言以超文本标记语言HTMLHTML与超文本传输协议与超文本传输协议HTTPHTTP为为基础，能够提供面向基础，能够提供面向InternetInternet服务的信息浏览系统服务的信息浏览系统。WWWWWW是建立在客户机是建立在客户机/服务器模型之上的。服务器模型之上的。WebWeb服务服务器采用超链接形式将大量信息链接起器采用超链接形式将大量信息链接起来。来。WWWWWW所提供的信息以统一资源定位器所提供的信息以统一资源定位器(URL)(URL)来标识。来标识。URLURL由协议类型、主机名和路径及文件名由协议类型、主机名和路径及文件名组成组成。http:/http:/ 9.2 网页基础网页基础第第9章章Web应用程序开发应用程序开发网页网页：WWWWWW的基本单位，是各种网络应用的载的基本单位，是各种网络应用的载体。是一个存放在体。是一个存放在WebWeb服务器上的一个文件，服务器上的一个文件，它在浏览器中为我们呈现各种多媒体信息它在浏览器中为我们呈现各种多媒体信息。9.2.1 9.2.1 基本概念基本概念超级链接超级链接：从一个网页指向一个特定位置的：从一个网页指向一个特定位置的链接，也可理解为指向其它信息的一个指针链接，也可理解为指向其它信息的一个指针HTMLHTML：Hypertext Markup LanguageHypertext Markup Language，超文本，超文本标记语言标记语言。用于格式化网页上显示的文本、。用于格式化网页上显示的文本、建立超级链接、插入图像、建立表格等建立超级链接、插入图像、建立表格等第第9章章Web应用程序开发应用程序开发标记标记：用于控制网页的显示方式，以及所显示用于控制网页的显示方式，以及所显示的内容的内容。标记演示标记演示。单标记单标记：只有起始标记，没有结束标记。：只有起始标记，没有结束标记。双标记：既有起始标记也有结束标记。双标记：既有起始标记也有结束标记。属性属性：用于为标记提供附加信息，位于起始：用于为标记提供附加信息，位于起始标记中。属性可有可无，也可能有多个。标记中。属性可有可无，也可能有多个。A href=第第9章章Web应用程序开发应用程序开发!-HTML-!-标题名标题名!-HTML-.其它头部标记其它头部标记.!-!-.网页内容网页内容.!-!-HTML -9.2.2 HTML9.2.2 HTML文件的基本结构文件的基本结构第第9章章Web应用程序开发应用程序开发标记的格式标记的格式：BODY text=#ffff00=#ffff00 utexttext属性：设置网页文本的颜色属性：设置网页文本的颜色；ubgcolorbgcolor属性：设置网页的背景颜色属性：设置网页的背景颜色；ubackgroundbackground属性：设置网页的背景图像属性：设置网页的背景图像；ulinklink、vlinkvlink、alinkalink属性：设置尚未访问、属性：设置尚未访问、已访问已访问、正被访问正被访问的超级链接的文本颜色的超级链接的文本颜色第第9章章Web应用程序开发应用程序开发【例【例9.29.2】使用】使用标记标记 使用使用标记标记 白帝城白帝城 朝辞白帝彩云间朝辞白帝彩云间,千里江陵一日还千里江陵一日还 两岸猿声啼不住两岸猿声啼不住,轻舟已过万重山轻舟已过万重山 第第9章章Web应用程序开发应用程序开发【例【例9.29.2】使用】使用标记标记第第9章章Web应用程序开发应用程序开发9.39.3基本基本HTMLHTML标记标记第第9章章Web应用程序开发应用程序开发使用使用Hn 标记设置一篇文章或一段文本的标题，标记设置一篇文章或一段文本的标题，标题文字以粗体显示。格式为标题文字以粗体显示。格式为：Hn align=left标题标题 /Hn 9.3.1 9.3.1 标题标题n n表示标题的级别。表示标题的级别。n=1n=1，表示一级标题，此，表示一级标题，此时标题文字的字体最大；时标题文字的字体最大；n=6n=6，表示六级标题，表示六级标题，此时标题文字的字体最小。此时标题文字的字体最小。alignalign表示标题文本的对齐方式，取值表示标题文本的对齐方式，取值leftleft、rightright和和centercenter。第第9章章Web应用程序开发应用程序开发【例【例9.39.3】使用】使用Hn 标记标记 使用使用标记标记 唐诗三百首唐诗三百首 唐诗三百首收录了唐诗三百首收录了7777位诗人的诗，共位诗人的诗，共311311首，在数量以首，在数量以杜甫诗数多，有杜甫诗数多，有3838首、王维诗首、王维诗2929首、李白诗首、李白诗2727首、李商隐诗首、李商隐诗2222首。内容浅显易懂，深受人们喜欢。首。内容浅显易懂，深受人们喜欢。李白李白 月下独酌春思关山月夜思怨情月下独酌春思关山月夜思怨情玉阶怨玉阶怨第第9章章Web应用程序开发应用程序开发【例【例9.39.3】使用】使用Hn 标记标记第第9章章Web应用程序开发应用程序开发FONT face=color=black文字文字 (1)face(1)face属性：字体名，默认为宋体；属性：字体名，默认为宋体；(2)size(2)size属性：字号，取值范围为属性：字号，取值范围为1-71-7，sizesize取取7 7时最大，时最大，1 1时最小，默认为时最小，默认为3 3号；号；(3)color(3)color属性：文字颜色，默认为黑颜色。属性：文字颜色，默认为黑颜色。9.3.2 9.3.2 文字文字、：粗体、斜体、下划线、删除线、下标、上标粗体、斜体、下划线、删除线、下标、上标第第9章章Web应用程序开发应用程序开发【例【例9.49.4】设置文字的格式】设置文字的格式使用使用标记标记 光明光明 作者：作者：朱自清朱自清 FONT face=_GB2312 size=4风雨沉沉的也风雨沉沉的也夜里，前面一片荒郊。夜里，前面一片荒郊。上帝慌着说，上帝慌着说，“光明？我没处给光明？我没处给你找！你找！你要光明，你自己去造！你要光明，你自己去造！”人物介绍：朱自清人物介绍：朱自清(1898-1948)(1898-1948)，原名自毕，字佩弦，原名自毕，字佩弦，号秋实，江苏东海人，中国现代散文家、诗人。号秋实，江苏东海人，中国现代散文家、诗人。主主要作品有诗歌散文集踪迹。要作品有诗歌散文集踪迹。第第9章章Web应用程序开发应用程序开发【例【例9.49.4】设置文字的格式】设置文字的格式第第9章章Web应用程序开发应用程序开发将将标记放置于文章中一行的末尾，可以使标记放置于文章中一行的末尾，可以使文本产生强制换行。文本产生强制换行。标记是一个单标记标记是一个单标记。9.3.3 9.3.3 段落段落在在和和标记中的文本会形成一个段落标记中的文本会形成一个段落。段落内容段落内容其中，其中，alignalign属性表示段落文本的对齐方式属性表示段落文本的对齐方式第第9章章Web应用程序开发应用程序开发【例【例9.59.5】使用段落】使用段落使用段落使用段落 李白李白 关山月关山月 明月出天山，苍茫云海间。明月出天山，苍茫云海间。长风几万里，吹度玉门长风几万里，吹度玉门关。关。汉下白登道，胡窥青海湾。汉下白登道，胡窥青海湾。由来征战地，不见由来征战地，不见有人还。有人还。戍客望边邑，思归多苦颜。戍客望边邑，思归多苦颜。高楼当此夜，高楼当此夜，叹息未应闲。叹息未应闲。行路难行路难 第第9章章Web应用程序开发应用程序开发【例【例9.59.5】使用段落】使用段落第第9章章Web应用程序开发应用程序开发IMG 9.3.4 9.3.4 图像图像(1)src(1)src属性：要显示图像的文件名及路径。属性：要显示图像的文件名及路径。(2)alt(2)alt属性：指定属性：指定替换文本。替换文本。(3)width(3)width和和heightheight属性：指定图像的宽度和属性：指定图像的宽度和高度。取值可以是像素数，也可以高度。取值可以是像素数，也可以是百分比是百分比第第9章章Web应用程序开发应用程序开发【例【例9.69.6】使用图像】使用图像 使用图像使用图像 游子吟游子吟 孟郊孟郊 IMG src=water.jpg width=530 alt=慈母手中线，游子身上衣。慈母手中线，游子身上衣。临行密密缝，意恐迟迟临行密密缝，意恐迟迟归。归。谁言寸草心，报得三春晖。谁言寸草心，报得三春晖。第第9章章Web应用程序开发应用程序开发【例【例9.69.6】使用图像】使用图像第第9章章Web应用程序开发应用程序开发使用使用alignalign属性。属性。图文混排图文混排uleftleft：图像居左，文本在图像右侧：图像居左，文本在图像右侧；urightright：图像居右，文本在图像左侧：图像居右，文本在图像左侧；utoptop：文本与图像的顶部对齐：文本与图像的顶部对齐；umiddlemiddle：文本与图像的中间对齐：文本与图像的中间对齐；ubottombottom：文本与图像的底部对齐：文本与图像的底部对齐。第第9章章Web应用程序开发应用程序开发【例【例9.79.7】图文混排】图文混排图文混排图文混排 送孟浩然之广陵送孟浩然之广陵 李白李白 IMG src=hhl.jpg width=230 height=180 align=left 故人西辞黄鹤楼，烟花三月下扬州。故人西辞黄鹤楼，烟花三月下扬州。孤帆远影碧孤帆远影碧空尽，惟见长江天际流。空尽，惟见长江天际流。高楼当此夜，叹息未应闲。高楼当此夜，叹息未应闲。【评析】：【评析】：第第9章章Web应用程序开发应用程序开发【例【例9.79.7】图文混排】图文混排第第9章章Web应用程序开发应用程序开发A 文本或图象文本或图象9.3.5 9.3.5 超级链接超级链接(1)href(1)href属性：指定链接地址。属性：指定链接地址。(2)target(2)target属性：指定链接的网页在何处打开。属性：指定链接的网页在何处打开。取值取值_blank_blank、_self_self、_top_top或或_parent_parent。(3)name(3)name属性：定义命名位置，又称为锚点名。属性：定义命名位置，又称为锚点名。它与它与hrefhref属性不能同时使用。属性不能同时使用。第第9章章Web应用程序开发应用程序开发A 新浪网新浪网1.1.链接到另一个网页链接到另一个网页2.2.链接到网页的某个位置链接到网页的某个位置(1)(1)定义命名位置定义命名位置(或者锚点或者锚点)A name=文本文本(2)(2)链接到命名位置链接到命名位置A href文本文本第第9章章Web应用程序开发应用程序开发【例【例9.89.8】使用超级链接作为目录】使用超级链接作为目录 使用超级链接作为目录使用超级链接作为目录 唐诗三百首唐诗三百首 唐诗三百首收录了唐诗三百首收录了7777位诗人的诗，共位诗人的诗，共311311首，在数量以杜首，在数量以杜甫诗数最多，有甫诗数最多，有3838首、王维诗首、王维诗2929首、李白诗首、李白诗2727首、李商隐诗首、李商隐诗2222首。首。李白李白 关山月关山月 行路难行路难 送孟浩然之广陵送孟浩然之广陵 第第9章章W