Web前端开发技术、详细文章、(例子)html 列表、有序列表、无序列表、列表嵌套

目录

列表概述

列表类型与标记符号

无序列表

语法:

语法说明:

无序列表标记的 type 属性及其说明

代码解释

有序列表

基本语法

属性说明

1、列表 o1标记的属性

2、列表项li标记的属性

有序列表 o1标记的属性、值

代码解释 

列表嵌套

基本语法:

代码解释:

定义列表

基本语法

语法说明


列表概述

列表能对网页中的相关信息进行合理的布局,将项目有序或无序地罗列在一起,便于用户浏览和操作。列表分为无序列表、有序列表、定义列表、菜单列表和目录列表共五种。但常用列表有三种,分别是无序列表、有序列表、定义列表。

列表类型与标记符号

列表类型标 记 符号备注
无序列表<ul>...</ul>常用
菜单列表<menu>...</menu>不常用
目录列表<dir>...</dir>不常用
有序列表<ol>...</ol>常用
定义列表<dl>...</dl>常用

无序列表

无序列表ul(Unordered List)标记是成对标记,<ul>是开始标记,</ul>是结束标记两者之间插入若干个列表项li(List Items)标记,完成无序列表的插入。

语法:

<ul type=""><li type="">项目名称</li><li type="">项目名称</1i>……
</ul>
语法说明:

ul 标记的 type 属性有三个值,如表 4-2 所示。列表项l 标记的 type 属性取值与 ul 标记相同。设置u标记的type 属性会使其所包含的列表项按统一风格显示,设置其中某一列表项的 type 属性值时只会影响它自身的显示风格,其他列表项按原样显示。

无序列表标记的 type 属性及其说明

属 性值说明
disc实现圆形
circle空心圆形
square

实心正方形

<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>csdn-jingyu飞鸟-web前端-无序列表</title></head></body><h4>Disc项目符号列表:</h4><ul type="disc"><1i>计算机科学与技术专业</li><1i>软件工程专业</1i><li type="circle">信息管理与信息系统专业</1i></ul><h4>Circle项目符号列表:</h4><ul type-"circle"><1i>计算机科学与技术专业</1i><li type="square">软件工程专业</li><li>信息管理与信息系统专业</1i></ul><h4>Square 项目符号列表:</h4><ul type="square"><1i>计算机科学与技术专业</1i><1i>软件工程专业</1i><1i>信息管理与信息系统专业</1i></ul></body>
</html>

代码解释

代码中第 9~13行列表符号为实心圆形,除第12行定义了列表项的type 属性值为"circle",所以此项前面显示空心圆;第15~19 行列表符号为空心圆形,除第 17 行定义了列表项的 type 属性值为"square",所以此项前面显示实心正方形;第 21~25 行列表符号为实心正方形。通过设置type属性值来改变列表项前面的符号。

有序列表

有序列表 ol(Ordered List)标记是成对标记,以<ol>为起始标记,以</ol>为结束标记,在其间使用<li></i>标记完成有序列表项目的插入。

基本语法

<ol type="" start=""><li type="" value="n">项目名称</li><li type-"" value="n">项目名称</li>……
</ol>

在<o1>、</ol>标记之间必须使用<li></li>标记来添加列表项值。

属性说明

1、列表 o1标记的属性

  1. type:列表项前面的编号,编号是有序的,有五种不同类型。
  2. start;定义有序列表起始编号,默认值为1。设置其为非1时,列表项前编号起始位置会发生改变,如 start="5",当 type="1"时,表示从第5个开始编号;当 type="A"表示从E开始编号,以此类推。

2、列表项li标记的属性

  1. type:只影响当前列表项前面编号类型,后续列表项前面编号类型依旧遵循o1标记的 type 属性的取值。
  2. value:改变当前列表项前编号的值,并影响其后所有列表项编号的值。

有序列表 o1标记的属性、值

属性说明
type1定义有序列表中列表项前面的编号为数字列表
A定义有序列表中列表项前面的编号为大写字母列表
a定义有序列表中列表项前面的编号为小写字母列表
I定义有序列表中列表项前面的编号为大写罗马字母列表
i定义有序列表中列表项前面的编号为小写罗马字母列表
start数值有序列表中列表项的起始数字

