学习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真棒
总结
都很厉害
都很厉害

结果截图：

注意事项：

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

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

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

网站名称：学习HTML的第三天-创新互联
URL标题：http://www.cdkjz.cn/article/dopcej.html