静态网页设计与语言课件.ppt

《静态网页设计与语言课件.ppt》由会员分享，可在线阅读，更多相关《静态网页设计与语言课件.ppt（128页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。

1、静态网页设计与语言第1页，此课件共128页哦3月14号 复习vHTTP协议是基于什么范式的？vHTTP响应状态字4XX和5XX分别表示什么？v网页按照内容来分通常分为哪三种？v网页上通常包含哪些元素？v表单和表格的主要功能分别是什么？请求/响应客户端/服务器端错误主页、内容页和索引页主页、内容页和索引页文本、声音、图像、动画和文本、声音、图像、动画和数字视频等数字视频等用户交互用户交互/网页布局网页布局第2页，此课件共128页哦6 6.1 1 静态网页设计与静态网页设计与HTMLHTML语言语言 6.1.1 静态页面的体系结构 静态网页的特征 v静态网页的内容固定不变;v静态网页的制作比较方便

2、；静态网页的体系结构 Client(浏览器浏览器)Web Server硬盘HTML页面从硬盘获取文件从硬盘获取文件文件返回文件返回页面请求第3页，此课件共128页哦6 6.1 1 静态网页设计与静态网页设计与HTMLHTML语言语言 6.1.2标记语言 Web环境下，采用标记来管理文本内容的现实和格式，常用的标记语言有：SGML:标准通用标记语言，元语言 HTML:超文本标记语言，Web显示语言 XML:扩展标记语言，定义数据结构，适合 数据传输第4页，此课件共128页哦GML(1969)SGML(1985)XML(1998)XHTMLMathMLWMLSVGcXMLebXMLHTML(199

3、3)6 6.1 1 静态网页设计与静态网页设计与HTMLHTML语言语言 6.1.3 标记语言家族第5页，此课件共128页哦6 6.1 1 静态网页设计与静态网页设计与HTMLHTML语言语言 6.1.4超文本置标语言HTML v特点平台兼容 文本文件Web服务器不处理标记，由客户端浏览器解释 丰富的多媒体显示、各种布局处理v不足HTML过多的考虑布局，缺乏对结构化数据的表示能力；链路丢失后不能自动纠正、下载的内容太多、搜索不方便、时间长等缺点；HTML中有限的标记不能满足众多Web应用的需要，缺乏可扩展性第6页，此课件共128页哦HTML第一讲：基础第7页，此课件共128页哦6 6.1 1

4、静态网页设计与静态网页设计与HTMLHTML语言语言 HTML文档的编写方法1.手工直接编写记事本等，存成.htm.html格式2.使用可视化HTML编 辑 器Frontpage、Dreamweaver等3.由Web 服务器（或称HTTP 服务器）一 方实时动态地生成。第8页，此课件共128页哦6 6.1 1 静态网页设计与静态网页设计与HTMLHTML语言语言 网页文件命名1.*.htm或*.html2.无空格3.无特殊符号（例如&符号），只可以有下划线“_”，只可以为英文、数字4.区分大小写5.首页文件名默认为：index.htm 或 index.html第9页，此课件共128页哦HTML

5、 文件结构.v元素：是HTML语言的基本部分。元素总是成对出现，每一对元素一般都有一个开始的标记（如），也有一个结束的标记（如）。元素的标记要用一对尖括号括起来，并且结束的标记总是在开始的标记前加一个斜杠。6 6.1 1 静态网页设计与静态网页设计与HTMLHTML语言语言 第10页，此课件共128页哦 vv vvvv HTML HTML 文件的正文文件的正文vv 头部主体HTML 文件结构6 6.1 1 静态网页设计与静态网页设计与HTMLHTML语言语言 第11页，此课件共128页哦第一张网页（01.htm）my first page This is my first homepage!第

6、12页，此课件共128页哦基本组成部分HTML元素属性 HTML元素可以有自己的相关属性，每一个属性还可以由我们网页编制者赋一定的值。元素属性出现在元素的内，并且和元素名之间有一个空格分隔；属性值用“”引起来。第13页，此课件共128页哦第二张网页（02.htm）my first page This is my second homepage!居中居中第14页，此课件共128页哦HTML元素及元素属性vHEAD之元素1元素出现在文档的开头部分。与之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。v 元素定义HTML文档的标题。与之间的内容将显示在浏览器窗口的标题栏。第15页

