HTML中的容器标签

本文涉及的产品
容器镜像服务 ACR,镜像仓库100个 不限时长
简介: 什么是容器标签?在HTML开发中我们常常会使用一类标签作为容器放置一些内容,我们把这类标签称之为容器标签,可以作为容器标签的包括列表标签、表格标签、框架标签、布局标签,在这里我们就来总结下这些内容。

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

列表标签

 View Code

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

表格标签

 View Code

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

框架标签

框架是互联网早期的标签,现在开发中基本上已经不再使用了,但是在一些早期的网站中还可以看到这些内容,所以有必要了解这些内容。常见的框架标签包括、两种,下表是我们整理的一些框架相关的代码。


img_1ebe2c0818e127d9931fdd717d7d007e.png

 View Code

这个标签可以十分方便的让我们实现菜单目录的功能,对于页面的重复利用非常方便,所以很受欢迎。


img_8dbf397a6ed8c41709e019966149ff90.png
img_74ab5f5f78ba42b653f3998f66cae561.png

这种标签可以十分方便的在我们的网站中嵌入一些其他网站的页面。

布局标签

所谓布局标签,很简单就是用来实现网页布局的

img_3daec4feec1f384c46b7b1d0558a0eb7.png

这些标签,是现在设计网页中重要的HTML标签。不过值得说明的是这些标签没有实际的语义,只是作为容器来放置一些内容,所以建议在实际开发中不要滥用,否则的话HTML的结构会特别复杂,代码也会特别多。

感谢阅读

喜欢看小编文章的点个订阅或者喜欢!小编每天都会跟大家分享文章,也会给大家提供web前端学习资料。

相关文章
|
3月前
|
移动开发 前端开发 HTML5
Twaver-HTML5基础学习(20)数据容器(3)_数据的批量加载(节省性能方法)
本文介绍了Twaver HTML5中数据的批量加载方法,通过使用`box.startBatch()`可以在大量数据加载时提高性能。文章通过示例代码展示了如何在React组件中使用批量加载功能,以减少界面重绘次数并提升效率。
59 2
Twaver-HTML5基础学习(20)数据容器(3)_数据的批量加载(节省性能方法)
|
2月前
|
移动开发 HTML5
HTML5标签的类型
HTML5标签的类型。
58 5
|
3月前
|
XML 存储 JSON
Twaver-HTML5基础学习(19)数据容器(2)_数据序列化_XML、Json
本文介绍了Twaver HTML5中的数据序列化,包括XML和JSON格式的序列化与反序列化方法。文章通过示例代码展示了如何将DataBox中的数据序列化为XML和JSON字符串,以及如何从这些字符串中反序列化数据,重建DataBox中的对象。此外,还提到了用户自定义属性的序列化注册方法。
48 1
|
1月前
|
移动开发 编解码 UED
除了 `<audio>` 和 `<video>` 标签,HTML5 还支持哪些多媒体格式?
【10月更文挑战第19天】HTML5对多种多媒体格式的支持,为网页开发者提供了丰富的选择,能够更好地满足不同类型多媒体内容在网页中的展示和交互需求,提升了网页的用户体验和多媒体应用的多样性。
|
3月前
|
移动开发 HTML5 容器
Twaver-HTML5基础学习(21)网元管理容器(ElementBox)
本文介绍了Twaver HTML5中的网元管理容器(ElementBox),包括如何监听网元属性变化、容器属性变化、网元元素变化以及数据层次变化。文章通过示例代码展示了如何使用不同的事件监听方法来响应这些变化,并通过控制台输出相关的事件信息。
44 4
Twaver-HTML5基础学习(21)网元管理容器(ElementBox)
|
3月前
|
移动开发 前端开发 HTML5
Twaver-HTML5基础学习(23)页管理容器(TabBox)、选中模型(SelectionModel)
本文介绍了Twaver HTML5中的页管理容器(TabBox)和选中模型(SelectionModel)。文章解释了如何使用TabBox来管理Tab页,并通过示例代码展示了SelectionModel的多种功能,包括追加选中元素、设置选中元素、选中所有元素、移除元素选中状态、清除所有选中状态等。此外,还介绍了如何监听选中状态的变化事件以及如何设置不同的选中模式,如多选、单选和不可选。
37 2
Twaver-HTML5基础学习(23)页管理容器(TabBox)、选中模型(SelectionModel)
|
3月前
|
XML 移动开发 JSON
Twaver-HTML5基础学习(18)数据容器(1)_增删查改、遍历数据容器、包含网元判断
本文介绍了Twaver HTML5中的数据容器(DataBox),包括如何进行增删查改操作、遍历数据容器以及判断网元是否存在于数据容器中。DataBox用于管理所有的网元对象,如ElementBox、LayerBox、AlarmBox等,并通过示例代码展示了其常用方法的使用。
47 1
Twaver-HTML5基础学习(18)数据容器(1)_增删查改、遍历数据容器、包含网元判断
|
1月前
|
存储 移动开发 前端开发
|
2月前
|
前端开发
【HTML】img标签和超链接标签
【HTML】img标签和超链接标签
44 2
|
2月前
|
移动开发 前端开发 JavaScript
【HTML】HTML页面和常见标签
【HTML】HTML页面和常见标签
39 1