WDF(6)

 

 

第二章 HTML 4.01

 

教学内容

 

复习——

      

PPT2——

 

我们学习HTML到目前为止，其实就是在学习元素及其属性，学习的内容不多，大家只要在课堂上认真听一下，实验课的时候试着自己做一下，基本上可以完全掌握。

 

 

PPT3——

 

前面课，我们主要讲了这样一些元素：其中，<html>是一个合法的HTML文档的根元素；一个HTML文档包括两个部分：文档头<head>和文档主体<body>；<head>包含一个HTML文档必须的元素<title>用于定义文档在浏览器标题栏中显示的标题，meta用于设置一些浏览器需要的信息；<body>以及其包含的内容是一个HTML文档的可视部分，这些可视元素主要分为两大类：内联元素和区块元素，内联元素是可以像单词、字符或短语一样显示在段落内的元素，区块元素是相当于段落的元素。在内联元素中，我们前次课主要讲了简单的内联元素：b, i, tt, em, strong, code, kbd, sub, sup, u, s/strike，以及br, font和a。除了br, font和a外的内联元素基本上不需要设置其任何属性，只需要将文本包含在开始标签和结束标签中间就可以了；br是一个空元素，用于在段落内换行；对于font和a，我们需要简单设置一些属性，font的属性有size、face和color；a的属性有href和target。接下来，我们学习了简单的内联元素，主要有p、blockquote、address、hn、hr和pre。另外，我们也不能忘记学过的关于网页颜色、字符实体，以及相对路径与绝对路径。

 

 

PPT4——

 

pre是preformatted的缩写，即预格式化。由于HTML语言中的多个空格或换行符号会被浏览器收缩（truncate），浏览器有一个类似于我们在VB中学习过的Trim()的函数，Trim()函数将字符串中的首尾所有空格都去掉，而浏览器将文本中的多个空格收缩为一个。而pre这个标签可以使得空格和回车符都保留不变地输出到浏览器中的页面上，该元素基本上没有需要设置的属性，直接在开始标签和结束标签中编辑文本即可，浏览器会将其中的文本原封不动地显示在页面上。

 

教学示例：13.pre.htm

 

如果移除<pre>的开始和结束标签，那么所有的空格、制表符和回车符都会被收缩为一个空格。

 

BBS系统上最早是没有办法显示图片的，但是早期的网民经常使用一些字符构成被称为ASCII艺术的图案，现在有些用户在论坛的签名档也是类似于此，ASCII中会出现一些特殊字符，但是出现最多的字符还是空格，如果直接把它们拷贝到HTML页面中，那么空格收缩之后就不会显示原来的图案了，而如果使用&nbsp;代替其中的空格可能会增加文档的字符数（因为每个“&nbsp;”都会比一个空格要多出5个字符），我们可以使用pre元素将它们显示在一个Web页面上。

 

 

PPT5——

 

在进行文档处理时，我们经常会使用到列表，列表用于在HTML中逐行显示项目信息，例如编排一个目录。

 

无序列表在语义上很容易理解，列表项目之间没有先后关系，各个列表项目之间的重要程度应该是一样的。

 

ul是unordered list的缩写，li是list item（列表项）的缩写，

 

 

PPT6——

 

有序列表的列表项目之间应该有先后或重要与否的关系，列表项目前的符号是以数字序号进行标志的。

 

ol是ordered list的缩写。

 

 

PPT7——

 

描述列表平时不是非常常见，是一种不常用的列表，它是关于条目（或术语）及其解释的列表。

 

dl是definition list的缩写；dt是definition term的缩写；而dd是definition description的缩写。

 

注意：ul、ol和dl的描述方法有一点小区别：描述列表的开始使用<dl>标签，列表中每个元素的标题使用<dt>定义，后面跟随<dd>用于描述列表中元素的内容。

 

教学示例：14.list.htm

 

这三种类别的列表是可以相互嵌套的，但无论怎么嵌套，开始标签和结束标签要相对应，即要正确嵌套。

 

 