7、，此课件共128页哦HTML元素及元素属性vHEAD元素 2v元素 v元素下面可以插入很多很有用的元素属性。下面介绍四种：v用来标记搜索引擎在搜索你的页面时所取出的关键词。第16页，此课件共128页哦HTML元素及元素属性vHEAD元素 3v元素 用来标记文档的作者。第17页，此课件共128页哦HTML元素及元素属性vHEAD元素 4v元素 用来标记你的页面的解码方式。第18页，此课件共128页哦HTML元素及元素属性vHEAD元素 5v元素 用来自动刷新网页第19页，此课件共128页哦练习（03.htm）v编写一个网页，要求3秒钟后自动跳转到南京邮电大学的网站。my third page 三

8、秒钟后本网页将自动跳转到南京邮电大学首页 第20页，此课件共128页哦元素及元素属性1v元素表明是HTML文档的主体部分。在与之间，通常都会有很多其它元素；这些元素和元素属性构成HTML文档的主体部分。第21页，此课件共128页哦元素及元素属性2元素中有下列元素属性：(1)bgcolorvbgcolor属性标志HTML文档的背景颜色。如：改变HTML文件的背景颜色 v例：04.htm第22页，此课件共128页哦HTMLHTML对颜色的控制对颜色的控制vHTML对颜色的控制也有自己的语法。HTML使用16进制的RGB颜色值对颜色进行控制。v16 进制的数码有:0,1,2,3,4,5,6,7,8,

9、9,a,b,c,d,e,f.第23页，此课件共128页哦颜色颜色颜色名和颜色名和RGB值值黑色黑色Black=”#000000”银色银色Silver=”#c0c0c0”红色红色Red=”#ff0000”蓝色蓝色Blue=”#0000ff”白色白色White=”#ffffff”黄色黄色Yellow=”ffff00”绿色绿色Green=”#00ff00”海蓝色海蓝色Aqua=”#00ffff”常见颜色的代码第24页，此课件共128页哦元素及元素属性元素及元素属性33v元素中有下列元素属性：(2)backgroundvbackground属性标志HTML文档的背景图片。如：。v可以使用的图片格式为G

10、IF，JPG例：05.htm、06.htm第25页，此课件共128页哦元素及元素属性4v元素中有下列元素属性：(3)bgproperties=fixedvbgproperties=fixed使背景图片成水印效果，即图片不随着滚动条的滚动而滚动。例：07.htm和08.htm对比第26页，此课件共128页哦元素及元素属性5v元素中有下列元素属性：(4)textvtext属性标志HTML文档的正文文字颜色。如：text=“#FF6666”。Text元素定义的颜色将应用于整篇文档。v例：09.htm第27页，此课件共128页哦元素及元素属性6v元素中有下列元素属性：(5)超级链接颜色vlink、vl

11、ink、alink分别控制普通超级链接、访问过的超级链接、当前活动超级链接颜色。v v南京邮电大学v这是一个链接的例子。点一下带下划线的文字!v链接到22.htmv v例：10.htm第28页，此课件共128页哦元素及元素属性7v元素中有下列元素属性：(6)leftmargin和topmarginv设置网页主体内容距离网页顶端和左端的距离如：v例：11.htm第29页，此课件共128页哦HTML第二讲：内容设置第30页，此课件共128页哦文字标签属性1v文字属性标记1.文字颜色 v指定颜色 .v#=RRGGBB 16 进制数码兰色字红色字绿色字例：01.htmHTML2内容设置第31页，此课件

12、共128页哦文字标签属性2v文字属性标记2.文字字体v.#=客户端可获得的字体 黑体楷书宋体02.htm第32页，此课件共128页哦文字标签属性3v文字属性标记3.文字大小v.v#=1,2,3,4,5,6,7 or+#,-#v专业铸造品质 知识成就未来例：03.htm第33页，此课件共128页哦文字标签属性4v文字属性标记4.文字标题v.v#=1,2,3,4,5,6v老崔的一无所有 例：04.htm第34页，此课件共128页哦文字布局v行的控制 段(Paragraph)(可以看作是空行)空白占位符 很好 很好例：05.htm第35页，此课件共128页哦文字布局v行的控制 v

