JavaScript程序设计(第2版)02.HTML文档中的常用标记

1、JavaScript程序设计(第2版)02.HTML文档中的常用标记文字标记文字是文字是网页网页重要的重要的组组成局部之一，通成局部之一，通过过使用使用标题标记标题标记文字、文字格式文字、文字格式标标记记和文字和文字样样式式标记来标记来改改变变枯燥乏味的文字，可以使枯燥乏味的文字，可以使浏览浏览者更有效的者更有效的浏览网页浏览网页。下面下面将对标题标记将对标题标记、文字格式、文字格式标记标记和文字和文字样样式式标记进标记进行介行介绍绍。1.1.标题标记标题标记在在浏览网页时浏览网页时常常看到一些常常看到一些标题标题文字，用文字，用来划来划分各分各个个章章节节，在，在HTMLHTML文文档档中中

2、可以使用可以使用标题标记来标题标记来指明指明页页面上的面上的标题标题。标题标记标题标记包含包含6 6种标记种标记到到，分，分别别表示表示6 6个级别个级别的的标题标题，每一，每一个级别个级别的字体大小都有明的字体大小都有明显显的的区区分，分，从从1616以以递减递减的形式表示，的形式表示，1 1级标题级标题的字的字号为号为最大，最大，6 6级标题级标题字字号为号为最小。最小。每每个标题标记个标题标记所所标识标识的文字的文字将独将独占一行且上下留一空白行。占一行且上下留一空白行。语语法格式如下：法格式如下：标题标题标题标题例例3-5 3-5 下面使用下面使用标题标记来标题标记来演示各演示各级标题

3、级标题的的区别区别。程序代。程序代码码如下：如下：标题标题文字效果文字效果11级标题级标题22级标题级标题33级标题级标题44级标题级标题55级标题级标题66级标题级标题保存文件，并在保存文件，并在IE浏览器中运行该文件，结果如图浏览器中运行该文件，结果如图3-5所示。所示。图图3-5 标题标记运行结果标题标记运行结果2.2.文字格式文字格式标记标记 在在网页网页中普通文字信息是必不可少的，中普通文字信息是必不可少的，为为了使了使页页面效果面效果变变的更加美的更加美观观，可以使用文字格式，可以使用文字格式标记标记改改变变枯燥的文字信息。文字格式枯燥的文字信息。文字格式标记标记用于用于设设置文字

4、大小、字体效果和文字置文字大小、字体效果和文字颜颜色，其常用色，其常用的的属属性及其性及其说说明如表明如表3-13-1所示。所示。表表3-1 文字格式标记常用属性及其说明文字格式标记常用属性及其说明标记标记应应用于文件的用于文件的主体标记主体标记与与之间，并且之间，并且只影只影响响它它所所标标识识的的文字。文字。例例3-6 3-6 下面通过下面通过标记的标记的FACEFACE属性定义字体为属性定义字体为“黑体，通过黑体，通过SIZESIZE属性定义大小为属性定义大小为“16px16px，通过，通过COLORCOLOR属性定义颜色为粉色，代码如下：属性定义颜色为粉色，代码如下：定义文字字体定义文

5、字字体 应用应用标记定义文字字体：标记定义文字字体：font face=努力不一定成功，放弃必定失败努力不一定成功，放弃必定失败HTMLHTML为为一些特殊的字符一些特殊的字符设设置了特殊的代置了特殊的代码码。字符的。字符的实实体名体名称称都以一都以一个个“ “& &符符号开号开始，以一始，以一个个“ “；符符号结号结束。在上面的代束。在上面的代码码中，特殊符中，特殊符号号“ “ 用用“ “>>HTMLHTML标记标记表示。另外，表示。另外，为为了使了使页页面更加面更加清清晰、整晰、整齐齐，使，使读读者一目了然。者一目了然。这这里里应应用了用了换换行