例如:

<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>csdn-jingyu飞鸟-Web前端开发-有序列表</title></head><body><h4>1数字编号:</h4><ol><li>计算机科学与技术专业</li><li>软件工程专业</li><li>信息管理与信息系统专业</li><li>电子信息工程专业</li></ol><h4>A字母编号:</h4><ol type="A"><li>计算机科学与技术专业</li><li>软件工程专业</li><li>信息管理与信息系统专业</li><li>电子信息工程专业</li></ol><h4>aI混合编号:</h4><ol type="a"><li>计算机科学与技术专业</li><li type="I"value="5">软件工程专业</li><li>信息管理与信息系统专业</li><li>电子信息工程专业</li><li>电子科学与技术专业</li><li>物联网工程专业</li></ol></body>
</html>

代码解释 

代码中第 9~14 行实现数字编号的有序列表;第16~21 行实现大写字母编号的有序列表,第23~30行实现小写字母和大写罗马混合编号的有序列表,由于第25行设置了列表项的 type 属性为"I"、value 属性为"5",致使当前列表项前的编号变成大写罗马字母,开始顺序为"V",大写罗马字母中第5个正好是V。从第3个列表项开始向后所有列表项的编号顺序随之发生改变,顺序从第6个小写字母f开始向后连续编号,分别是f、g、h、i。

列表嵌套

在一个列表中嵌入另一个列表,作为此列表的一部分,叫列表嵌套。有序列表、无序列表可以混合嵌套,浏览器都能够自动地嵌套排列。
使用列表嵌套不仅使网页的内容布局更加合理美观,而且使其内容看起来更加简洁。列表嵌套的方式分无序列表的嵌套、有序列表的嵌套,还可以是无序列表和有序列表的混合嵌套。列表嵌套不能交叉嵌套。如<ul><ol><ul></ol>就是错误的嵌套。当然定义列表也可以与无序列表、有序列表进行嵌套。

基本语法:

<ul>                    <!--  无序列表中嵌套有序列表 --><li>项目名称<ol>            <!-- 有序列表中又嵌套无序列表--><li>项目名称</li><li>项目名称<ul><li>项目名称</li><li>项目名称</li>……</ul></li><li>项目名称</li>……</ol></li><1i>项目名称</li><li>项目名称</li>
</ul>

例如:

<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>有序列表和无序列表嵌套</title></head><body><h4>csdn-jingyu飞鸟-Web前端开发</h4><ol type="1"><li><h4>计算机与电子信息</h4><ol type="A"><li>数据库</li><li>电子信息</li><li>计算机组成与原理</li><li>计算机基础<ul type="disc"><li>计算机文化基础</li><li>公共基础</li><li>软件技术基础</li><li>计算机导论</li><li>计算思维</li></ul></li></ol></li><li><h4>理工</h4></li><li><h4>经管与人文</h4></li></ol></body>
</html>

代码解释:

代码中第 9~28 行定义有序列表,第 11~24 行在有序列表中嵌套了1个有序列表第16~22行又在有序列表中嵌套了1个无序列表。

定义列表

定义列表 dl(definition list)标记是成对标记,以<dl>为首标记,以</dl>为尾标记。定义列表由 dt(definition term)标记和 dd(definition description)标记组成。定义列表中每一个元素的标题使用<dt>...</dt>标记定义;后面跟随<dd>...</dd>标记,用于描述列表中元素的内容。

基本语法

<d1><dt>项目1</dt><dd>描述1</dd><dd>描述2</dd><dd>描述3</dd>
<dt>项目2</dt><dd>描述1</dd><dd>描述2</dd>……    <dt>项目n</dt>
</dl>

语法说明

在网页中每一个 dt 标记可由一个或多个 dd 标记组成。这两个标记只能在 l 标记中使用。定义列表的每一列表项前面既没有符号,也没有编号。

例如:

