天津开放大学文本 HTML基础知识_动态网页制作第2章.doc_大学文库

1 本章主要介绍了 HTML 文档的结构，几种编辑 HTML 文档的编辑工具，7 个 HTML 标记语言，6 种转移页面的方法，用 HTML 语句实现表单的设计。 2．1 HTML 语言简介超文本标记语言（Hyper Text Markup Language，简称 HTML）也称为超文本标识，它是 WWW 中最基本的网页构建语言。虽然随着技术的进步，又有各种新技术诞生，例如 Dynamic HTML、Java Script、VB Script、ASP 等，但是它们仍然以 HTML 为基础，并没有舍弃已有的 HTML。所以要想制作出功能完善、界面友好的动态网页，仍然要先学习 HTML 这个制作动态网页的基础语言。 20 世纪 80 年代初，IBM 公司发展了一种伪计算语言，它将纯文本和格式化指令混合在一起，称为标记语言。所谓标记，指的是对于元素内容进行控制的符号。HTML 是非程序设计语言，它使用标记来告诉 Web 浏览器如何对文本进行格式化和显示。HTML 标记是用一对 “<>”括起来的字符串，而且标记都是成对出现的。例如……，作为标记的字符与字母对大小写同等对待。HTML 文档的应用领域很广，它可用于超文本新闻、E-mail、文档资料、超媒体、数据库查询结果等领域。一个 HTML 文档通常由以下三部分组成：（1）序（prologue）：指出该 HTML 文档的 HTML 语言版本号，它是 HTML 文档开头的一行，用来通知浏览器该文档所遵循的 HTML 版本；（2）头部（head）：用于存放该 HTML 文档的属性内容，即该页面的序言，一般情况下，此处都包含有 Web 页面的标题（Title）；（3）正文（body）：定义 Web 页面的具体内容。在 HTML 文件中，各个部分中所定义的项都称为元素（element）。头部定义的元素称为头元素，主体中定义的元素称为主题元素。这里给出网络课件页面的 HTML 文档框架，包括有课件标题、导航菜单与超级链接、图象插入、不同网址之间的跳转等功能的实现。第一行为序，指出该 HTML 文档的 HTML 语言版本号是 4.0 版本；由和包围的部分是整个 HTML 的主体，其中由和包围的部分定义了该页面的标题、样式文件 style.css、滚动条的定义等；由和包围的部分定义了页面显示的内容。与上述 HTML 文档相应的屏幕显示情况如图 2-1 所示：

也许你会觉得如果自己编写页面文件的代码很繁项，而且这么多标记也记不清楚。这种担心是没有必要的，因为有很多HML文档输辑工兵能够帮助我们自动牛成HTML标记，使得页面的编辑变得容易。 2.13HTL文档的锦辑工具 TML文档是一个普通的文本文件，因比它对编辑工具没有特殊的要求。为了方便高效地开发TML页面文件，可以采用具有“所见即所得”的可视化T 文档编辑工具，例如FrontPage、Dreamweaver等款件来编写网页，然后自动保存为HML格式的文木文件，即该网页的L文档。这样就可以使制作网页变得十分简单，贝需像在字处理款件Wod中写文章一样输入文字、插入图形、制作表格、编辑超级皓接等，就能轻易完成网页的制作。这里介绍几种较简单的、创作HML文档的软件工兵。事实上，每种工具邵各有它们的长处和局限，在实际应用中可以运用多种工具相互补充来设计出满意的L.文档。 I,MS Office组件中的FrontPage 这是一种专业的网页编饵器，它既具有可视化的编辑窗口，又可以直接用L源代码编辑，它提供的控件也十分丰富。下©Pge的用户区包括三个视图：普通视图、HTML代码视图和候览视图。用户可在普通视图中以所见即所得的方式进行ML.文档制作，也可以切换到HTML代码视图直接编辑代码。无论在星个视图中进行改动，在另·个视图中就会生成相应的元素和HL代码，因此，HTL文档开发者几乎可以不用直接接触HTDL语言本身。 2.Dreamweaver Dreamweaver是由Macromedia公司开发的一套专门用于Wcb站点开发的网页制作工具e。它可以说是当前最好的网页编辑器。它也支持所见即所得的方式编细料页。有强大的站点管理功能，便于站点的维护和管理。它支持最新的TL语言的扩展功能，支持层技术，它还提供以层为元素的动两功能，动面也是以关键桢技术实现。它还具有强大的内置功能，可以经松地制作出交互式的网页。当然如果你要制作出随心所欲的网页，还是需要学习一些脚本语言、动态ΠML语言，才能从史高的角度来理解网负的本质。 3,Vindows系统自带的记事本组件如果用Windows系统自带的记事本组件编写HML文档，那是~件非常烦琐面恐花的· 件事情。但是有些情况下我们可以用，比如你细查看某个页面的HTL代码的时候你可以在某个贞面的空白处点击假标右键，在快捷菜单中达择“查看源文件，则这个页面的HTL 源就可以通过“记事本”查看了。 4.其他编辑工具由于L文智是个纯文本文件，所以只要能编细钝文本文件的款件都可以作为T 文将的编辑工具，例如MS Ofice组件中的PowerPoint、Word、PageEdit、ASP Edit200等，其中ASP Edi2000是用于ASP功德的编相器，可以提供VBScript以及ASP相关的语法标鉴，提供SQL数据库查而语言的标注语法，是编，网铬数据库的送大工具

