HTML的列表和表格标签
柳北ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景,ssl证书未来市场广阔!成为
成都创新互联公司的ssl证书销售渠道,可以享受市场价格4-6折优惠!如果有意向欢迎电话联系或者加微信:18982081108(备注:SSL证书合作)期待与您的合作!目录
- HTML的列表和表格标签
- 一、列表标签
- 1、无序列表ul、li
- 2、有序列表ol、li
- 3、自定义列表dl、dt、dd
- 应用场景:
- 代码片段:
- 结果截图:
- 显示特点:
- 注意事项:
- 二、表格标签
- 1、表格基本标签table、tr、td
- 2、表格相关属性border、width、height
- 3、表格标题caption和表头单元格标签th
- 4、表格的结构标签(了解即可)
一、列表标签
1、无序列表ul、li
代码片段:
水果列表
结果截图:
显示特点:
注意事项:
- ul标签里只允许包含li标签
- li标签可以包含任何内容
2、有序列表ol、li
代码片段:
成绩排行榜
- 小A:100分
- 小B:80分
- 小C:60分
结果截图:
显示特点:
注意事项:
- ol标签里只允许包含li标签
- li标签可以包含任何内容
3、自定义列表dl、dt、dd
应用场景:
代码片段:
- 帮助中心
- 账户管理
- 购物指南
- 订单操作
结果截图:
显示特点:
注意事项:
- dl标签里只允许包含dt/dd标签
- dt/dd标签可以包含任何内容
二、表格标签
1、表格基本标签table、tr、td
代码片段:
姓名 | 成绩 | 评语 |
小A | 100分 | 小A真棒 |
小B | 100分 | 小B真棒 |
总结 | 都很厉害 | 都很厉害 |
结果截图:
注意事项:
2、表格相关属性border、width、height
属性名 | 属性值 和相关说明 |
---|
border | 数字,边框宽度 |
width | 数字,表格宽度 |
height | 数字,表格高度 |
代码片段:
结果截图:
注意事项:
3、表格标题caption和表头单元格标签th
应用场景:
在表格中表示整体大标题和 每一列的小标题
代码片段:
结果截图:
注意事项:
- th也是单元格的一种,用于替换td。快捷操作方式为选中d,再ctrl+d选中下一个,每次点击d,选完六个以后即可一起更换为h。
- caption标签写在table标签内部
4、表格的结构标签(了解即可)
标签名 | 名称 |
---|
thead | 表格头部 |
tbody | 表格主体 |
tfoot | 表格底部 |
代码片段:
学生成绩单姓名 | 成绩 | 评语 |
---|
小A | 100分 | 小A真棒 |
小B | 100分 | 小B真棒 |
总结 | 都很厉害 | 都很厉害 |
结果截图:
注意事项:
- 表格的结构标签可以省略
- 表格结构标签内部用于包裹tr标签
注:只作为上课总结,如有写的不对的地方欢迎探讨。
你是否还在寻找稳定的海外服务器提供商?创新互联www.cdcxhl.cn海外机房具备T级流量清洗系统配攻击溯源,准确流量调度确保服务器高可用性,企业级服务器适合批量采购,新人活动首月15元起,快前往官网查看详情吧
分享题目:学习HTML的第三天-创新互联
新闻来源:
http://chengdu.cdxwcx.cn/article/dopcej.html