6、行标记标记。文件，文件，并并在在IEIE浏览浏览器中翻器中翻开该开该文件，文件，运运行行结结果如果如图图3-63-6所示所示图图3-6 字体标记的应用字体标记的应用3 3文字样式标记文字样式标记在浏览页面时，常常可以看到页面中会出现一些特殊样式的文字，例如粗体字、斜体字、带删在浏览页面时，常常可以看到页面中会出现一些特殊样式的文字，例如粗体字、斜体字、带删除线的文字等。这些样式可以使用除线的文字等。这些样式可以使用HTML文档提供一些文字样式标记来实现。常用的文字样式标文档提供一些文字样式标记来实现。常用的文字样式标记及说明如表记及说明如表3-2所示。所示。表表3-1 文字格式标记常用属性及其

7、说明文字格式标记常用属性及其说明例例3-7 3-7 下面使用文字下面使用文字样样式式标记标记，将将文字文字样样式式设设置置为为粗体、斜体、粗体、斜体、带删带删除除线线和上和上标样标样式。程式。程序代序代码码如下如下：文字文字样样式式标记应标记应用用粗体粗体样样式式斜体斜体样样式式删删除除线样线样式式上上标样标样式式保存文件，保存文件，并并在在IEIE浏览浏览器中翻器中翻开该开该文件，文件，运运行行结结果如果如图图3-73-7所示。所示。图图3-7 3-7 文字文字样样式式标记应标记应用用段落标记为为了使了使网页网页中的文字更有中的文字更有条条理的理的显显示出示出来来，可以使用，可以使用HTML

8、HTML文文档档中的段落中的段落标记标记和和换换行行标记来标记来使文字段落使文字段落清清楚更楚更标标准。下面准。下面对对段落段落标记标记和和换换行行标记进标记进行介行介绍绍。P align=1 1段落标记段落标记在普通的文本编辑器中，每输入完一段文字后，可以按下键盘上的在普通的文本编辑器中，每输入完一段文字后，可以按下键盘上的Enter键生成一个新的键生成一个新的段落段落语法：语法：其中，其中，align是段落标记是段落标记的常用属性，取值为的常用属性，取值为left、center或或right，即可以实现段落在水平，即可以实现段落在水平方向上的左、中、右的对齐。方向上的左、中、右的对齐。例例

9、3-8 下面应用段落标记下面应用段落标记将一段文字分为两段显示，程序代码如下将一段文字分为两段显示，程序代码如下：段落标记的应用段落标记的应用这是第一段文字在此处使用段落标记这是第一段文字在此处使用段落标记我是第二段文字我是第二段文字保存文件，并在保存文件，并在IEIE浏览器中翻开浏览器中翻开该文件，运行结果如图该文件，运行结果如图3-83-8所示所示图图3-8 段落标记应用段落标记应用2 2换换行行标记标记 在在页页面中一行文字到面中一行文字到达达一定一定长长度度浏览浏览器器会对会对其自其自动换动换行，如果文字未到行，如果文字未到达达一定一定长长度可以使度可以使用用换换行行标记标记对对其强制

10、其强制换换行。行。换换行行标记标记是是单标记单标记。换换行行标记标记的的应应用用人品人品胜胜于能力于能力,人品和素人品和素质质，常常比常常比资历资历和和经验经验更更为为重要。重要。例例3-9 3-9 下面下面应应用用换换行行标记将标记将一行文字分一行文字分为为三行三行显显示。程序代示。程序代码码如下如下：保存文件，保存文件，并并在在IEIE浏览浏览器中翻器中翻开该开该文件，文件，运运行行结结果如果如图图3-93-9所示。所示。图图3-9 3-9 换换行行标记应标记应用用列表标记 列表是比较常用的数据排列形式，比照较复杂的数据通过使用列表，可以使数据变的更为清晰。列表是比较常用的数据排列形式，比

11、照较复杂的数据通过使用列表，可以使数据变的更为清晰。下面将介绍在网页中的两种列表标记，无序列表标记和有序列表标记。下面将介绍在网页中的两种列表标记，无序列表标记和有序列表标记。第一第一项项第二第二项项第三第三项项1 1无序列表标记无序列表标记无序列表标记用于提供一种不需要编号的列表形式。在每一个工程文字前，以符号作为每项的表无序列表标记用于提供一种不需要编号的列表形式。在每一个工程文字前，以符号作为每项的表示示语法：语法：标记标记表示一表示一个个无序列表的无序列表的开开始始标记标记和和结结束束标记标记，表示一表示一个个工程的工程的开开始。始。标记标记常用常用属属性性为为typetype，此，此

