参考讲稿html基础

1、第章HTML 基础HTML 语言概述HTMLHTML 格式HTML 文本HTML 超HTML 图像HTML 表格HTML 框架HTML 表单要使设计者在网络上发布的网页能够被世界各地的浏览者所阅读，就需要一种规范化的发布语言。在网（WWW）上，文档的发布语言是 HTML。HTML 语言是英文 HyperText Markup Language 的缩写，中文名为超文本标记语言。所谓超文本标记语言，就是该文档有别于纯文本的单个文件的浏览形式。超文本文档中提供的超能够让浏览者在不同的页面之间跳转。标记语言是一种基于源代码解释的方式，它的源文件由一个纯文本文件组成，代码由许多元素组成，而前台浏览器通过

2、解释这些元素来显示出各种样式的文档。换句话说，浏览器就是把纯文本的源文件以赋有样式定义的超文本文件方式显示出来。182.1HTML 语言概述HTML 和网络是紧密连接的，它应网络传输的需求而开发，配合文档显示而发展。HTML 是 1989年由 Timonthy Berners-Lee 所制定出来的，随后，由 NCSA 推出的 Mosaic 浏览器将 HTML 语言推广并得到越来越多用户的欢迎。但是由于多种浏览器同时流行于世界各地，它们支持 HTML 语言的标准也不相同，这样限制了 HTML 标记语言本身的发展。逐渐，W3C（World Wide Web Consortium）网络标准化组织联手

3、一些较为流行的浏览器开发商一同定义了 HTML 标准，并且力推浏览器解释语言和显示方法的，这也在另一方面为 HTML 标准的起到了推动作用。2.1.1HTML 概述HTML 语言是一种标记语言，它不需要编译，可以直接由浏览器执行。在标准网页设计中 HTML负责填充网页的内容，HTML 编写的超文本文档（文件）称为 HTML 文档（网页），它包含了一些HTML 元素，使用.html 或.htm 为文件名后缀，能独立于系统，如 UNIX、Windows 等。HTML 文档是普通的文本文档（ASCII），任何文字编辑器都可以编辑，只要能将文件另存成 ASCII纯文字格式即可。可以使用普通的文本编辑器

4、，如 Windows 中的记事本、写字板，也可以采用的HTML 编辑工具，如 Eclipse、Dreamweaver、Homesite 等。的 HTML 编辑工具在编写过程中能够和属性，并能够自动检查 HTML 文档中的语法错误并协助改正。提示HTML 文本包含页面本身的文本和表示页面元素、结构、格式及其他超文本的 HTML两种信息。HTML规定了 HTML 文本的逻辑结构，并且控制其显示格式，也就是说，设计者可以用定义 HTML 文本的逻辑结构，但是文本的实际显示内容则由浏览器来负责解释。可以使用HTML来设置、标题、段落、列表和字符等区域。大部分的 HTML是以“相应内容”形式出现的，的名

5、字用尖括号括起来。HTML一般有起始和结束两种，分别放在它起作用的文本两边。起始与结束很相似，只是结束在“”处结束。属性的作用是向客户端提供关于页面元素内容以及如何处理的附加信息，用户可以在这个区域对文本中的一些具体属性，如大小、颜色、字体等信息进行设置。2.1.2HTML 文档结构标准的 HTML 文档由和要显示在网页上的内容组成。HTML 用于描述功能的符号称为“”，如、等。HTML规定了 HTML 文档的逻辑结构，并且控制文档的显示格式，然后由浏览器来负责解释并显示页面。通过使用可以区分文本文件的各个组成部分，还可以对网页上的文字、表格、等多数据所出现的位置、形式、顺序及网页间的超级关系

6、进行设定。19下面先以例子来了解 HTML 语言的基本结构，具体代码如下：/HTML 文档开始/HTML 文档的头部分/文档标题/HTML 文档的主体：生日：1978 年 10 月 4 日电子邮箱：/HTML 文档结束该 HTML 文件经过浏览器解释后，显示的网页内容如图 2-1 所示。从上面的例子可以看出，HTML 文档由许多成对出现的控制标记组成，也可以称为标签，如与、与等。在后面的章节中将介绍在 HTML 文档中组成图 2-1 运行结果图文档架构的几个主要的 HTML。2.2HTML都封装在一对尖括号“”之中。只改变网页的显示方式，本身不会显示在窗口中。HTML 文档中最先出现的是。是文

7、档标识符，它是成对出现的，首和尾分别位于文档的最前面和最后面，明确地表示文档是由超文本标记语言（HTML）编写的。该不带任何属性。事实上，现在常用的 Web 浏览器（Netsc和 IE）都可以自动识别 HTML 文档，并不要求有，也不对该做任何操作。但是，为了提高文档的适用性，使编写的 HTML 文档都能适应日新月异的 Web 浏览器的变化，还是应该养成使用这个在.之间主要包括以下几个部分。的。2.2.1头部Head 是英文“头”的意思。上用户把 HTML 文档分为文档头和文档主体两部分。文档主体部分就是在 Web 浏器窗口的用户区内看到的内容，而文档头部分用来规定该文档的标题（出现在 Web

