表格与表单

表格与表单：
表格：主要用来向用户展示信息
快速创建表格：table>tr*3>td{$}*3 然后tab键快速补全
语法：

---------------表格
--------------表格行
-----单元格


表格的标签属性：（全部写在标签里面）
表格宽度：width
表格高度：height
宽高取值可以是数值+单位（这种情况下可以不写单位px，默认但我诶就是px）
单位也可以是百分数：50%
背景颜色：bgcolor
设置边框：border
水平对其方式：align
取值：left/right/center
单元格与单元格之间间距：cellspacing
内容与单元格之间间距；cellpadding
表格外面显示线：
frame：
取值：
box-------外面四周显示
above-----外面上面的线
below-----外面下面的线
lhs-------外面左侧的线
rhs-------外面右侧的线
表格里买的线如何显示：
rules：
取值：
rows-------显示水平方向的线
cols-------显示垂直方向的线
表格行标签属性：
行的高度：height
行的背景颜色：bgcolor
一行内文本水平对其方式：
align
取值：left/center/right
一行内文本垂直对齐方式
valign
取值：top/middle/bottom
表格单元格标签属性：
宽度：width
高度：height
背景颜色：bgcolor
文本水平对齐方式：
align：
取值：left/center/right
文本垂直对齐方式：
valign
取值：top/middle/bottom

            重要属性：(********************)
                合并单元格：
                    合并行：rowspan=“数值”      
                    合并列：colspan=“数值”
        表格的css属性：
            table上
                宽度：width
                高度：height
                边框：border：1px solid red;
                单元格与单元格间距：border-spacing:数值+单位
                合并单元格边框位细线：border-collapse：collapse（常用）
                表格布局算法：
                    table-layout：
                        取值：
                            auto：单元格宽度随内容而变化
                            fixed：单元格宽度固定不变
            td上：
                边框：border：1px solid red;
                单元格与内容间距：padding：
                隐藏内容为空单元格：empty-cells：hide
        表格中的其他标签：
            1、表格标题标签
                <caption></caption>
                表格标题显示位置：caption-size
                    取值：top/bottom
            2、行分组标签
                表格头：<thead></thead>
                    表格头中包裹th标签，默认样式：文本水平居中，并且有加粗效果
                表格主体：<tbody></tbody>
                表格尾部：<tfoot></tfoot>
                注意：一个表格中只能有一个表格头和一个表格尾
            3、表格中的列分组标签
                <colgroup span="数值"></colgroup>
                span：表格将几列划分成一组

    表单：
        作用：用来收集用户信息，提交到后台。
        语法:<form></form>
            input  type属性
                1、text----------文本输入框
                2、password------密码框
                3、submit  ------提交按钮
                4、reset  ------重置按钮
                5、button------普通按钮
                6、file--------上传文件按钮
                7、hidden------隐藏域（用来上传不被用户知晓的信息）
                8、radio-------单选按钮
                    默认状态下，单选可以实现共选效果，如果想要实现单选效果，只需要给形同的radio添加name属性且name属性取值相同
                    默认被选中状态：checked
                9、checkbox------复选
                    默认选中：checked
                    单选和复选，为了提高用户体验，点击文字实现选中效果，需要借助label标签来实现
                        <input type="radio" id="boy">
                        <label for="boy">男</label>  
            select---------下拉列表
                需要配合option标签一起使用
                详见08-下拉列表.html
                设置默认被选中状态：在option上面添加selected
                设置多选，在select标签上面添加multiple属性（默认显示4个下拉列表项）
                设置下拉列表显示下拉列表项个数，在select上面添加size属性
            textarea-------多行文本输入框
                <textarea name="" id="" cols="30" rows="10"></textarea>
                    cols------控制文本框宽度
                    rows------控制文本框高度
                    实际开发中，我们在css中设置文本框宽高
                    width：   height：
                    多行文本输入框默认用户可以自行拖拽，实际开发中禁用此效果，需要使用resize属性
                        resize：none;
                    textarea标签中有空格和回车会影响页面显示效果
        表单中的其他标签：
            表单字段集：用来将表单元素进行分组
            语法：
                <fieldset>------------------表单字段集
                    <legend></legend>------------表单字段集标题标签
                </fieldset>
        表单提交方式：
            method：
                取值：
                    get------表示明文提交，提交的数据在地址栏可见，不安全，提交数据大小有限制
                    post-----加密提交，提交的数据不可见，比较安全，提交数据大小没有更多的限制
        拓展：
            表单中<button></button>标签会提交表单，并跳转（慎用）