12、属属性表示无序列表的工程符性表示无序列表的工程符号样号样式，其式，其属属性性值值如表如表3-33-3所示。所示。discdisc为为默默认值认值。表表3-3 3-3 type属属性性值值及及样样式式无序列表无序列表标记标记的的应应用用 图书种类图书种类计计算机算机类类教教材材类类杂杂志志类类文文学类学类例例3-10 3-10 下面下面应应用无序列表用无序列表标记显标记显示示图书种类图书种类信息。程序代信息。程序代码码如下如下：保存文件，保存文件，并并在在IEIE浏览浏览器中翻器中翻开该开该文件，文件，运运行行结结果如果如图图3-103-10所示所示图图3-10 3-10 无序列表无序列表标记应

13、标记应用用第一第一项项第二第二项项第三第三项项2 2有序列表有序列表标记标记有序列表有序列表将将各各个个列表列表项项使用使用编号编号而不是用符而不是用符号来号来表示，在有序列表中的工程通常都是有先后表示，在有序列表中的工程通常都是有先后顺顺序的，一般采用的是以序的，一般采用的是以数数字或字母字或字母为顺为顺序序号号。语法：语法：标记标记表示一表示一个个有序列表的有序列表的开开始始标记标记和和结结束束标记标记，表示一表示一个个工程的工程的开开始。始。标记标记常用常用startstart属属性和性和typetype属属性。性。startstart属属性用性用来设来设置列表置列表项项的起始的起始值值

14、，其，其属属性性值为值为整整数数。当当然也可以然也可以输输入入负负整整数数，但只，但只对数对数字字项项起作用，默起作用，默认从认从开开始。始。typetype属属性用性用来设来设置列表置列表项项的序的序号样号样式。其式。其属属性性值值如表如表3-43-4所示。所示。表表3-4 3-4 type type属属性性值值及及样样式式有序列表有序列表标记标记的的应应用用 图书种类图书种类计计算机算机类类教教材材类类杂杂志志类类文文学类学类例例3-11 3-11 下面下面应应用有序列表用有序列表标记显标记显示示图书种类图书种类信息。程序代信息。程序代码码如下。如下。保存文件，保存文件，并并在在IEIE浏

15、览浏览器中翻器中翻开该开该文件，文件，运运行行结结果如果如图图3-113-11所示。所示。图图3-11 3-11 有序列表有序列表标记标记的的应应用用超链接标记在在HTMLHTML文文档档中中被被称为称为超超链链接接标记标记。此。此标记标记是是网页页网页页面中最重要的元素之一。面中最重要的元素之一。一一个网个网站是由多站是由多个页个页面面组组成的，成的，页页面之面之间间根据超根据超链链接确定相互的接确定相互的导导航航关关系。系。单击网页单击网页上的上的链链接文接文字或者字或者图图像后，就可以跳像后，就可以跳转转到另一到另一个网页个网页。超链接标记常用的属性及说明如表超链接标记常用的属性及说明如

16、表3-5所示。所示。表表3-5 3-5 超超链链接接标记标记常用的常用的属属性及性及说说明明表表3-6 3-6 targettarget属属性的取性的取值值例例3-12 3-12 下面在下面在JavaScriptJavaScript攻略攻略页页面如面如图图3-123-12所示中所示中单击图书单击图书的的“ “详细详细信息信息超超链链接接标记标记，将将跳跳转转到此到此详细详细信息信息页页面，如面，如图图3-133-13所示。所示。图图3-12 JavaScript攻略页面攻略页面图图3-13 详细信息页详细信息页程序代码如下程序代码如下：超链接标记的应用超链接标记的应用JavaScriptJav

17、aScript攻略攻略JavaScriptJavaScript入门入门详细信息详细信息JavaScriptJavaScript典型实例典型实例详细信息详细信息JavaScriptJavaScript高级应用高级应用详细信息详细信息图像标记如果希望如果希望网页网页到到达达美美观观吸引吸引浏览浏览者的效果，使用者的效果，使用图图片是不可缺少的。在片是不可缺少的。在HTMLHTML文文档档中可以使中可以使用用图图像像标记将图标记将图片片插插入到入到网页网页中。中。图图像像标记标记常用的常用的属属性及性及说说明如表明如表3-73-7所示。所示。表表3-7 3-7 图图像像标记标记常用的常用的属属性及性