8、浏览器窗口的标题栏中）和文档的一些属性。中间可以使用、JavaScript 代码。对的作用就是控制文档的头部信息。此对，在此对中间可以放置用户编写的HTML 文档的是可以嵌套的，即在一对中可以嵌入另一对子，用来规定母所含20范围的属性或其中某一部分的内容，嵌套在对中使用的主要有和。2.2.2标题是成对出现的，用以规定 HTML 文档的标题。在和之间的内容将显示在Web 浏览器窗口的标题栏中。另外，对只能放在对之间，而且其不能包含其他。从图 2-1 中可以看到，代码段“个字出现在 IE 浏览器的左上方。”控制显示了网页的标题，“”42.2.3索引是一个单独，不需要成对出现，它用来规定文档的属性，

9、说明该文档是可以按关键字索引的。下面通过一个简单的例子来说明该的作用，具体代码如下：这是一个“ISINDEX”的范例程序。HTML 和网络是紧密连接的，它应网络传输的需求而开发，配合文档显示而发展。HTML 是在由Timonthy Berners-Lee 所制定出来的，随后，由 NCSA 推出 Mosaic 浏览器，将 HTML 语言推广并得到越来越多用户的欢迎。但是由于多种浏览器同时流行于世界各地，它们支持 HTML 语言的标准也不相同，这样限制了 HTML标记语言本身的发展。逐渐，W3C（World Wide Web Consortium）网络标准化组织联手一些较为流行的浏览器开发商一同定

10、义 HTML 标准，并且力推浏览器解释语言和显示方法的起到了关键作用。，这也在另一方面为HTML 标准的运行该代码，在 IE 6.0 中显示结果如图 2-2 所示。图 2-2 使用的运行结果212.2.4主体是成对出现的。在对之间的内容，将显示在 Web 浏览器窗口的用户区内，它是 HTML 文档的主体部分。可以把 HTML 文档的主体区域简单地理解成标题以外的所有部分，该部分可以包含、等。结束用来指明主体区域的结尾。在中可以规定整个文档的一些基本属性。bgcolor：指定 HTML 文档的背景色。 text：指定 HTML 文档中文字的颜色。 link：指定 HTML 文档中待连接超 ali

11、nk：指定 HTML 文档中连接中超vlink：指定 HTML 文档中已连接超对象的颜色。对象的颜色。对象的颜色。background：指定 HTML 文档的背景文件。在指定对象的颜色时，可以使用该颜色的代码，或直接使用该颜色对应的英文单词，例如，指定HTML 文档的背景色为绿色，可以表示为“ ”， 也可以表示为“ ”。为了便于，建议读者直接用相应的英文单词指定颜色。可以通过下面的实例来看对中各种属性的使用情况。为网页设计一个背景颜色，并且在网页上输入一段文字，具体代码如下：HTML 基本源文件HTML 文档中 BODY的使用BODY之间显示的即为浏览器上看到的内容，页面上显示的任何东西都包含

12、在这两个之中。可以把 HTML 文档的主体区域简单地理解成标题以外的所有部分运行该段代码的结果如图 2-3 所示。图 2-3 使用的运行结果222.2.5特殊字符在 HTML 中有很多特殊的符号是需要特别处理的，例如，“”这两个符号是用来表示标签的开始和结束的，没有办法通过直接按键来输入，必须用输入编码表示法来输入。通常情况下，HTML 会自动截去多余的空格。不管加多少空格，都被看作一个空格。如果要显示空格中的多个空格，可以使用“&;”表示空格。常用的特殊字符及显示结果如表 2-1 所示。表 2-1 常用的特殊字符及显示结果2.3HTML 格式HTML 格式的主要作用是在浏览器中控制文本对象的

13、显示，包括段落、换行、水平线等，所有的格式全部都是嵌套在对之间的。下面介绍几个常用的 HTML 格式。2.3.1段落段落的英文全称是 Paragraph，几乎所有的 HTML 文档都离不开这个，而且这个在使用时必须成对出现。对用于创建一个段落，在此中的文本以段落的方式显示在浏览器上。段落对支持 align 属性来设置对齐方式，语法如下：段落内容属性 align 的功能是专门设定水平对齐，其常见的设定值有 3 个，也就是置左（align=left）、置中（align=center）、置右（align=right）。用属性 align 设置对齐方式在很多落的代码如下：上都存在。使用段分段左对齐段落

