版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/first52hz/article/details/81280862
目录
认识表格
从开始的网页布局变成单纯的显示数据
表格标签
- 单词：table，trow，tdata
- 特点：显示数据
- 使用：<table> <tr> <td>姓名</td><td>年龄</td> </tr> </table>
- 属性值如下
- width：设置表格的宽
- height：设置表格的高
- border：设置表格的表框（默认为0无边框）
- cellspacing：单元格边框与单元格边框的距离（默认2像素）
- cellpadding：单元格内容与单元格边框的距离（默认1像素）
- align：left，right，center，设置表格的对齐方式（让内容居中对齐，tr或者td设置align=“center”，css完美解决）
- 注：table中只装tr，tr中只装td（做表格一般三参为0，然后用css来设置）
表头标签
- 单词：thead
- 特点：文本居中加粗
- 使用：用th代替td即可
标题标签
- 单词：caption
- 特点：一个table只放一个caption，和表格连在一块
- 使用：<table> <caption>标题</caption> </table>
表格结构
- caption
- <thead> <tr> <th></th><th></th> </tr> </thead>
- <tbody> <tr> <td></td><td></td> </tr> </tbody>
合并单元格
- 单词：rowspan，colspan
- 特点：需手动删除同一行的后几列单元格或同一列的后几行单元格
- 使用：<td colspan='2'>abc</td>
表单控件
input控件
- 单词：input
- 特点：单标签
- 使用：<input type='text' />
- 属性值如下
- type：用于指定不同的控件类型
- value：input控件内默认的文本值
- name：一组控件的共同名称
- checked：定义控件默认被选中的项
- size：设置宽度（CSS代替）
- maxlength：最大的输入字数（JS正则表达式替代）
input控件类型
- text：普通文本
- password：加密文本
- radio：单选按钮（三个sex单选按钮要命名同一个name才会起到单选的效果）
- checkbox：复选按钮（也应命名相同name）
- button：普通按钮
- submit：提交按钮
- reset：重置按钮
- image：图像形式的提交按钮
- file：文件域（例如上传图像）
textarea标签
- 单词：textarea
- 特点：多行文本域
- 使用：<textarea cols='100' rows='100'></textarea>
- 属性值如下
- cols：每行的字符数
- rows：显示的行数
下拉菜单
- 单词：select，option
- 特点：多个下拉选项
- 使用：<select> <option value=''>1990</option> </select> （可用JS里的循环进行赋值）
- 属性值如下
- selected：selected为默认选中值
label标签
- 单词：label
- 特点：为input控件服务,点击内部文字，光标进入input控件
- 使用：<label> 用户名：<input type='text' /> </label>
- 属性值如下
- for：不管点标签内部的哪段文字，都会定位到某个设置了id（="pwd"）的input标签（input标签可在label外）
表单域
- 单词：form
- 特点：reset可以重置表单数据，submit可以提交表单数据
- 使用：<form>表单控件</form>
- 属性值如下
- action：接受并处理表单数据的服务器的url地址（action="demo.php"）
- method：设置表单数据的提交方式，get或post（当input控件命名了name以后get提交会显示数据，post匿名提交）
- name：指定表单的名称，区分一个页面中的多个表单