20191105 前端学习总结

Posted 2020-11-22 wardenclyffe

20191105学习总结
（一）列表合并
1.colspan： 横向合并，列合并
2.rowspan： 纵向合并，行合并
3.th：表头 会加粗，同时样式居中
td
th → tr → .....
td
td
tr → .....
td
4. table → tbody → ..........
td
tr → .....
td

td
tfoot → th → .....
td

5.border-collapse:collapse; 边框双实线变为单实线。
边框塌陷

6.*相比flex，表格布局的局限性很大。

（二）表单：form
1.<form action="#" method="get">
action提交路径 method提交的方法 get/post
<imput type="text" placeholder="提示文字">
文字框
"password" maxlength="6"
密码 输入的最大长度为6
......
"submit"
提交按钮
<imput type="button" value="按钮上的字">
<button>按钮上的字</button>
可发起提交的按钮
<input type="reset">
重置，但不等于清空。

2.二选一
<lable for="male">男</lable>
<input type="radio" name="gender" id="male">
<lable for="male">女</lable>
<input type="radio" name="gender" id="female">
男女二选一，交互更友好，点击文字即可。
lable不是表单控件，仅仅为了交互，扩大点击范围。

3.选择项
n1<input type="checkbox" name="...">
多选择项
n2<input type="checkbox" name="..." checked>
特殊属性|标志性属性 （即默认勾选）
n2默认勾选

4.标志性属性
form表达里后面加上readonly，表示只读，表示只能看，不能改。
form表达里后面加上disabled，表示禁用。
checked

5.下拉列表
<select>
<option value="">北京</option>
<option value="">天津</option>
<option value="">东京</option>
</select>

6.多行文本框
<textarea cols="30" rows="10">
</textarea>
边框可变的文本框
在css设置 resize:none;
边框不可变的文本框

7.上传文件
<input type="file">

（三）html5的新增控件
1.color
2.email
3.date

（四）隐藏
1.display:none 连位置也不保留
2.visiblity:hidden 位置保留
3.rgba( , , , a) a表示透明度，0表示隐藏。
4.opacity=0 表示透明，可用来隐藏元素（一般不常用）。

（五）溢出隐藏
overflow:hidden;
蒙版图中：
translation:all linear .5s 用来0.5秒过渡
cursor:pointer 手型
4.