14、段落居中右对齐段落源 代 码显 示 结 果&;代表一个不断行空白&;&23运行该段代码的结果如图 2-4 所示。图 2-4 使用分段的运行结果2.3.2换行换行的作用是在不另起一段的情况下将当前文本强制换行。它的起始必须有，而结束是出现的，也就是说属于单独出现的。使用换行的代码如下：换行这段文字一共包含了两个强制换行标记代码运行结果如图 2-5 所示。图 2-5 使用换行的运行结果2.3.3缩进对为缩进，在浏览器中显示向右缩进的文字。在对之间加入的文本在浏览器中显示的效果与在普通的文本中使用 Tab 键进行缩进的效果一样。代码如下：没有使用缩进的文本。24使用缩进缩排 1使用缩进缩排 2代码运

15、行结果如图 2-6 所示。图 2-6 使用缩进的运行结果如图 2-6 所示，利用对可以将其包起来的文字全部往右缩进，而，依此类推。且加一组卷标往右缩排一，加两组卷标往右缩排两2.3.4预格式化在 HTML 文档中，有时设计者需要按照自己的格式编写源文件，并且希望在浏览器中显示的格式和编辑时的格式相同。对就可以完整保留设计者在源文件中所定义的格式，包括各种空格、缩进以及其他特殊格式，全都原封不动地反映在浏览器页面上。使用的代码如下：进行预格式化锄禾日当午，汗 滴 禾 下 土。谁知盘中餐，粒 粒 皆 辛 苦。代码运行结果如图 2-7 所示。图 2-7 使用预格式化的运行结果252.3.5列表HTM

16、L 文档中使用的列表主要有无序列表、排序列表、目录列表、菜单列表、描述性列表 5 种类型。下面分别进行介绍。1无序列表在 HTML 文档中无序列表是通过和来实现的。ul 即 Unordered List，是无序列表。是成对，首和尾之间的内容就是无序列表的内容。无序列表中的每一个列表项开头必须用进行标识。li 是项目，是单独出现的，或列表的尾。Web 浏览器在显示无序列表时，后的文字为列表项的内容，直至碰到下一个项目会在每一个列表项的开头加上无序列表的标记符号。如下面的代码：无序列表范例程序以下是某商店的进货目录：女装、男装、童装等服装类用品休闲鞋、运动鞋、皮鞋等鞋类用品锅、碗、针、线等日用品床

17、单、被罩等用品代码运行结果如图 2-8 所示。图 2-8 使用无序列表的运行结果从图 2-8 可以看出，2排序列表隐含有的作用，Web 浏览器在显示列表项时会自动换行。在 HTML 文档中排序列表是通过和来实现的。ol 即 Ordered List，是排序列表标26签。是成对出现的，首和尾之间的内容就是排序列表的内容。排序列表中的每一个列表项也必须用并在每一个列表项开头加上以进行标识。Web 浏览器在显示排序列表时，会自动对列表进行排序，数字形式表示的序号。可以通过在中添加 start 属性的方法来指定序列的起始号。在默认情况下，序列的起始号为 1。例如下面的代码：排序列表范例程序这是列表的第

18、 1 项。这是列表的第 2 项。这是列表的第 3 项。这是列表的第 9 项。这是列表的第 10 项。代码运行结果如图 2-9 所示。3目录列表HTML 使用和来定义目录列表。dir 即 Directory，是目录列表。是成对出现的，首和尾之间的内容就是目录列表的内容。目录列表的列表项开头也必须用项目标识。一般来说，目录列表项长度较短，典型的目录列表每项长度不超过 20 个字符。目录列表的显示效果和无序列表相同，参见图 2-8。4菜单列表HTML 使用和来定义菜单列表。菜单列表是成对，首和尾之间的内容就是菜单列表的内容。菜单列表每一个列表项开头也必须用项目进行标识。一般来说，菜单列表每项的长度不

19、超过一行。菜单列表的显示效果与无序列表基本相同，只不过在排列上更为紧凑，参见图 2-9。5描述性列表HTML 使用、和来定义描述性列表。dl 即 Definition List，是描述性列表。是成对，首和尾之间的内容就是描述性列表的内容，由一系列用描述项或解释项标识的列表项组成。和都是单独，位于列表项的开头，分别表示该项是描述项和解释项。和浏览器在显示时会自动换行。一样，和也隐含有的作用，Web和通常是成对出现的，即一个描述项对应于一个解释项。一个描述项也可以对应于几个解释项，但最好不要出现几个描述项对应同一个解释项的情况。27在显示时，解释项的内容会自动缩进一定的距离，使列表的结构更加清晰。

20、例如下面的代码：描述性列表范例程序这是一个描述性列表：师范学院包括数学专业、物理专业、外语专业、心理教育专业等计算机科学与技术学院计算机与理论专业计算机应用专业计算机硬件专业代码运行结果如图 2-10 所示。图 2-9 使用排序列表的运行结果图 2-10使用描述性列表的运行结果2.4HTML 文本HTML 文本用于设置文本的样式及显示属性，可以让浏览器按照某种格式来显示文本。下面主要介绍以下几种常用的文本。2.4.1标题HTML 提供了将文本设置为标题显示的对，夹在对之间的文字是 HTML 文档的标题。可以设定标题字体大小，标题的大小一共有 6 种，n=1（大）6（小），也就是从到，其中所括起

