前端第二天 表格/表单和H5

1.表格标签

表格是较为常见的一种标签,但不是用来布局,常用来处理/显示表格式数据

 1.1创建表格

在HTML网页中,想要创建表格,就需要使用表格相关的标签.创建表格的基本语法格式如下

<table>
  <tr>
    <td>单元格内的文字</td>
    ...
  </tr>
  ...
</table>

在上面的语法中包含三队HTML标签,分别为table/tr/td他们是创建表格的基本标签,缺一不卡,下面对他们进行具体的解释

1.table用于定义一个表格

2.tr用于定义表格中的一行,必须嵌套在table标签中,在table中包含几对tr就有几行列表

3.td:用于定义表格中的单元格,必须嵌套在<tr></tr>中包含几对<td></td>,就表示改行中有多少列或者多少个单元格.

注意:

1 <tr></tr>中只能嵌套<td></td>

2 <td></td>标签,他就像一个容器,可以容纳所有的元素

1.2表格属性

1.3表格结构

在使用表格进行布局时，可以将表格划分为头部、主体和页脚（页脚因为有兼容性问题，我们不在赘述），具体如下所示：

<thead></thead>：用于定义表格的头部。必须位于<table></table> 标签中，一般包含网页的logo和导航等头部信息。

<tbody></tbody>：用于定义表格的主体。位于<table></table>标签中，一般包含网页中除头部和底部之外的其他内容。

表头单元格一般位于表格的第一行或第一列，其文本加粗居中，如下图所示，即为设置了表头的表格。设置表头非常简单，只需用表头标签th</th替代相应的单元格标签td</td即可。

 1.4表格标题

 定义个用法:caption元素定义表格标题

<table>
    <caption>表格标题</caption>
</table>

注意

1 caption标签只存在表格里面,必须要金穗table标签之后

2 只能对每个表格定义一个标题.通常这个标题会被居中与表格之上

1.5合并单元格

跨行合并:rowspan

跨列合并:colspan

合并单元格的步骤:

1 先判断跨行合并还是跨列合并

2 跨行合并用rowspan属性,跨列合并用colspan属性

3 将rowspan或者colspan写在第一个要合并的单元格上

4 将合并的行数和列数写在指定的属性值上

5 将多余的单元格注释掉

2.表单标签

表单，在网页中的作用不可小视，主要负责数据采集的功能，比如你可以采集访问者的名字和e－mail地址、调查表、留言簿等等。
一个表单有三个基本组成部分： 表单标签：这里面包含了处理表单数据所用CGI