坚持学前端的3day

心血来潮想把一天一天的学习记录下来因此把积累的三天笔记都分别发出来了！

所以日期在同一天 勿怪！

1.表格-展示数据

    1.1结构：

        <table>

            <caption>标题</caption>

            <thead>--头部

                <tr>- table row  行

                    <th></th> table head  特殊的单元格 内容默认水平居中且加粗

                    <th></th>

                    <th></th>

                </tr>

            </thead>

            <tbody>

                <tr>

                    <td></td> table data 列 单元格

                    <td></td>

                    <td></td>

                </tr>

            </tbody>

            <tfoot>

                <tr>

                    <td></td>

                    <td></td>

                    <td></td>

                </tr>

            </tfoot>

        </table>

    1.2属性:(需要写到表格标签table里面)

        table:  align : left / right /center

                valign: middle / top / bottom

                border :默认无边框 px

                bordercolor :边框颜色

                bgcolor:背景颜色

                background:背景图片

                cellpadding: 单元格相对周围元素的对齐方式（字和单元格边边的距离）

                cellspacing :单元格和单元格之间的空白距离 默认为1px

                width

                height

        tr: height :行高

            bgcolor:背景颜色

            background':背景图片

            align : left(默认) / right /center

            valign: top / middle(默认) /bottom

        td: width 设置单元格宽度 同列等宽

            height 高度 同行等高

            bgcolor 背景颜色

            background:背景图片

            align : left(默认) / right /center

            valign: top / middle(默认) /bottom

           

    1.3合并单元格

       水平 / 跨行合并:rowspan -最上侧单元格为目标单元 写合并代码

       垂直 / 跨列合并:colspan -最左侧单元格为目标单元 写合并代码

        1)步骤

         确定跨行还是跨列

         找到目标单元写合并方式和数量

         删除多余单元格

2.表单

    2.1作用

        提交数据到服务端，使页面具有交互性

    2.2标签

        <form action="提交的地址" name="表单名称" method="提交方式,默认get/post">

            <!-- 提交的内容 -->

        </form>

        form:不可以嵌套form

    2.3 get / post 的区别

        1) get 提交数据不安全 会在地址栏中显示 ; post不会显示 安全

        2) get 提交数据大小有限制,最大为2kb; post理论上没有限制

    【计算机基础知识】

        计算机-二进制 0/1

        1B=8bit

        1KB = 1024B

        1MB = 1024KB

    2.4表单元素

        文本框: <input type="text">

        密码框: <input type="password">

        单选框: <input type="radio" name = "">

        多选框: <input type="checkbox">

        隐藏域: <input type="hidden">

        文件: <input type="file">

        提交按钮: <input type="submit" value="当前值">

        重置按钮: <input type="reset" value="当前值">

        没有功能的按钮: <input type="button" value="当前值">

        提交按钮: <button></button>  / 默认type= "submit"

        重置按钮: <button type = "reset"></button>

        没有功能的按钮: <button type = "button"></button>

        下拉列表:

        <select name="名称" id="">

            <option value="当前值">...选项内容</option>

            <option value="当前值">...选项内容</option>

            <option value="当前值">...选项内容</option>

        </select>

        文本域: <textarea name="" id="" cols="30" rows="10">  </textarea>

        提升用户体验 绑定内容和对应的表单控件: <label for="name">内容</label>  label 的for属性和input的id属性一致

   

        2.5 表单元素属性：

        type:设置输入框的类型

        name:设置表单元素名称

        value:当前值

        2.6新增type类型

            邮箱:<input type="email">

            日期：<input type="date">

            周：<input type="week">

            颜色：<input type="color">

            搜索：<input type="search">

还有些 

placeholder 属性 / autofocus属性 / minlength和maxlength属性以及更多的属性将在下一篇笔记中呈现！

谢谢观看 有错误的地方还请指出 立马就改！