PPT8——

 

这个页面上的图片来自于http://www.aharef.info/static/htmlgraph，用户在这个网站上输入一个地址之后，这个网站会自动分析这个地址的页面上的HTML源文件，遇到一个标签<a>，就会在图上用一个蓝色的点表示出来；遇到一个<br>或<blockquote>标签，就会在图上用一个橙色的点表示出来。这个图片是分析管理学院网站（http://sm.cumt.edu.cn）产生的结果，红色代表的是和表格相关的标签，也就是说该网站用的最多的标记就是和表格相关的标签；而且，我们在这个图上还可以发现，位于HTML源代码最底层（底部）的也是和表格相关的标签。表格标签不仅最多而且位于最底层的位置，所以表格在这个HTML中占据着非常重要的位置。事实上，以前的网站经常使用表格作为布局工具，<body>标签中紧接着的往往就是一个<table>标签，这个页面的内容也常常放在一个大的表格中。即使如此，我们还是应该明确：表格本身还是用来表现例如成绩单之类的二维表结构的。

 

需要注意的是，表格相关的元素和属性比较多，需要多花点时间。

 

 

PPT9——

 

HTML中和表格相关的标签大概就有这些，有些不是很常用，下面我们会详细介绍一下比较常用的一些标签及属性。

 

 

PPT10——

 

第一个图是一个我们常见的二维表(table)，在计算机中和二维表类似的还有grid（网格）和pivot table（数据透视表）等。二维表是有行（row）和列（column）组成的，这个图就是一个3行3列的二维表。

 

第二个图是HTML中表示表格的方法：一个表格是由多个行组成的，而每个行中又包含多个单元格，其中，tr是table row的缩写，td是table data（表格数据）的缩写，这个和第一个图稍微有点不同：水平方向上的单元格构成一行，竖直方向上的单元格构成一列。

 

第三个图就是HTML中如何使用三种标签（table、tr和td）表现表格的方法：一个HTML表格以<table>开始，以</table>结束，表格中的每个行以<tr>开始，以</tr>结束，每行中的每个单元格以<td>开始，以</td>结束，出现&nbsp;的位置其实是在单元格中要显示的数据的位置。

 

 

PPT11——

 

刚才已经讲过了：表格使用<table>标签进行定义。表格被拆分成多个行 (使用<tr>标签)，每行被分成多个单元格(使用<td>标签) 。Td 代表 table data，代表数据单元格中的内容。

 

单元格中的内容除了类似于&nbsp;的文本之外，还可以是任何其它的HTML元素，也就是说table是一个容器，可以包含其它元素。

 

align属性我们在讲<hr>标签时讲过，该属性用于设置元素在页面中显示时的对齐方式，常用的取值有left、center和right，不设置该属性时，表格显示在上级容器（如这个页面）的左侧。

 

教学示例：15.table.htm

 

width属性用于设置表格的宽度，取值可以是一个百分比或以像素为单位的整数，百分比设置的是一个相对宽度，即表格的实际宽度是其上级容器宽度和该百分比的乘积；而像素数是一个绝对宽度。设置为百分比的一个特点是，表格的宽度会随着上级容器的宽度的改变而改变。

 

border属性我们在讲<img>标签时也讲过，该属性用于设置表格的边框，其取值是一个像素数，如果不设置该属性，那么表格无边框，通常情况下，我们应该设置该属性。

 

background和bgcolor（backgroundcolor的缩写）两个属性用于设置表格的背景，前者可以将一幅图片指定为表格的背景，后者用于设置表格的背景色，通常情况下，我们会两者取其一，而不是两个属性都进行设置。使用background属性设置图片作为背景时，如果表格覆盖的面积比图片小，则自动从左到右、从上到下截取图片作为背景；反之，则将图片平铺作为表格的背景。

 

cellspacing和cellpadding分别用于设置表格单元格之间的间隔值和填充值，其取值均为一个像素数，即间隔值和填充值得大小，马上我们会在实例中给大家演示它们。

 