13、HTML的段落与段落之间有一定的空隔。如果不希望出现空隔而只想换行的话，就要用到另一个元素，即元素。元素可以使所在的位置出现换行。这种换行和浏览器的自动换行的效果类似。元素不是成对出现的。例：BR标记的应用你好吗？很好 06.htm不换行 请改变您浏览器窗口的宽度，使之小于这一行的宽度，看看这个标记的作用！07.htm第36页，此课件共128页哦HTML文字与段落格式控制 倾斜文本 粗体文本 下划线文本 删除线文本 例：08.htm、09.htm、10.htm、11.htm(综合练习)代数方程式9X 2+2X+3=173X 1+2X 2=10第37页，此课件共128页哦基本组成部分HTML注释

14、vHTML文档可以插入注释。注释内容不会在浏览器窗口显示vHTML注释的格式为：代数方程式例：12.htm第38页，此课件共128页哦文字的对齐.(n=1,2,3,4,5,6).(#=left,center,right)align标志的居中对齐p标志中利用align标志实现右对齐 center标志的居中对齐 例：13.htm第39页，此课件共128页哦文字的分区显示v.(#=left,center,right)vP标记自动空行，div不空行 作为一名顶级吉他大师，盖米摩尔是在用他的心在划弦，而绝不是用手指.作为一名顶级吉他大师，盖米摩尔是在用他的心在划弦，而绝不是用手指.例：14.htm第40

15、页，此课件共128页哦3.HTML段落与分行控制v居中-元素元素是一个独立的使所标记的字符居中的元素。它的作用与使用元素里的align=“center”类似v例如：居中段落15.htm第41页，此课件共128页哦3.HTML段落与分行控制v水平线：设定线宽：设定线长：设定对齐方式#=left,right ：设定线的颜色例：16.htm第42页，此课件共128页哦3.HTML的段落与分行控制v无序列表元素1列表在HTML的文档里有重要的地位,HTML规定了多种列表元素。列表所起的主要作用是使特定的文本有序化。第43页，此课件共128页哦3.HTML的段落与分行控制v无序列表元素2无序列表是由和元

16、素定义的:无序列表列表项1列表项2 有序列表列表项1列表项2 例：17.htm第44页，此课件共128页哦3.HTML的段落与分行控制v无序列表元素3无序列表的默认符号是圆点。元素有type属性，通过定义不同的type属性可以改变列表的项目符号。目前，type属性的属性值有：disc(圆)、circle（圆圈）、square（方块）disccirclesquare 例：18.htm第45页，此课件共128页哦3.HTML的段落与分行控制v有序列表元素1有序列表由和定义:sports drink friends例：17.htm第46页，此课件共128页哦3.HTML的段落与分行控制v有序列表元素

17、2元素也有自己的type属性，type属性的属性值有1、A、a、I、i等。例如，我们以A、B、C作为列表的编号,ONE-ONE例：19.htm元素还可以定义列表的起始编号，如我们希望列表的第一个编号为5，而不是1，则需要定义元素的start属性 ONE-ONE例：20.htm第47页，此课件共128页哦4.超级链接普通超级链接1v超级链接是整个WWW应用的核心和基础。如果没有超级链接的概念，那么，我们现在所有的WWW的应用将不复存在。所以，对超级链接的掌握具有特殊重要的意义。第48页，此课件共128页哦4.超级链接普通超级链接2超级链接是用锚元素定义的 v在元素下，有元素属性href,href

18、的属性值为一个URL地址v如：指向学院的超级链接 v如：普通超级链接例：21.htm第49页，此课件共128页哦4.超级链接E-mail超级链接 v超级链接可以指向E-mail地址v如：指向E-mail地址的超级链接例：22.htm第50页，此课件共128页哦4.超级链接新开链接窗口v开一个新的(浏览器)窗口(Target Window).例：26.htm第51页，此课件共128页哦4.超级链接去除下划线v去掉超级连接的下划线：style=“text-decoration:none”链接下面没有下划线例：25.htm第52页，此课件共128页哦4.超级链接其他超级链接 vWWW应用仅仅是Int

19、ernet应用的一种,Internet还有其他很多应用，如：Ftp等。实际上mailto也属于非WWW应用。我们可以类似的创建指向Ftp等的超级链接;v指向其他Internet应用的超级链接不是我们掌握的重点。第53页，此课件共128页哦4.超级链接锚点(书签)1 vv指向本页面锚点aa的超级链接例：23.htmv指向23页面的锚点top的超级链接例：24.htm第54页，此课件共128页哦练习：手写代码实现v链接（新开窗口与Email）、背景、文字颜色、字体、换行、页面标题。v练习：27.htm南京邮电大学新开窗口到南京邮电大学给我来信改变文字颜色改变字体第55页，此课件共128页哦HTML

20、对图片的控制-1v基本语法:v引用图片必须用元素标志。元素下的基本元素属性是src属性，src的属性值为所引用的图片的URL地址。src属性是必须的。Src的URL可以是绝对地址，也可以是相对地址例：28.htm第56页，此课件共128页哦HTML对图片的控制-2v所谓图片的替代文本，指图片不能显示时在图片所在位置显示的一段文本或当鼠标移到图片上时也会显示替代文本。v定义图片替代文本的方法是：例：28.htm第57页，此课件共128页哦HTML对图片的控制-3v图片的显示大小我们可以指定一幅图片在浏览器窗口里的显示大小。定义图片的显示大小的方法是：width指定图片的宽度，height指定高度

21、。它们的属性值可以是象素，也可以是%。例：29.htm第58页，此课件共128页哦HTML对图片的控制-4v图片的边框我们可以为一幅图片加一个边框以突出显示：vborder的属性值为象素数例：30.htm第59页，此课件共128页哦HTML对图片的控制-5v图片的对齐方式图片可以相对于页面或单元格有一个对齐方式。定义水平对齐方式的方法是：例：31.htm第60页，此课件共128页哦HTML对图片的控制-6v图片的对齐方式定义图片的垂直对齐方式：对于图片的对齐方式不仅是以上几种，但是以上的几种是最常用的。例：32.htm第61页，此课件共128页哦HTML对图片的控制-7v定义图片与左、右的文本

22、之间的间距图片在显示时，与左右的文本之间可以有一定的间距 Hspace(horizontal)定义水平间距；Vspace(vertical)定义垂直间距。单位都是象素数.例：33.htm第62页，此课件共128页哦HTML对图片的控制-8v图象的超级链接 图象的超级链接是指整个图象的超级链接，当点击图象的任何部分时，都会打开这个超级链接。定义默认超级链接的方法是：所以，所谓超级链接实际上就是用元素标志一个图象的引用;例：34.htm第63页，此课件共128页哦HTML对图片的控制-9v图象映射所谓图象映射是指一个图片上的不同位置被指定了不同的超级链接；点击图片的不同位置会打开不同的超级链接目标

23、。这与前面的默认超级链把整个图片作为超级链接的元素是很不一样的。第64页，此课件共128页哦HTML对图片的控制-10v图象映射（只要求理解标记含义）图象映射由定义。有一个基本属性是name。Name给图象映射命名，这个命名将会被元素用usemap属性引用。所以，图象上的图象映射实际上是对定义的映射的一个引用。在定义图象映射时，可以定义三种形状的映射：circle(圆形)、rect(矩形rectangle)、poly(多边形)第65页，此课件共128页哦HTML对图片的控制-11v图象映射实例（35.htm）第66页，此课件共128页哦HTML第三讲：表格第67页，此课件共128页哦一月一月二

24、月二月三月三月120010001500单元格（用来表示，每个单元格可以有背景颜色和背景图片）表格（用来表示，表格可以有背景颜色、背景图片）表格边框每一行可以用来表示，单元格放在行中，每行可以有很多的单元格。表头（用来表示，表头是特殊的单元格，其中的文字加进去之后默认是居中并且加粗）HTML对表格的控制第68页，此课件共128页哦表格(TABLE)标记-1v 元素：定义一个表格。每一个表格只有一对和，一张页面中可以有多个表格。v元素：定义表格的行，一个表格可以有多行，所以对于一个表格来说不是唯一的。v元素：定义表格的一个单元格。每行可以有不同数量的单元格，在和之间是单元格的具体内容。v需要注意的

25、是：上述的三个元素必须、而且只能够配对使用。缺少任何一个元素，都无法定义出一个表格。第69页，此课件共128页哦表格(TABLE)标记-2v表格的基本结构定义表格定义表头定义表行定义单元格例：02.htm第70页，此课件共128页哦表格(TABLE)标记-3v表格的属性 1width属性：指定表格或某一个表格单元格的宽度。单位可以是%或者象素。height属性：指定表格或某一个表格单元格的高度。单位可以是%或者象素。border属性：表格边线粗细 v例03.htm、04.htm、05.htm第71页，此课件共128页哦表格(TABLE)标记-2v表格的属性 14、bgcolor属性：指定表格或

26、某一个单元格的背景颜色。5、background属性：指定表格或某一个单元格的背景图片。其属性值为一个URL地址。FoodDrinkSweet例：07.htm第72页，此课件共128页哦表格(TABLE)标记-3v表格的属性 26、bordercolor属性：指定表格或某一个单元格的边框颜色。例：08.htm7、Bordercolorlight属性：亮边框的颜色8、Bordercolordark属性：暗边框的颜色 例：09.htm第73页，此课件共128页哦表格(TABLE)标记-3v表格的属性 29、align属性：指定表格或某一个单元格里的内容（文本、图片等）的对齐方式。ABC 例：10.

27、htm第74页，此课件共128页哦表格(TABLE)标记-3v表格的属性 210、cellspacing属性：单元格间距。例：11.htm11、cellpadding属性：单元格边距。例：12.htm第75页，此课件共128页哦表格(TABLE)标记-4v单元格属性1、valign属性：指定某一个单元格里的内容（文本、图片等）的垂直对齐方式。垂直对齐方式的属性值包括：top：顶端对齐；middle：居中对齐；bottom：底端对齐;Baseline：相对于基线对齐;D例：13.htm第76页，此课件共128页哦表格(TABLE)标记-5v单元格属性2、Colspan：属性值表示当前单元格跨越几

28、列 Morning Menu例：14.htm3、Rowspan：属性值表示当前单元格跨越几行例：16.htm第77页，此课件共128页哦表格(TABLE)标记-6v行属性1、valign属性：指定某一个单元格里的内容（文本、图片等）的垂直对齐方式。垂直对齐方式的属性值包vtop：顶端对齐；middle：居中对齐；bottom：底端对齐。Baseline：相对于基线对齐。第78页，此课件共128页哦表格(TABLE)标记-7v行属性2、align属性：指定表格或某一个单元格里的内容（文本、图片等）的对齐方式3、height属性：指定表格或某一个表格单元格的高度。单位可以是%或者象素第79页，此课

29、件共128页哦表格进阶v表格的嵌套在 之间插入表格，实现表格嵌套例：17.htm表格的作用一般只是控制文本和图像的显示，而不显示表格的边框例：18.htm第80页，此课件共128页哦综合案例v表格的综合使用v例：19.htm 1 2 3 4 5第81页，此课件共128页哦表单(FORM)标记vHTML表单是HTML页面与浏览器端实现交互的重要手段。利用表单可以收集客户端提交的有关信息。v在HTML里，我们可以定义表单，并且使表单与CGI或ASP等服务器端的表单处理程序配合。第82页，此课件共128页哦表单(FORM)标记v表单是网页上的一个特定区域。这个区域是由一对元素定义的。v元素actio

30、n属性：用来定义表单处理程序（一个ASP、CGI等程序）的位置(相对地址或绝对地址)。Method定义表单结果从浏览器传送到服务器的方法，一般有两种方法：get、post。第83页，此课件共128页哦表单(FORM)标记v表单的基本语法:.v=GET有数据量限制，POST无以上限制,以文件形式传输v例：22.htm第84页，此课件共128页哦表单(FORM)标记2.文本框?文本框的名字*text,password*默认值*长度?最大输入字符数例20.htm您的姓名:密码：留言：第85页，此课件共128页哦表单(FORM)标记3.文本域.例：20.htm第86页，此课件共128页哦表单(FORM

31、)标记4.按钮包括普通按钮、重置按钮和提交按钮例：21.htm第87页，此课件共128页哦表单(FORM)标记5.复选框(Checkbox)在一个表单里的所有多选框可以有一个或多个被选中。例25.htm第88页，此课件共128页哦表单(FORM)标记v6.单选框(RadioButton)一个表单里的所有变量名相同的单选框只能够有一个被选中。各个选项的name必须一样才能达到预期效果例：26.htm注意262.htm的写法是错误的摇滚爵士第89页，此课件共128页哦表单(FORM)标记v7.下拉列表基本语法说明说明2 例：28.htm第90页，此课件共128页哦表单(FORM)标记v7.下拉列表

32、（2）列表框的长度（3）允许多选例：29.htm、30.htm第91页，此课件共128页哦表单(FORM)标记v8.图象域例：image.htm第92页，此课件共128页哦表单(FORM)标记v综合练习（*）v实现留言簿要求：背景、文字颜色、字体、换行、页面标题、表单文本框、文本域、单选框、复选框、下拉列表、图象域、提交与取消按钮，内容以mail形式提交。第93页，此课件共128页哦HTML第四讲：框架第94页，此课件共128页哦网页中的框架v制作框架页面的步骤：1.编写所有子框架页面2.编写主框架页面3.在主框架页面中设定子框架名称4.如果框架页面之间存在链接，在子框架中设定链接注意：框架页

33、面是不含标签的第95页，此课件共128页哦网页中的框架1.基本语法您的浏览器不支持框架，请考虑升级您的浏览器！第96页，此课件共128页哦网页中的框架v定义框架的基本语法框架由一对定义有两个属性：rows和colsRows定义上下分割的框架的大小；cols定义左右分割的框架的大小；在定义大小时，rows和cols可以使用相对大小或以百分比为单位。第97页，此课件共128页哦网页中的框架v各窗口的尺寸设置 横排多个窗口 排列方式：ABC例：02.htm第98页，此课件共128页哦网页中的框架各窗口的尺寸设置 纵向排列多个窗口 排列方式：A B C例：01.htm第99页，此课件共128页哦网页中

34、的框架COLS&ROWS：纵横排列多个窗口 排列方式：BAC例：14.htm第100页，此课件共128页哦网页中的框架v框架边框的颜色bordercolor=ff0000“例：03.htmv各窗口边框的设置 frameborder=#=yes,no/1,0例：04.htmv框架边框的宽度framespacing=10 例：05.htm第101页，此课件共128页哦网页中的框架v的属性name：定义该框架的名字。这个名字可以被一些网页元素引用，如被元素引用。例：06.htm、07.htmSrc：在本框架里显示网页的URL。Target：目标框架,引用的是目标框架的名字。第102页，此课件共128

35、页哦网页中的框架1.在当前框架中打开超链接页面默认就是在当前框架页中打开,也可以采用Target=“_self”2.在指定框架中打开超级链接页面Target=“name”3.新开窗口打开链接页面Target=“_blank”4.跳出整个框架集Target=“_parent”第103页，此课件共128页哦网页中的框架v的属性Scrolling：是否显示滚动条。yes,no,auto例：08.htmNoresize：框架在浏览器里不可以被调整大小。例：10.htm第104页，此课件共128页哦网页中的框架v内含窗口.#=初始页面的 URL#=框架名称(Frame Name)例：15.htm第105

36、页，此课件共128页哦会移动的文字1.基本语法.例：16.htm2.文字移动属性(1)方向：direction=#=left,right,up,down例：17.htm第106页，此课件共128页哦会移动的文字v2、文字移动属性(2)方式：behavior=#=scroll(循环),slide(只走一次),alternate(来回走)例：18.htm(3)循环:loop=#=次数；若未指定则循环不止(infinite)例：19.htm第107页，此课件共128页哦会移动的文字v2、文字移动属性(4)速度:scrollamount=#例：20.htm(5)延时:scrolldelay=#例：21

37、.htm第108页，此课件共128页哦会移动的文字v3、其他属性(1)底色:bgcolor=#=RRGGBB 16 进制颜色代码例：22.htm(2)面积:height=#width=#例：23.htm(3)空白:hspace=#vspace=#例：24.htm第109页，此课件共128页哦多媒体页面v用嵌入多媒体对象 基本语法#=URL注：1.使用 标记之前，需要安装插件才可以；2.对于不同的plugin，其embed属性也不同。例：25.htm(Flash动画)例：26.htm(rmi音乐文件)例：27.htm(avi动画)例：28.htm(mpeg影像文件)第110页，此课件共128页哦

38、多媒体页面（*）v嵌入背景音乐#=WAV 文件的 URL#=循环数例29.htm(WAV背景音乐)可以使用bgsound标记来添加页面背景音乐。第111页，此课件共128页哦多媒体页面（*）v特殊标记元素Object元素用来包含图像、动态图像、Java小程序。元素用以替换具体的和元素，以及和元素。例 30.htm 第112页，此课件共128页哦HTML分析实例百度第113页，此课件共128页哦第114页，此课件共128页哦附：HTML标记一览v文件宣告 让浏览器知道这是HTML文件v开头 提供文件整体信息v标题 定义文件标题将显示于浏览器顶端v主体 设计文件格式及内容所在v排版标记v说明标记

39、为文件加上说明但不被显示v段落标记 为字、图、表格等之间留下一空白行v换行标记 令字、图、表格显示于下一行v水平线 插入一水平线v居中 令字、图、表格等显示于中间v预设格式 令文件按原代码的排列方式显示v定位标记 设定字、图、表格等的摆放位置v不换行 令文字不因太长而换行v建议换行 预设换行部位第115页，此课件共128页哦附：HTML标记一览v字体标记v加重语气 产生字体加粗Bold的效果v粗体标记 产生字体加粗的效果v强调标记 字体出现斜体效果v斜体标记 字体出现斜体效果v等宽字体 Courier字体，字母宽度相同v加下划线 加下划线v一级标题标记 将字体变大，级数越高越小v二级标题标记

40、将字体变大v三级标题标记 将字体变大v四级标题标记 将字体变大v五级标题标记 将字体变大v六级标题标记 将字体变大v字体标记 设定字体、大小、颜色v基准字体标记 设定所有字体、大小、颜色v字体加大 令字体稍微变大v字体缩小 令字体稍微缩小v加删除线 为文字加删除线v程式码 字体稍微加宽v键盘字 字体稍微加宽，单一空白v范例 字體稍為加寬v变量 斜体效果v斜体标记 斜体效果v向右缩排 文字向右缩排v述语定义 斜体效果v地址标记 斜体效果v下标字 文字下标v上标字 文字上标第116页，此课件共128页哦附：HTML标记一览v清单标记v顺序清单 清单项目将以数字、字母顺序排列v无序清单 清单项目将以

41、实心圆点作为符号排列v清单项目 清单中的项目，一个标记一行v选项清单 可用type参数指定项目符号v目录清单 与相同v定义清单 清单分两层出现v定义条目 清单项标题v定义内容 清单项内容v表格标记v 表格标记 设定该表格的各项参数v表格标头 位于表格之上或之下v表格行 设定该表格的行v表格单元格 设定该表格的单元格v表格标题 相等于，但其内文字字体会变粗第117页，此课件共128页哦附：HTML标记一览v表单标记v表单标记 决定该表单的运作模式v文字框 提供文字输入栏v输入标记 决定输入形式v选择标记 建立弹出卷动清单v选项 每一个清单选项v图形标记v图形标记 用来插入图形及设定图形属性v链接

42、标记v链接标记 加入链接v基准标记 可将相对URL转绝对及指定链接v框架标记v框架设定 设定框架v窗口设定 设定框架中的窗口v页内框架 于网页中插入框架v不支持框架 设定浏览器不支持框架时的提示 第118页，此课件共128页哦附：HTML标记一览v影像地图v影像地图名称 设定影像地图名称v链接区域 设定各链接区域v多媒体v背景声音 令背景播放音乐或声音v多媒体 加入声音、音乐或影像v其他标记v走马灯 令文字走动v闪烁文字 令文字闪烁v 页内寻找器 可输入关键字寻找该页v开头说明 提供关于此页的信息给浏览器v关系定义 定义该文件与其他URL的关系vStyleSheetv式样表 控制网页版面v自订

43、标记 独立使用或与样式表一起用第119页，此课件共128页哦HTML的缺陷vHTML更多地关注WEB浏览器如何在页面上安排文本、图象和按纽等，过多的考虑外观使其缺乏对结构化数据的表示能力。vHTML中有限的标记不能满足很多WEB应用的需要。v是因为HTML缺乏可扩展性v从1996年开始，W3C（World Wide Web Consortium）的一个工作组设计一个超越HTML能力范围的新语言，后来被命名为XML（eXtensible Markup Language，可扩展标记语言）。第120页，此课件共128页哦XMLvXML是SGML的一个优化子集，因此也是一种元标记语言，使用者可以按需要

44、创建新标记。vXML设计的初衷在于：如果文档中的数据达到结构化，就赋予其明确的语义。这使得它具有革命性的特质和优势。vXML最大的特点就是它具有创建标签的能力。HTML中的标签是不可任意创建的，它不传递语义信息，更多情况下是描述显示信息。因此，XML具有更强的扩展性。vXML另一突出的特点就是它将数据与数据的显示分开。内容与形式相分离，可以使XML文件的编写者集中精力于数据本身，而不受显示方式的细节所影响。而它所带来的另一个好处，即不同的样式表可以使相同的数据呈现出不同的显示外观，从而适合于不同的应用，可以在不同的显示设备上显示。第121页，此课件共128页哦1、XML的结构化文档技术联想电脑

45、 联想联想 台式机台式机同禧500P3同禧500P3667MHz64MB66710GB647999元107999第122页，此课件共128页哦用标记表示文档结构v使用表记表达文档的任务有两个：一是正确地表达XML文档所具有的“结构”；二是正确的传达按文档所标记的数据的含义。XML文档数据采用树型结构表达，图4-12中XML文档的树结构形式如图4-13所示。v计算机v|-类型-个人机v|-制造商-联想v 识别符v-品种-台式机v型号-同禧500P3v主频-667v-单位-MHzv内存-64v-单位-MBv硬盘-10v-单位-GBv单价-7999v-单位-元第123页，此课件共128页哦用DTD定

46、义标记含义vXML的文档类型以标记集合来定义。vvvvvvvvv在制定的XML标准中，一个XML文档允许采用多个DTD。其目的是把一般确定的DTD与企业独自的DTD相结合，但含义不能有异，以重新利用原有资源。因此在XML1.0标准中规定了特定DTD的“名称空间”标准。具体做法是把存储DTD的集合名称与标记并存，以防混同。第124页，此课件共128页哦XML应用开发v开发XML应用通常涉及四个方面：构造XML标记语言生成XML文档解释XML文档显示XML文档第125页，此课件共128页哦XML的用途-数据交换（XML使得不同计算机应用系统之间数据交换变得容易起来，这是因为它的可扩展性和文档中使用

47、元数据。XML尤其在下列领域有重要应用。（EDI：EDI被用来在异构系统间进行数据交换而支持事务处理。（Agent（智能体）。（软件设计元素的交换。第126页，此课件共128页哦XML的用途-Web应用vXML文档无疑将成为Web资源的重要组成部分，而且基于XML的文档资源使Web搜索引擎的智能化变得容易起来。除此之外，XML能够用来建立HTML所不能达到的多层Web应用，XML在Web应用中有下列用途。v集成不同数据源。v本地计算。v数据的多种显示。v支持Web应用的互操作和集成。第127页，此课件共128页哦XML与HTML的综合比较比较内容HTMLXML可扩展性 不具有扩展性是元标记语言，可用于定义新的标记语言侧重点 如何表现信息如何结构化地描述信息语法要求 不要求标记的嵌套、配对等，严格要求嵌套、配对，遵循DTD的树型结构 不要求标记之间具有一定的顺序可读性及可维护性 难于阅读、维护结构清晰，便于阅读和维护数据与显示的关系 内容与显示方式整合为一体内容描述与显示方式分离保值性不具有保值性具有保值性编辑与浏览工具已有大量的编辑浏览工具编辑浏览工具尚不成熟第128页，此课件共128页哦