表单
表单控件 :
method - 提交方式
action - url地址
<input type="text" value=""/> 文本
<input type="password" value=""/> 密码
<input type="button" value=""/> 空按钮
<input type="submit" value=""/> 提交
<input type="reset" value=""/> 重置
<input type="checkbox" checked="checked" disabled="disabled"/> 复选按钮
<input type="radio" name="rel"/> 单选
<input type="hidden" name="rel"/> 隐藏
内联可置换元素 - 下拉菜单
<select >
<option>下拉选项1</option>
<option>下拉选项2</option>
</select>
表单多行文本域
语法:
<textarea name="" cols="" rows="" > </textarea>
说明:
多行文本。rows属性和cols属性用来设置文本输入窗口的高度和宽度,单位是字符。
阻止浏览器对窗口的拖动设置:{resize:none;}(css属性)
表单字段集
语法:
<fieldset></fieldset>
说明:
相当于一个方框,在字段集中可以包含文本和其他元素。该元素用于对表单中的元素进行分组并在文档中区别标出文本。 fieldset元素可以嵌套,在其内部可以在设置多个fieldset对象。disabled定义空间禁制可用;
字段级标题
语法:
<legend align="left/right/center"></legend>
说明:
legend元素可以在fieldset对象绘制的方框内插入一个标题。legend元素必须是fieldset内的第一个元素
提示信息标签
语法:
<label for="绑定的id名字"></label>
说明:
label元素用来定义标签,为页面上的其他元素指定提示信息。要将label元素绑定到其他的控件上,可以将label元素的for属性设置为与该控件的id属性值相同。
上传文件框
语法:
<input type="file"/>
说明:
type属性值新增的类型有:file文件类型,可进行文件的选择
表格
基本结构
<table>
<tr>
<td></td>
</tr>
</table>
列标题
语法:
<th></th>
说明:
th标记表示表格内的表头单元格,是单元格标题;
表格标题
语法:
<caption></caption>
caption-side:top/right/bottom/left
说明:
定义表格的caption对象放于表格的哪个位置,与caption对象一起使用;
top为默认值;
left,right位置只有火狐识别,
top,bottom IE6以上版本支持,IE6以下版本不支持其它属性值,只识别top;
数据行分组
语法
<thead></thead>表头
<tbody></tbody>表体
<tfoot></tfoot>表尾
提示
在默认情况下这些元素不会影响到表格的布局。不过,可以使用 CSS 使这些元素改变表格的外观。
详细描述: thead、tfoot 以及 tbody 元素使我们有能力对表格中的行进行分组。
当创建某个表格时,也许希望拥有一个标题行,一些带有数据的行,以及位于底部的一个总计行。
数据列分组
语法
<colgroup span="value"></colgroup>双标签
<col span="value" />单标签
说明:
1.col和colgroup元素会根据从左到右的顺序依次对数据表格进行分组。
2.span属性显示指定相邻几列组成一组,span属性值默认为1,默认时仅定义一列为一组。
Firefox、Chrome 以及 Safari 仅支持 colgroup 元素的 span 和 width 属性
3.可以通过给table添加rules="groups"属性来给分组列添加组的分割线。
表格设置
1、cellspacing="单元格与单元格之间的间距"
2、cellpadding=“单元格与内容之间的距离"
3、align="表格水平对齐方式" 取值:left、right、center、 valign=“垂直对齐” topottommiddle
4、合并单元格属性:(td) 合并列: colspan=“所要合并的单元格的列数" 合并行: rowspan=“所要合并单元格的行数”
css设置
单元格间距
语法:
border-spacing:value
说明:
单元格间距(该属性必须给table添加)
表示单元格边框之间的距离
不可取负值
合并相邻单元格边框
语法:
border-collapse:separate/collapse;
说明:
作用:
合并相邻单元格边框 (该属性必须给table添加)
separate(边框分开)默认值;
collapse(边框合并)
无内容时单元格的设置
语法:
empty-cells:show/hide;
说明:
定义当单元格无内容时,是否显示该单元格的边框区域; show:显示 ;hide:隐藏;
显示单元格行和列的算法(加快运行的速度):
语法:
table-layout:auto/fixed
说明:
自动表格布局:列的宽度是由列单元格中没有折行的最宽的内容设定的。
缺点:较慢(因为它需要在确定最终的布局前访问表格中的所有内容)。
优点:灵活 固定表格布局 优点:加快运行的速度,允许浏览器更快的对表格进行布局。 缺点:不太灵活