Web前端设计—HTML和CSS开发实战-教案-第2章

chinasll · 发表于 2021-10-29 22:43:28

第2章列表、表格与框架

背诵英语单词

table type frame

row column caption

学习目标

本章简介：列表在网页制作中占据着重要的位置，许多精美、漂亮的网页中都使用了列表。本章将向大家介绍列表的概念及相关的使用方法，通过练习掌握列表应用的技巧，从而可以制作出精美的网页。同时，在制作网页时，表格是一种不可或缺的数据展示工具，使用表格可以灵活地实现数据展示，表格在很多页面中还发挥着页面排版的作用。对于页面的排版和设计，框架也是网页制作过程中一种普遍采用的方式，使用框架可以极大地提高页面的复用程度，减少重复开发，因此掌握框架技术也是网页制作人员应该具备的基本技能。

内容导航

² 掌握网页制作列表

² 掌握网页制作表格

² 掌握网页制作框架

2.1 列表

在网页制作中，列表有很多使用的场合，如常见的树形可折叠菜单、购物网站的商品展示等。既然列表可以发挥如此巨大的作用，那么下面首先来了解一下什么是列表?

列表是一种非常有用的数据排列方式，它以列表的形式来显示数据。HTML中共有三种列表，分别是有序列表，无序列表和定义列表。无序列表的所有列表项目之间没有先后顺序之分。有序列表的列表项目是有先后之分的。定义列表是一种含有特殊含义的列表，一个列表项目里包含条件和说明两部分。

2.1.1 有序列表

有序列表中各个列表使用编号排列，列表中的项目有先后顺序，一般采用数字或字母作为顺序号。

file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wps8BEC.tmp.png 语法：

<ol>

<li>有序列表项</li>

</ol>

说明：在该语法中，<ol>和</ol>标记标志着有序列表的开始和结束，而<li>和</li>标记表示这是一个列表项。

【例2．1】创建新页面，使用有序列表。

<!—index.html-->

<html>

<head>

<title>列表的设置</title>

</head>

<body>

网页后台的学习

<ol>

<li>Python</li>

</ol>

</body>

</html>

预览效果如图2.1所示：

file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wps8BED.tmp.jpg

图2.1 有序列表

2.1.2 无序列表

无序列表除了不使用数字或字母以外，其他的和有序列表类似。无序列表并不依赖顺序来表示重要的程度。无序列表的项目排列没有顺序，只以符号作为分项标识。

file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wps8BEE.tmp.png 语法：

<ul>

<li>无序列表项</li>

</ul >

【例2．2】创建新页面，使用无序列表。

<!—index.html-->

<html>

<head>

<title>列表的设置</title>

</head>

<body>

网页前台技术

<ul>

<li>JavaScript</li>

<li>FLASH</li>

</ul>

</body>

</html>

预览效果如图2.2所示：

file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wps8BFF.tmp.jpg

图2.2 有序列表

2.1.3 定义列表标记

定义列表由两部分构成：定义条件和定义描述。定义列表的英文全称是definition list。<dt>用来指定需要解释的名词，英文全称为definition term；<dd>是具体的解释，英文全称为definition description。

file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wps8C00.tmp.png 语法：

<dl>

</dl>

说明：在该语法中，<dl>标记和</dl>标记分别定义了定义列表的开始和结束，<dt>后面添加要解释的名词，而在</dd>后面则添加该名词的具体解释。

【例2．3】创建新页面，使用定义列表。

<!—index.html-->

<html>

<head>

<title>列表的设置</title>

</head>

<body>

<dl>

<dd>

剧情说的是10岁的少女千寻与父母一起从都市搬家到了乡下。没想到在搬家的途中，一家人发生了意外。他们进入了汤屋老板魔女控制的奇特世界—— 在那里不劳动的人将会被变成动物。

</dd>

<dd>

和爸爸一起搬到乡下的两姐妹，在家旁的一棵大树下发现了只有好孩子才能看见的TOTORO。其间发生了很多不可思议而有趣的故事。

</dd>

</dl>

</body>

</html>

预览效果如图2.3所示：

file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wps8C01.tmp.jpg

图2.3定义列表

2.2 表格

表格是网页制作中使用最多的工具之一，在制作网页时，使用表格可以更清晰地排列数据。但在实际制作过程中，表格更多地用在网页布局定位上。很多网页都是以表格布局的，这是因为表格在文本和图像的位置控制方面都有很强的功能。灵活熟练的使用表格，在网页制作时会有如虎添翼的感觉。