21、的文字是第一级标题，最大最粗，所括起的文字是最28后一级标题，最小最细。例如下面的代码：Hi测试文档。这是第一级标题。这是第二级标题。这是第三级标题。这是第四级标题。这是第五级标题。这是第六级标题。代码运行结果如图 2-11 所示。图 2-11使用标题的运行结果从图 2-11 中可以看出，隐含有换行的作用，文本从下一行开始。的属性有的属性一color 和 align，分别用来标识标题的颜色和位置。color 属性的参数值取值范围和样，可以是 16 种颜色中的任意一种；align 属性的参数值为 left、center 或 right，分别表示标题位于浏览器窗口的左侧、中间和右侧。2.4.2字体

22、修饰字体修饰可对文字的格式做相应的变化，如粗体、斜体、上标、下标等。字体修饰标签常用的有以下几种。 对：指定文字为粗体字。对：指定文字为斜体字。对：指定文字为带有下划线。对：指定文字为效果。 对：指定文字为上标。29 对：指定文字为下标。对：指定对某段文字进行强调，通常用斜体字显示出来。 对：对文本进行强调，通常用粗体字显示出来。使用字体修饰的代码如下： 字体修饰范例演示 指定文字为粗体字 指定文字为斜体字 指定文字为带有下划线指定文字为效果 指定文字为上标指定文字为下标指定对某段文字进行强调，通常斜体字显示出来 对文本进行强调，通常用粗体字显示出来代码运行结果如图 2-12 所示。图 2-1

23、2 使用字体修饰的运行结果2.4.3字体Font可以设置文档的字体，通过改变其属性，对文本进行不同的设置，可以对文本的字体、大小、颜色等进行改变。1属性 size用 size 属性可以设定字体的大小。例如：文字内容标题的大小一共有 7 种，也就是（最小）到（最大），另外，还有一种写法“文字内容”，意思就是，比预设字大一级，或是“font size=-2”（比预设字小二级），一般预设字体应为 3。302属性 faceface 属性可以设定字体风格。在客户端如果没有相应字体，浏览器默认以宋体字型显示。示例代码如下：这一段的字体风格是 arial。3属性 color使用 color 属性可以设置字体

24、的颜色，颜色的取值可以为颜色名或者颜色的十六进制表示值。示例代码如下：这一段的字体颜色是红色这一段的字体颜色是红色字体颜色代码如表 2-2 所示。表 2-2 常用颜色值设置文本字体的大小、样式及颜色的代码如下：Font实例 size=1 的文字 size=2 的文字 size=3 的文字 size=4 的文字 size=5 的文字 size=6 的文字 size=7 的文字代码运行结果如图 2-13 所示。目前不建议使用 font 及其属性来设定字体，建议用 CSS 来设定字体的大小、颜色、字体风格等。有关 CSS 的相关知识将在后面的章节介绍。颜 色 名RGB 值说明颜 色 名RGB 值说明

25、Black#000000黑rown#a5a2a2a棕色Write#白色Skyblue#87ceeb天蓝色Red#ff0000红色Line#00ff00草绿色Green#008000绿色Teal#008080墨绿色Blue#0000ff蓝色Sliver#c0c0c0银色Yellow# f00黄色Plurple#800080紫色Gray#808080灰色Gold#ffd700金色31图 2-13 使用 Font的运行结果2.5HTML 超HTML 最显著的优点就在于它支持文档的超，用户可以很方便地在不同文档以及同一文档的各段落之间跳转。HTML 中的包括锚标和目标点两部分。锚标就是的源点，当鼠标被

26、移到锚标处时会变成小手状，此时，用户通过单击鼠标即可到达的目标点。目标点可以是一张、一个网络文档、一个多HTML 是通过超文件等。来实现超是成对，首和尾的。超之间的内容就是锚标，使用方法如下：文字的基本属性及其说明如表 2-3 所示。表 2-3 基本属性及详细说明2.5.1属性 hrefhref 是 hypertext reference 的缩略词，用于设定出具体的路径。其中 URL 地址可以为下面内容。地址，地址必须是 URL 地址，还必须给（1） 下形式：a href=htt（2）网页：到本机的网页，可以直接指定网页所在的路径。例如下面代码：属性详 细 说 明href设置文件的路径采用帧窗

27、口的情况下设定到哪一个窗口打开，分为_bl、_self、_parent、_top 4种title让鼠标悬停在超上时，显示该超的文字注释name可以跳转到一个文件的指定部位32搜狐首页回到主页面（3）可执行文件：当到的文件的扩展名不是.htm（.html）或者.asp（.jsp/.），而是其他可执行的文件时，会将到的文件到本地计算机上或者直接执行。如果是文本文件（如 Word 格式），则在浏览器中打开文件并进行编辑。word 文档，打开文档进行编辑声音文件执行对应的应用程序（4）网页上的书签：在网页的长度超过屏幕时，可以使容，节省移动滚动条的时间。签直接跳转到该书签指向的具体内2.5.2属性打开