18、及说说明明例例3-13 3-13 下面在下面在网页网页中使用中使用标记插标记插入入图图片片flower.jpgflower.jpg，并将图并将图片片宽宽度度属属性性设设置置为为100%100%，将将文字提示文字提示设设置置为为“ “富富贵贵牡丹牡丹，代，代码码如下：如下：在在网页网页中中插插入入图图片片img src=flower.jpg width=100% height=100% align=left alt= /保存文件。在保存文件。在IEIE浏览器中翻开该文件，运行结果如图浏览器中翻开该文件，运行结果如图3-143-14所示。所示。图图3-14 图像标记的应用图像标记的应用表格标记表格

19、是表格是网网站常用的站常用的页页面元素，是面元素，是网页网页排版的排版的灵灵魂，在魂，在页页面中用表格面中用表格来来加强加强对对文本位置的控制文本位置的控制和和显显示示数数据，直据，直观清观清晰，而且晰，而且HTMLHTML的表格使用起的表格使用起来来非常非常灵灵活。活。表格表格标题内标题内容容表表头内头内容容表表头内头内容容单单元格元格内内容容单单元格元格内内容容在在HTMLHTML文文档档中通常使用中通常使用3 3个标记来构个标记来构成表格，分成表格，分别为别为表格表格标记标记、行、行标记标记和和单单元格元格标记标记。创创立一立一个个表格的表格的语语法格式如下：法格式如下：语法：语法： 表

20、格表格标记标记 标记标记表示一表示一个个表格的表格的开开始位置，始位置，表示一表示一个个表格的表格的结结束位置。表格束位置。表格标记标记的常的常用用属属性及性及说说明如表明如表3-83-8所示。所示。表表3-8 3-8 表格表格标记标记的常用的常用属属性及性及说说明明表格标题标记表格标题标记 标记用来设置一种比较特殊的单元格标记用来设置一种比较特殊的单元格“ “标题单元格。标题单元格标题单元格。标题单元格位于整个表格的第一行位置，起到为表格显示标题的作用。位于整个表格的第一行位置，起到为表格显示标题的作用。 表格表头标记表格表头标记 在表格中还有一种特殊的单元格，此单元格为在表格中还有一种特殊

21、的单元格，此单元格为“ “表头，表格的表头一般位于第一行的第表头，表格的表头一般位于第一行的第一列位置，用来说明这一行的内容的类别。表头中的内容是加粗显示的。一列位置，用来说明这一行的内容的类别。表头中的内容是加粗显示的。 行行标记标记 行行标记标记用用来设来设置表格中的行，在表格中包含几置表格中的行，在表格中包含几组组行行标记标记，就表示此表格，就表示此表格为为几行。行几行。行标记标记常用的常用的属属性及性及说说明如表明如表3-93-9所示。所示。表表3-9 3-9 行行标记标记常用的常用的属属性及性及说说明明单元格标记单元格标记单元格标记用来表示每一行中有几个单元格。此标记的局部属性和行标

22、记类似，这里将介绍单元格标记用来表示每一行中有几个单元格。此标记的局部属性和行标记类似，这里将介绍colspancolspan属性和属性和rowspanrowspan属性。属性。lcolspanlcolspan属性属性在表格中有时需要将一行中的几个单元格合并成为一个单元格，此时可以使用在表格中有时需要将一行中的几个单元格合并成为一个单元格，此时可以使用colspancolspan属性来属性来实现，此属性值为正整数表示需要合并单元格的个数。实现，此属性值为正整数表示需要合并单元格的个数。lrowspandlrowspand属性属性此属性用来合并表格的行，此属性值为正整数表示需要合并行的个数。此属

23、性用来合并表格的行，此属性值为正整数表示需要合并行的个数。例例3-14 3-14 下面在下面在网页网页中中应应用表格用表格标记标记和局部和局部属属性性创创立一立一个个企企业业名片，程序代名片，程序代码码如下：如下：表格表格标记标记的的应应用用!-#CC6600-table width=418 border=2 align=center bordercolorlight=#CC6600 吉林省明日科技吉林省明日科技 img src=mr.JPG width=84 height=114 td width=30% height=25 valign=middle bgcolor=#D8E1F8技技术总

