热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

html中的两种容器,3.HTML中的容器标签

什么是容器标签?在HTML开发中我们常常会使用一类标签作为容器放置一些内容,我们把这类标签称之为容器标签,可以作为容器标签的包括列表标签、

什么是容器标签?在HTML开发中我们常常会使用一类标签作为容器放置一些内容,我们把这类标签称之为容器标签,可以作为容器标签的包括列表标签、表格标签、框架标签、布局标签,在这里我们就来总结下这些内容。

列表标签

3350b879e51a2d3a4ab06ea2e0854724.gif

5c953341f0166a24adb5872919d817e9.gif

1

2

3

无序列表-1

4

无序列表-2

5

无序列表-3

6

无序列表-4

7

无序列表-5

8

9

10

11

无序列表-1

12

无序列表-2

13

无序列表-3

14

无序列表-4

15

无序列表-5

16

17

18

19

无序列表-1

20

无序列表-2

21

无序列表-3

22

无序列表-4

23

无序列表-5

24

25

26

27

无序列表-1

28

无序列表-2

29

无序列表-3

30

无序列表-4

31

无序列表-5

32

33

34

35

有序列表

36

有序列表

37

有序列表

38

有序列表

39

有序列表

40

41

42

43

有序列表

44

有序列表

45

有序列表

46

有序列表

47

有序列表

48

49

50

51

有序列表

52

有序列表

53

有序列表

54

有序列表

55

有序列表

56

57

58

59

有序列表

60

有序列表

61

有序列表

62

有序列表

63

有序列表

64

65

66

67

有序列表

68

有序列表

69

有序列表

70

有序列表

71

有序列表

72

73

74

75

有序列表

76

有序列表

77

有序列表

78

有序列表

79

有序列表

80

81

82

83

自定义列表

84

内容

85

自定义列表

86

内容

87

自定义列表

88

内容

89

90

91

自定义列表

92

内容

93

自定义列表

94

内容

95

自定义列表

96

内容

97

View Code

在HTML中提供了三种列表形式,即无序列表、有序列表以及自定义列表。其中无序列表的应用场景最多,自定义列表几乎没有被使用,有序列表只是在特殊的场合中使用。而且在使用有序列表的时候会遇到一个特别有意思的情况,就是有序列表的标记可以是数字,而数字足够我们使用,但是英文字母的数量是有限的,那么在列表项超过了26个英文字母的时候会遇到什么情况呢?

表格标签

3350b879e51a2d3a4ab06ea2e0854724.gif

5c953341f0166a24adb5872919d817e9.gif

单元格内容

单元格内容

单元格内容

单元格内容

View Code

表格结构在互联网早期被用作实现网页的布局,但是现在表格只是用来呈现一些数据,因为表格结构会产生大量的标签,而且一旦网页结构改变,那么整个网页的结构就需要改变,这点对于开发人员来说会特别的痛苦,所以后来就逐渐的抛弃了这种方式。在这里我们只要熟悉表格结构就好。

框架标签

框架是互联网早期的标签,现在开发中基本上已经不再使用了,但是在一些早期的网站中还可以看到这些内容,所以有必要了解这些内容。常见的框架标签包括

、两种,下表是我们整理的一些框架相关的代码。

标签

3350b879e51a2d3a4ab06ea2e0854724.gif

5c953341f0166a24adb5872919d817e9.gif

1

2

3

4

5

2-3 容器标签 框架

6

7

8

9

10

11

12

13

14

15

16

17



推荐阅读
  • 深入解析 Android 中的 ActivityGroup 实现
    本文详细探讨了如何在 Android 应用中使用 ActivityGroup 来实现类似微博客户端主界面的效果,并分析了 TabActivity 的局限性,推荐使用更为灵活的 ActivityGroup 方案。 ... [详细]
  • 深入理解SAP Fiori及其核心概念
    本文详细介绍了SAP Fiori的基本概念、发展历程、核心特性、应用类型、运行环境以及开发工具等,旨在帮助读者全面了解SAP Fiori的技术框架和应用场景。 ... [详细]
  • 匠心|传统_2021年度总结 | 葡萄城软件开发技术回顾(上)
    匠心|传统_2021年度总结 | 葡萄城软件开发技术回顾(上) ... [详细]
  • MySQL查询语句深入解析与应用实例
    本文详细介绍了MySQL查询语句的应用技巧,包括排除特定记录的高级查询方法以及UNION和UNION ALL的使用场景与性能对比。通过具体示例,帮助读者理解如何优化查询以提高数据库操作效率。 ... [详细]
  • 如何清空Layui树结构
    本文将详细介绍如何使用Layui框架清空树形结构,包括创建树、添加节点以及实现清空功能的具体步骤。通过本文,您将能够掌握Layui树的管理技巧。 ... [详细]
  • POJ2226 二分图最小覆盖问题
    在一个大小为n×m的网格中,部分单元格为泥泞状态,其余为干净。目标是使用宽度固定为1但长度可变的木板覆盖所有泥泞单元格,且不覆盖任何干净单元格。木板允许重叠。本问题通过构建二分图并求其最小覆盖来解决。 ... [详细]
  • 本文探讨了在JavaScript中如何有效地从服务器控件DropDownList中获取绑定的ID值,而非仅仅是显示的文本值。这对于需要根据用户选择动态处理数据的应用场景非常有用。 ... [详细]
  • 本文介绍了如何在Java中使用`JCheckBoxMenuItem.setMnemonic()`方法,并提供了多个实际应用的代码示例。 ... [详细]
  • 电子与正电子的相互作用
    本文探讨了电子与正电子之间的基本物理特性及其在现代物理学中的应用,包括它们的产生、湮灭过程以及在粒子加速器和宇宙射线中的表现。 ... [详细]
  • 近期在维护旧项目时遇到一个问题,在iOS8环境下,UILabel无法正常显示文本。通过深入分析,我们发现这一现象与UILabel的使用方式有关,特别是在嵌套UILabel的情况下。 ... [详细]
  • 本文总结了在使用React Native开发过程中遇到的一些常见问题及其解决方法,包括配置错误、依赖问题和特定组件的使用技巧。 ... [详细]
  • 深入解析Android UI布局:LinearLayout与AbsoluteLayout
    本文探讨了Android开发中常用的两种布局方式——LinearLayout和AbsoluteLayout,通过实例分析它们的特点及应用场景。 ... [详细]
  • 解决IntelliJ IDEA编辑配置选项消失问题
    本文介绍如何在IntelliJ IDEA中恢复意外消失的编辑配置选项,适用于2020.3.4版本用户遇到的相关问题。 ... [详细]
  • J2EE平台集成了多种服务、API和协议,旨在支持基于Web的多层应用开发。本文将详细介绍J2EE平台中的13项关键技术规范,涵盖从数据库连接到事务处理等多个方面。 ... [详细]
  • Spring Boot 初学者指南(第一部分)
    本文介绍了Spring Boot框架的基础知识,包括其设计理念、主要优势以及如何简化传统的J2EE开发流程。 ... [详细]
author-avatar
特别要_966
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有