<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>定义列表</title></head><body><h4>定义列表展示联系人信息</h4><dl><dt>联系人:</dt><dd>jingyu飞鸟</dd><dd>电话:010-11011011</dd><dd>E-mail-csdn-jingyu飞鸟@sina.com</dd><dt>联系地址:</dt><dd>csdn-jingyu飞鸟</dd><dt>邮政编码:</dt><dd>162610</dd></dl></body>
</html>

代码解释

代码中第 9~18 行定义了定义列表,第 10 行、第 14 行、第 16 行定义了列表项的标题,第 11~13 行、第 15 行、第 17 行定义了列表项的描述。

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

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

相关文章

FreeBSD/Linux下的系统资源监视器排队队

bpytop bpytop 是一个基于 Python 的资源监视器&#xff0c;可以在 FreeBSD 上使用。它提供了对文件写入磁盘、网络、CPU 和内存占用的监视功能。 pkg install bpytop 或者用ports安装 cd /usr/ports/sysutils/bpytop/ make install clean bashtop bashtop 也是一个基于 P…

化简资源分配图判断是否发生死锁

目录 1.资源分配图的概念 2.判断是否发生死锁 1.资源分配图的概念 资源分配图表示进程和资源之间的请求关系&#xff0c;例如下图&#xff1a; P代表进程&#xff0c;R代表资源&#xff0c;R方框中 有几个圆球就表示有几个这种资源&#xff0c;在图中&#xff0c;R1指向P1&a…

C++ RPC ORM 高速解析

支持所有常用编程语 https://capnproto.org/GitHub - capnproto/capnproto: Capn Proto serialization/RPC system - core tools and C library https://capnproto.org/capnproto-c-win32-1.0.2.zip 常用命令&#xff1a; capnp help capnp compile -oc myschema.capn…

Excel中sum的跨表求和

#实际工作中&#xff0c;一个xlsx文件中会包含多个Excel表格&#xff0c;一般会有“总-分”的关系&#xff0c;如何把分表里的数字汇总到总表里呢&#xff1f; 一般有上图所示的两种表达方式。 可以使用通配符 *&#xff1a;代表任意个数、任意字符&#xff1b; &#xff1f;&…

quartz定时任务

Quartz 数据结构 quartz采用完全二叉树&#xff1a;除了最后一层每一层节点都是满的&#xff0c;而且最后一层靠左排列。 二叉树节点个数规则&#xff1a;每层从左开始&#xff0c;第一层只有一个&#xff0c;就是2的0次幂&#xff0c;第二层两个就是2的1次幂&#xff0c;第三…

DOS学习-目录与文件应用操作经典案例-attrib

新书上架~&#x1f447;全国包邮奥~ python实用小工具开发教程http://pythontoolsteach.com/3 欢迎关注我&#x1f446;&#xff0c;收藏下次不迷路┗|&#xff40;O′|┛ 嗷~~ 目录 一.前言 二.使用 三.案例 一.前言 DOS系统中的attrib命令是一个用于显示或更改文件&#…

设计模式——职责链(责任链)模式

目录 职责链模式 小俱求实习 结构图 实例 职责链模式优点 职责链模式缺点 使用场景 1.springmvc流程 ​2.mybatis的执行流程 3.spring的过滤器和拦截器 职责链模式 使多个对象都有机会处理请求&#xff0c;从而避免请求的发送者和接受者之间的耦合关系。将这个对象连成…

github设置项目分类

https://www.php.cn/faq/541957.html https://docs.github.com/zh/repositories/working-with-files/managing-files/creating-new-files

什么是回表,如何解决回表问题

下面表中:主键id是聚簇索引&#xff0c;name是辅助索引。 执行这样一条SQL: select name from A where name"s;name字段是有索引&#xff0c;所以MYSQL在通过name进行査询的时候&#xff0c;是需要扫描两颗Btree树的。 第一遍:先通过二级索引定位主键值1。第二遍:根据主键…

免费发布web APP的四个途径(Python和R)

