7.HTML中列表标签

7.列表标签

7.1无序列表(重点)

表格是用来显示数据的,那么列表就是用来布局的。

列表最大的特点就是整齐,整洁,有序,他作为布局会更加自由和方便,

根据使用的情景不同,列表可分为三大类:无序列表,有序列表和自定义列表。

                        有序列表

                        无序列表

                          自定义列表

< ul>标签表示HTML页面中项目的无序列表,一般会以项目符号呈现列表项,而列表项使用<li>标签定义。

无序列表的基本语法格式

<ul>标签表示HTML页面中项目的无序列表,一般会以项目符号呈现列表项,而列表项使用<li>标签定义。
无序列表的基本语法格式如下:<ul><li>列表1</li><li>列表2</li><li>列表3</li></ul>
  1. 无序列表的各个列表项之间没有顺序级别之分,是并列的。

  2. < ul></ul>中只能嵌套< li></li>,直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。

  3. < li>与</li>之间相当于一个容器,可以容纳所有元素。

  4. 无序列表会带有自己的样式属性,但实际使用时,我们会使用CSS来设置

7.2有序列表

有序列表即为有排序的列表,奇各个列表项会按照一定顺序排列定义

在HTML标签中,<ol>标签用于定义有序列表,列表排序以数字来显示,并且使用<li>标签来定义列表项。

有序列表格式如下,

<ol><li>列表1</li><li>列表2</li><li>列表3</li></ol>
  1. < ol></ol>中智能嵌套<li></li>,直接在< ol></ol>标签中输入其他标签或者文字的做法是不被允许的

  2. < li></li>之间相当于一个容器,可以容纳所有元素

  3. 有序列表会带自己样式属性,但实际使用时,我们会使用css来设置

7.3自定义列表

在HTML标签中,< dl></dl>标签用于定义描述列表(或定义列表),该标签会与<dt>(定义项目/名字)和<dd>(描述每一个项目/名字)一起使用。

其基本语法如下:

<dl><dt>名词1<dt><dd>名词1解释1<dd><dd>名词1解释2<dd>
<dl/>
  1. < dl></dl>里面只能包含<dt>和<dd>

  2. < dt>和<dd>个数没有限制,经常是一个<dt>对应多个<dd>

在HTML标签中,<dl>标签用于定义描述列表(或定义列表),该标签会与<dt>(定义项目/名字)和<dd>(描述每一个项目/名字)一起使用。

7.4 列表总结
标签名定义说明
<ul></ul>无序列表里面只能包含li, 没有顺序,使用较多,li里面可以包含任何标签
<ol></ol>有序列表里面只能包含li,有顺序,使用相对较少,li里面可以包含任何标签
<dl></dl>自定义列表里面只能包含dt和dd。dt和dd里面可以放任何标签

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/160506.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数字图像处理(冈萨雷斯)学习笔记

