成都网站建设设计

将想法与焦点和您一起共享

学习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 代码片段:
成绩排行榜
  1. 小A:100分
  2. 小B:80分
  3. 小C:60分
结果截图:

在这里插入图片描述

显示特点:
  • 列表的每一项前默认显示序号表示
注意事项:
  • ol标签里只允许包含li标签
  • li标签可以包含任何内容
3、自定义列表dl、dt、dd 应用场景:
  • 通常用于网页底部导航
代码片段:
帮助中心
账户管理
购物指南
订单操作
结果截图:

在这里插入图片描述

显示特点:
  • dd前会默认显示缩进效果
注意事项:
  • dl标签里只允许包含dt/dd标签
  • dt/dd标签可以包含任何内容
二、表格标签 1、表格基本标签table、tr、td 代码片段:
姓名成绩评语
小A100分小A真棒
小B100分小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表格底部
代码片段:
学生成绩单
姓名成绩评语
小A100分小A真棒
小B100分小B真棒
总结都很厉害都很厉害
结果截图:

在这里插入图片描述

注意事项:
  • 表格的结构标签可以省略
  • 表格结构标签内部用于包裹tr标签

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

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


文章标题:学习HTML的第三天-创新互联
本文来源:http://chengdu.cdxwcx.cn/article/dopcej.html