一、Form表单补充(收集用户信息)
1.button按钮(不进行提交)
1)语法1:<input type="button" value="按钮内容" />
2)语法2:<button type="button(普通按钮)/submit(默认值提交按钮)/password(密码)">按钮上的内容</button>
2.radio单选按钮
1)语法:<input type="radio" name="名字">
<input type="radio" name="名字">单选按钮必须要有name属性,并且一组单选按钮name属性的属性值相同,系统会默认为这是一组单选按钮
3.checkbox复选框
1)语法:<input type="checkbox" />吃饭
<input type="checkbox" />睡觉
<input type="checkbox" />打豆豆
4.多行文本框(文本域)
1)语法:<textarea cols="字符宽度" rows="行数"></textarea>
注:一般不用cols和rows设置宽高,给textarea起class名设置样式(宽高)
阻止浏览器对窗口的拖动设置:{resize:none;}(css属性)
5.列表和菜单
1)下拉菜单语法:<select>
<option>选项一</option>
<option>选项二</option>
......
</select>
2)下拉列表语法:<select size="行数">
<option>选项一</option>
<option>选项二</option>
......
</select>
6.上传文件框
文件域:<input type="file" />
7.form属性
1)checked="checked"默认选中
2)disabled="disabled"禁用
注:上面所有的都成为表单元素,表单元素要写在表单域里。
二、表单高级
1.表单的组成:表单域、表单元素、提示信息
表单域<form name="" method="" action=""></form>
表单元素<input type="" value="" />
提示信息如:用户名 密码
2.提示信息标签<lable></lable>
1)lable元素用来定义标签,为页面上的其他元素指定提示信息;要将lable元素绑定大其他的控件上,可以将lable元素的for属性;设置为与该控件的id属性值相同。
<input type="button" value="按钮内容" id="name" /><lable for="name">按钮</lable>
3.表单字段集<fieldset></fieldset>
1)相当于一个方框,在字段集中可以包含文本和其他元素;该元素用于对表单中的元素进行分组并在文档中区别标出文本;fieldset元素可以嵌套,在其内部可以在设置多个fieldset对象。
4.字段集标题<legend></legend>
1)legend元素可以在fieldset对象绘制的方框内插入一个标题;legend元素必须是fieldset内的第一个元素
5.图像域
1)语法:<input type="image" src="相对路径" width="" height="">
三、表格高级(显示数据)
(一)关于表格的css属性
1.单元格间距border-spacing:value;(该属性必须给table添加);
2.合并相邻单元格边框border-collapse:separate(边框分开)/collapse(边框合并);
3.无内容单元格的显示或隐藏empty-cells:show(显示)/hide(隐藏);
4.表格布局算法(加快运行的速度,但不够灵活)
table-layout:auto/fixed(固定宽度,不会随内容多少改变单元格宽度)
说明:
自动表格布局:列的宽度是由列单元格中没有折行的最宽的内容设定的;
缺点:较慢(因为他需要在确定最终布局钱访问表格中的所有内容);
优点:灵活;
固定表格的布局
优点:加快运行速度,允许浏览器更快的对表格进行布局;
缺点:不够灵活
5.表格标题<caption>标题内容</caption>
1)表格标题位置:caption-side:top/right/bottom/left
left/right/top/bottom位置只有火狐识别,top,bottomIE7以上版本支持,IE7及以下版本不支持其他属性,只识别top;
6.表格布局元素
1)表格的基本组成:table(表格) tr(行) td(列) th(表格列标题)放在tr里
<table>
<tr>
<th>表格列标题</th>
</tr>
</table>
(二)HTML里table的重要属性
1.合并行和列:
1)colspan=“value” 合并列 横向合并
2)rowspan=“value” 合并行 纵向合并
3)valign=“top/bottom/middle”垂直对齐方式
align=“left/center/right”水平对齐方式
2.rules=“rows/cols/all/none/groups” 添加分割线
1)rows:位于行之间的线条
2)cols:位于列之间的线条
3)all:位于行和列之间的线条
4)none:没有线条
5)位于行和列组之间的线条
3.数据行分组:<thead></thead>(表头)、<tbody></tbody>(表体)、<tfoot></tfoot>(表尾)
1)一个table中,只能有一个thead,一个tfoot,但可以包含多个tbody。
4.数据列分组<colgroup span="value"></colgroup>
1)colgroup元素会根据从左到右的顺序依次对数据表格进行列分组;
2)span属性显示指定相邻几列组成一组,span属性值默认为1,默认时仅定义一列为一组;
3)可以通过给table添加rules=“groups”属性来给分组列添加组分割线。
(三)CSS结构伪类选择器
1.nth-child()
1)tr:nth-child(n)选择器匹配属于其父元素的第N个子元素,不论元素类型;
2)tr:nth-child(2n-1){}
odd 奇数/even 偶数
四、BFC
1.BFC(Block formatting context)直译为“块级格式化上下文”。
1)它是一个独立的渲染区域,只有Block-level box(块)参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干;
2)是Web页面中盒模型布局的CSS渲染模式;它的体系属于常规文档流。
2.BFC的布局规则
1)内部的Box会在垂直方向,一个接一个地放置;
2)Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠;
3)每个元素的margin box的左边, 与包含块border box的左边相接触;
4)BFC的区域不会与float box重叠;
5)BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素;
6)计算BFC的高度时,浮动元素也参与计算。
3.哪些元素或属性能触发BFC
1)根元素(html)
2)float属性不为none position为absolute或fixed
3)display为inline-block, table-cell, table-caption, flex, inline-flex
4)overflow不为visible
4.BFC的作用
1)自适应两栏布局
2)清除内部浮动
3)防止margin上下重叠