HTML初学笔记（第五章）

1.创建表格

在HTML网页中，所有的元素都是通过标签定义的，要想创建表格，就需要使用表格相关的标签。

1.1基本语法格式：

<table>     

        <tr>             

                <td>单元格内的文字</td>         

                 ...    

        </tr>    

         ...

</table>

1.2表格的各项属性

<table></table>：定义一个表格

<tr></tr>：定义表格中的一行，嵌套在<table></table>中

学习<tr>的属性时需要注意以下几点：

1.<tr>标签无宽度属性width，其宽度取决于表格标签<table>。

2.对<tr>标签应用valign属性，用于设置一行内容的垂直对齐方式。

<td></td>：定义表格中的单元格，嵌套在<tr></tr>中

学习<td>的属性时需要注意以下几点：

1.在<td>标签的属性中，重点掌握colspan和rolspan，其他的属性了解即可，不建议使用，均可用CSS样式属性替代。

2.当对某一个<td>标签应用width属性设置宽度时，该列中的所有单元格均会以设置的宽度显示。

3.当对某一个<td>标签应用height属性设置高度时，该行中的所有单元格均会以设置的高度显示。

1.3<th>标签及其属性

<th></th>标签用来设置表头，其文本默认加粗居中显示。

1.4表格的结构

为了使搜索引擎更好地理解网页，可以将表格划分为头部、主体和页脚。

1.头部

        定义表格的头部,包含网页的logo和导航等头部信息。

        基本语法格式：

        <thead></thead>

2.主体

        定义表格的页脚，包含网页底部的企业信息等。

        基本语法格式：

        <tfoot></ tfoot >

3.页脚

        定义表格的主体，包含网页中除头部和底部之外的内容。

        基本语法格式：

        <tbody></tbody>

学习表格的结构时需要注意：

一个表格只能定义一对<thead></thead>、一对<tfoot></ tfoot >和多对<tbody></ tbody >，它们必须按<thead></thead>、<tfoot></tfoot >和<tbody></tbody >的顺序使用。之所以将      <tfoot></ tfoot >置于<tbody></ tbody >之前，是为了使浏览器在收到全部数据之前即可显示页脚。

2.CSS控制表格样式

学习CSS控制表格边框时需要注意以下几点：

border-collapse属性的属性值除了collapse（合并）之外，还可以为separate（分离），默认为separate。

当表格的border-collapse属性设置为collapse时， HTML中设置的cellspacing属性值无效。

行标签<tr>无border样式属性，本书不再做具体的演示，初学者可以自己测试加深理解。

学习CSS控制单元格边距时需要注意：

行标签<tr>无内边距属性padding和外边距属性margin。

学习CSS控制单元格边距时需要注意：

对同一行中的单元格定义不同的高度，或对同一列中的单元格定义不同的宽度时，最终的宽度或高度将取其中的较大者。

3.表单

<form></form>标签用来创建表单。

<form>与</form>之间的表单控件是由用户自定义的，action、method和name为表单标签<form>的常用属性。

基本语法格式：

<form action="url地址" method="提交方式" name="表单名称">            

        各种表单控件

</form>

3.1表单控件

        表单控件是表单的核心部分，常见的表单控件有<input />、<textarea>、<select>。

3.2action属性

        action属性用于指定接收并处理表单数据的服务器程序的url地址。

3.3method属性

        method属性用于设置表单数据的提交方式，其取值为get或post。

3.4name属性

        name属性用于指定表单的名称，以区分同一个页面中的多个表单。

4.input控件

浏览网页时经常会看到单行文本输入框、单选按钮、复选框、提交按钮、重置按钮等，要想定义这些元素就需要使用input控件。

基本语法格式：

<input type="控件类型"/>

在HTML中，<input>标签拥有多个type属性值，用于定义不同的控件类型。

4.1单行文本输入框

4.2密码输入框

4.3单选框

4.4复选框

4.5普通按钮

4.6提交按钮

4.7重置按钮

4.8图像按钮

4.9隐藏域

4.10文本域

5.textarea控件

基本语法格式：

<textarea cols="每行中的字符数" rows="显示的行数">     

        文本内容

</textarea>

cols和rows为<textarea>标记的必须属性，其中cols用来定义多行文本输入框每行中的字符数，rows用来定义多行文本输入框显示的行数，取值均为正整数。

6.select控件

基本语法格式：

<select>        

        <option>选项1</option>        

        <option>选项2</option>        

        <option>选项3</option>      

         ...    

</select>

7.CSS控制表单样式

使用CSS可以轻松地控制表单控件的样式，主要体现在控制表单控件的字体、边框、背景和内边距等。