2.2.1 创建表格

表格由行、列和单元格三部分构成，一般通过三个标记来创建，分别是表格标记table、行标记tr和单元格标记td。表格的各种属性都要在表格的开始标记<table>和表格的结束标记</table>之间才有效。

file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wps8C02.tmp.png 行：表格中的水平间隔。

file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wps8C03.tmp.png 列：表格中的垂直间隔。

file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wps8C04.tmp.png 单元格：表格中行与列相交所产生的区域。

file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wps8C05.tmp.png 语法：

<table>

<tr>

<td>单元格的内容</td>

</tr>

<tr>

<td>单元格的内容</td>

</tr>

</table>

说明：<table>标记和</table>标记分别表示表格的开始和结束，而<tr>和</tr>这分别表示行的开始和结束，在表格中包含几组<tr>……</tr>就表示该表格为几行；<td>和</td>表示单元格的起始和结束。

【例2．4】创建新页面，使用表格标签。

<!—index.html-->

<html>

<head>

<title>表格的基本构成</title>

</head>

<body>

<tr>

<td>单元格的内容</td>

</tr>

<tr>

<td>单元格的内容</td>

</tr>

</table>

</body>

</html>

预览效果如图2.4所示：

file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wps8C16.tmp.jpg

图2.4 表格标签

在浏览器中预览可以看到在网页中添加了2行2列的表格，表格边框为1。

2.2.2 设置表格的标题

可以使用<caption>来设置标题单元格，表格的标题一般位于整个表格的第一行。一个<table>表格只能含有一个表格标题。

file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wps8C17.tmp.png 语法：<caption>表格的标题</caption>

【例2．5】创建新页面，使用caption标签。

<!—index.html-->

<html>

<head>

<title>caption标签的使用</title>

</head>

<body>

<caption>考试成绩表</caption>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

预览效果如图2.5所示：

file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wps8C18.tmp.jpg

图2.5 caption标签

提示

使用<caption>标记创建表格标题的好处是使标题定义包含在表格内。如果表格移动或在HTML文件中重定位，标题会随着表格相应的移动。

2.2.3 表头

表格的表头<th>是<td>单元格的一种变体，实质上仍是一种单元格。它一般位于第一行和第一列，用来表明这一行或列的内容类别。在一般情况下，浏览器会以粗体和居中的样式显示<th>元素中的内容。

file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wps8C19.tmp.png 语法：<th>……</th>

【例2．6】创建新页面，使用th标签。

<!—index.html-->

<html>

<head>

<title>th标签的使用</title>

</head>

<body>

<caption>考试成绩表</caption>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

预览效果如图2.6所示：

file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wps8C1A.tmp.jpg

图2.6 th标签

提示

<th>元素的起始标记必须有，但是结尾标记是可选的。

2.2.4 表格的对齐方式

表格的对齐方式用来控制表格在网页中的显示位置，常见的对齐方式有默认对齐、左对齐、居中对齐和右对齐。而实现表格对齐的属性就是align属性，align属性有三个值，分别对应为左对齐、居中对齐、右对齐，当省略该属性时，则系统自动采用默认对齐方式。

1. 默认对齐

表格一经创建，便显示为默认对齐。默认对齐状态下表格以实际尺寸显示在左侧，如果旁边有内容，这些内容会显示在表格的下方，不会在表格的两侧进行排列。

2. 居中对齐

有时候，希望表格显示在页面的中间位置，这样会使页面显得对称，浏览效果较好，这时候就需要对表格设置居中对齐。

3. 左对齐、右对齐

如果对表格设置左对齐或者右对齐，表格会显示在页面的左侧或者右侧，其他内容会自动排列在表格旁边的空白位置。

提示

表格的左对齐和右对齐在网页应用中相对比较少，一般用于显示广告。如网页中常见的画中画广告等。

4. 单元格对齐

除了表格可以设置对齐方式，对于单元格也同样可以设置对齐方式，单元格对齐则分为水平对齐和垂直对齐两个方向。水平对齐与垂直对齐的属性及取值，如表所示：

