HTML学习-Day02

创建表格

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

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

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

1.table用于定义一个表格。
2.tr 用于定义表格中的一行，必须嵌套在table标签中，在table中包含几对tr，就有几行表格。
3.td /td ，用于定义表格中的单元格，必须嵌套在tr标签中，一对tr中包含几对td，就表示该行中有多少列（或多少个单元格）。

注意：
        1.tr中只能嵌套td
        2.td标签，他就像一个容器，可以如容纳多有元素

表格属性

属性名	含义	常用属性值
border	设置表格的边框（默认border=“0”无边框）	像素值
cellspacing	设置单元格与单元格边框之间的空白间距	像素值（默认为2像素）
cellpadding	设置单元格内容与单元格边框之间的空白间距	像素值（默认为1像素）
width	设置表格的宽度	像素值
height	设置表格的高度	像素值
align	设置表格在网页中的水平对齐方式	left、center、right

表头标签

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

表格结构（了解）

        在使用表格进行布局时，可以将表格划分为头部、主体、页脚（页脚因为有兼容性问题，我们不再赘述），具体如下所示：
        < thead></ thead>：用于定义表格的头部。
        必须位于< table></ table>标签中，一般包含网页的logo和导航等头部信息。
        < tbody></ tbody>：用于定义表格的主体。

        caption 元素定义表格标题。

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

        caption标签必须紧跟table标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中与表格之上。

合并单元格（难点）

跨行合并：rowspan 跨列合并： colspan
合并单元格的思想：
        将多个北荣合并的时候，就会有多余的东西，把它删除。例如把3个id合并成一个，那就多余了2个，需要删除。
公式：删除的个数 = 合并的个数 - 1
合并的顺序： 先上 先左

总结表格

1.表格提供了HTML中定义表格式数据的方法。
2.表格中由行中的单元格组成。
3.表格中没有列元素，列的个数取决于航的单元格个数。
4.表格不要纠结于外观，那是css的作用。

表单标签（掌握）

        现实中的表单，类似我们填的单子。
        目的是为了手收集用户信息。
        在我们网页中我们也需要跟用户进行交互，搜集用户资料，此时也需要表单。
        在HTML中，一个完整的表单通常由表单空间（也称为表单元素）、提示信息和表单域3个部分构成。

表单控件：
        半酣了具体的表单功能项。如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。
提示信息：
        一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。
表单域：
        它相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。

input控件（重点）

        在上面的语法中，< input />标签为但标签，type属性为其最基本的属性，其取值有多重，用于指定不同的空间看类型。除了type属性之外，< input>标签还可以定义很多其他的属性，其常用属性如下表所示：

label标签（理解）

label标签为input元素定义标注（标签）
作用：用于绑定一个表单元素，当点击label标签的时候，被绑定的表单元素就会获得输入焦点
如何绑定元素呢？
for属性规定label与id相同的元素绑定。

<label for="male">Male</label>
<input type="radio" name="six" id="male" value="male">

textarea控件（文本域）

        如果需要输入大量的信息，就需要用到< textarea></ textarea>标签。通过textarea控件可以轻松地创建多行文本输入框，其基本语法格式如下：

<textarea cols="每行中的字符数" rows="显示的行数">
	文本内容
</textarea>

下拉菜单

        使用select控件定义下拉菜单的基本语法格式如下：

<select>
	<option>选项1</option>
	<option>选项2</option>
	<option>选项3</option>
	...
</select>

注意：
        1.< select></ select>中至少应包含一对< option></ option>。
        2.在option中定义selected = “selected”时，当前项即为默认选中项。

表单域

        在HTML中，form标签被用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。创建表单的基本语法格式如下：

<form action="url地址" method="提交方式" name="表单名称">
	各种表单控件
</form>

常用属性：
    1.action
        在表单手机到信息之后，需要将信息传递给无复其进行处理，action属性用于指定接受并处理表单数据的无复其程序和url地址。
    2.method
        用于设置表单数据的提交方式，其取值为get或post。
    3.name
        用于指定表单的名称，以区分同一个页面中的多个表单。

注意： 每个表单都应该有自己表单域。