前端基础（9）：表单、表格书写方法（后台管理系统）

最新推荐文章于 2024-07-19 15:50:46 发布

抽屉里面放枫叶（Breeze_qi）

最新推荐文章于 2024-07-19 15:50:46 发布

阅读量956

点赞数

文章标签： css java html python html5

本文链接：https://blog.csdn.net/Quick_only/article/details/108290430

版权

一、表单的高级标签语法及应用场景

表单的组成

表单域 <form name="" method="" action=""></form>
表单控件 <input type="text" value=""/>
提示信息 <label for=""></label>

1、表单字段集

 <fieldset></fieldset>

功能：相当于一个方框，在字段集中可以包含文本和其他元素。
该元素用于对表单中的元素进行分组并在文档中区别标出文本。
fieldset元素可以嵌套，在其内部可以在设置多个fieldset对象。

2、字段集标题

<legend></legend>

功能：legend元素可以在fieldset对象绘制的方框内插入一个标题。
legend元素必须是fieldset里的第一个元素。

3、提示信息标签

<label for="绑定控件id名"></label>

功能：label元素用来定义标签，为页面上的其他元素指定提示信息。
要将label元素绑定到其他的控件上，可以将label元素的for属性设置为与该控件的id属性值相同。

4.表单元素

增加：<input type=“hidden”value = “”> （在页面中不显示、value值可记录数据）

补充：select checkbox radio textarea image file

    <select>
                <option></option>
    </select>
<textarea></textarea>
<input type="image" src="" />
<inpurt type="file" />
<input name="" type="radio  " checked="checked" >
<input name="" type="checkbox " disabled="disabled">

属性：checked disabled enabled

二、表格的css属性及应用

表格的作用：显示数据;

1、单元格间距

border-spacing:value;(该属性必须给table添加)

2、合并相邻单元格边框

border-collapse:separate(边框分开)/collapse(边框合并)；

3、无内容单元格显示、隐藏

empty-cells:show/hide;

4、表格布局算法(加快运行的速度)

table-layout:auto/fixed(固定宽高，不会随内容多少改变单元格宽)

5、表格标题

<caption>标题内容</caption>

表格标题位置：caption-side:top/right/bottom/left
说明：left,right位置只有火狐识别，top,bottom IE6以上版本支持，ie6以下版本不支持其它属性值，只识别top;

6、表格布局元素

表格基本组成

table（表格） tr（行） td（单元格） caption(表格标题)
th:表格列标题（放在tr里）

7、表格重要属性（html）

1）colspan=“value” 合并列

2）rowspan=“value” 合并行

3）valign=“top/bottom/middle/baseline” 垂直对齐方式

4）rules=“rows/cols/all/none/groups” 添加组分隔线

说明：
rows:位于行之间的线条
cols:位于列之间的线条
all：位于行和列之间的线条
none:没有线条
groups:位于行组和列组之间的线条

8、数据行分组

<thead></thead>      表头
<tbody></tbody>      表体
<tfoot></tfoot>      表尾

说明：一个Table中，只能包含一个thead,一个tfoot,但可包含多个tbody。

9、数据列分组

<colgroup span="value"></colgroup>
<col     span="value" />

说明：
1）col和colgroup元素会根据从左到右的顺序依次对数据表格进行分组。
2）span属性显示指定相邻几列组成一组，span属性值默认为1，默认时仅定义一列为一组。
3）可以通过给table添加rules="groups"属性来给分组列添加组分割线。
注意：虽然col和colgroup具有相同的功能，但是，我们只能使用colgroup元素来决定表格内容部分分割线（rules）应该处于的位置，而col没有这个功能。