1 / 27

HTML 第三讲

HTML 第三讲. 表格（用 <Table> 来表示，表格可以有背景颜色、背景图片）. 表头（用 <TH> 来表示，表头是特殊的单元格，其中的文字加进去之后默认是居中并且加粗）. 表格边框. 单元格（用 <TD> 来表示，每个单元格可以有背景颜色和背景图片）. 每一行可以用 <TR> 来表示，单元格放在行中，每行可以有很多的单元格。. 表格 (TABLE) 标记 --1. <table> 元素：定义一个表格。每一个表格只有一对 <table> 和 </table> ，一张页面中可以有多个表格。

thi
Télécharger la présentation

HTML 第三讲

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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形式提交。

More Related