5 也许你会觉得如果自己编写页面文件的代码很繁琐，而且这么多标记也记不清楚，这种担心是没有必要的，因为有很多 HTML 文档编辑工具能够帮助我们自动生成 HTML 标记，使得页面的编辑变得容易。 HTML 文档是一个普通的文本文件，因此它对编辑工具没有特殊的要求。为了方便高效地开发 HTML 页面文件，可以采用具有“所见即所得”的可视化 HTML 文档编辑工具，例如 FrontPage、Dreamweaver 等软件来编写网页，然后自动保存为 HTML 格式的文本文件，即该网页的 HTML 文档。这样就可以使制作网页变得十分简单，只需像在字处理软件 Word 中写文章一样输入文字、插入图形、制作表格、编辑超级链接等，就能轻易完成网页的制作。这里介绍几种较简单的、创作 HTML 文档的软件工具。事实上，每种工具都各有它们的长处和局限，在实际应用中可以运用多种工具相互补充来设计出满意的 HTML 文档。 1． MS Office 组件中的 FrontPage 这是一种专业的网页编辑器，它既具有可视化的编辑窗口，又可以直接用 HTML 源代码编辑，它提供的控件也十分丰富。FrontPage 的用户区包括三个视图：普通视图、HTML 代码视图和预览视图。用户可在普通视图中以所见即所得的方式进行 HTML 文档制作，也可以切换到 HTML 代码视图直接编辑代码。无论在哪个视图中进行改动，在另一个视图中就会生成相应的元素和 HTML 代码，因此，HTML 文档开发者几乎可以不用直接接触 HTML 语言本身。 2． Dreamweaver Dreamweaver 是由 Macromedia 公司开发的一套专门用于 Web 站点开发的网页制作工具。它可以说是当前最好的网页编辑器。它也支持所见即所得的方式编辑网页。有强大的站点管理功能，便于站点的维护和管理。它支持最新的 HTML 语言的扩展功能，支持层技术，它还提供以层为元素的动画功能，动画也是以关键桢技术实现。它还具有强大的内置功能，可以轻松地制作出交互式的网页。当然如果你要制作出随心所欲的网页，还是需要学习一些脚本语言、动态 HTML 语言，才能从更高的角度来理解网页的本质。 3． Windows 系统自带的记事本组件如果用 Windows 系统自带的记事本组件编写 HTML 文档，那是一件非常烦琐而恐怖的一件事情。但是有些情况下我们可以用，比如你想查看某个页面的 HTML 代码的时候你可以在某个页面的空白处点击鼠标右键，在快捷菜单中选择“查看源文件”，则这个页面的 HTML 源就可以通过“记事本”查看了。 4．其他编辑工具由于 HTML 文档是个纯文本文件，所以只要能编辑纯文本文件的软件都可以作为 HTML 文档的编辑工具，例如 MS Office 组件中的 PowerPoint、Word、PageEdit、ASP Edit 2000 等，其中 ASP Edit 2000 是用于 ASP 功能的编辑器，可以提供 VBScript 以及 ASP 相关的语法标签，提供 SQL 数据库查询语言的标注语法，是编辑网络数据库的强大工具

