商务网站页面设计技术 第一章.doc

商务网站页面设计技术内 容 提 要本书分三部分，主要介绍了HTML4.01、CSS样式表和JavaScript等商务网站页面设计的主要技术。HTML的英文意思是：Hypertext Marked Language，即超文本标记语言,是一种用来制作超文本文档的简单标记语言。CSS的英文意思是：Cascading Style Sheets，即层叠样式表,它提供了一组样式，增加了更多的样式定义，用来辅助HTML，是HTML不可分割的一项技术，要制作精美的网页离不开CSS。JavaScript的使用可以使页面更加漂亮，且具有动态性和交互性，是制作商务网站页面的首选脚本语言。此外还在附录中提供了大量的参考资料，方便读者的学习。本书不但突出了对各部分主要内容的讲解，而且重视了实用技能的提高，适合作为电子商务专业的本、专科学生作为教材使用。同时，也可以作为商务网站页面制作和编程人员的参考书。目录第一篇 HTML语言第一章 HTML概述11.1 HTML发展历史1.2 HTML4.01的特点1.3 HTML文件基本操作1.3.1 HTML文件示例1.3.2 HTML文件编辑和保存1.3.3 HTML文件显示和查看1.3.4 HTML文件常用编辑和显示软件1.4 HTML编程规范1.5 （本章）小结1.6 自测题（习题、作业）第二章 HTML顶级标记及全局属性2.1 文档声明2.2 文档开头2.3 文档主体2.4 文档标题2.5 元信息2.6 文档链接2.7 CSS样式表2.8 全局属性（ID class style title dir 事件属性）2.9 小结2.10 自测题第三章 文本布局及格式化3.1 文本布局3.1.1 段落标记3.1.2 区块标记3.1.3 预格式化标记3.1.4 列表标记3.1.5 显示方向标记3.1.6 引用标记3.1.7 其它标记3.2 文本格式化3.2.1 标题标记3.2.2 字体标记3.2.3字型与效果标记3.2.4标注文档改变3.2.5（屏幕输出）逻辑字体标记3.2.6字符实体3.3小结3.4自测题第四章 超级链接4.1 URL简介（概念）4.1.1绝对URL地址4.1.2相对URL地址4.2 超级链接标记4.3 小结4.4 自测题第五章 表格5.1 表格元素5.2 表格行(tr)5.3 表格单元(th、td)5.4 表格行编组（thead、tfoot、tbody）5.5 表格列编组（col、colgroup）5.6 表格标题（caption）5.7 小结5.8 作业题第六章 表单6.1表单简介（概述）6.2表单主标记6.3输入域标记6.4文本区标记6.5 列表选择框6.6 按钮标记6.7标签标记6.8 控件集标记6.9 小结6.10 自测题第七章 多媒体及外部程序7.1多媒体及外部程序简介（概述）7.2 插入图象7.2.1图象标记7.2.2图象映射标记7.3 嵌入音频和视频7.3.1当前文档中播放媒体7.3.2外部窗口中播放媒体7.3.3插入背景音乐7.4 插入flash动画7.5 插入脚本7.6 插入Java小程序7.7小结7.8 自测题第八章 框架（多窗口文档）8.1 框架集标记8.2 框架标记8.3 不支持框架的标记8.4 内部框架标记8.5 小结8.6 自测题第二篇 CSS样式表第九章 CSS样式表概述（基础、入门、简介）第十章 CSS样式表基本属性第十一章 滤镜第三篇 JavaScript脚本语言第十二章 JavaScript概述第十三章javaScript的基本语法第十四章javaScript的对象与内置函数第十五章 浏览器对象与事件第四篇 网页制作工具FrontPage第五篇 网页制作实例参考文献1、网页制作全接触-HTML4.0&CSS 陈峰 孙威等编著 人民邮电出版社 2001年3月 北京2、HTML 完全使用详解 黄斯伟等编著 人民邮电出版社 2006年1月 北京3、JavaScript网页制作快速入门 杨清 施波等编著 新时代出版社，2000。8 北京4、JAVA Script网页特效应用开发手册曹育城编著 中国青年出版社，2001。2 北京/zh_cn/netschool/homepage/html/599/20010205/html01.html/teaching/htmlbook/3.htm/download/product/2004/1822.asp/school-online/softwarebook-html-jbys.htm第一篇 HTML语言本章内容提要(摘要、主要内容)这一章主要对HTML语言进行入门介绍。内容包括：u HTML发展历史u HTML4.01的特点u HTML文件基本操作（文件示例、编辑和保存、显示和查看）u HTML编程规范（分论：元素、属性和数据类型、注释）u HTML相关技术（css javascript asp jsp DHTML）第一章 HTML概述 HTML是英文HyperText Markup Language的缩写，意思为超文本标记语言。WWW（World Wide Web）的中文意思是“万维网”，它是一个包含世界范围内各个服务器和PC节点的网络资源架构。HTML 就是在 WWW上发布信息的语言。通过HTML语言，人们把要发布的信息组装好，即编写为超文本文档，称为HTML文档，然后进行发布。所谓超文本文档，就是因为它可以加入图片、声音、动画、视频等内容。HTML的普遍应用就是带来了超文本的技术-通过单击鼠标从一个主题跳转到另一个主题，与世界各地主机的文件链接。直接获取相关的主题。HTML并不是一种程序语言，它只是一种排版网页中资料显示的结构语言，易学易懂，非常简单。它不仅是制作一般网页的基础，更是网页编程的基础。因此，制作“精美”的网页必须掌握HTML语言。下面将对HTML发展历史、特点、HTML文件基本操作、编程规范和相关技术进行介绍。1.1 HTML的发展历史HTML语言最初是由Tim Benners-Lee于1980年，在欧洲核研究组织开发的一种能够让页面相互链接的程序，并发展成为后来的HTML语言。在当时，HTML语言由于国家超级计算应用中心NCSA(National Center for Supercomputing Application)的Mosaic浏览器的流行得到推广。20世纪90年代，由于网络的飞速发展，使得HTML达到了空前的繁荣。1995年11月IETF（组织）倡导开发了HTML 2.0规范。1996年，万维网标准化组织W3C(World Wide Web Consortium)的HTML Working Group开始组织编写新的HTML规范,在对原有版本改进的基础上，1997年1月，HTML 3.2版本问世。该版本极大地丰富了HTML的功能。1998年4月，W3C发布了HTML 4.0版本，将HTML语言推向了一个新高度。该版本倡导了两个新理念：u 将文档的结构和显示样式相互分离；u 提供更广泛的文档兼容性。由于同期层叠样式表CSS（Cascading Style Sheets）的推出，使得HTML语言和CSS样式表结合进行网页制作的能力得到了极大提升。1999年12月，W3C发布了HTML 4.01版本，该版本对HTML 4.0的功能作了进一步的完善。本书的讨论就是以该版本为基础的。1.2 HTML4.01的特点1.3 HTML文件基本操作1.3.1 HTML文件示例一、一个简单的HTML文件为了初步认识和更好地理解HTML页面的组成，下面我们首先来看一个简单的HTML文件的例子。该文件的源程序清单及其在浏览器中的显示效果如下。【源程序清单：E1_1.htm】 欢迎光临我的网上商城 欢迎光临我的网上商城 请观看我的体育用品 图 1.1一个简单的HTML文件二、HTML文件的组成结合上面的示例，我们来介绍HTML文件的组成。HTML文件是由许多用尖括号扩起来的HTML“标记”（HTML Tag）组成的。标记是用来分割和标记文本的元素，以形成文本的布局、文字的格式及五彩缤纷的画面。 1、HTML文档的结构HTML文档可以划分为两大部分，即Html文档的开头和Html文档的主体（或正文）部分，主要标记如下。（1）：HTML文档中，第一个标记是。这个标记告诉浏览器这是HTML文档的开始。HTML文档的最后一个标记是，这个标记告诉浏览器这是HTML文档的终止。（2）：和构成Html文档的开头部分，在此标记对之间可以使用、等等标记对，这些标记对都是描述Html文档相关信息的。其中，在和标签之间的文本是文档标题，它被显示在浏览器窗口的标题栏中。如上面示例中的文档标题是“欢迎光临我的网上商城”。每个页面应该有不同而明确的标题 所以一般来说标题是需要的。标志对之间的内容是不会在浏览器的窗口内显示出来的。（3） ：和之间的内容构成Html文档的主体部分，在此标志对之间可包含、等等众多的标记，它们所定义的段落、图像、换行和水平线等将会在浏览器的窗口内显示出来。两个标记必须一块使用。2、HTML“标记”的分类HTML“标记”可以根据是否需要成对出现，分为单标记和双标记两种，具体介绍如下：（1） 单标记：某些标记称为“单标记”，因为它只需单独使用就能完整地表达意思，如示例中的单标记, 它表示一条水平线；单标记, 它表示一个图像。这类标记的语法格式是：。（2）双标记：另一类标记称为“双标记”，它由“开始标记”和“结尾标记”两部分构成，必须成对使用，其中开始标记告诉Web浏览器从此处开始执行该标记所表示的功能，而结尾标记告诉Web浏览器在这里结束该功能。开始标记前加一个斜杠（/）即成为结尾标记。这类标记的语法是： 内 容 。其中“内容” 部分就是要被这对标记施加作用的部分。如上面示例中的标记、和段落都是双标记。3、HTML“标记”的属性开始标记内的第一个单词称为元素，元素之后的单词则称为属性。标记里面可包含多个“属性、属性值”对，属性（Property）是指一个标记(Tag)的参数，用来设置一些标记的细节，对标记进行限定和说明，以使其符合网页制作者的要求。标记外面的内容就是在网页中显示出来的部分。如示例中的标记定义了HTML页面的body（主体）元素。它使用了一个附加的bgcolor（背景色）属性，告诉浏览器页面的背景色是浅灰色的。再如示例中的标记。它定义了HTML页面的字体元素。其中使用了一个附加的color（字体颜色）属性，告诉浏览器页面文字的颜色是篮色的。SIZE（字体大小）属性，告诉浏览器页面文字的大小是5号字。face（字体名称）属性，告诉浏览器页面文字的字体名称是楷体。属性和元素之间以空格间隔，多数的元素都有不止一个属性。属性值应该被包含在引号中。双引号是最常用的，但是单引号也可以使用。在很少情况下，比如说属性值本身包含引号，使用单引号就很必要了。比如：name=John ShotGun Nelson。注意：中文引号跟英文引号是不一样的。上面所指的引号都是英文状态下的引号。各属性之间无先后次序，属性也可省略（即取默认值），如示例中的单标记表示在文档当前位置画一条水平线（horizontal line），一般是从窗口中当前行的最左端一直画到最右端。其中size属性定义线的粗细，属性值取整数，缺省为1；align属性表示对齐方式，可取LEFT（左对齐，缺省值），CENTER（居中），RIGHT（右对齐）；width属性定义线的长度，可取相对值，（由一对 号括起来的百分数，表示相对于整个浏览器窗口的百分比），也可取绝对值（用整数表示的屏幕像素点的个数，如WIDTH=300），缺省值是100%。大部分标记的作用是为了使页面的内容显示得更加漂亮，更符合人们的习惯，使页面的信息更完整。学习HTML语言就是要掌握其主要的标记和属性的使用方法，这也是我们“第一篇”的主要任务。1.3.2 HTML文件编辑和保存一、HTML文件的编辑HTML文件的编辑软件有多种，这里我们以windows系统中的“记事本”工具为例，对前面的HTML文件E1_1.htm进行编辑。首先打开“记事本”（方法是：“开始”菜单“程序” “附件”“记事本”），然后在其中输入以下代码： 欢迎光临我的网上商城 欢迎光临我的网上商城 请观看我的体育用品 输入过程中可以随时进行编辑、修改，非常方便。二、HTML文件的保存Html文件文件(文档)的扩展名可以是.html或.htm。当整个Html文件编辑完毕后，即可存盘。方法是在记事本窗口中，选择“文件”菜单“保存”命令，此时将打开下面的“另存为”对话框，如图图 1.2所示图 1.2 文件“另存为”对话框在对话框的“保存在”列表框中选择存盘路径，在“保存类型”列表框中选择所有文件，然后将此文件命名为“E1_1.htm”，点击“保存”按钮即可。1.3.3 HTML文件显示和代码查看一、HTML文件的显示为了显示HTML文件的运行效果，需要首先启动IE浏览器。在浏览器的“文件”菜单中选择“打开”，这时将出现一个对话框。选择“浏览”，定位到你刚才创建的HTML文件“E1_1.htm”，选择它，单击“打开”。然后在对话框中，你将看到这个文件的地址，比如说：“C:MyDocuments E1_1.htm”。单击“确定”，浏览器将显示此页面，效果如图1.1所示。注意的2个问题：（1）编写完了HTML文件，但是不能在浏览器中看见结果。解决办法：请确认文件已经保存，并且使用了正确的文件名和扩展名，例如：“c: E1_1.htm”，并且确认你用浏览器打开时使用同样的文件名。（2）重新编辑了HTML文件，但是修改结果并没有在浏览器中显示。原因是浏览器缓存了你的页面，所以它不需要两次读取同样的页面。你修改了这个页面，浏览器并不知道。解决办法：请点击浏览器工具栏的“刷新”按钮，来强迫浏览器读取编辑过的页面。二、HTML文件代码的查看为了在IE浏览器中查看HTML文件的源程序，需要首先启动浏览器并显示该文件。然后在浏览器的“查看”菜单中选择“源文件”，如图 1.3所示。图 1.3 查看HTML文件源程序这时浏览器将自动打开“记事本”，显示该HTML文件的源程序，如图 1.4所示。图 1.4 HTML文件E1_1.htm源程序1.3.4 HTML文件常用编辑和显示软件一、HTML文件常用编辑软件任何一个纯文本编辑器都可以作为HTML的编辑器，如windows中的记事本、写字板，Linux中的Kedit、Lxy等，只要在保存文件时扩展名改为.htm 或.html即可。除此之外，也可以使用一些“所见即所得”的、功能更为强大的页面编辑器，如Dreamweaver 、FronPage等编辑。这些编辑软件集代码编辑、效果显示功能于一身，你可以很容易创建一个页面，而不需要在纯文本中编写代码。不仅如此，这些编辑软件还提供了许多其它功能，如预先定义了很多JavaScript函数，提供了CSS编辑工具等，而且这些功能都非常方便、易于使用。但是假如你想成为一名熟练的网页开发者，建议你使用纯文本编辑器编写代码，这有助于学习HTML语言基础。本书的 HTML文档示例，主要在纯文本编辑器环境下进行的编辑。有关使用FrontPage进行页面设计的基本操作请参见第四篇（附录。）二、HTML文件常用显示软件用于显示HTML文件的软件主要是各种浏览器，目前国内所使用的浏览器大多为微软公司的Internet Explorer,但从全球范围内来看，网景公司的Netscape、Opera也占有一定市场。因此，网页的设计应当考虑各种浏览器的兼容性问题。本书所有HTML文件示例的显示都在IE浏览器下进行。1.4 HTML编程规范一、使用小写标记前面我们说过，HTML标记是大小写无关的：如跟含义相同，都表示水平线。当你上网的时候，你会注意到多数教程在示例中使用大写的HTML标记，本书建议使用小写标记。为什么？因为，万维网标准化组织W3C从他们的HTML4开始，提倡所有HTML标记使用小写，而XHTML（下一代HTML）也需要使用小写标记。所以，假如你想投入到下一代HTML中，应该开始使用小写标记。二、代码缩进书写代码的缩进格式在各种编程语言中广为使用，这种书写方式就是使相同级别的语言符号采用相同的缩进尺寸。这样可以使源文件的代码结构清晰、层次分明，便于代码的阅读、维护和修改。本书所有的HTML、CSS和JavaScript程序代码都遵循编程的统一规范代码缩进书写。下面的HTML文件就采用了这种缩进格式。 欢迎光临我的网上商城 欢迎 光临我的网上商城 请观看我的体育用品 三、运用注释语句和大多数的编程语言一样，为了方便页面设计者或其他相关人员以后对代码的阅读、维护和修改，在源程序的适当位置插入注释语句是一种良好的编程习惯。HTML注释语句的格式为：，即在左括号“”后面跟一个感叹号，右括号不用。注释语句会被浏览器忽略。设计者可以在注释语句中包含任何内容。在上面的程序代码中就使用了注释语句。四、慎用空格当你写下HTML文本的时候，你不能确知在另外一个浏览器中，这些文本将被如何显示。因为，每次用户调整浏览器窗口大小的时候，文本都将被重新格式化。不要希望在编辑器中写一些空行和空格来协助排版。因为HTML会截掉你文本中的多余空格。不管多少个空格，处理起来只当一个。在HTML里面，一个空行也会被当作一个空格来处理。使用空段落来插入空白行是一个坏习惯，请使用换行标记来替代。尽管段落标记可以不写结束标记，但建议应该写上。因为HTML的下一个版本将不准你漏掉任何一个结束标记。五、引号的运用按照HTML规范和标准，元素的属性值应该全部使用英文半角双引号定界。但IE浏览器能够识别单引号定界、甚至没有引号定界的属性值。如下面3行代码例示了3种属性值的定界方法，其显示效果相同，都为红色、左对齐、宽度为3的水平线。尽管上述代码都能够在IE浏览器中正常显示，但根据HTML规范和标准还是应该采用第一种方法为好。需要注意的是，如果确需出现属性值中引号嵌套的情况，则外层使用单引号、里层使用双引号，如下面代码所示。1.5 （本章）小结1.6作业题1、简述HTML文件的组成和结构，并说明主要标记的名称和功能。2、用记事本输入HTML文件E1_1.htm的代码，修改后、保存并显示。要求如下：（1） 对每个标记的属性值都进行修改。（2）插入注释语句。（3）采用缩进方式书写代码。参考效果图如下。3、用IE浏览器打开一个你喜欢的网站主页，并用文件名称myhtml.htm保存、然后查看其源代码，说出你认识的标记名称和功能。第二章 HTML顶级标记及全局属性本章内容提要(主要内容)这一章主要对HTML中的通用属性和主要标记进行介绍，内容包括：u 通用属性，u （顶级、头、文本布局、字体样式、超链接、列表、表格、表单、框架、容器）标记 2.1 文档声明一、功能标记用来说明该文档是一个HTML文档，当浏览器下载解析时，就能够按照HTML的语法规则来解析这个页面，从而使文档以HTML页面的形式显示出来。二、语法标记的语法格式为：，开始标记和结尾标记都可选，但一般最好分别放在文档的开始和结尾。2.2 文档开头 一、功能这个标记里的内容（可称为子标记）称为头部，包含了当前文档的信息，如一些说明性的信息（文档的标题TITLE、文档基础BASE、链接LINK、元数据meta、被搜索引擎使用的关键词）和预定义（如样式表style和 脚本Script ）。有关其包含的各个子标记可参见下面的2.4-2.7节的介绍。二、语法标记的语法格式为：，开始标记和结尾标记都可选。2.3 文档主体一、功能该标记指明它所包含的内容是HTML文档的正文部分，文档的主体。二、语法标记的语法格式为： 文档正文的其它子标记，开始标记和结尾标记都可选。三、主要属性元素的主要属性及其取值如表2.1所示。表2.1 元素的主要属性定义属性名称属性值说明（或功能）bgcolorcolorvalue背景色。backgroundURL背景图象位置。如果这个图像的大小不及浏览器窗口，它将平铺占满窗口。bgpropertiesfixed背景图象是否随滚动条一起滚动（bgproperties=fixed，不滚动）Text，link，alink ，vlinkcolorvalue文本颜色(text)、超链接颜色(link)、活动超链接颜色(alink)、被访问过的超链接颜色(vlink)、Leftmargin，topmarginsize页面的左边空白尺寸(leftmargin=size)、上边空白尺寸(topmargin)四、属性说明1、background（背景图象）的使用：使用背景图象要注意图像跟页面上其他图像的协调、跟页面上文字颜色的协调，要注意图像平铺了以后看起来是否美观、图像是否吸引了文字的注意力，喧宾夺主了。另外，因为图像会使页面加载时间加长，所以建议图像文件的容量尽量不要超过10K。2、bgcolor属性的颜色值表示： bgcolor属性的colorvalue可以用6位16进制的RGB值表示。表示方法：#rrggbb。#RRGGBB 所代表的是红、绿、蓝三原色的红绿蓝强度 ( 00 暗 FF 亮 )，每一色由两位十六进制的数值表示 ( 即十进制 0 255 )。十六进制数为 : 0、1、2、3、4、5、6、7、8、9、A、B、C、D、E、F。如link=#000000为黑色。 colorvalue也可以用一个含有3个元素的“十进制数组”表示。如rgb（255，0，0）表示红色。数组中的3个数分别表示红、绿、蓝色的纯度，每个数的取值范围是0到255。255表示纯色，0表示无色。 数组中的数也可以用百分比表示，如rgb（100%，0，0）也表示红色，此时100%表示纯色，0%表示无色。 colorvalue也可以用HTML预定义的几种颜色常量名表示，如bgcolor=red。常见的颜色常量名如Silver 为银色、olive橄榄色、teal青色 、maroon栗色 、lime浅黄绿 、fuchsia紫红 、aqua浅绿等。 部分颜色常量名和16进制的RGB值的对照，见下表表2.2所示。表2.2 颜色常量名和16进制的RGB值对照表 Black = #000000Green = #008000Silver = #C0C0C0Lime = #00FF00Gray = #808080Olive = #808000White = #FFFFFFYellow = #FFFF00Maroon = #800000Navy = #000080Red = #FF0000Blue = #0000FFPurple = #800080Teal = #008080Fuchsia = #FF00FFAqua = #00FFFF五、【示例2.1】1、功能：说明HTML文档的主体标记及主要属性的使用方法。2、源程序代码及在IE中的显示效果如下：【源程序清单：E2_1.htm】!-该句说明了标记及主要属性的使用方法-静夜思（唐朝：李白）床前明月光，疑是地上霜。举头望明月，低头思故乡。相思（唐朝：王维）红豆生南国，春来发几枝？愿君多采撷，此物最相思。点击我观察超级链接变化图 2.1 标记及主要属性的使用六、【上机实践】 （一）输入源程序E2_1.htm，并通过浏览器查看运行效果。（二）分析主要代码的功能，并进行修改后重新运行，观察不同属性的设置对显示效果的影响。2.4 文档标题一、功能该标记指明它所包含的内容是HTML文档的标题，通常标题会在浏览器的标题栏中显示出来。二、语法标记的语法格式为：，开始标记和结尾标记都必选。标记对只能放在标记对之间。2.5 元信息一、功能该标记用来描述文档的属性，如作者、版权、关键字、日期等。二、语法标记的语法格式为： 开始标记必选,无结尾标记。三、主要属性元素的主要属性及其取值如表2.2所示。表2.2 元素的主要属性定义属性名称属性值说明（或功能）name文本指定属性的名称 content文本指定属性的值，。http-equiv文本指定HTTP标题名。四、【示例2.2】1、功能：说明HTML文档的标题，元信息等元素的使用方法。2、源程序代码如下：【源程序清单：E2_2.htm】 第二章 HTML标记 2.6 文档链接一、功能该标记指明了链接的资源与当前文档之间的关系，它传送的联系信息可能被浏览器以不同的方式处理。该标记必须出现在文档的头部，可以出现任意次数。二、语法标记的语法格式为： ，开始标记必选。无结尾标记。三、主要属性元素的主要属性及其取值如表2.3所示。表2.3 元素的主要属性定义属性名称属性值说明（或功能）hrefURL指定一个超文本链接relcdata指明了链接的资源和当前文档是什么关系rev（反向）cdata指明了当前文档和链接的资源是什么关系typecontenttype指明了链接的内容类型，如：text/csstargetframename指定显示链接的目标框架或窗口四、【示例2.3】1、功能：说明href 、rel、 rev属性的使用方法。2、代码如下：表示链接的资源words.htm是当前文档的词汇表。表示当前文档是链接的资源whole.htm的一部分。2.7 CSS样式表一、功能该标记用来指明当前文档所使用的样式，可以出现任意次数。详细内容可以参见第九章的CSS样式表部分。二、语法标记的语法格式为： 各种样式的定义，开始标记和结尾标记都必选，且必须位于文档的头部，可定义多个样式。三、主要属性属性Type指明样式表的类型，如为CSS样式表，则应写作 Type=“text/css”。 四、【示例2.4】1、功能：说明标记及type属性的使用方法。2、代码如下：2.8 全局属性（ID class style title dir 事件属性）属性（Property）是用来设置一些标记的细节，对标记进行限定和说明的。全局属性是指可以用到大多数标记上的那些属性。包括：ID属性、CLASS（类）属性、STYLE（样式）属性、TITLE（标题）属性、LANG（语言）属性、DIR（方向）属性、事件属性（如onClick、 onMouseDown）等。一、 ID属性：ID属性是为文档中的标记标识身份的，相当于一个标记的身份证。一个文档中一般不可能出现两个相同的ID值，否则会因为标记的识别冲突而导致页面显示不正常。例如，我们可以给段落标记p定义一个ID属性，代码如下： 这是一个ID属性为id_1的段落ID属性的主要作用有如下几方面：（1） 通过指定ID值，可以将相应的标记与CSS样式表中的样式联系在一起，详细内容可以参见第九章的CSS样式表部分。如：下面的代码可使“id属性值为id_1的段落”的字体颜色为兰色、字体为隶书。 这是一个ID属性为id_1的段落 （2）ID属性还可以用做超链接的锚点。如， 首先使用ID属性在文档中定义好名字为title的锚点，代码如下：我是锚点，名字为title下面的代码将使该超链接链向名字为title的锚点。链接到锚点title（3）ID属性还可以在使用脚本程序编程时，用做识别不同元素的符号。详细内容可以参见JavaScript脚本语言部分，此处不再赘述。二、CLASS（类）属性：CLASS属性主要应用在样式表上，可以给一个标记指定某种样式。详细内容可以参见第九章的CSS样式表部分。如：下面的代码可使“class属性值为class _1的段落”的字体颜色为兰色、字体为