表2.1单元格的对齐方式
属性	值	说明
align (水平对齐方式）	left	左对齐
	center	居中对齐
	right	右对齐
valign (垂直对齐方式）	top	顶端对齐
	middle	居中对齐
	bottom	底端对齐
	baseline	基线对齐

提示

在实际的开发过程中，表格的对齐方式通常会使用CSS样式表进行控制，使用属性进行对齐控制的场合比较少。

2.2.5 表格的跨行与跨列

上面介绍了简单表格的创建，而现实中往往需要较复杂的表格，有时就需要把多个单元格合并为一个单元格，也就是要用到表格的跨行跨列功能。

1. 表格的跨列：跨列是指单元格的横向合并。

file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wps8C1B.tmp.png 语法：<td colspan="所跨的列数">单元格内容</td>

col为column(列)的缩写，span为跨度，所以colspan的意思为跨列。

【例2．7】创建新页面，使用td标签实现跨列。

<!—index.html-->

<html>

<head>

<title>跨多列的表格</title>

</head>

<body>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

预览效果如图2.7所示：

file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wps8C2B.tmp.jpg

图2.7 td标签

2. 表格的跨行：跨行是指单元格在垂直方向上合并。

file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wps8C2C.tmp.png 语法：<td rowspan="所跨的行数">单元格内容</td>

row为行的意思，rowspan即跨行。

【例2．8】创建新页面，使用td标签实现跨行。

<!—index.html-->

<html>

<head>

<title>跨多行的表格</title>

</head>

<body>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

预览效果如图2.8所示：

file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wps8C2D.tmp.jpg

图2.8 th标签

提示

一般而言，跨行或跨列操作时，需要以下两个步骤。

a) 在需合并的第一个单元格，设置跨列或跨行属性，如colspan="3"；

b) 删除被合并的其他单元格，即把某个单元格看成多个单元格合并后的单元格。

3. 表格的跨行与跨列：有时表格中既有跨行又有跨列的情况，从而形成了相对复杂的表格显示。

【例2．9】创建新页面，实现复合跨行跨列。

<!—index.html-->

<html>

<head>

<title>跨多行的表格</title>

</head>

<body>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

预览效果如图2.9所示：

file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wps8C2E.tmp.jpg

图2.9 复合跨行跨列

提示

跨行和跨列以后并不改变表格的特点，同行的总高度一致，同列的总宽度一致。因此，表格中各单元的宽度或高度互相影响，结构相对稳定，但缺点是不能灵活的进行布局控制。

2.3 框架

框架是网页设计中很常用的技术，可以在一个浏览器窗口中显示多个文档。利用这个特点，框架技术可以广泛地应用到网站导航和文档浏览器中，方便访问者对网页的浏览，减少访问者下载页面所需要的时间。框架一般用框架集和框架组成。框架集就是一个大的容器，包括了所有的框架，是框架的集合。框架是框架集中的一个独立区域，用于显示一个独立的网页文档。

2.3.1 框架的概念

框架是浏览器窗口中的一个区域，它可以显示与浏览器窗口的其余部分所显示的内容无关的HTML文档，

框架集是HTML文件，它定义一组框架的布局和属性，包括框架的数目，框架的大小和位置，以及在每个框架中初始显示页面的URL。框架集文件本身不包含要在浏览器中显示的HTML内容，但noframes部分除外。框架集文件只是向浏览器提供应如何显示一组框架，以及在这些框架中应显示哪些文档的有关信息。

框架结构是将两个或两个以上的网页组合起来，在同一个窗口中打开的网页结构。框架把一个网页分成几个单独的区域，每个区域为一个单独的HTML文件。显示时，每个区域像一个单独的网页，可以有自己的滚动条、背景、标题等。

框架最常见的用途就是导航。一组框架通常包括一个含有导航条的框架和另一个显示主要内容的框架。

2.3.2 为什么使用框架

框架是HTML早期的应用技术，但目前还有部分网站在使用。使用框架技术具有以下好处。

1. 在同一个浏览器窗口显示多个页面。使用框架能有机地把多个页面组合在一起，但各个页面间相互独立。

2. 可以实现页面复用。例如，为了保证统一的网站风格，网站每个页面的底部和顶部一般都相同。因此，可以利用框架技术，将网站的顶部或底部单独作为一个页面，方便其他页面复用。

3. 实现典型的“目录结构”，即左侧目录、右侧内容，当用户单击左侧窗口的目录时，在右侧窗口中显示具体内容，如网上在线学习教程、论坛、后台管理、产品介绍等网页都是这样的页面结构。当然，这种结构除能用框架技术实现外，也可釆用其他技术实现。

常用的框架技术有以下两种：

1. 框架（<frameset>)：这是早期的框架技术，页面各窗口全部用<frame>实现，形成一个框架。这种结构非常清晰，适用于整个页面都用框架实现的场合。

