公输的前端学习记录day3-2

      HTML标签（下）

学习目标：

1. 能够书写表格
2. 能够写出无序列表
3. 能写出3~4个常用的input表单类型
4. 能够写出下拉列表表单
5. 能够使用表单元素实现注册页面
6. 能够独立查阅W3C文档

一：表格标签（非常常用）

1.1表格的主要作用：

主要用于显示,展示数据，它可以让数据显示的非常规整，可读性非常好。特别是后台展示数据时。

1.2表格的基本语法

＜table＞

  ＜tr＞

      ＜td＞单元格内的文字＜/td＞

         。。。

   ＜/tr＞

   。。。

＜/table＞

1）＜table＞＜/table＞用于定义表格标签。

2）＜tr＞＜/tr＞用于定义表格中的行，必须嵌套在＜table＞＜/table＞内。

3）＜td＞＜/td＞用于定义单元格，必须嵌套在＜tr＞＜/tr＞标签中。

4）字母td指单元格内的数据。

（没有列的概念）

1.3表头单元格（table head）＜th＞＜/th＞

里面的内容会加粗且居中显示。常位于表格第一行。

1.4表格属性

（表格标签这部分属性在实际开发中不常用，后面通过CSS来设置）

1）记住这些英语单词，后面CSS会使用，基本一致。

align（left,center,right）规定表格相对周围元素的对齐方式

border（1或“”）规定表格单元是否具有边框，默认为“”，表示没有边框。

cellpadding（像素值）规定单元边沿与其内容之间的空白，默认1像素。

cellspacing（像素值）规定单元格之间的空白，默认2像素。

width（像素值或百分比）规定表格的宽度。

！这些属性要写到表格标签table里面去。

单元格内可以放任何元素，文字图片链接都行。

先书写制作表格的结构，后书写表格属性。

1.5表格结构标签

 使用场景：因为表格可能很长，为了更好的表示表格的语义，可以将表格分割成表格头部和表格主题两大部分。

 分别用＜thead＞标签表格的头部区域 ， 内部必须拥有＜tr＞标签，一般位于第一行。   ＜tbody＞标签表格主体区域，这样可以更好的分清表格结构。

以上两个标签都是放在＜table＞＜/table＞标签中的。

1.6合并单元格

  1）合并单元格方式

     *跨行合并：rowspan="合并单元格的个数"，竖着合并。

     *跨列合并：colspan="合并单元格的个数"，横着合并。

 2）目标单元格：（写合并代码）

  *跨行：最上侧单元格为目标单元格，写合并代码。

  *跨列：最左侧单元格为目标单元格，写合并代码。

 3）合并单元格三部曲：

1. 先确定是跨行合并还是跨列合并
2. 找到目标单元格，写上合并方式=合并单元格数量。如：＜td colspan="2"＞＜/td＞.
3. 删除多余单元格。

1.7表格总结：

   1）表格相关标签   2）表格相关属性

  3）合并单元格