每天都是鼓舞着学习的士气开始的,昨天到做练习时莫名蒙圈的卡死到差点吐血,准备叹个气的,但下凡渡劫叹气怕仙气跑了不利于功德圆满~
已经开始做整站页面了,赶紧先复习下表格和表单吧,吃透了才好少点坎坷,像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.表格练习图
【主要也就是学以致用,学到的表格标签的嵌套结构、清th和td的默认padding、单元格间隙合并的新知识应用到练习中】
以下是我的代码(但不知道为什么中间的空格在我网页看的时候是没有的,在这里预览就有了,求大家帮我解答下o(╥﹏╥)o)html 代码
下面是我自己代码chrome下的效果
b.表单之网易邮箱注册界面
下面是我的代码(因为图片和背景都是绝对路径,所以当前点击查看是没有办法看到我写的效果,不知道哪位大神可以为我解答下o(╥﹏╥)o)
html 代码
【除了表单部分,其他的都是经常在做的内容了【主要用到的知识:盒模型、自定义列表、定位、浮动、清浮动、表单】,记住了老师讲的关于标题的黑科技,简直是棒棒哒
第二遍写的时候,不知道是中英文符号的问题还是怎么,写的样式就是完全没有实现,重复删除了好几次不能实现的代码,有心德的给我安利下呗~
下图是带色块的效果图
下图是去掉色块的效果图
心得:老师讲知识点的时候,觉得完全听懂了,写笔记的时候,就开始迷糊不知道是些什么,其实是单词太多,听得时候是新的知识,没有立即做好分类,在抄过笔记做过两遍练习之后,现在来复习就已经很清楚了,开始是因为完全没有看清哪个是标签,哪个是属性值。。完全是笔记漏洞,以后得根据老师的举例来写笔记以便于能够快速总结~
夜真的很深了,下课回来就洗漱下,擦来不及擦,面膜来不及贴就赶紧总结了,写完就快2点了,明天的元气就靠咖啡了,加油呀明天的QQ音乐
评论 (11 )
最新评论
哇塞,原来可以这样子呀,谢谢你哦
写笔记的时候 先上传图片 会生成一个对应的链接 用那个链接就可以了 我笔记中都是这么用的
有图片服务器可以介绍的吗?
哇哦~
你们哪个学校的???
可以先上传图片 用链接的形式