前端成长之路:HTML(3)

ops/2024/12/16 14:15:51/
htmledit_views">

在HTML中,有列表标签。列表最大的特点是整齐、简洁、有序,用列表进行布局会更加自由方便。根据使用的情景不同,可以将列表分为三大类:无序列表、有序列表和自定义列表。

无序列表

在HTML中使用<ul>标签定义一个无序列表,在无序列表中使用<li>标签定义列表项,基本语法如下:

 

无序列表的定义需要遵循以下规则:

1.无序列表的各个列表项之间没有顺序级别之分,是并列的;顾名思义,无序列表,肯定是没有顺序的。

2.直接在<ul>标签中使用其他标签或者直接输入文字是不允许的,ul标签中只能使用<li>标签。

3.<li>标签相当于一个容器,可以容纳所有的元素(其他所有标签,或者文字等)。

li中可以容纳所有元素:

 

4.和很多标签一样,无序列表会带有自己的样式属性,但在实际使用时,我们会使用 CSS 来设置。

总结一下,最重要的是在ul无序列表中(有序列表也一样),不能直接使用其他标签或输入文字,需要在ul标签中使用li(就相当于是列表中一个大的容器)标签,然后在li标签中进行操作。

有序列表

有序列表即为有排列顺序的列表,其各个列表项会按照一定的顺序排列定义。有序列表和无序列表的差别就在于有序列表中的列表项是有顺序的。在HTML中,使用<ol>标签定义有序列表,列表排序是通过数字显示的;和无序列表一样,有序列表中也是通过li标签来定义列表项的。

可以看见,有序列表中的列表项的前面是通过数字来表示列表项顺序的。 有序列表的定义和无序列表定义类似,也需要遵循以下规则:

1.有序列表的各个列表项之间通过数字来表示顺序;顾名思义,有序列表,肯定具有顺序的。

2.直接在<ol>标签中使用其他标签或者直接输入文字是不允许的,ol标签中只能使用<li>标签。

3.<li>标签相当于一个容器,可以容纳所有的元素(其他所有标签,或者文字等)。

自定义列表

在HTML中我们可以创建自定义列表,自定义列表通常用于对术语或名词进行解释或者描述,自定义列表中的列表项没有任何项目符号。在HTML标签中,通过<dl>标签定义一个自定义列表(描述列表),dl标签需要配合<dt>(定义项目/名字)、<dd>(描述每一个项目/名字)一起使用。

 这个代码中,通过dl标签创建了一个自定义列表,并且使用dt标签定义了一个“项目”(帮助中心),然后通过dd标签为这个“项目”(帮助中心)进行了描述。

注意:<dl>中只能包含<dt>和<dd>,这和ul或ol中只能包含li是一样的道理;<dl>中的dt和dd个数没有限制,可以是任意个,但是一般情况下是一个dt对应多个dd,因为相当于是一个“项目”对应多个“描述”,并且dt或dd中可以放任何标签(这点也和li类似)。


http://www.ppmy.cn/ops/142387.html

相关文章

Scala泛型应用场景

Scala中的泛型&#xff08;Generics&#xff09;是一种强大的工具&#xff0c;允许开发者编写可重用的代码&#xff0c;同时保持类型安全。泛型在Scala中有多种应用场景&#xff0c;以下是一些常见的应用场景&#xff1a; 集合类&#xff1a; Scala的集合类&#xff08;如List…

华为HarmonyOS帮助应用实现在线认证服务 -- 3 IFAA免密身份认证

场景介绍 开通&#xff1a;提供移动端开通生物特征&#xff08;指纹/3D人脸&#xff09;IFAA免密身份认证的能力。使用用户已有的生物特征类型进行开通&#xff0c;会开通移动端对应生物特征类型的IFAA免密身份认证能力。 认证&#xff1a;提供移动端认证生物特征&#xff08…

苹果电脑可以安装windows操作系统吗?Mac OS X/OS X/macOS傻傻分不清?macOS系统的Java支持?什么是macOS的五大API法王?

苹果电脑可以安装windows操作系统吗? 先抛开虚拟机安装&#xff0c;苹果电脑可以安装Windows操作系统。苹果公司提供了一个名为Boot Camp的软件&#xff0c;它允许用户在Mac电脑上安装Windows操作系统。通过Boot Camp&#xff0c;用户可以在启动电脑时选择是要进入macOS还是Wi…

知乎日报——第四周

「OC」知乎日报——第四周&#xff08;完&#xff09; 文章目录 「OC」知乎日报——第四周&#xff08;完&#xff09;本周总结收藏界面使用高度数组优化设置缓存总结 本周总结 本周使用FMDB完成了本地数据的创建&#xff0c;管理相关的点赞收藏信息&#xff0c;优化了tableVi…

Vue3+Element-Plus使用el-form和el-table嵌套实现表格编辑并提交表单校验

el-form和el-table嵌套说明 ① :model"formData" 给表单绑定数据&#xff0c;formData是表单的数据对象 ② 表单数据对象formData中定义的tableData是表单内嵌套的表格显示数据 ③ rules为表单绑定的校验规则 ④ :prop"tableData.${$index}.name" 绑定传入…

【unity】从零开始制作平台跳跃游戏--界面的认识,添加第一个角色!

在上一篇文章中&#xff0c;我们已经完成了unity的环境配置与安装⬇️ 【Unity】环境配置与安装-CSDN博客 接下来&#xff0c;让我们开始新建一个项目吧&#xff01; 新建项目 首先进入unityHub的项目页面&#xff0c;点击“新项目”&#xff1a; 我们这个系列将会以2D平台…

The Annotated Transformer

The Annotated Transformer 外网链接&#xff1a;源码解析Transformer The Annotated Transformer

【roadMap】我转行软件测试的经历

软件测试这行咋样&#xff1f; 如果你简单了解过「软件测试工程师」这个岗位&#xff0c;就会知道它的基本特点&#xff1a; 待遇比开发低&#xff0c;比其他行业高入门丝滑&#xff0c;算是技术岗最简单的一类测试行业有细分领域&#xff1a;功能、性能、自动化… 每个行业…