网页程序设计教案.doc
网页程序设计本讲义共分9章，具体结构为：第1章 网页基础知识。概述介绍了Internet的基础知识，以及基本网页开发技术和网页开发工具，最后向读者展示了网页设计的主要步骤。第2章 HTML设计基础。主要介绍网页设计的基础语言HTML，包括HTML基础知识；HTML文档的设计原则、语言结构；超链接、表格与框架的使用方法；对象和表单，JavaScript脚本语言的嵌入方法；最后还介绍了几个动态HTML的实例。第3章 CSS使用基础。CSS是Cascading Style Sheets的缩写，Cascading是串接、连接之意；Style则是风格、款式之意；Sheets则是一页纸、表的意思。所以呢，若要以中文来解释CSS，可以称之为串接样式表。CSS可以说它是网页的美容师，凡是网页上看得到的文字、图片、表格、窗体都有它发挥的空间，在文字方面，可以利用CSS来随意设定字体的大小，设定行距、间距、去除连结底线等。第4-8章 JavaScript编程基础。主要介绍JavaScript语言以及在动态网页中的基础用法，包括JavaScript基础知识、与HTML页面结合、编码约定、数据类型、常数、变量、运算符、数组、基本输入与输出、分支控制语句、循环控制语句、过程、对象编程等。第9章 课程设计。本章的重点是“应用”和“综合”两个关键字，除了强调要将前面学到的知识应用于实际例子之外，还强调“综合”一词。前面的章节我们学习了动态网页技术的各个组成部分：HTML、CSS、JavaScript等，但这些部分是分开来各自介绍，以便于循续渐进、各个击破地掌握。本章将介绍几个通过综合本书所介绍过的网页技术而实现的网页应用实例，目的在于抛砖引玉，希望读者在阅读时能做到举一反三、灵活运用。 第1章 网页基础知识“工欲善其事，必先利其器”，本章作为全书的开端，为了让读者对网页的生存环境互联网和网站有一个初步认识，首先概述介绍了Internet的基础知识，以及基本网页开发技术和网页开发工具，最后向读者展示了网页设计的主要步骤。1.1 Internet概述1.1.1 Internet互联网介绍Internet（因特网）是由全世界各国、各地区的成千上万个计算机网互联起来而形成的一种全球性网络。各种各样的计算机和网络只要遵循共同的网络通讯协议TCP/IP，就可以加入Internet中，从而实现全球范围内的信息交流和资源共享。 TCP/IP：Transmission Control Protocol/ Internet Protocol的简写，中文译名为传输控制协议/互联网络协议1.1.2 Internet的服务和工具Internet是一个客户机/服务器模式的信息服务系统。1.1.2.1 电子邮件（Email）电子邮件是利用计算机网络进行信息传递的现代化通讯工具。与传统邮件相比，它的主要优点是高效、廉价。1.1.2.2 WWW服务WWW是World Wide Web的缩写，中文译名为“万维网”或“环球网”。它是全球规模的信息服务系统，提供了Internet上的一种十分高效的浏览、检索和查找信息的方式。l1.2 Web开发技术介绍1.2.1 Web基本编辑技术（HTML）Web页面的核心是HTML，它是一系列标准化标记的集合，编写十分方便。它不需要有特定的语言环境或额外的编译，可以用任何一种编辑器书写（记事本也可以），并可以通过浏览器（如Internet Explorer、Netscape）观察结果。 1.2.2 动态网页技术DHTML动态HTML就是将网页装载入浏览器后，仍然能够随时变换显示的HTML。但是DHTML并不是一种专门技术，而是通过各种技术的综合发展和使用才能实现的概念，这些技术有SCRIPT（脚本语言）、Document Object Model（DOM，文件目标模块）、Cascading Style Sheets（CSS，层叠样式表单）、Layers（层）等。 1.2.3 Web高级开发技术l SCRIPT脚本语言：JavaScript和VBScriptl CGI通用网关接口：Common Gateway Interfacel ASP：Active Server Pages l PHP：Personal Home Pagel XML：eXtensible Markup Languagel WML：Wireless Markup Languagel VRML：Virtual Reality Modeling languagel1.3 基本网页开发工具1.3.1 网页编辑开发工具l FrontPage ：Microsoft公司推出的一种用于设计和维护Web站点的开发工具，集成于Microsoft Office应用程序套件中。 l Dreamweaver ：与FrontPage相同，支持层的操作和行为绑定，可以制作出充满动感的网页，而生成的代码比FrontPage更为简洁 l HotDog ：Sausage公司的，HTML的代码编写器。l HomeSite ：与HotDog类似。1.3.2 图形和动画设计工具l PhotoShop ：Adobe公司的产品，它是功能十分强大的专业图形图像处理软件。 l Paint Shop Pro：很多功能与 PhotoShop 不相上下。l Fireworks：Macromedia公司的产品，它是一款专门为网页图形的制作而度身定做的软件。 l Flash：Macromedia公司的产品，它和Dreamweaver、Fireworks并称网页制作三剑客。 1.4 网站的设计步骤网站是存放在服务器上的完整信息的集合体，它由主页和其他网页组成。主页（Home Page）是WWW站点上查找信息资源的起始页面，这些网页依照一定的组织结构，用链接的方式连接成一个统一的整体，以描述设计者所要表达的完整的信息。本节将较详细的介绍网站的设计过程。 1.4.1 确定Web站点的类型现在的WWW上有各种各样的Web站点，令人过目不暇。不同的网站，其设计目的、风格、内容、形式、功能都不尽相同。所以我们设计网站时必须要首先分析建设网站的目的，做到量体裁衣，同时明确将要面对的访问群众，从而确定网站的类型。 1.4.2 确定Web站点的风格由于设计者建立网站的目的不同，而不同类型的网站又有着不同的访问对象。所以建设网站时要根据网站主题和浏览人群确定自己的风格特色，即围绕主题，对栏目设置、内容安排、背景图象、颜色搭配等要素综合分析，用自己独特的视觉语言向浏览者描述。 1.4.3 确定Web站点的内容与表现形式网页的内容与Web站点的主题密切相关，因为Web站点的主题主要靠网页的内容予以体现。不同性质的网站，不仅内容不同，表现形式也不同，通常一个网站的网页有以下几项基本内容：l 标题：醒目、具有概括性、起标志作用。l 背景：与网页内容协调，达到陪衬的效果。l 导航条：置于醒目位置，与整体协调。l 文本：实用、趣味、独特。l 图片：不宜过大、过多，采用压缩图形格式。l 其他：分门别类地组织，可加音乐或动态效 果，但不宜过多，应整体结构统一。1.4.4 确定Web站点的结构l 树型结构具有很强的层次性，但不利于各页面之间的链接与沟通。ll 线性结构 具有较强的条理性，可以沿水平方向按部就班地访问整个Web站点，但不利于各页面之间的跳转。l 星型l 结l 构llll网型结构可以使浏览者十分方便、快捷地进入想访问的信息页面。但是过多的超级链接占据了大量有效的网页浏览面积。主页l 网型结构可以使每个网页既有固定不变的内容（如标题、导航栏等），又有丰富的布局变化，链接的深度较浅，层次较小，既提高了浏览速度，又方便浏览者的信息查询，但结构设计比较麻烦，是目前大多数网站所采用的一种结构。1.4.5 制作Web站点的页面页面的制作一般分以下几步进行：l 进行结构分析，确定页面的布局结构。l 在设计好的布局结构内填充文本、链接、图像、表格、列表、多媒体等信息内容。l 为网页加入动态元素和交互性内容，包括SCRIPT脚本语言、ActiveX控件、CGI/ASP/PHP程序等，实现静态页面向动态交互性页面的转变。l 用CSS样式为各网页元素进行美工优化设计，包括网页背景、各元素的定位、元素属性、链接属性等，做到各元素、色彩的协调统一与风格的独特新颖，给浏览者赏心悦目的感觉。1.4.6 Web站点的测试与发布l 检测网页在浏览器的下载速度，尽可能限制在大多数浏览者满意的范围内。l 检测网页各元素在浏览器的实际显示效果和功能，主要有：文本、图片、声音、超链接、控件、应用程序的显示和功能是否正常；版面布局是否合理。1.4.7 Web站点的管理与维护Web站点正式发布后，就必须进行不断的管理维护，以保证站点的“可持续发展”，这样才能使网站具有持久的生命力。1.5 本章小结首先，概括介绍了互联网的一些基础知识，包括Internet的介绍和Internet的服务和工具的介绍。其次，简单介绍了Web开发技术，包括Web编辑技术，动态网页技术DHTML，高级开发技术。再次，对基本网页开发工具（包括网页编辑开发工具、图形动画设计工具、网页发布及管理工具）有个初步认识。最后，重点介绍了Web站点完整的设计步骤，让读者为网页制作流程不再感到陌生。这是本章的重点，也是难点，希望读者好好把握。 1.6 作业设计一份开发个人网站的策划书。思路：l 确定站点类型l 确定站点风格l 确定站点的内容与表现形式l 确定站点的结构l 制作站点的页面布局第2章 HTML设计基础本章主要介绍网页设计的基础语言HTML，包括HTML基础知识；HTML文档的设计原则、语言结构；超链接、表格与框架的使用方法；对象和表单，JavaScript脚本语言的嵌入方法；最后还介绍了几个动态HTML的实例。2.1 HTML基础知识2.1.1 什么是HTMLHTML语言是超文本标记语言（Hyper Text Markup Language）的缩写，是现在网页编辑的核心语言。 HTML 不是C+和Java之类的程式语言，它只是标示语言，也就是说，只要明白了各种标记的用法便算学懂了HTML。HTML 的格式非常简单，只是由文字及标记组合而成，而不能描述实际的表现形式。2.1.2 HTML文档设计原则l 考虑HTML文档的兼容性和可观性 ll 将文档结构与风格页分开 ll 正确使用表格，以加快文档显示速度 2.2 创建HTML文档2.2.1 HTML元素及其属性的使用规则一个HTML元素一般由三部分组成：元素起始标记、元素内容、元素结束标记。元素起始标记由一对尖括号“<>“括起来的元素名组成；元素内容就是在网页中被显示的内容；元素结束标记由一对尖括号括起来的斜杠“/”后加元素名构成，这时，该元素也称为双边元素。如：<P> 超文本标记语言 </P>在HTML文档中，除了双边元素，还存在单边元素。如：换行元素<BR>表示回车换行，<HR>表示显示一条水平线。如：<P> 超文本标记语言：<BR><HR> 元素及其属性的使用规则 </P>元素可以嵌套。如：<P> <B>超文本标记语言 </B></P>可为元素添加属性。属性是对元素的更详细的规定，并具有不同的取值。属性的具体内容及格式由元素的相应功能来决定。在元素起始标记中添加属性名和它的取值就完成了属性的添加，属性不会在浏览器中显示。一个元素可以有多个属性，用空格分开。带属性的双边元素通常的语法格式为：<元素名 属性1 属性2 属性n> 网页显示内容 </元素名>带属性的单边元素通常的语法格式为：<元素名 属性1 属性2 属性n>一个属性的作用域一般只在定义它的元素范围内。但对于嵌套元素结构，内层可继承外层元素的某些属性。HTML元素和属性是不区分大小写的。2.2.2 HTML文档框架<HTML><HEAD> <TITLE> HTML的标题 </TITLE></HEAD><BODY> <P> HTML文档的正文部分 </P> </BODY></HTML> l 起始标记：<HTML>l 结束标记：</HTML>2.2.2.1 首部由<HEAD>和</HEAD>定义，是放置网页标题元素、基本元素、样式元素、脚本语言元素和一些其他元素的地方。<HEAD>与</HEAD>内部的主要元素包含TITLE、ISINDEX、BASE、STYLE、LINK、META、SCRIPT等。l TITLE：标题元素，用来定义浏览器标题栏中显示的标题。l ISINDEX：索引元素，用来为文档建立内置索引，浏览器将会生成一个让访问者输入搜索关键字的提示框。l BASE：基本元素，用来指定一个基本的URL，由它来引用文档中的所有其他相关URL。该元素为单边元素，其属性有HREF和TARGET。属性HREF用来指定当前页面的根URL，属性TARGET用来指定一个或多个链接的目标窗口，取值为：n _blank：指定将链接加载到一个新的无标题窗口。n _parent：指定将链接加载到当前链接文档的父文档窗口。n _self：指定将链接加载到当前链接文档的同一框架窗口。n _top：指定将链接加载到整个窗口。l STYLE：样式元素，用来定义网页的样式本单（如CSS本单），其属性TYPE指定样式语言。l LINK：链接元素，用来指定当前文档与其他文档或对象之间的关系，该元素为单边元素，其属性REL定义链接文档与当前文档之间的关系，属性REV定义当前文档与链接文档之间的关系，属性TYPE表明一个链接的样式单类型和参数。REV常取值为”next”（后翻页）、”previous”（前翻页）、”index”（索引）、”help”（帮助）、”home”（主页）、”copyright”（版权）、l META：哑元素，用来指定一些关于文档的信息（称为META数据），或指示浏览器执行一个操作。该元素为单边元素，其属性HTTP-EQUIV用于定义元素的特性，属性NAME用来指定文档的一个特性名（缺省时同HTTP-EQUIV），常见值为”keywords”、”description”等，属性CONTENT为特性提供响应值。l SCRIPT：脚本元素，用来定义脚本部分并植入SCRIPT脚本语言。应包含注释标记“<!”和“->“，目的是能够在不支持脚本语言的浏览器中隐藏脚本代码。其属性LANGUAGE用来指定脚本的编码语言，如JavaScript、VBScript等，属性SRC用来指定从外部调入的SCRIPT脚本语言所在的文件名称。虽然脚本代码可放置于文档的任何位置，但为了实现HTML文档外观的一致性，建议将其放置于文档首部。2.2.2.2 主体由<BODY>和</BODY>定义，包含了显示在网页上的实质内容，还包含了对文档的注释、ADDRESS元素以及特殊字符的使用。BODY元素属性BACKGROUND、TEXT、LINK、LEFTMARGN等可以实现对文档的着色、背景填充和边框设置等，其属性及功能如下表：表2-1 BODY元素的属性及功能对象BODY属性功能及取值边框LEFTMARGNTOPMARGN设置网页左边边界宽度（单位：象素）设置网页顶端边界宽度（单位：象素）背景BACKGROUNDBGCOLORBGPROPERTIES设定网页背景图片，取值为指向图片的URL，该图片将铺满浏览器窗口。设定网页背景的颜色，取值为颜色值。设定网页背景的显示方式，取值fixed，则背景不滚动。颜色TEXTLINKVLINKALINK定义网页文本颜色，取值为颜色值定义网页中未被访问过的链接的颜色，取值为颜色值。定义网页中已被访问过的链接的颜色，取值为颜色值。定义网页中当前活动链接的颜色，取值为颜色值。事件ONLOAD设定浏览器装入一个网页时发生的事件，取值为执行事件的脚本函数。在HTML文档的主体部分的主要元素有DIV、SPAN、MARQUEE、COMMENT、ADDRESS等。l DIV和SPAN：分组元素，将HTML文档的元素分为不同的组，以便控制每个元素，便于设计者整理文档。DIV是模块级分块元素，SPAN是行内元素，均为双边元素。其属性ALIGN指定DIV中块级元素的水平对齐方式，取值为left、center、right；属性CLASS指定各部分的类型或引进样式表单。如：<DIV CLASS=“web.css” ALIGN=“center”> </DIV>l MARQUEE：滚动元素，用来创建滚动文字，为双边元素。这些滚动的文字形成一个整体，称为“帐幕”。其主要属性见表2-2。表2-2 MARQUEE元素的属性及功能MARQUEE属性功能及取值HSPACE定义帐幕的左右边缘距离浏览器窗口的边距宽度（单位：像素）VSPACE定义帐幕的上下边缘距离浏览器窗口的边距宽度（单位：像素）WIDTH定义帐幕的宽度（单位：像素，也可用百分比）HEIGHT定义帐幕的高度（单位：像素，也可用百分比）ALIGN定义帐幕整体与周围文字的对齐方式，取值为top、middle、bottomBGCOLOR定义帐幕的背景颜色，取值为颜色值BEHAVIOR定义帐幕内文字运动的性质，取值为scroll、slide、alternameDIRECTION定义文字运动的方向，取值为up、down、left、rightLOOP定义文字运动的次数，取值为infinite表示无限次SCROLLAMOUT定义文字每一次滚动移动的距离（单位：像素）SCROLLDELAY定义文字每一次滚动的间隔时间，取值为毫秒数（整数）如下面的例子创建了一个300x300（单位：像素）的不断向上滚动的帐幕：<MARQUEE WIDTH=“300” HEIGHT=“300” BEHAVIOR=“scroll” DIRECTION=“up” SCROLLAMOUT=“1” SCROLLDELAY=“108”>滚动文本的示例！</MARQUEE>l COMMENT：注释元素。用来在HTML文档中嵌入注释，为双边元素。也可用“<!”和“->“标记来定义注释，可放置在文档的任何位置。l ADDRESS：地址元素，用来引入公司版权、联系地址等信息，为双边元素。通常置于文档底端，可适当添加换行元素BR。2.2.2.3 HTML文档的较完整模式<!DOCTYPE HTML PUBLIC“>版本<HTML>HTML文档<HEAD>文档首部<TITLE></TITLE>文档标题<BASE>基本标记<STYLE></STYLE>样式标记<MATE>锚标记<SCRIPT><!-> </SCRIPT> 脚本部分</HEAD><BODY>文档主体<COMMENT></COMMENT>主体注释<ADDRESS></ADDRESS>地址标记</BODY></HTML>2.3 文本2.3.1 HTML字体元素文本就是文字的集合，它是文字按一定的结构、样式组合的整体。2.3.1.1 创建文本的结构l Hi：子标题元素，i的取值为数字16，用来定义文本的i级子标题,为双边元素。H1、H2、H3、H4、H5、H6这六级标题，字号从小到大，一般为黑体、居中，不需再添加标记<P>、</P>，浏览器会自动在子标题后空行。其常用属性见表2-3。表2-3 Hi元素的属性及功能Hi元素属性功能及取值CALSS、STYLE对子标题引入样式表单用法：CLASS=“样式表单的路径”DIR定义文字的走向，取值为ltr（从左到右）、rtl（从右到左）LANG定义文字使用的语言，常见的取值为en（英语）、zh（汉语）等ALIGN定义文字的水平对齐方式，取值为left、center、rightl P：段落元素，用来划分文档的段落，确定文档的基本结构。该元素在文本中意味一个段落的结束和另一个段落的开始，所以可以省略</P>标记，但最后一个段落的结束标记</P>是必须的，以保证段落的终止和文档结构的完整。其属性ALIGN用来设置该段落的对齐方式，取值为left、center、right。l SPAN和DIV：模块元素。2.3.1.2 创建文本的样式l 显式定义字体元素：用来指示浏览器按指定的形式显示文本，有B元素（粗体）、I元素（斜体）、U元素（下划线）、STRIKE元素（删除线）、SUB元素（下标）、SUP元素（上标）。这些元素可以嵌套使用，但不允许重叠。例：<b>今天天气真好！</b> 今天天气真好！<i>今天天气真好！</i> 今天天气真好！<u>今天天气真好！</u> 今天天气真好！<tt>今天天气真好！</tt> 今天天气真好！<sup>今天天气真好！</sup> 今天天气真好！<sub>今天天气真好！</sub> 今天天气真好！<s>今天天气真好！</s> 今天天气真好！<strike>今天天气真好！</strike> 今天天气真好！l 隐式定义字体元素：用来指示浏览器选择自己的方式强调被标记的文本，有EM元素（强调）、STORNG元素（着重强调）、TT元素（电传打字）。隐式元素如果相互嵌套或与显式元素组合使用，有可能达不到预期的效果，不同的浏览器可能有不同的显示效果。例：<em>今天天气真好！</em> 今天天气真好！<strong>今天天气真好！</strong> 今天天气真好！l 特殊字体元素：用来方便计算机程序代码的编写或印刷、出版的需要，均为隐式定义元素。用于方便计算机程序代码的编写的元素有CODE元素（计算机程序代码）、KBD元素（键盘）、SAMP元素（样本）、VAR元素（变量）；用于印刷和出版的元素有CITE元素（标题引用）、BLOCKQUOTE元素（大段引用）、DFN元素（定义）、ADDRESS元素（地址）。例：<code>今天天气真好！</code> 今天天气真好！<samp>今天天气真好！</samp> 今天天气真好！<kbd>今天天气真好！</kbd> 今天天气真好！<var>今天天气真好！</var> 今天天气真好！<dfn>今天天气真好！</dfn> 今天天气真好！<cite>今天天气真好！</cite> 今天天气真好！<small>今天天气真好！</small> 今天天气真好！<big>今天天气真好！</big> 今天天气真好！l BASSFONT：基本字体元素，用来为整个HTML定义基本字体，有时作为其它字体设置的参考，为单边元素。如果还定义了FONT元素，则两者共存时，将被FONT元素覆盖，其属性见表2-4。表2-4 BASEFONT元素的属性及功能BASEFONT属性功能及取值NAME指定文本的基本字体名称，取值为字体名。SIZE指定文本的字体大小，取值为17，1号最小，7号最大，缺省值为3号。COLOR指定文本的字体颜色，取值可以是6位16进数RGB颜色值，也可以是颜色名称black，olive，teal，red，blue，maroon，navy，gray，lime，fudrsia，white，green，purple，sliver，yellow，aqua 之一。l FONT：字库元素，用来指定文本块的字体、字号和颜色，为双边元素，其属性见表2-5。表2-5 FONT元素的属性及功能FONT属性功能及取值FACE指定文本的字体，取值为字体名。SIZE指定文本的字体大小，有两种取值方法，一种是绝对取值法，取值为17，1号最小，7号最大，缺省值为3号；另一种是相对取值法，前提是BASEFONT大小已经指定，实际字体的大小相对BASEFONT字体大小增减，如<BASEFONT SIZE=5>时，<FONT SIZE=-2>表示字体大小为3号，<FONT SIZE=+1>表示字体大小为6号。COLOR指定文本的字体颜色，取值为RGB颜色值或颜色名称。l HR：水平线元素，用来在网页上设置一条水平线，为单边元素，其属性见表2-6。表2-6 HR元素的属性及功能HR属性功能及取值SIZE指定水平线的厚度，取值为像素值。COLOR指定水平线的颜色，取值为RGB颜色值或颜色名称。WIDTH指定水平线的长度，取值为像素值或页面宽度的百分比。ALIGN定义水平线的水平对齐方式，取值为left、center、right。NOSHADE取消水平线原有的阴影。l BR：换行元素，在文本中产生一个换行，相当于回车键的功能，为单边元素。其属性CLEAR指定在何处开始继续显示后面的文字，取值为left、right、all。l PRE：预排元素，使浏览器将该元素标记的已格式化好的文本照原样显示，以避免浏览器忽略一个以上的空格和回车，为双边元素。l 特殊字符：如果需要显示HTML中的保留字符，必须采用字符或数字代码来表示，常用特殊字符的表示见表2-7。表2-7 常用特殊字符的表示特殊字符“<“>“&”“ “字符代码⁢>&apm;" 数字代码<>&"2.3.2 列表HTML文档中一般有五种可供选择的列表：l 顺序列表OL（又称编号列表）l 无序列表UL（又称点符列表）l 定义列表DL（又称字典列表）l 菜单列表MENUl 目录列表DIR上面的前三种列表是比较常用的，后两种是非顺序列表的两种特殊情况，并不常用。2.3.2.1 LI（list item列表项）元素用来定义一个列表的单个项，既可为单边元素，也可为双边元素。元素OL、UL的内容应至少合包含一个LI元素。LI元素的内容也可以是其它的非文本元素，如列表、图像等。其属性VALUE可用于重新设置列表项的编号，优先于OL元素对列表项编号的控制。2.3.2.2 OL（ordered list顺序列表）元素用来定义有序列表，说明文件中需要按一定顺序排列或显示的信息，为双边元素。OL内的每个列表项须使用标准的LI元素，它们在浏览器窗口的显示效果是：每个列表项前均有编号（故称编号列表），而且这些编号是连续的，若删除或添加列表项，编号会自动调整。可用LH元素创建列表标题。其属性有TYPE、START、COMPACT。l TYPE：该属性用于指定顺序列表编号的类型，取值为序号，如下：n TYPE=“1”：采用阿拉伯数字编号1、2、3、，这是缺省值。n TYPE=“a”：采用小写英文字母编号a、b、c、n TYPE=“A”：采用大写英文字母编号A、B、C、n TYPE=“i”：采用小写罗马字母编号、n TYPE=“I”：采用大写罗马字母编号、l START：该属性用于指定列表中列表项编号的初始值（整数），后面的列表项将依次递增。但如果某一列表项设置了属性VALUE的值，则该项后面的列表项将以VALUE的值为基准依次递增。l COMPACT：该属性用于指示浏览器用比较紧凑的方式显示列表，取值为BOOLE型，但实际效果往往依赖于浏览器。语法结构示例：<OL START=5, TYPE=“a”><LH> 列表<LI> 顺序列表<LI> 无序列表<LI VALUE=1> 定义列表<LI> 菜单列表</OL>2.3.2.3 UL（unordered list无序列表）元素用来定义无序列表，为双边元素。无序列表使用项目符号（如、），故称为点符列表。其属性有TYPE、COMPACT。l TYPE：该属性指定无序列表的项目符号类型，取值如下：n TYPE=“disc”：采用“”表示项目符号。n TYPE=“circle”：采用“”表示项目符号。n TYPE=“square”：采用“”表示项目符号。n TYPE缺省时，采用何种点符表示取决于浏览器。l COMPACT：该属性用于指示浏览器用比较紧凑的方式显示列表，取值为BOOLE型，但实际效果往往依赖于浏览器。2.3.2.4 DL（difined list定义列表）元素用来创建定义列表，为双边元素。定义列表用于建立外观与字典项目类似的列表，因而有时也称为字典列表。它由一系列DT（defined title定义标题）元素及其相应的DD（defined data定义数据）元素组成，其语法格式如下：<DL><DT>OL<DD>顺序列表<DT>UL<DD>无序列表<DD>也称为点符列表</DL>2.4 建立超链接2.4.1 超链接概述Web是以超链接概念为基础建立起来的，所谓超链接（link），就是一个Web页到另一个Web页的关联。一个链接一般由两个锚点（anchor）和一个方向构成，锚点是在网页上可见的部分，也称为位置点。链接起始的锚点称为源（source anchor），链接到达的锚点称为目的端（destination anchor）；在源端点，链接元素通过HREF属性的取值指向目的端的地址URL。2.4.2 统一资源定位器URL统一资源定位器(Uniform Resource Locator)是文件名的扩展。在单机系统中，定位一个文件需要路径和文件名，对于遍布全球的Internet网，显然还需要知道文件存放在哪个网络的哪台主机中才行。与单机系统不一样的是在单机系统中，所有的文件都由统一的操作系统管理，因而不必给出访问该文件的方法；而在Internet上，各个网络，各台主机的操作系统都不一样，因此必须指定访问该文件的方法。2.4.2.1 URL的构成一个URL包括了以上所有的信息。它的构成为：protocol:/ machine.name:portdirectoryfilename其中：n protocol是访问该资源所采用的协议，即访问该资源的方法，它可以是：u http 超文本传输协议，该资源是html文件； u ftp文件传输协议,用ftp访问该资源ftp 文件传输协议,用ftp访问该资；u gopher gopher协议,该资源是gopher文件；u news 表明该资源是网络新闻。n madcine.name 是存放该资源主机的IP 地址,通常以字符形式出现,如 n port端口号，是服务器在该主机所使用的端口号。一般情况下端口号不需要指定。只有当服务器所使用的端口号不是缺省的端口号时才指定。n directory和filename是该资源的路径和文件名。一个典型的URL为： 它表示中科院高能所WWW服务器上的起始html文件。(文件具体存放的路径及文件名取决于该WWW服务器的配置情况)。2.4.2.2 绝对路径和相对路径与单机系统绝对路径，相对路径的概念类似，统一资源定位器也有绝对URL和相对URL之分。上文所述的是绝对URL。相对URL是相对于你最近访问的URL。比如你正在观看一个URL为2.4.3 创建链接2.4.3.1 A（anchor 锚）元素用来创建锚和链接，为双边元素。其属性有NAME、HREF、TARGET。l NAME：用于锚点命名，使得该锚点可以成为其他链接的目的端点。同一文档中不能用属性ID和NAME建立相同名称的锚点，其名不分大小写。在建立链接时，属性HREF取值的锚点名与链接的目的锚点名必须精确匹配，区分大小写。l HREF：用于指定超链接所要跳转的目的端点，此时，A元素的内容就成为该链接的源端点。l TARGET：用来指定一个或多个链接的目的文档窗口。取值为：n _top：将指向的目标在顶级窗口中显示。n _blank：将指向的目标在一个未命名的新窗口中显示。n _parent：将指向的目标在当前文档的上一级窗口中显示。n _self：将指向的目标在当前文档所在的窗口中显示。例：<A HREF="" TARGET=_self>微软主页</A>2.4.3.2 标记一个书签如果编写了一个很长的html文件，从头到尾地读很浪费时间，能不能在同一文件的不同部分之间也建立起链接，使用户方便地在上下方之间跳转呢？答案是肯定的。前面曾提到过一个超文本链接指针包括两个部分，一个指向目标的链接指针，另一个是被指向的目标。对于一个完整的文件，我们可以用它的URL来唯一地标识它， 但对于同一文件的不同部分，我们怎样来标识呢？下面的内容将介绍链接指针元素的另外的一个用途，标识书签。标识一个书签的方法为：<A HRE="Bname">text<A>name属性将放置该标记的地方标记为“Bname”，Bname是一个全文唯一的标记串，text部分可有可无。这样，我们就把放置标记的地方做了一个叫做“Bname”的标记。做好标记后，可以用下列方法来指向它，<A HRE="URL#Bname">text </A>URL是放置标记的html文件的URL，Bname是标记名，对于同一个文件，可以写为<A HRE="#Bname">text </A>这时就可以点取text跳转到标记名为Bname的部分了。2.4.3.3 多协议的链接只需更改URL中所使用的协议，即可实现多协议链接。如：<A HREF=“ftp:/文件传输主机地址”></A><A HREF=“telnet:/远程登录主机地址”></A>等。2.4.3.4 图形锚的链接以图象做为链接指针的链接格式为：<A HREF="目的端点的url"><IMG SRC="图形文件url"></A>其中，IMG元素的功能是引入图形，为单边元素。其属性SRC指示图形文件的路径。2.4.3.5 链接字的颜