目录 一.机器视觉和计算机视觉二.图像处理基础1.什么是图像2.如何访问图像 三.图像仿射变换四.灰度变换 一.机器视觉和计算机视觉 机器视觉(Machine Vision,MV)和计算机视觉(Computer Vision&#xff0c;CV)的区别和联系&#xff1a; 机器视觉更注重广义图像信号(激光&#xff…

C#中的Fody

在C#中&#xff0c;NuGet里的Fody是一个用于.NET应用程序的代码增强工具。它通过在编译过程中自动织入代码&#xff0c;改变目标程序集的行为。Fody的一个常见用途是简化属性通知的实现&#xff0c;特别适用于WPF绑定。 在WPF中&#xff0c;属性通知是一种机制&#xff0c;用于…

C语言操作符例题

这里写目录标题 例题一题目解析 例题二题目解析 例题三方法一方法二方法三 例题四例题五 感谢各位大佬对我的支持,如果我的文章对你有用,欢迎点击以下链接 &#x1f412;&#x1f412;&#x1f412; 个人主页 &#x1f978;&#x1f978;&#x1f978; C语言 &#x1f43f;️…

智能指针(Newbie Note)

智能指针专题 1.普通指针的问题2.智能指针是什么什么是所有权 3.智能指针三个好处&#xff1a;4.C11提供的智能指针4.1 shared_ptr&#xff08;共享所有权指针&#xff09;4.1.1 分配内存4.1.2 成员函数4.1.3 计数情况汇总&#xff1a;4.1.4 示例代码(计数)4.1.5 示例代码(rese…

Java深拷贝与浅拷贝技术解析及实例演示

摘要&#xff1a;本文将详细介绍Java中的深拷贝和浅拷贝概念&#xff0c;通过分析源码和举例说明&#xff0c;帮助读者更好地理解这两种拷贝方式的区别及应用场景。 一、深拷贝与浅拷贝的概念 深拷贝&#xff1a;复制一个对象后&#xff0c;无论是基本数据类型还是引用类型&…

多柱汉诺塔问题

k柱汉诺塔 题目描述 汉诺塔&#xff08;Hanoi Tower&#xff09;&#xff0c;又称河内塔。 传说大梵天创造世界的时候做了三根金刚石柱子&#xff0c;按左、中、右排序。大梵天在左侧的柱子上&#xff0c;从下往上按照大小顺序摞着64片黄金圆盘&#xff0c;越靠下的圆盘越大。…

个人博客项目 - 测试报告

文章目录 一、项目背景二、测试报告功能测试1.编写测试用例2.登录测试3.编写文章测试4.查看文章测试5.删除文章测试7.注销登录测试 自动化测试性能测试1.VUG2.进行场景设计3.生成性能测试报告 总结 本文开始 一、项目背景 通过学习测试相关的知识&#xff0c;动手实践并测试一…

2023 年 亚太赛 APMCM ABC题 国际大学生数学建模挑战赛 |数学建模完整代码+建模过程全解全析

当大家面临着复杂的数学建模问题时&#xff0c;你是否曾经感到茫然无措&#xff1f;作为2022年美国大学生数学建模比赛的O奖得主&#xff0c;我为大家提供了一套优秀的解题思路&#xff0c;让你轻松应对各种难题。 以五一杯 A题为例子&#xff0c;以下是咱们做的一些想法呀&am…

【Vue】自定义指令

自定义指令 自定义指令就是自己定义的指令&#xff0c;是对 DOM 元素进行底层操作封装 ,程序化地控制 DOM&#xff0c;拓展额外的功能 全局定义 Vue.directive(指令名字, definition) 指令名&#xff1a;不包括v-前缀&#xff0c;使用时候包括v-&#xff0c;v-指令名defini…

CUTLASS 1.3.3中的 Volta884_h884gemm

CUTLASS 是 CUDA C 模板抽象的集合&#xff0c;用于在 CUDA 内的所有级别和规模上实现高性能矩阵-矩阵乘法 (GEMM) 和相关计算。它采用了类似于 cuBLAS 和 cuDNN 中实现的分层分解和数据移动策略。 CUTLASS 最新版本为3.3&#xff0c;相比1.3.3变动较大。然而重温一下1.3.3仍然…

生产问题 Recv-Q101

生产上服务端口 Recv-Q101 新请求到服务器的失败&#xff0c;幸好及时发现&#xff0c;通过重启服务之后得到解决&#xff0c;具体原因等待排查 目前觉得的原因是&#xff1a;某些请求暂用时间比较久

Linux超简单部署个人博客

1 安装halo 1.1 切换到超级用户 sudo -i 1.2 新建halo文件夹 mkdir ~/halo && cd ~/halo 1.3 编辑docker-compose.yml文件 vim ~/halo/docker-compose.yml 英文输入法下&#xff0c;按 i version: "3"services:halo:image: halohub/halo:2.10container_…

2017年全国硕士研究生入学统一考试管理类专业学位联考数学试题——解析版

文章目录 2017 级考研管理类联考数学真题解析一、问题求解&#xff08;本大题共 5 小题&#xff0c;每小题 3 分&#xff0c;共 45 分&#xff09;下列每题给出 5 个选项中&#xff0c;只有一个是符合要求的&#xff0c;请在答题卡上将所选择的字母涂黑。真题&#xff08;2017-…

Python 提高篇学习笔记(一):深拷贝和浅拷贝

文章目录 一、什么是对象的引用二、深拷贝和浅拷贝2.1 浅拷贝(Shallow Copy)2.2 深拷贝(Deep Copy)2.3 copy.copy和copy.deepcopy的区别 一、什么是对象的引用 在 Python 中&#xff0c;对象的引用是指变量指向内存中某个对象的地址或标识符。当你创建一个新的对象(比如一个整…

[技术杂谈]计算机系统硬件类名称

在各种编程语言都可以见到利用WMI查询计算机硬件信息&#xff0c;因此知道有哪些计算机硬件名称非常有必要&#xff0c;下面列举了所有计算机硬件名称可以查询。 本文内容 冷却设备类输入设备类大容量存储类主板、控制器和端口类 显示另外 6 个 计算机系统硬件类别将表示硬…

git修改远程分支名称

先拉取old_branch最新代码到本地 git checkout old_branchgit pull origin old_branch本地修改后并推送 git branch -m old_branch new_branch # 修改分支名称git push --delete origin old_branch # 删除在远程的老分支推送新分支 git push origin new_branch本地分支与远…

除自身以外数组的乘积[中等]

优质博文&#xff1a;IT-BLOG-CN 一、题目 给你一个整数数组nums&#xff0c;返回数组answer&#xff0c;其中answer[i]等于nums中除nums[i]之外其余各元素的乘积。题目数据保证数组nums之中任意元素的全部前缀元素和后缀的乘积都在32位整数范围内。请不要使用除法&#xff0…

【Qt开发流程】之富文本处理

描述 Scribe框架提供了一组类&#xff0c;用于读取和操作结构化的富文本文档。与Qt中以前的富文本支持不同&#xff0c;新的类集中在QTextDocument类上&#xff0c;而不是原始文本信息。这使开发者能够创建和修改结构化的富文本文档&#xff0c;而不必准备中间标记格式的内容。…

【数据结构】A : A DS图_传递信息

A : A DS图_传递信息 Description 小明在和他的小伙伴们玩传消息游戏&#xff0c;游戏规则如下&#xff1a; 有n名玩家&#xff0c;所有玩家编号分别为0~n-1&#xff0c;其中小明编号为0&#xff1b;每个玩家都有固定的若干个可传信息的其他玩家(也可能没有)。传消息的关系是…

busybox制作根文件系统2

上篇内容使用busybox制作好了根文件系统&#xff0c;接下来需要进行一些测试和功能的完善&#xff01; 根文件系统的测试 测试根文件系统的时候不是直接烧写到EMMC里面&#xff0c;这样测试效率太低了&#xff0c;Ubuntu的rootfs目录已经保存了根文件系统&#xff0c;只需要在…