28、的位置由属性进行控制，属性值分为_bl、_self、_parent、_top 4 种。“taget=_bl将 “”表示在新的浏览器窗口中打开的文档，同时保持当前窗口不变；“=_self”表示的文档载入所在的同一框架或窗口，此目标是默认的，所以通常不需要指定它； =_parent”表示将的文档载入该所在框架的父框架或父窗口，如果包含的框架不的文档载入整个浏览器窗口；“=_top”表示将是嵌套框架，则所的文档载入整个浏览器窗口，从而删除所有框架。搜狐首页上述代码表示，在新的窗口中打开搜狐首页。2.5.3属性titletitle 属性是一个很实用的属性，可以用来为添加附加的解释信息，当鼠标悬停在有超

29、的文字或者等对象上时，显示该超的解释信息。以下代码在显示时，当把鼠标放在超文字“青岛大学青岛大学2.5.4属性name同样可以用来进行文档超定位，设计者需要做的就是首先在文档内设定一个标签，称为“锚定位”，这样做相当于在文档中的某一个位置放置一个，通过超的 href属性，可以跳转到已经设置好的“锚定位”部的定位。代码的说明如下：的位置。利用的 name 属性也可以实现文档内需要设置定位的文本此时在该文档的其他任何部位，只要用超对它进行定位，即可达到文档定位的效果。查33看“锚定位”的超代码如下：查看已经定位的文本由此可见，“#”是文档定位的关键，浏览器遇到“#”则会识别为定位，进而在文档内寻找

30、设计者放置的“锚定位”。如果没有“#”，浏览器就会认为它指向的是一个文件名。有了文档定位，设计者就可以轻易地进行目录管理了。如果事先在文件的每一个标题上加上“锚定位”，然后在目录上对它们进行超name 属性 参见第一部分&，目录效果就产生了。如下面的代码：;&; 参见第二部分&;&; &;&;参见第三部分 参见第四部分&;&;参见第五部分&;&; 参见第六部分 &;第 1 部分第 2 部分第 3 部分第 4 部分第 5 部分第 6 部分代码运行结果如图 2-14 所示。图 2-14超的 name 属性这样一来，浏览者只要单击页面顶端目录部分的任何一个条目都会跳转到相应的正文位置。2.5.5到地

31、址可以使用电子邮箱作为超Express，然后显示一个新建的目标，单击这个电子邮箱，就会触发邮件客户端，如 Outlook的窗口。用可以实现这样的功能，使用格式如下所示：邮件34以下代码用来添加一个电子邮箱地址：个人邮箱地址2.6HTML 图像图像可以使 Web 页面更加生动美观、富有生机。Web 浏览器可以显示 JPEG 和 GIF 图像。其中GIF 图像最多只能使用 256 种颜色（即只能保存为 8 位颜色），而 JPEG 格式可保存为 24 位，对具有连续色调的图像有最佳效果。不过，GIF 图像虽然在图像质量上不及 JPEG 图像，但占用空间小，速度快。因此，应视不同情况而决定使用哪种格式

32、的图像。对于徽标、公司厂标等在每一主页中显示的，要求能快速并能在低配置的系统中查询的图像，应采用 GIF 格式，而对于扫描、艺术作品这种对显示质量要求很高的图像则应采用 JPEG 格式。在 HTML 文档中图像是通过来实现的，它只有起始标志没有结尾标志，所有图像样式都由的属性决定，用法如下：2.6.1属性srcsrc 属性用来定义的 URL（资源定位符）地址，是必不可少的属性。如果URL 地址指定错误，在浏览器页面中的位置将会出现一个红色“”号。src 属性的使用方法如下：URL 表示的路径和文件名。例如，URL 可以是绝对路径“htt/images/1.gif”，也可以是相对路径“./ima

33、ges/1.gif”。2.6.2属性 altalt 属性用来显示的替换文本。当打开网页的过程中，遇到网络传输错误或者设计者设定文件路径错误，无法正常显示时，替换文本可以暂时代替的功能，起到一定的说明作用。正常情况下，当鼠标指到图上时，说明文字就会自动出现。例如下面的代码：现在大多数浏览器都支持载入，但是目前搜索引擎抓取工具仍无法识别图像中所含的文字，而 alt 属性的一个重要功能就是写上的说明，便于搜索引擎抓取网页的内容。2.6.3属性height 和width用 width 和 height 两个属性来规定图像的大小。其中 width 属性用于确定图像的宽度，height 属性用于确定图像的

