【博学谷学习记录】超强总结,用心分享|列表表格总结

发布于:2022-12-30 ⋅ 阅读:(408) ⋅ 点赞:(0)

大家好,一周的学习时间又过去了,这次来分享关于表格和列表的相关内容,希望大家能有所收获!

列表包含无序列表、有序列表和自定义列表

无序列表: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属性删除即可

好了,关于表单和表格的内容就分享到这里了,希望大家都有自己的收获,下次见啦!