表格和表单的相关笔记

HTML表格

表格的格式

表格的结构分解

table：表格
行：tr;
列：td;
表头：th;
不按照表格格式写则表格无效只显示文本

表格的常用属性

表格的边框
- border：边框
- 一般加到table标签中；
- <t able border="1px">
  
  </table>
- 生成的单元格有间距：如何消除
- cellspacing：
  - cell：单元格；spacing：间距
  - cellspacing=“0”消除了单元的间距
cellpadding:一般加到table标签中
- cell：单元格；padding：填充
- 单元格填充：设置单元格内容与单元格边框的距离
- cellpadding=“5px”；
height：行高；
- 给tr设置
- 列：<tr height="34px">
width：列宽；
- 给td设置；
- 列：<td width="23px">
==注意对于同一列的单元格如果设置了不同的宽度最终的宽度取决于最宽的单元格，==
bgcolor：背景色
- 可以给整个表格设计；一可以针对单个单元格；亦可以给整行设置；
- background=bg
bordercolor:单元格颜色
- border：边框；color：颜色
- ==只能给table标签设置==
background：背景
- 给table标题设置
- 优先于bgcolor设置了background则bgcolor不生效了
align：对齐方式
- align=“center”：居中对齐
- 左对齐
- 右对齐
- 放在table下是整个表格居中，放到tr下才是每一行内容居中

使用快捷键生成表格

快捷方式的时候不要加空格否则无法正常生成；

表格快捷生成.png
- 排序为占位符{}跟在td后面
==快选操作按住Alt不松拖动鼠标==

==单元格合并==

列合并：列：ｃｏｌｓｐａｎ＝＂合并的列数＂将合并后多余的单元格删除
行合并：列：ｒｏｗｓｐａｎ＝＂合并的列数＂将合并后多余的单元格删除；

表格补充

表格结构
- thead页眉
- tbody主体
- tfoot页脚
- th和td的区别在于，th可以自动加粗居中；
- 上面三个可以不使用
- colgroup:列分组标签

表单

表单的概念

专用收集用户输入信息的单子,简称为表单

表单的格式

<form action="" method="post">
        <input type="submit" value=""/>
    </form>

表单 : form
action : 将收集的信息提交到哪里?
method : 提交信息的方式;
input : 用于手机用户输入的信息

常用的表单项

     <!-- 
      input : 
            text :用于收集普通的文本输入
                type : 输入项的类型[必选]
                name : 收集项的名称[必选] 如果设置name属性,将不会被提交
                value : 用来盛放用户输入的内容[必选]
            password : 用于收录用户输入的密码,以密文显示
                type : 输入项的类型[必选]
                name : 收集项的名称[必选]
                value : 用来盛放用户输入的内容[必选]
            email : 邮箱 ,用来收集用户输入的邮箱信息
                type : 输入项的类型[必选]
                name : 收集项的名称[必选]
                value : 用来盛放用户输入的内容[必选]
            date : 日期 ,用来收集用户输入的时间信息
                type : 输入项的类型[必选]
                name : 收集项的名称[必选]
                value : 用来盛放用户输入的内容[必选]
            number : 数字 ,用来收集用户输入的数字信息
                type : 输入项的类型[必选]
                name : 收集项的名称[必选]
                value : 用来盛放用户输入的内容[必选]
            file : 文件 ,用来收集用户选择的文件信息
                type : 输入项的类型[必选]
                name : 收集项的名称[必选]
                value : 用来盛放用户输入的内容[必选]
            radio : 单选框 使用name属性加以限制
               type : 输入项的类型[必选]
               name : 收集项的名称[必选]
               value : 用来盛放用户输入的内容,value直接赋值[必选]
               设置默认值 : checked
            checkbox : 多选框,使用name属性限制
                type : 输入项的类型[必选]
                name : 收集项的名称[必选]
                value : 用来盛放用户输入的内容,value直接赋值[必选]
                设置默认值 : checked
            select-option 下拉选项
                <select name="address">
                    <option value="">请选择</option>
                    <option value="">北京市</option>
                    <option value="">河南省</option>
                    <option value="">四川省</option>
                    <option value="">广东省</option>
                    <option value="">广西省</option>
                </select>
                option : 选项 
                value : 直接赋值;
                展示的内容在双标签的中间来写;
                设置显示的默认值 : selected
            textarea :文本域 ,用来收集用户输入较多的描述内容
                row : 行数
                col : 列数
                name : 
                value : 
            button : 按钮 ,在页面上显示一个按钮
                name : 
                value:
            submit : 提交 ,用于提交输入的信息
                value : 显示按钮的名称
            reset : 重置,用于清空用户输入的所有信息
                value : 显示按钮的名称
      -->