免费发布数据分析类&#x1f310;web APP的几个途径&#x1f4f1; 数据分析类web APP目前用来部署生信工具&#xff0c;统计工具和预测模型等&#xff0c;便利快捷&#xff0c;深受大家喜爱。而一个免费的APP部署途径&#xff0c;对于开发和测试APP都是必要的。根据笔者的经验…

word-形状绘制、smartart、visio

一、人员架构图绘制 小技巧&#xff1a; 1、ctrlshift水平复制 2、点击图形&#xff0c;右键设置为默认形状 3、插入-形状-右键-锁定绘图模式&#xff0c;按esc退出状态 4、插入-形状-新建绘图画布&#xff0c;代替组合问题 画布中存在锚点&#xff0c;便于直线连接 二、s…

深度学习之基于YOLOV5的口罩检测系统

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 一、项目背景 随着全球公共卫生事件的频发&#xff0c;口罩成为了人们日常生活中不可或缺的一部分。在公共场所&am…

10、SpringBoot 源码分析 - 自动配置深度分析三

SpringBoot 源码分析 - 自动配置深度分析三 refresh和自动配置大致流程AutoConfigurationImportSelector的getAutoConfigurationEntry获取自动配置实体(重点)AutoConfigurationImportSelector的getCandidateConfigurations获取EnableAutoConfiguration类型的名字集合AutoConfig…

Android中JVM内存回收机制

文章目录 分代收集算法&#xff1a;新生代&#xff08;Young Generation&#xff09;老年代&#xff08;Old Generation&#xff09; 垃圾回收器&#xff1a;JVM常见三大回收算法&#xff1a;Mark-Sweep(标记清除)优点:缺点: 复制算法优点&#xff1a;缺点&#xff1a; Mark-Co…

ubuntu下交叉编译安卓FFmpeg 和 官方指导链接

将之前的编译方法在此记录 Linux系统&#xff1a;Ubuntu 18.04.6 LTS 交叉编译工具链&#xff1a;gcc-aarch64-linux-gnu gaarch64-linux-gnu ffmpeg版本&#xff1a;5.1.3 1.下载源码 ffmpeg官网&#xff1a;https://ffmpeg.org/download.html#releases 下载完成后&#x…

Edge浏览器“此页存在问题”解决思路

Edge浏览器显示“此页存在问题”解决思路 大家平时使用Edge浏览器时&#xff0c;是否和我一样会突然出现“此页存在问题”的情况&#xff1f; 经过百度查询后我找了一种情况和解决办法&#xff0c;能够大大减少这类问题的出现。出现“此页存在问题”可能是因为之前使用过软件…

Linux基础命令[27]-gpasswd

文章目录 1. gpasswd 命令说明2. gpasswd 命令语法3. gpasswd 命令示例3.1 不加参数3.2 -a&#xff08;将用户加入组&#xff09;3.3 -d&#xff08;从组中删除用户&#xff09;3.4 -r&#xff08;删除组密码&#xff09;3.5 -M&#xff08;多个用户一起加入组&#xff09;3.6 …

React中 将UI 视为树

当 React 应用程序逐渐成形时&#xff0c;许多组件会出现嵌套。那么 React 是如何跟踪应用程序组件结构的&#xff1f; React 以及许多其他 UI 库&#xff0c;将 UI 建模为树。将应用程序视为树对于理解组件之间的关系以及调试性能和状态管理等未来将会遇到的一些概念非常有用。…

Python教程:使用Python和PyQt编写进制转换器工具

1.介绍 在现代计算中&#xff0c;进制转换是一项常见且重要的任务。为了简化这个过程&#xff0c;我们也可以利用Python和PyQt自己写一个直观且易于使用的进制转换器工具。这个工具将支持二进制、八进制、十进制和十六进制的相互转换&#xff0c;并提供良好的用户界面和交互体…

Java设计模式(23种设计模式 重点介绍一些常用的)

创建型模式&#xff0c;共五种&#xff1a;工厂方法模式、抽象工厂模式、单例模式、建造者模式、原型模式。结构型模式&#xff0c;共七种&#xff1a;适配器模式、装饰器模式、代理模式、外观模式、桥接模式、组合模式、享元模式。行为型模式&#xff0c;共十一种&#xff1a;…