HTML基础篇之表格和表单简易内容总结

本人不是大牛，就是刚入门的。最近学习了一些HTML知识，学个博客来记录一下，也许有些错误。希望各位大佬多多指教。

---

一、表格

1. <table>表格

<table></table>定义表格 ，<tr></tr>表示行，但是必须在table中，<td></td>表示单个单元格（table data），必须在tr中。

一个表格可以有表头，所以<th>xxxxx</th>表示表头。

<table>
    <tr>

        <th>表头</th>
        <td>单个单元格里面的内容</td>

    </tr>
    
</table>

2.表格属性

表格属性

属性	值	作用
align	left、center、right	表格相对周围元素的对齐方式
border	1 or " "	是否有边框，“”则表示没有
cellpadding	多少px	边沿与内容的空白距离，默认1
cellspacing	px	单元格之间的空白，默认2
width	像素值or百分比	表格的宽度

3.结构标签

<thead></thead>表格的头部，其里面一定要有<tr>标签，位于第一行

<tbody></tbody>表格的主体，用于存放数据

但是上面的这些都得在<table>内。

4.合并单元格

行之间的合并  rowspan = "合并的单元格的个数"

列合并   colspan = "l合并的个数"

注意 : 行——最上侧单元格为目标单元格、 列—— 最左侧为目标单元格

还得删除多余单元格！！

二、列表

1.无序

<ul> 表示无序，<li>表示其列表项 点点点

• 表1
• 表2
• 表3

所以没有先后之分，都是并列的，

<ul>中只能嵌套<li>，直接在ul中输入是错误的。

2.有序

<ol>表示有序，同样也是用<li>定义列表项

1. 表1
2. 表2
3. 表3 

同样<ol>中只能嵌套li，直接在ol输入也是错误的

3.自定义列表

<dl></dl>用于自定义列表，该标签与<dt>和<dd>一起用

dt为项目的名字    dd为每一个面项目名字

<dl>只能包含dd dt

dd dt没有个数限制，usually 一个dt对应多个dd

三、表单

1.表单由表单控件，表单域，提示信息组成

2.表单域——包含表元素的区域

<form>定义表单域     其里面的内容会提交给服务器

有常用属性

属性	值	作用
action	url地址	用于指定接受并处理表单数据的服务器程序的url地址
method	get/input	设置表单的提交方式
name	名字	表单的名称，来区分一个页面的多个表单域

3.input——收集用户信息

input标签中包含一个type属性，根据其值的不同，可以有多种形式，按钮、文本、复选框等等

<input type="key" / >

input为单标签

<input type="button">             // 点击按钮

<input type="checkbox">           // 复选框     
        
<input type="file">               // 输入字段和"浏览"按钮，提供文件上传

<input type="hidden">             // 隐藏输入的字段

<input type="image">              // 图像形式的提交按钮

<input type="password">           // 密码字段，输入的字符被掩盖

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

<input type="reset">              // 重置按钮，清除已填的表单中的所有数据

<input type="submit">             // 定义提交按钮，把数据给服务器

<input type="text">               // 单行的输入字段，用户在其中输入文本，默认宽度20字符

除了type属性还有其他属性，一些常用的属性

name	由用户自定义	定义input元素的名称
value	自定义	规定input元素的值
check	checked	规定input元素首次加载时应当被选中
maxlength	正整数	输入字段字符的最大长度

name、value时每个表单元素都有的属性值，供后台人员用

name表单元素的名字，要求单选按钮和复选框要有相同的name值