对表格和表单的介绍，标签嵌套原则。

上一篇稍微说了一下HTML和标签，这一篇进行一次简单的总结，并且初识css。

 一。首先说一下表格标签即<table></table>标签

①.

<table>...</table>:整个标签是以<table>标记开始、以</table>标记结束。

<tr>...</tr>:表格的行，所以一个表格中有几个<tr>就表示有几行。

<td>...</td>：表格的单元格，一行中可以包含多个<td>...</td>。

表格细分为头部<thead>...</thead>,身体<tbody>...<tbody>,尾部<tfoot>...</tfoot>。

注意：在table表格没有添加css样式之前，原生的表格在浏览器中显示都是没有表格线的。

②.

表格可以添加标题和摘要：

摘要：摘要的内容是不会出现在浏览器页面中的，他的作用只是增加表格的可读性(语义化)，使得搜索引擎更好读懂表格的内容。

<table summary="表格简介文本">

标题：用于描述表格内容，标题的显示位置是在表格的上方

<table>

<caption>标题文本</caption>

<tr>

<td>...</td>

...

</tr>

....

</table>

后来对表格的结构进行了简化，去掉了头部和尾部，只保留了身体部分。

在有的网上对<tbody>...</tbody>有过这样的描述：当表格内容非常多时，表格会下载一点显示。但是如果加上<tbody>标签后会等表格全部内容加载完成后才显示。

详细的完整结构位:

<table>

   <thead>

<tr>

<td>...</td>

....

</tr>

....

</thead>

<tbody>

<tr>

<td>...</td>

....

</tr>

....

</tbody>

<tfoot>

<tr>

<td>...</td>

...

</tr>

.....

</tfoot>

</table>

后来因为该种结构实在是太过于复杂。所以对表格的结构进行了简化。

简化后的表格结构为：

    <table>
<tr>
<td>...</td>
...
</tr>
...
</table>

③.table标签的属性：

border:0 边框

cellspacing:0 单元格与单元格之间的间距

cellpadding:0 内容到边框的距离

width:200       表格的宽度

align:left/right/center 表格的对齐方式(水平)

bordercolor 边框的颜色

bgcolor 背景颜色

background 背景图像

     tr的属性：

height 高度

align 水平对齐方式

valign 垂直对齐方式

bgcolor 背景颜色

background 背景图片

     td的属性：

width 宽度

height

align

valign

bgcolor

background

④.表格的高级应用：

合并单元格：

水平合并：colspan="数字"

垂直合并：rowspan="数字"

表格的嵌套

表格嵌套布局：该布局方式有些麻烦，所以这样的布局方式现在几乎不会用了。

注意：表格布局基本不用但是表格的用处还是很大的。

二。另外一个重要的标签：表单标签

表单的作用：负责收集数据

form标签：

      form的属性：

method="get/post"

action="提交的路径"

target="_blank/_self"

name=" "

简单介绍一下get和post的区别：

get:

1.通过地址栏提交(我们可以在地址栏看到提交的内容)

2.不安全

3.数据量小

post:

1.比较安全

2.数据量比较大

注意：这只是最简单的区别。复杂的可以去google。

              form的元素： 

文本框：<input type="text" name=" " value=" "/>

密码框：<input type="possword" name=" " value=" "/>

单选按钮：<input type="radio" name=" " value=" "/>

复选按钮：<input type="checkbox" name=" " value=" "/>

文件域：<input type="file" name=" " value=" "/>

下拉框：<select  name=" ">

<option value=" ">请选择</option>

.....

      </select>

文本域：(文本框的放大版)

<textarea cols="数字" rows="数字" name=" ">内容</textarea>

提交按钮：<input type="submit" value="提交"/>

重置按钮：<input type="reset" value="重置"/>

普通按钮:<input type="button" value=" "/>

图像域按钮:<input type="image" src="图片的路径"/>

按钮:<button>文本内容</button>

单选按钮和复选按钮的属性:checked

下拉框的属性：selected

文本框的显示宽度属性：size

下拉框里option的显示个数属性：size

文本框最多输入字数属性:maxlength

三。标签的分类

块级元素(大标签/大盒子)：

1.可以嵌套块级元素和行内元素

2.是在不同行显示的

3.具有宽和高的属性

常见的大盒子：

div, table, ul, li, ol, dl, dd, dt, p, form, h1-h6

行内元素(内联元素小标签、小盒子)

1.不能嵌套块级元素，但是可以嵌套行内元素

2.在同一行显示

3.没有宽和高的属性

常见的小盒子：

span, a, strong, b, i, em

行内块级元素:

1.在同一行显示

常见的元素：

img， input, textarea, select

五.嵌套的原则

1.不能交叉嵌套

2.块级元素可以嵌套行内元素，行内元素不能嵌套块级元素

3.h1-h6不能嵌套块级元素

4.p不能嵌套块级元素