24、监术总监： 高高经经理理 E- E-mailmail： mingrisoftmingrisoft mingrisoftmingrisoft 联联系系 ：0431-84678981 ：吉林省：吉林省长长春市二道春市二道区亚区亚泰广泰广场场C C座座22052205室室 保存文件。在保存文件。在IEIE浏览器中翻开该文件，运行结果如图浏览器中翻开该文件，运行结果如图3-153-15所示。所示。图图3-15 表格标记的应用表格标记的应用框架标记框架的作用是把框架的作用是把浏览浏览器窗口器窗口划划分成假分成假设设干干个区个区域，每域，每个区个区域域内内可以可以显显示不同的

25、示不同的页页面，面，并并且各且各个页个页面之面之间间不不会会受到任何影受到任何影响响，为为框架框架内内每每个页个页面取不同的名字，做面取不同的名字，做为为彼此互彼此互动动的依据，所以框的依据，所以框架技架技术术普遍普遍应应用于用于页页面面导导航。航。1 1根本框架根本框架 创立框架语法格式如下。创立框架语法格式如下。语法：语法：框架页面的标题框架页面的标题从创立框架的语法可以看出，框架主要是由两个标记组成，一个框架容器标记另一个是框架从创立框架的语法可以看出，框架主要是由两个标记组成，一个框架容器标记另一个是框架页面标记。下面对这两个标记分别进行介绍。页面标记。下面对这两个标记分别进行介绍。l

26、 l框架容器框架容器标记标记，用做框架的，用做框架的声声明。明。为为框架框架开开始始标记标记，对应对应的的为为框架框架结结束束标记标记。在框架。在框架网页网页中，中，将将标记标记置于置于头头部部标记标记之后，以取代之后，以取代的位置。框架的位置。框架容器容器标记标记常用的常用的属属性及性及说说明如表明如表3-103-10所示。所示。表表3-10 3-10 框架容器框架容器标记标记常用的常用的属属性及性及说说明明 l l 框架页面标记，定义框架内容。在框架页面中有几个框架，就设置几个框架页面标记，定义框架内容。在框架页面中有几个框架，就设置几个标记，它包含于标记，它包含于和和之间。框架页面标记常

27、用的属性及说明如表之间。框架页面标记常用的属性及说明如表3-11所示。所示。表表3-11 3-11 框架框架页页面面标记标记常用的常用的属属性及性及说说明明例例3-15 3-15 下面通过下面通过标记和标记和标记定义一个顶部和嵌套的左侧框架，代码如下标记定义一个顶部和嵌套的左侧框架，代码如下：构构建根本框架建根本框架frameset rows=80,framespacing=0 frame src=top.htm name=topFrame scrolling=yes noresize=noresize id=topFrame/ frameset cols=180, frameborder=n

28、o border=0 framespacing=0 frame src=left.htm name=leftFrame scrolling=yes noresize=noresize id=leftFrame/ 很抱歉，很抱歉，您您使用的使用的浏览浏览器不支持框架功能，器不支持框架功能，请尝试请尝试使用其他使用其他浏览浏览器！器！将框架集保存为将框架集保存为ch2-15.htmlch2-15.html，框架页分别保存为，框架页分别保存为top.htmtop.htm、left.htmleft.htm、main.htmmain.htm。页面的。页面的设计效果如图设计效果如图3-163-16所示。所示。图图3-16 3-16 构建根本框架构建根本框架在在IEIE浏览浏览器中器中运运行行该该文件，文件，运运行行结结果如果如图图3-173-17所示。所示。图图3-17 框架标记的应用框架标记的应用2 2浮浮动动框架框架 浮浮动动框架是一框架是一种种特殊的框架特殊的框架结构结构，它它是在是在浏览浏览的窗口中嵌套另外的的窗口中嵌套另外的网页网页文件。文件。为为浮浮动动框架框架标记标记。语语法：法：标记常用的属性及说明如表标记常用的属性及说明如表3-12所示。所示。表表3-12 3-12 标记标记常用的常用的属属性及性及说说明明例例3-16 3-16 下面在下面在ch2-1