34、高度。这两个属性的参数值都是数字，表示图像宽度（高度）所占的像素点35数。默认时，浏览器窗口将自动调整图像的显示尺寸。具体实例应用的代码如下：改变的大小使用 Height 和Width 属性来改变的大小代码运行结果如图 2-15 所示。图 2-15 height 和width 属性2.6.4属性alignalign 属性的作用是对齐，可以改变的垂直（居上、居中、居下）对齐方式和水平对齐方式（居左、居中、居右）。下面的代码用来演示 align 属性的用法，代码如下：的上下对齐方式：对齐方式:top对齐方式:middle对齐方式:bottom的左右对齐方式：对齐方式:left对齐方式:center

35、对齐方式:right代码运行结果如图 2-16 所示。36图 2-16 align 属性2.6.5属性border默认情况下，浏览器显示是没有边框的，即边框宽度为 0。如果设计者想要人为地加上边框，可以利用 border 属性。border 属性的参数值也是数字，表示边框宽度所占的像素点数，用法同 height和 width 属性，这里不再赘述。2.7HTML 表格表格对于网页制作是很重要的，使用表格最明显的好处就是以行列对齐的形式来显示文本和数字信息，表格还可固定文本或图像的显示位置。在创建结构化的 Web 页面时，通常利用表格将整个页面划分成若干区域，然后再在各个区域中填充具体的页面内容。

36、因此，使用表格对页面进行布局的做法非常流行。在 HTML 文档中，整个表格被包括在和对之间，在这之中又有多个来实现表格的相应部分，各个的关系大致如下：要输出的文本只能放在此处要输出的文本只能放在此处要输出的文本只能放在此处/最外层，创建一个表格/创建一行/创建一个单元格子（此行共有 3 个单元格）/最外层由上面的代码可以看出，表格中不可缺少的主要有、，下面对37表格中常用的作详细介绍，并对它们的属性进行说明。2.7.1表格和来使用。用来创建一个表格，它具有以下属性，如表 2-4 所示。这些属性可以结合起表 2-4 的属性表格中各种属性的应用如下面代码：表格各种属性的应用表格宽 400 像素，高

37、 100 像素，表格边框 3 像素。单元格之间空间为 10 像素，单元格边框与像素。内容之间 10第一个单元格第二个单元格第三个单元格在上述代码中，通过 width 和 height 属性设置表格的宽度和高度；通过 border 属性和 bordercolor属性设置表格边框的像素值和颜色值；通过 cellspacing 属性和 cellpadding 属性设置单元格之间的空间大小以及单元格的边框与其的文字之间的空间大小。具体运行结果如图 2-17 所示。属性用途设置表格的背景色设置边框宽度，默认值为0设置边框颜色设置边框明亮部分的颜色（当border值大于等于1时有用）设置边框昏暗部分的颜色

38、（当border值大于等于1时有用）设置表格单元格之间空间的大小设置表格单元格边框与其内容之间空间的大小设置表格的宽度，为像素或者百分比38图 2-17 表格属性的应用2.7.2行和只能放在和用来创建表格中的每一行。此对之间使用，而对之间加入文本是无效的。具有以下一些属性。且在此属性 align如果一个单元格比其中嵌入的内容宽，在默认情况下，浏览器将把单元格的内容与其左侧对齐。为了改变某一行中的所有单元格内容的水平对齐方向，可以在 中添加 align 属性，align 属性有 3 种设置值，即 left（左对齐）、center（居中）、right（右对齐）。属性 valignvalign 属性

39、与 align 属性的作用相似，区别在于它是用来设置单元格内容的垂直对齐方式的，valign的取值可以为 top（靠顶端对齐）、middle（居中间对齐）、bottom（靠底端对齐）。属性 bgcolor还有一些属性与的某些属性同名，这些属性用在上，就会对整个表起作用，而用在上就只对某一行起作用。就某一行而言，相同属性在中的设置值会覆盖在中的设置值上，bgcolor 属性就属于这种情况。的属性可以用以下一段代码来演示：单元格属性设置水平方tab齐order width=160leftcenterrightABC39垂直方齐taborder height=80topmiddlebottombas

40、elineAtd valign=middCD代码运行结果如图 2-18 所示。图 2-18 单元格属性设置2.7.3单元格和用来创建表格中每一行中的每一个单元格，此对只能放在和对之间使用才是有效的。想要输入的文本只能放在和1属性 width 和 height对之间。具有以下一些属性。width 属性可以指定单元格的宽度，用绝对像素值或者总宽度的百分比来表示；height 属性可以设置单元格的高度，用法与 width 类似。属性 align 和 valignalign 属性用来设置单元格内容在单元格空间中的水平对齐方式，与中的 align 属性相比，中的 align 属性只对一个单元格起作用，而

41、中的 align 属性对一行中的所有单元格起作用。同样地， valign 属性用来设置单元格内容的垂直对齐方式，也只对一个单元格起作用。属性 colspan 和 rowspan表格可以是不规则的表格，即表格中的某个单元格可以跨多行或者多列。colspan 属性用来设置一个单元格跨占的列数（默认值为 1），rowspan 属性用来设置一个单元格跨占的行数（默认值为 1），40用法如下。跨多列表项，使用格式如下：表项 | 表项跨多行表项，使用格式如下：表项 | 表项设置跨多行或多列表格的源代码如下：跨多行、多列的表横向合并单元格 1 456纵向合并单元格 1 2 3 5 6 同时合并多行多列 1