(S)TYPE:设定链接式样格式(Link Style Sheet)的参数.“Casseading Style Sheeis'”必须设定为“1ex/es,而“JavaSeripl Style Sheets”设定为“exl/javascripl"- 其中，REL.属性代表从从源文档到月标文档的关系，而V则代表从从月标文档到源文档的关系。那么REL与REV有哪些关系呢？下面将一一列取并解释其中的含义： Next-链接到下一个文档： Prew-链接到前一个文档： Hcad-链接到集合中的顶级文档： Toc-链接到集合的目录： Parent-链接到源上面的文档： Chld-链接到源下面的文档： Index-缝接到比文档的索引： Gy一链接到此文档的术语表：其中ex1与ev是一组.表明了当前文档与目标文档之前的关系是同级的关系，可以写成这样： head与toe可以形成一个组合，表示者是由目录链接到最终的文档，或是由文档链接到日录：parent与chid是一组，表示着由当前的文档娃接到父级文档或是子级文档。而index 与glossary可以与head分别组合，形成由文档到索引，或是由索引到文档：文档到术语表或是术语表到文档：举例说明：一个电影文档资源的分类如下：武快片、战争片、爱情片、恐怖片、纪录片，那么在电影根目录需要链接到下面的子类的时候那么硅按的关系应该是： re-child rev-paet,而如果当前是武侠片的蜘道页，当需要转发情片领道或是其它频道时，那么能接关系城应该是：e-next rev--prev,当由一个武快片造接到可虎藏龙“这部电影的文档时，链接的关系应该是：re-head rev-x,当由“卧虎藏龙"糙接到索引的时候蛙接关系又变成了：rel=index re=hcad. 由于目前的CSs还不能抓取l与rv的属性值，所以没有办法给不同关系的链接提供不同的样式，所以现在l与rw只是用米使得网页的语义性更为完善. 再举例：一个电子商务网路课件的首页面，在本书光监的“电子离务网路课件源代码“ 中的indexl.htm。 cmeta htlp-equiv="Content-Type"content="text/html;charset=gb2312 天律广播电视大学这是典型的HL文档头，如下：

9 （5） TYPE：设定链接式样格式（Link Style Sheet）的参数。“Casscading Style Sheets”必须设定为“text/css”，而“JavaScript Style Sheets”设定为“text/javascript”。其中，REL 属性代表从从源文档到目标文档的关系，而 REV 则代表从从目标文档到源文档的关系。那么 REL 与 REV 有哪些关系呢？下面将一一列取并解释其中的含义： Next--链接到下一个文档； Prev--链接到前一个文档； Head--链接到集合中的顶级文档； Toc--链接到集合的目录； Parent--链接到源上面的文档； Child--链接到源下面的文档； Index--链接到此文档的索引； Glossary--链接到此文档的术语表；其中 next 与 prev 是一组。表明了当前文档与目标文档之前的关系是同级的关系，可以写成这样： head 与 toc 可以形成一个组合，表示者是由目录链接到最终的文档，或是由文档链接到目录。parent 与 child 是一组，表示着由当前的文档链接到父级文档或是子级文档。而 index 与 glossary 可以与 head 分别组合，形成由文档到索引，或是由索引到文档；文档到术语表或是术语表到文档。举例说明：一个电影文档资源的分类如下：武侠片、战争片、爱情片、恐怖片、纪录片。那么在电影根目录需要链接到下面的子类的时候那么链接的关系应该是： rel=child rev=parent ，而如果当前是武侠片的频道页，当需要转爱情片频道或是其它频道时，那么链接关系就应该是：rel=next rev=prev，当由一个武侠片链接到“卧虎藏龙”这部电影的文档时，链接的关系应该是：rel=head rev=toc，当由“卧虎藏龙”链接到索引的时候链接关系又变成了：rel=index rev=head。由于目前的 CSS 还不能抓取 rel 与 rev 的属性值，所以没有办法给不同关系的链接提供不同的样式，所以现在 rel 与 rev 只是用来使得网页的语义性更为完善。再举例：一个电子商务网络课件的首页面，在本书光盘的“电子商务网络课件源代码” 中的 index1.htm。天津广播电视大学这是典型的 HTML 文档头，如下：

天津开放大学 文本 HTML基础知识_动态网页制作第2章

天津开放大学文本 HTML基础知识_动态网页制作第2章