表格边框的颜色可以使用bordercolor属性进行设置，和该属性相关的还有两个属性bordercolordark和bordercolorlight，这三个属性结合起来可以使得表格具有三维立体效果。至于如何确定bordercolordark和bordercolorlight的取值，这个需要对颜色比较敏感的设计人员才能做出正确判断，大家只需要了解一下这两个属性，然后自己尝试一下就可以了。

 

表格可以有一个摘要说明summary。摘要是不会显示出来的，通常是给一些其它的工具使用的,比如盲人阅读器等。由于摘要summary不会显示在浏览器中，所以可以尽可能的使摘要描述足够长，这样更有利于那些通过“听”的浏览者了解该表格的内容。

 

 

PPT12——

 

这两个图都是帮助大家理解table的三个属性border、cellspacing和cellpadding的。

 

 

PPT13——

 

了解完<table>的属性，让我们来看一下<tr>的相关属性：

 

align和valign（vertical align的缩写）分别代表数据行中的数据在水平和竖直方向上的对齐方式设置，align我们说过了，取值有left、center和right，而valign的取值可能是top、middle和bottom。<tr>的align属性的取值还可以是：justify和char；<tr>的valign属性的取值还可以是：baseline。这些取值在英文字符的处理时比较有用，我们一般只需要了解其常用属性值就可以了。

 

height用于设置行高，行的宽度是自动填充整个表格，故无width属性，只有行高属性。

 

bgcolor、bordercolor、bordercolordark和 bordercolorlight：和<table>类似，但没有background属性，故无法为某行设置背景图片。

 

需要指出的是，作为单元格容器的数据行，它的属性设置基本上就是针对其包含的单元格进行的一次性全体设置，即它包含的所有单元格都具备对行所设置的属性。

 

 

PPT14——

 

前四组属性和<tr>的非常类似，刚才我们也说了，其实对<tr>的属性设置最终还是应用到<td>上了，有一点不同的地方是可以为单元格指定背景图片，但不可以为数据行指定。

 

nowrap属性用于指定单元格中的数据是否会自动换行，这是个布尔属性，不设置该属性代表单元格中的文本长度如果大于表格宽度时，单元格中的文本自动换行；如果设置了该属性，则单元格中的文本不换行，而是撑大单元格。注意：对于一个较长的英文单词来说，无论设不设置该属醒，该单词都会在一行中进行显示，如果该单词长度大于单元格宽度，则该单元格一定会被撑大。

 

colspan和rowspan用于设置列和行的跨度，span即为跨度的意思，当我们对表格进行合并单元格操作时，会用到这两个属性：合并竖直方向的多个单元格，会为<td>产生一个rowspan属性，其取值为合并的单元格个数；合并水平方向的单元格，则会为<td>产生一个colspan属性，其取值为合并的单元格个数。

 

<table>、<tr>和<td>都是容器，<td>是真正的显示在网页中的内容的容器，<td>和</td>之间可以包含任意HTML元素。

 

如果不想在<td>中显示任何元素，<td>和</td>之间最好加上一个&nbsp;，否则的话该单元格的边框将不能正常显示。

 

 

PPT15、16——

 

在HTML中，一个表格可以被拆分为三个部分：题头、主体和脚注，分别使用标签<thead>、<tbody>和<tfoot>来表示，其实我们上面讲的关于表格的内容均是<tbody>中应该包含的内容。例如，对一个学生成绩单来说，第一行可能是课程名称，而最后一行可能是课程的平均成绩，这就是我们所说的题头和脚注，而中间的每位同学每门课程的成绩就是表格的主体。

 

th是table head cell的缩写

th标签和td标签可以互换，从语义的角度考虑，作为表头的单元格通常使用<th>而不是td，比如：成绩单的第一行是课程名称，第一列是学生姓名，这些单元格均可以使用<th>来代替<td>，这样更符合逻辑。

 



对应PPT下载




posted @ 2007-09-22 23:17  蜡人张  阅读(996)  评论(2)    收藏  举报