42、2356 4 代码运行结果如图 2-19 所示。图 2-19 跨多行、多列的表格412.7.4表头和用来设置表格头的格式，通常为黑体字居中，与和没有太大区别。大多数表格式的数据只包含一行和一列表头，用来说明某一行或某一列数据的属性类别，这种情况就可以利用和的特点来设置表头，用来告诉浏览器将一个单元格的内容格式化为表头。2.7.5说明和是表格的说明性文字，通常出现在表格的上方，主要用来总结表格的内容和提供表格内容的简明信息。新的 HTML 规范（从 HTML 4.0 标准开始）规定，如果有标题元素，必须跟在表格的起始之后。说明下面是使用了和省份和城市表的实例代码：thththtdtdtdtdtd

43、tdwidth=33% width=33% width=33%colspan=2 colspan=2 colspan=2valign=bottom下列两个城市属于山东省 valign=bottom下列两个城市属于江苏省valign=bottom下列两个城市属于省align=center济南 align=center青岛align=centeralign=center杭州 align=center广州align=center这段 HTML 代码在浏览器中的运行结果如图 2-20 所示。图 2-20 和运行结果422.8HTML 框架一个浏览器文档窗口中一般只能显示一个网页文件，但是，使用框架就可

44、以将一个浏览器文档窗口分割成多个子窗口，每个子窗口中都可以显示一个独立的网页文件。典型的框架式网页页面包含 3 个框架，如图 2-21 所示。图 2-21 包含框架的网页框架是由英文 Frame 翻译过来的，它代表浏览器文档窗口中的一个子窗口。每个框架都可以显示一个 HTML 文件，多个框架组成了一个框架集（Frameset）。框架集通常的使用方法为：在一个框架中放置一个网页，此网页含有可以到其他多个网页的超条目，者单击这些超条目后，可以将超指向的网页文件显示在另外一个指定的框架中。如果要求在单个应用窗口中显示一个以上的网页，就可以使用框架。由于浏览器为每个框架保留一个单独的 URL，因此，浏

45、览器可以向任何一个框架中加载一个新的 Web 页面而不改变其他帧中的显示内容。图 2-21 中，浏览器一共要装载 4 个网页文件，3 个框架中各装载一个网页文件，而生成这 3 个框架的 HTML 代码也要在一个网页文件中，这个网页文件称为主文档 index.html。在浏览器中输入的地址必须是主文档的 URL，即 index.html。浏览器显示主文档时，再根据主文档中的 HTML 代码，将窗口分为 3 个框架窗口，并在 3 个框架窗口中装载各自的网页文件。例如，在图 2-21 中，top.html 是显示在顶部框架的文件，left.html 是显示在左边框架的文件，右边框架初始显示的是 ma

46、in.html，通过单击左框架窗口中的超文本，可以在右框架中切换显示 1.html、2.html、3.html、4.html 4 不同的页面，而左边框架窗口和顶部框架窗口保持不变。下面介绍框架中用到的主要。2.8.1框架集一个被划分成若干框架的窗口区域被称为框架集，框架窗口必须定义在框架集中，和用来定义框架集中有几个框架以及各个框架是如何排列的。43和嵌套在和对中，也可以嵌套使用，但是必须放在和之外，因为，和示其他的网页元素。只是用来划分框架窗口的，而不能显具有 rows 和 cols 两个比较重要的属性，使用此时，至少应选择这两个属性中的一个，否则浏览器将只显示第一个定义的框架，剩下的一概不

47、管，和也就没有起到任何作用了。rows 属性用来规定主文档中有几行框架窗口及各个框架窗口的大小，而 cols 属性用来规定主文档中有几列窗口及各个框架窗口的大小。这两个属性的取值可以是多个百分数、绝对像素值或者星号（*）的组合，取值的个数说明了行或列的个数，其中星号（*）代表那些未被说明的空间，如果同一个属性中出现多个星号（*），则将剩下的未被说明的空间平均分配，每个值之间用逗号隔开，所有的框架按照 rows 和 cols 的值从左到右，然后从上到下的顺序排列。示例代码如下：上面代码表示，总共有 3 个按行排列的框架，每个框架占整个浏览器窗口的 1/3 的空间大小。上面代码表示，总共有 3 个

