HTML 第三讲

1. HTML第三讲

2. 表格（用<Table>来表示，表格可以有背景颜色、背景图片）表格（用<Table>来表示，表格可以有背景颜色、背景图片） 表头（用<TH>来表示，表头是特殊的单元格，其中的文字加进去之后默认是居中并且加粗） 表格边框 单元格（用<TD>来表示，每个单元格可以有背景颜色和背景图片） 每一行可以用<TR>来表示，单元格放在行中，每行可以有很多的单元格。

3. 表格(TABLE)标记--1 • <table>元素：定义一个表格。每一个表格只有一对<table>和</table>，一张页面中可以有多个表格。 • <tr>元素：定义表格的行，一个表格可以有多行，所以<tr>对于一个表格来说不是唯一的。 • <td>元素：定义表格的一个单元格。每行可以有不同数量的单元格，在<td>和</td>之间是单元格的具体内容。 • 需要注意的是：上述的三个元素必须、而且只能够配对使用。缺少任何一个元素，都无法定义出一个表格。

4. 表格(TABLE)标记--2 • 表格的基本结构 <table>定义表格 <tr> <th>定义表头</th> </tr> <tr>定义表行 <td>…</td>定义单元格 </tr> </table> 例：02.htm

5. 表格(TABLE)标记--3 • 表格的属性 –1 • width属性：指定表格或某一个表格单元格的宽度。单位可以是%或者象素。 • height属性：指定表格或某一个表格单元格的高度。单位可以是%或者象素。 • border属性：表格边线粗细 • 例03.htm、04.htm、05.htm

6. 表格(TABLE)标记--2 • 表格的属性 –1 • 4、bgcolor属性：指定表格或某一个单元格的背景颜色。 • 5、background属性：指定表格或某一个单元格的背景图片。其属性值为一个URL地址。 例：07.htm

7. 表格(TABLE)标记--3 • 表格的属性 –2 • 6、bordercolor属性：指定表格或某一个单元格的边框颜色。 例：08.htm • 7、Bordercolorlight属性：亮边框的颜色 • 8、Bordercolordark属性：暗边框的颜色 例：09.htm

8. 表格(TABLE)标记--3 • 表格的属性 –2 • 9、align属性：指定表格或某一个单元格里的内容（文本、图片等）的对齐方式。 例：10.htm

9. 表格(TABLE)标记--3 • 表格的属性 –2 • 10、cellspacing属性：单元格间距。 例：11.htm • 11、cellpadding属性：单元格边距。 例：12.htm

10. 表格(TABLE)标记--4 • 单元格属性 1、valign属性：指定某一个单元格里的内容（文本、图片等）的垂直对齐方式。垂直对齐方式的属性值包括： top：顶端对齐； middle：居中对齐； bottom：底端对齐; Baseline：相对于基线对齐; 例：13.htm

11. 表格(TABLE)标记--5 • 单元格属性 2、Colspan：属性值表示当前单元格跨越几列 例：14.htm 3、Rowspan：属性值表示当前单元格跨越几行 例：16.htm

12. 表格(TABLE)标记--6 • 行属性 1、valign属性：指定某一个单元格里的内容（文本、图片等）的垂直对齐方式。垂直对齐方式的属性值包 • top：顶端对齐；middle：居中对齐；bottom：底端对齐。Baseline：相对于基线对齐。

13. 表格(TABLE)标记--7 • 行属性 2、align属性：指定表格或某一个单元格里的内容（文本、图片等）的对齐方式 3、height属性：指定表格或某一个表格单元格的高度。单位可以是%或者象素

14. 表格进阶 • 表格的嵌套 • 在<td> </td>之间插入表格，实现表格嵌套 例：17.htm • 表格的作用一般只是控制文本和图像的显示，而不显示表格的边框 例：18.htm

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

16. 表单(FORM)标记 • HTML表单是HTML页面与浏览器端实现交互的重要手段。利用表单可以收集客户端提交的有关信息。 • 在HTML里，我们可以定义表单，并且使表单与CGI或ASP等服务器端的表单处理程序配合。我们在网页设计课程中不会涉及程序编制。

17. 表单(FORM)标记 • 表单是网页上的一个特定区域。这个区域是由一对<form>元素定义的。 • <form>元素 • action属性：用来定义表单处理程序（一个ASP、CGI等程序）的位置(相对地址或绝对地址)。 • Method定义表单结果从浏览器传送到服务器的方法，一般有两种方法：get、post。

18. 表单(FORM)标记 • 表单的基本语法: <form action="url"method=* type=text/plain>... <input type=submit> <input type=reset> </form> * =GET有数据量限制，POST无以上限制,以文件形式传输 例：22.htm

19. 表单(FORM)标记 • 文本框 <input name=? type=* value=** size=*** maxlength=??> ?  文本框的名字 *  text,password **  默认值 *** 长度 ??  最大输入字符数 例20.htm

20. 表单(FORM)标记 3.文本域 • <textarea name=* rows=** cols=**> ... </textarea> 例：20.htm

21. 表单(FORM)标记 • 按钮 • 包括普通按钮、重置按钮和提交按钮 <input type="submit" value="提交" name=“B1"> <input type="reset" value="全部重写" name=“B2"> 例：21.htm

22. 表单(FORM)标记 5.复选框(Checkbox) • 在一个表单里的所有多选框可以有一个或多个被选中。 <input type=checkbox> <input type=checkbox checked> <input type=checkbox value=**> 例25.htm

23. 表单(FORM)标记 • 6.单选框(RadioButton) • 一个表单里的所有变量名相同的单选框只能够有一个被选中。 <input type=radio name=sex value=**> <input type=radio name=sex value=** checked> • 各个选项的name必须一样才能达到预期效果 例：26.htm 注意262.htm的写法是错误的

24. 表单(FORM)标记 • 7.下拉列表 • 基本语法 <select name=*><option selected>说明</option> <option value=**>说明2 </option> </select> 例：28.htm

25. 表单(FORM)标记 • 7.下拉列表 • （2）列表框的长度 <select size=**> • （3）允许多选 <select size=** multiple> 例：29.htm、30.htm

26. 表单(FORM)标记 • 8.图象域 • <input type=imagesrc=url> 例：image.htm

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