学习HTML的第三天-创新互联

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 代码片段：

水果列表我也是一个p标签
榴莲
香蕉
苹果
哈密瓜
火龙果

结果截图：

在这里插入图片描述

显示特点：

列表的每一项前默认显示圆点标识

注意事项：

ul标签里只允许包含li标签
li标签可以包含任何内容

2、有序列表ol、li 代码片段：

成绩排行榜
小A：100分
小B：80分
小C：60分

结果截图：

在这里插入图片描述

显示特点：

列表的每一项前默认显示序号表示

注意事项：

ol标签里只允许包含li标签
li标签可以包含任何内容

3、自定义列表dl、dt、dd 应用场景：

通常用于网页底部导航

代码片段：

帮助中心
账户管理
购物指南
订单操作

结果截图：

在这里插入图片描述

显示特点：

dd前会默认显示缩进效果

注意事项：

dl标签里只允许包含dt/dd标签
dt/dd标签可以包含任何内容

二、表格标签 1、表格基本标签table、tr、td 代码片段：

姓名 成绩 评语
小A 100分 小A真棒
小B 100分 小B真棒
总结 都很厉害 都很厉害

结果截图：

在这里插入图片描述

注意事项：

标签的嵌套关系table >tr >td

2、表格相关属性border、width、height

属性名	属性值和相关说明
border	数字，边框宽度
width	数字，表格宽度
height	数字，表格高度

代码片段：

...

结果截图：

在这里插入图片描述

注意事项：

实际开发时表格推荐使用CSS（更符合规范）

3、表格标题caption和表头单元格标签th 应用场景：

在表格中表示整体大标题和每一列的小标题

代码片段：

...学生成绩单姓名 成绩 评语

结果截图：

在这里插入图片描述

注意事项：

th也是单元格的一种，用于替换td。快捷操作方式为选中d，再ctrl+d选中下一个，每次点击d，选完六个以后即可一起更换为h。
caption标签写在table标签内部

4、表格的结构标签（了解即可）

标签名	名称
thead	表格头部
tbody	表格主体
tfoot	表格底部

代码片段：

学生成绩单姓名 成绩 评语
小A 100分 小A真棒
小B 100分 小B真棒
总结 都很厉害 都很厉害

学生成绩单
姓名	成绩	评语
小A	100分	小A真棒
小B	100分	小B真棒
总结	都很厉害	都很厉害

结果截图：

在这里插入图片描述

注意事项：

表格的结构标签可以省略
表格结构标签内部用于包裹tr标签

注：只作为上课总结，如有写的不对的地方欢迎探讨。

你是否还在寻找稳定的海外服务器提供商？创新互联www.cdcxhl.cn海外机房具备T级流量清洗系统配攻击溯源，准确流量调度确保服务器高可用性，企业级服务器适合批量采购，新人活动首月15元起，快前往官网查看详情吧

网站标题：学习HTML的第三天-创新互联
浏览路径：http://kswjz.com/article/dopcej.html

扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流

学习HTML的第三天-创新互联

扫二维码与项目经理沟通

其他资讯

行业动态

企业网站建设的重要性！

服务项目

网站建设

移动端/APP

微信/小程序

技术支持

其它服务

更多服务项目

联系吧在百度地图上找到我们

电话：13518219792

学习HTML的第三天-创新互联

扫二维码与项目经理沟通

其他资讯

行业动态

企业网站建设的重要性！

服务项目

网站建设

移动端/APP

微信/小程序

技术支持

其它服务

更多服务项目

联系吧 在百度地图上找到我们

电话：13518219792

联系吧在百度地图上找到我们