48、按列排列的框架，第一个框架占整个浏览器窗口的 40%，剩下的空间平均分配给另外两个框架窗口。上面代码表示，总共有 6 个框架，先是在第一行中从左到右排列 3 个框架，然后在第二行中从左到右再排列 3 个框架，即两行三列，所占空间依据 rows 和 cols 属性的值，其中数字 200 的是像素。除了有 rows 和 cols 两个属性之外，还有其他一些常见属性，如表 2-5 所示。表 2-5 的常用属性用来定义一个框架组，其基本语法格式如下：2.8.2框架放在和之间，用来定义某一个具体的框架窗口。标签具有 src 和 name 两个比较重要的属性，这两个属性都是必须赋值的。src 指定整个框架

49、窗口中初始装载的网页文件的 URL 地址，浏览器将会在此框架中显示 src 指定的 HTML 文件；name 指定框架窗口的名字，这个名字是用来供超文本“”中的属性指定的 HTML属性描述Border设置边框粗细，默认是5个像素Bordercolor设置边框颜色Frameborder指定是否显示边框：0代表不显示边框，1代表显示边框Framespacing表示框架与框架之间保留空白的距离Noresize设定框架不能够调节，只要设定了前面的，后面的将继承44文件将显示在哪一个框架中。例如，定义了一个框架名字为 main，其他某个框架窗口中的超的属性值等于这个框架窗口的名字 main，当那个超被单

50、击后，它指向的HTML 文件将显示在 main 框架中。此外，还有 scrolling 和 noresize 属性，scrolling 用来指定是否在框架窗口边框上显示滚动条，取值可以是 yes（显示）、no（不显示）、auto（网页内容的空间比框架窗口大时显示，否则不显示）。noresize 属性直接加入的分割线而调整框架的大小。中即可使用，不需要赋值，它用来用户使用鼠标拖动框架间2.8.3和这对的作用是当浏览者使用的浏览器太旧而不支持框架这个功能时，看到的将会是一片空白。为了避免这种情况的发生，可使用这个，当使用的浏览器看不到框架时，就会看到之间的内容，而不是一片空白。这些内容可以是提醒浏

51、览转用新的浏览器的字句，也可以是一个没有框架的网页，或能自动切换至有框架的版本。在此对应该紧跟着和。2.8.4浮动窗口称为浮动窗口。和不需要放在和标签之间，它的作用是在一个网页中间一个简单的框架窗口，在这个框架窗口中可以显示另外一个文件，这样就能够实现一种“画中画”的效果。在和对中放入的文本只有在浏览器不支持时才会显示，用来给用户一个提示信息。属性的用法与标签类似，这里不再赘述。图 2-22 为添加了浮动窗口的显示页面。图 2-22 增加了浮动窗口的页面在其中的 HTML 源代码文档中，增加浮动窗口的相应代码如下：这是浮动窗口的内容452.8.5框架的高级设置在设计应用中，还会使用框架的一些高

52、级设置，如框架的嵌套和框架之间的1框架的嵌套。在应用框架对页面进行布局时，要设计出既有上下分布又有左右分布的框架结构时，就需要用到框架的嵌套定义。以图 2-21 为例，主页 index.html 的源代码如下：无标题文档从上述代码可以看出，在框架设置中，应用“rows=60,*”属性设置可以将页面分为上下两部分，上部分为，用来装载 top.html 页面；下部分应用“”语句将下面的页面框架分为左右两个部分，分别为“”和“”，用来装载 left.html 页面和 main.html 页面。2框架间的如果要在框架窗口中做，就必须对每一个框架子窗口命名，以便被用于窗口间的。在超中还要设置属性 tar

53、ge，用 targe 属性可以将被的内容放置到想要放置的窗口内。仍然以图 2-21 为例介绍框架之间的。在主页 index.html 源代码中通过“ ”将左下方框架命名为 leftFrame ，通过“ ”将右下方框架命名为 zhu。其中，left.html 页面为左下方框架中显示的目录页面，包含超 ，页面 left.html 的源代码如下： 无标题文档 a href=1.html=zhuHTML 入门 46a href=2.html=zhu class=style1页面布局与文字设计a href=3.html=zhu class=style1TABLE 表格a href=4.html=zhu

54、class=style1文件之间的从上述代码可以看出，在超中通过“HTML 入门”设置了“=zhu”的属性，将页面显示的目的地设置为 zhu 的框架。当单击超的文字“HTML入门”时，命名为 zhu 框架中的内容会发生相应变化。2.9HTML 表单表单（Form）是 HTML 的一个重要部分，主要用于和提交用户输入的信息，使网页具有交互的功能。一般情况下，会将表单设计在一个 HTML 文档中，当用户填写完信息进行提交（submit）操作时，表单的内容就被传送到服务器上，等处理完毕后，再将结果信息返回到客户端。2.9.1表单和 3 个比较常用的属性。1属性 action用来创建一个表单，在对之间的都属于表单的内容。有以下action 属性的值是处理程序的程序名。用户填入表单的信息总是需要程序来进行处理的，表单中的action 指明了处理表单信息的文件名（包括网络路径、或相对路径），例如，“ ”语句表示当用户提交表单时，服务器将执行/cgi-bin/上的名为 search.cgi