昨天学不致用的 表格table 和 表单form~ →差点怀疑灵活的思维离我远去了

原创 lucialiu 随笔 前端基础学习 399阅读 2017-11-23 01:44:33 举报

每天都是鼓舞着学习的士气开始的,昨天到做练习时莫名蒙圈的卡死到差点吐血,准备叹个气的,但下凡渡劫叹气怕仙气跑了不利于功德圆满~

已经开始做整站页面了,赶紧先复习下表格和表单吧,吃透了才好少点坎坷,像Mr.duoduo说的一样,磨刀不误砍柴工。

**表格table**
    **表格标签:**
        表格table
            表格头thead
                自定义表头th
            表格主体tbody
                表格行tr
                    元素定义表格单元td

    **表格样式重置:**
        单元格间隙合并 
            table{border-collapes:collapes;}    
        重置单元格默认填充 
            th,td{padding:0;}

    **单元格合并:**
        合并列:
            colspan属性规定单元格可跨越的列数
             (eg:    <td colspan="2"></td> <!--这个元素定义表格单元开始往右合同两列-->) 
            rowspan属性规定单元格可跨越的行数
             (eg:    <td rowspan="2"></td> <!--这个元素定义表格单元开始往下合同两行-->) 

**表单控件**
    form表单
        action 数据提交的地址
        method 提交类型
            get
            post
        所有的表单控件都需要被form包裹
        form可以包裹多个表单控件

        <input type="……" name="" value="" />
        键值对:
            name属性,提交数据时显示的字段(参数)
            value提交数据时具体的值

        input的type有:
            文本框text
            密码password
            单选radio(讲通类型的radio设置同一个name就可以达到互斥的效果)
            复选(多选)checkbox
            提交submit
            重置reset
            按钮button
            上传file
            隐藏hidden

        input的默认样式:
            默认有padding需要重置为0
            按钮类型的表单控件边框不占位置

        label 标签为input  元素定义标注
            eg:
                <input type="checkbox" name="" id="a"/>
                <label for="a">……</label>

        checked 在页面加载时默认选定的input元素
            eg:蛙泳是默认选中状态
                <form>
                    <input type="checkbox" name="" value="" checked="" />蛙泳
                    <input type="checkbox" name="" value=""/>蝶泳
                    <input type="checkbox" name="" value="" />自由泳
                    <input type="checkbox" name="" value="" />仰泳
                </form>

         disabled属性规定禁用input元素
             eg.蛙泳是禁用状态
             <form>
                <input type="checkbox" name="" value="" disabled="" />蛙泳
                <input type="checkbox" name="" value=""/>蝶泳
                <input type="checkbox" name="" value="" />自由泳
                <input type="checkbox" name="" value="" />仰泳
            </form>

         下拉选框
              <select>
                <option></option>
                <option></option>
              </select>
            对高度的支持不兼容
            所设置的宽度是包含边框的大小的

         文本域textarea
            各个浏览器下的默认滚动条显示不兼容

以下是昨天老师给的表格的练习和表单的练习:

1.如图:

a.表格练习图

昨天学不致用的表格table和表单form~→差点怀疑灵活的思维离我远去了

【主要也就是学以致用,学到的表格标签的嵌套结构、清th和td的默认padding、单元格间隙合并的新知识应用到练习中】

以下是我的代码(但不知道为什么中间的空格在我网页看的时候是没有的,在这里预览就有了,求大家帮我解答下o(╥﹏╥)o)html 代码

下面是我自己代码chrome下的效果

昨天学不致用的表格table和表单form~→差点怀疑灵活的思维离我远去了

b.表单之网易邮箱注册界面

昨天学不致用的表格table和表单form~→差点怀疑灵活的思维离我远去了

下面是我的代码(因为图片和背景都是绝对路径,所以当前点击查看是没有办法看到我写的效果,不知道哪位大神可以为我解答下o(╥﹏╥)o)
html 代码

【除了表单部分,其他的都是经常在做的内容了【主要用到的知识:盒模型、自定义列表、定位、浮动、清浮动、表单】,记住了老师讲的关于标题的黑科技,简直是棒棒哒

第二遍写的时候,不知道是中英文符号的问题还是怎么,写的样式就是完全没有实现,重复删除了好几次不能实现的代码,有心德的给我安利下呗~
下图是带色块的效果图

昨天学不致用的表格table和表单form~→差点怀疑灵活的思维离我远去了
下图是去掉色块的效果图

昨天学不致用的表格table和表单form~→差点怀疑灵活的思维离我远去了

心得:老师讲知识点的时候,觉得完全听懂了,写笔记的时候,就开始迷糊不知道是些什么,其实是单词太多,听得时候是新的知识,没有立即做好分类,在抄过笔记做过两遍练习之后,现在来复习就已经很清楚了,开始是因为完全没有看清哪个是标签,哪个是属性值。。完全是笔记漏洞,以后得根据老师的举例来写笔记以便于能够快速总结~

夜真的很深了,下课回来就洗漱下,擦来不及擦,面膜来不及贴就赶紧总结了,写完就快2点了,明天的元气就靠咖啡了,加油呀明天的QQ音乐

评论 ( 11 )
最新评论
lucialiu 10F 2017-12-03 06:22:06 11F

哇塞,原来可以这样子呀,谢谢你哦

nyy3723 9F 2017-12-01 10:18:17 10F

写笔记的时候 先上传图片 会生成一个对应的链接 用那个链接就可以了 我笔记中都是这么用的

lucialiu 1F 2017-11-30 00:36:06 9F

有图片服务器可以介绍的吗?

lucialiu 3F 2017-11-30 00:35:35 8F

lucialiu 4F 2017-11-30 00:34:59 7F

lucialiu 5F 2017-11-30 00:34:34 6F

bushibumie 2017-11-29 14:22:34 5F

freezyh 2017-11-25 22:36:13 4F

17317830002 2017-11-24 15:43:51 3F

哇哦~

TwoDogCode 2017-11-23 10:25:35 2F

你们哪个学校的???

nyy3723 2017-11-23 09:39:46 1F

可以先上传图片 用链接的形式