2. 内联框架（<iframe>)：页面中的部分内容用框架实现，一般用于在页面中引用站外的页面内容，使用比较方便、灵活。

2.3.3 <frameset>框架

框架包含<frameset>和<frame>两个标签，其中<frameset>描述窗口的分割，<frame>定义放置在每个框架中的HTML页面。

file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wps8C3F.tmp.png 语法

</frameset>

其中，<frameset>标签的rows属性表示将页面水平分割为几行。例如，rows="50%，50%"表示将页面分割为两行，第一行占浏览器窗口总宽度的50%，第二行占50%。各列的宽度值也可使用具体数值(单位为px)。同理，“lows”属性表示将页面纵向分割为几列。另外，<frame>标签的“src”属性类似于<img>标签的“src”，表示页面的路径。下面逐一讲解框架的水平、垂直及双向同时分割的实现方法。

1. 水平分割窗口

例如，要实现如图所示的水平分割页面效果，则需以下步骤。

a) 页面窗口的划分情况：页面水平被分割为2个窗口，即2行，显然应使用<frameSet>标签的“rows”行数属性。

b) 各框架对应的页面情况：使用<frame>标签的“src”属性引用各框架对应的页面文件，同时还可以使用“name”属性标识各框架窗口。需要注意的是，<frameset>标签和<body>标签不能同时使用，所以需要使用“<frameset>”代替页面中的“<body>”标签。对应的HTML代码如示例所示。

【例2．10】创建新页面，实现水平框架。

<!—index.html-->

<html>

<head>

</head>

</frameset>

</html>

其中，为了突出显示各框架，加了宽度为5的红色边框。另外，由于框架网页包含多个页面，为了分清框架结构页及各框架窗口对应的子页面，特意将各子页面单独放到文件夹“subframe”中。

预览效果如图2.10所示：

file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wps8C40.tmp.jpg

图2.10 水平框架

2. 垂直分割窗口

垂直分割窗口的思路与水平分割窗口很类似，例如，要实现如图所示的垂直分割的页面效果，只需要设置<frameset>的“cols”列数属性即可，完整的HTML代码如示例所示。

【例2．11】创建新页面，实现垂直框架。

<!—index.html-->

<html>

<head>

</head>

</frameset>

</html>

预览效果如图2.11所示：

file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wps8C41.tmp.jpg

图2.11 水平框架

3. 垂直和水平同时分割窗口

接下来以下图中典型的2行2列结构为例，来分析其实现思路。

a) 页面结构分析如图所示，对整个页面结构的分析如下。

file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wps8C42.tmp.jpg

图:多页面框架

b) 整个页面纵向分割为上、下两部分，高度分别为窗口的20%和80%,对应的关键代码如下：

</frameset>

c) 下部分再次垂直分割为左、右两部分，宽度分别为窗口的20%和80%。即需要把上述第二个<frame>改为<frameset>实现，对应的关键代码如下。

</frameset>

4. 框架修饰分析

要实现上述框架效果，除边框外，还需用到框架的其他修饰属性。例如，是否允许调整各框架窗口的大小，则使用“noresize”属性设置；当框架内的页面内容较多时，是否需要显示滚动条，则使用“scrolling”属性设置。框架常用的属性如表2-2所示。

表2.2框架<frame>的常用属性
属性	作用	举例
frameborder	是否显示框架周围的边框	frameborder="1"
name	框架标识名	name="mainFrame"
scrolling	是否显示滚动条	scrolling="0"
noresize	是否允许调整框架窗口大小	noresize="noresize"

【例2．12】创建新页面，实现多页面框架。

<!—index.html-->

<html>

<head>

<title>建多框架页面</title>

</head>

</frameset>

</html>

预览效果如图2.12所示：

file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wps8C43.tmp.jpg

图2.12多页面框架

5. 如何实现窗口间的关联

实现框架窗口间的关联，关键在于设置超链接的“target”目标窗口属性，具体的实现思路如下：

a) 在框架页面中，为右侧框架窗口添加“name”名称标识，如rightframe。关键代码如下。

b) 在左侧窗口对应的页面中，设置超链接“target”目标窗口属性为希望显示的框架窗口名，在右侧窗口显示的代码如下。

<a href="hetao.html" target="rightframe"><h2>新疆野生核桃</h2></a>

左侧窗口对应的页面（left.html),其关键代码如下示例所示。

【例2．13】创建新页面，实现框架关联。

<!—index.html-->

<html>

<head>

<title>建多框架页面</title>

</head>

</frameset>

</html>

<!—left.html-->

<html>

<head>

