HTML 第三讲

HTMLHTML 第三讲第三讲

一月二月三月1200 1000 1500

单元格（用<TD> 来表示，每个单元格可以有背景颜色和背景图片）

表格（用 <Table> 来表示，表格可以有背景颜色、背景图片）表格边框

每一行可以用<TR> 来表示，单元格放在行中，每行可以有很多的单元格。

表头（用 <TH>来表示，表头是特殊的单元格，其中的文字加进去之后默认是居中并且加粗）

表格表格 (TABLE)(TABLE) 标记标记 --1--1

• <table> 元素：定义一个表格。每一个表格只有一对 <table> 和 </table> ，一张页面中可以有多个表格。

• <tr> 元素：定义表格的行，一个表格可以有多行，所以 <tr> 对于一个表格来说不是唯一的。

• <td> 元素：定义表格的一个单元格。每行可以有不同数量的单元格，在 <td> 和</td> 之间是单元格的具体内容。

• 需要注意的是：上述的三个元素必须、而且只能够配对使用。缺少任何一个元素，都无法定义出一个表格。


• 表格的基本结构<table> 定义表格

<tr><th> 定义表头 </th>

</tr><tr> 定义表行

<td>…</td> 定义单元格</tr>

</table>例： 02.htm


• 表格的属性 – 1– width 属性：指定表格或某一

个表格单元格的宽度。单位可以是 % 或者象素。

– height 属性：指定表格或某一个表格单元格的高度。单位可以是 % 或者象素。

– border 属性：表格边线粗细• 例 03.htm 、 04.htm 、 05.htm


• 表格的属性 – 1– 4 、 bgcolor 属性：指定表格或

某一个单元格的背景颜色。– 5 、 background 属性：指定表

格或某一个单元格的背景图片。其属性值为一个 URL 地址。

例： 07.htm


• 表格的属性 – 2– 6 、 bordercolor 属性：指定表

格或某一个单元格的边框颜色。例： 08.htm– 7 、 Bordercolorlight 属性：亮

边框的颜色– 8 、 Bordercolordark 属性：暗

边框的颜色例： 09.htm


• 表格的属性 – 2– 9 、 align 属性：指定表格或

某一个单元格里的内容（文本、图片等）的对齐方式。

例： 10.htm


• 表格的属性 – 2– 10 、 cellspacing 属性：单元格

间距。例： 11.htm– 11 、 cellpadding 属性：单元格

边距。例： 12.htm


• 单元格属性1 、 valign 属性：指定某一个单元格

里的内容（文本、图片等）的垂直对齐方式。垂直对齐方式的属性值包括：

top ：顶端对齐；middle ：居中对齐；bottom ：底端对齐 ;

Baseline ：相对于基线对齐 ;

例： 13.htm


• 单元格属性2 、 Colspan ：属性值表示当前单

元格跨越几列例： 14.htm

3 、 Rowspan ：属性值表示当前单元格跨越几行

例： 16.htm


• 行属性1 、 valign 属性：指定某一个单

元格里的内容（文本、图片等）的垂直对齐方式。垂直对齐方式的属性值包• top ：顶端对齐；

middle ：居中对齐；bottom ：底端对齐。Baseline ：相对于基线对齐。


• 行属性2 、 align 属性：指定表格或某一

个单元格里的内容（文本、图片等）的对齐方式

3 、 height 属性：指定表格或某一个表格单元格的高度。单位可以是 % 或者象素

表格进阶表格进阶

• 表格的嵌套– 在 <td> </td> 之间插入表格，

实现表格嵌套例： 17.htm– 表格的作用一般只是控制文本

和图像的显示，而不显示表格的边框

例： 18.htm

综合案例综合案例

• 表格的综合使用• 例： 19.htm

表单表单 (FORM)(FORM) 标记标记

• HTML 表单是 HTML 页面与浏览器端实现交互的重要手段。利用表单可以收集客户端提交的有关信息。

• 在 HTML 里，我们可以定义表单，并且使表单与 CGI 或 ASP 等服务器端的表单处理程序配合。我们在网页设计课程中不会涉及程序编制。


• 表单是网页上的一个特定区域。这个区域是由一对 <form> 元素定义的。

• <form> 元素– action 属性：用来定义表单处理

程序（一个 ASP 、 CGI 等程序）的位置 ( 相对地址或绝对地址 ) 。

– Method 定义表单结果从浏览器传送到服务器的方法，一般有两种方法： get 、 post 。


• 表单的基本语法 :

<form action="url" method=* type=text/plain>...

<input type=submit>

<input type=reset>

</form> * =GET 有数据量限制， POST 无以上限制 , 以文

件形式传输例： 22.htm


2. 文本框<input name=? type=* value=** siz

e=*** maxlength=??> ? 文本框的名字* text,password

** 默认值*** 长度?? 最大输入字符数例 20.htm


3. 文本域– <textarea name=* rows=** cols

=**> ... </textarea>

例： 20.htm


4. 按钮– 包括普通按钮、重置按钮和提

交按钮<input type="submit" value=" 提

交 " name=“B1">

<input type="reset" value=" 全部重写 " name=“B2">

例： 21.htm


5. 复选框 (Checkbox) – 在一个表单里的所有多选框可

以有一个或多个被选中。<input type=checkbox>

<input type=checkbox checked>

<input type=checkbox value=**>

例 25.htm


• 6. 单选框 (RadioButton)– 一个表单里的所有变量名相同的单选

框只能够有一个被选中。<input type=radio name=sex value=**

><input type=radio name=sex value=** c

hecked>– 各个选项的 name 必须一样才能达到

预期效果例： 26.htm注意 262.htm 的写法是错误的


• 7. 下拉列表– 基本语法<select name=*>

<option selected> 说明 </option>

<option value=**> 说明 2 </option>

</select>

例： 28.htm


• 7. 下拉列表– （ 2 ）列表框的长度

<select size=**>– （ 3 ）允许多选

<select size=** multiple>例： 29.htm 、 30.htm


• 8. 图象域– <input type=image src=url>

例： image.htm


• 综合练习（ * ）• 实现留言簿– 要求：背景、文字颜色、字体、换行、页面标题、表单文本框、文本域、单选框、复选框、下拉列表、图象域、提交与取消按钮，内容以 mail 形式提交。

Documents

HTML 第三讲