大家好,一周的学习时间又过去了,这次来分享关于表格和列表的相关内容,希望大家能有所收获!
列表包含无序列表、有序列表和自定义列表
无序列表:ul标签中只允许嵌套li标签,li标签中可以嵌套任意内容
有序列表:ol标签中只允许包含li标签,li标签可以包含任意内容
自定义列表
dl标签:表示自定义列表的整体
dt标签:表示自定义列表的主题
dd标签:表示对于主题的每一项内容
我们完成一个简单的表格,需要由几个标签组成呢
• table标签:表格整体
• thead:表格头部
• tbody:表格主体
• tfoot:表格底部
• tr标签:表格每行 • td标签:对于主题的每一项内容
• width属性:表格整体的宽度
• height属性:表格整体的高度
• border属性:表格边框
• 表格整体大标题:caption标签,书写在table标签内部
•表头单元格:th标签书写在tr标签内部(用于替换td标签)
合并单元格
• rowspan:跨行合并→垂直方向合并 • colspan:跨列合并→水平方向合并
再来说一下表单标签
1. input系列标签
input标签可以通过type属性值的不同,展示不同效果
其中 placeholder 占位符,提示用户输入内容的文本,radio单选按钮 ,相同name单选框为一组,一组同时一个被选中,checked默认选中,file 文件选择 multiple 多文件选择
如果需要实现以上按钮功能,需要配合form标签使用
• form使用方法:用form标签把表单标签一起包裹起来即可
2. button按钮标签
• 谷歌浏览器中button默认是提交按钮
• button标签是双标签,更便于包裹其他内容:文字、图片等
3. select下拉菜单标签
• select标签:下拉菜单的整体
• option标签:下拉菜单的每一项
selected:下拉菜单的默认选中
4. textarea文本域标签
• cols:规定了文本域内可见宽度 • rows:规定了文本域内可见行数
5. label标签
常用于绑定内容与表单标签的关系 标签名:label
使用方法:
1. 使用label标签把内容(如:文本)包裹起来
2. 在表单标签上添加id属性
3. 在label标签的for属性中设置对应的id属性值
或者
1. 直接使用label标签把内容(如:文本)和表单标签一起包裹起来
2. 需要把label标签的for属性删除即可
好了,关于表单和表格的内容就分享到这里了,希望大家都有自己的收获,下次见啦!