</head>

<body>

<a href="hetao.html" target="rightframe"><h2>新疆野生核桃</h2></a>

<a href="xiangfei.html" target="rightframe"> <h2>新疆葡萄干</h2>

</body>

</html>

预览效果如图所示：

file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wps8C44.tmp.jpg

图2.13 多页面框架关联

file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wps8C54.tmp.jpg

图2.14 多页面框架关联

在以前章节中，曾学习过<a>链接标签的target属性，小结一下其用法，如表所示：

表2.3 target属性的取值
属性值	含义
_blank	在新窗口中打开链接
_self	在链接所在页面的自身窗口中打开链接
框架窗口名	在指定的框架窗口中打开链接
_parent	在父框架集中打开链接，如果不是框架网页，则含义同_top
_top	在顶级窗口（即整个浏览器窗口）中打开链接

除_parent和_top两个属性值外，其他属性值都学过，下面讲解_parent和_top两个属性值的用法。修改本例左侧窗口对应的left.html页面，分别设置链接打开的目标窗口为“_parent”和“_top”，对应的HTML代码分别如下。

<a href="hetao.html" target="_parent"><h2>新疆野生核桃</h2></a>

<a href="hetao.html" target="_top"><h2>新疆野生核桃</h2></a>

上面两行代码的运行效果一样，都在整个框架页的浏览器窗口中显示。究其原因，是因为本例只有两个层次的二级框架，所以框架页所在的浏览器窗口是左侧窗口的父窗口，同时也是框架页面的顶级窗口。

2.3.4 <iframe> 内联框架

前面学习了框架，它适用于整个页面都用框架实现的场合，本节将学习<iframe>框架，它适用于将部分框架内嵌入页面的场合，一般用于引用其他网站的页面。例如，在自己制作的网页中引用搜狐网页的新闻页面等。

1. <iframe>的用法

file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wps8C55.tmp.png 语法：

【例2．14】创建新页面，实现内联框架。

<!—index.html-->

<html>

<head>

<title>iframe的应用</title>

</head>

<body>

</body>

</html>

预览效果如图2.15所示：

file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wps8C56.tmp.jpg

图2.15 内联框架

2. 常用属性

类似于前面学习的<frameset>框架，<iframe>内联框架的常用属性包括name、scrolling、noresize和frameborder。其中name、noresize和scrolling与表2-3所列<frame>属性的作用一样。例如，实现链接在<iframe>内联框架中打开的效果，代码如下：

【例2．15】创建新页面，实现内联框架。

<!—index.html-->

<html>

<head>

<title>iframe的应用</title>

</head>

<body>

<p><a href="hetao.html" target="mainFrame">下边显示第1页</a></p>

<p><a href="xiangfei.html" target="mainFrame">下边显示第2页</a></p>

</body>

</html>

预览效果如图所示：

file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wps8C57.tmp.jpg

图2.16 内联框架显示hetao.html页面

file:///C:\Users\sue\AppData\Local\Temp\ksohtml\wps8C58.tmp.jpg

图2.17 内联框架显示xiangfei.html页面

2.4 经典习题

1. HTML中共有三种列表，分别是、、。

的所有列表项目间没有先后顺序之分。的列表项目是有先后顺序之分的。是一组带有特殊含义的列表，一个列表项目里包含条件和说明两个部分。

2. 表格有行、列和单元格三部分构成，一般通过三个标记来创建，分别是表格标记、行标记和单元格标记。表格的各种属性都要在表格的开始标记<table>和表格的结束标记</table>之间才有效。

3. 下面( )可以设置有序列表的排列顺序为数字。

A. a B.A C.I D.不设置type属性

4. 下面( )不是无序列表type的属性值。

A.disc B.square C.solid D.cirle

5. 表格的基本语法结构是( )

A.<table><td><tr></tr></td></table>

B.<table><td></tr><tr></td></table>

C. <tr><table><td></td></table></tr>

D.<table><tr><td></td></tr></table>

6. 表格各行宽度或高度的特点是( )。（双项选择）

A.各列宽度一致，各行高度也一致；

B.各行宽度一致，各列单元格高度也一致；

C.同列单元格宽度一致，且垂直对齐；

D.同行单元格高度一致，且水平对齐。

		自动登录	找回密码
密码			立即注册

[其他] Web前端设计—HTML和CSS开发实战-教案-第2章

最佳新人

活跃会员

热心会员

推广达人

宣传达人

灌水之王

突出贡献

优秀版主

荣誉管理

论坛元老