表格表单基础及进阶
持续更新中…
学习目标
1、表格的作用
2、表格的基本语法
3、表格的使用
4、表单的作用
5、表单的使用
1.表格的作用及基本语法
表格的作用:显示数据
table>tr>td: 表格>行>单元格
thead 表头
tbody 表体
tfoot 表尾
[注意]表头和表尾只有一个,表体可以有多个
th 单元格标题 文本加粗 上下左右都居中
2.数据表格补充及css属性
新增加:
border-spacing 单元格之间的间距;
[注]必须给table添加
border-collapse:是否合并为单边框
separate 默认值
collapse 合并为单边框
table-layout 表格布局算法
auto 自适应
fixed 固定宽度
colgroup:列分组标签
span="几列为一组"
col:列分组标签细化,写在colgroup标签里面
rules="组分割线"
groups 组分割线
rows 行分割线线
cols 列分割线
all 行和列分割线
none 没有分割线
[注]只能给table添加
2.表单的作用和表单的使用
label:关联标签
增加按钮的点击范围
使用label标签的for属性值和input标签的id值一样,即可增加按钮的点击范围,列如
<label for="woman"><input type="radio" name="sex" id="woman" value="gril">女</label>
radio 单选按钮
[注]同组的单选按钮的name值需要一致.进行互斥
CheckBox 多选按钮 name的值必须一样
disabled="disabled"禁用
enabled="可用"
checked="checked"选中
hidden 隐藏文本框
复选按钮
<!-- 复选框 -->
兴趣爱好
<!-- checked选中 -->
<input type="checkbox" name="hobby" checked disabled>唱歌
<input type="checkbox" name="hobby">跳舞
<input type="checkbox" name="hobby">玩游戏
<input type="checkbox" name="hobby">写代码
单选按钮
<!-- 单选框 -->
<label for="woman"><input type="radio" name="sex" id="woman" value="gril">女</label>
<input type="radio" name="sex" id="" value="boy">男<br>
下拉菜单
select>option 下拉菜单 >选项
selected="默认选中"
下拉框
<select>
<!--disabled禁用 -->
<option value="" disabled>长沙</option>
<!-- selected 默认选中-->
<option value="" selected>怀化</option>
<option value="">岳阳</option>
<option value="">深圳</option>
</select>
文本域
textarea:cols="字符宽度" rows="行数"
rows默认10行
默认可用拖拽
resize: none; 不可以拖拽
<!-- 文本域 -->
自我介绍
<!-- resize: none; 不可以拖拽-->
<textarea name="" id="" cols="30" rows="10" style="resize: none;">
</textarea>
文件上传域
<!-- 文件上传 -->
<!--multiple文件上传多个,如果没有带这个属性,则一次性只能写一个 -->
文件上传<input type="file" multiple="multiple">
图片提交按钮
<!-- 图片提交按钮 -->
图片提交按钮 <input type="image" src="tb.jpg">
fieldset
fieldset>legend :表单字段级>表单字段级标题
[注]在一个fieldset中,只有一个legend,不能出现多个legend
扫描二维码关注公众号,回复:
16326941 查看本文章