当前位置：网站首页 > 创业 > 正文

HTML列表知识有序列表无序列表定义列表

张子豪 2025-10-12 13:34 1

列表在HTML中是一个常用的操作，几乎良多网页都呈现了列表来显示数据。今天我就在这里来分享下有序列表、无序列表和界说列表的相关常识。从界说到实例的一个总结和概况。

东西/原料

电脑
HTML，UE编纂器

有序列表

1
有序列表是ol标签和li标签的组合暗示，<ol>暗示有序列表的起头，</ol>暗示有序列表的竣事。这里为了申明有序列表的用法，将张三，王四，李五，马六用有序列表来暗示出来。
<html>
<head><title>列表节制</title></head>
<body>

<ol>
<li>张三</li>
<li>王四</li>
<li>李五</li>
<li>马六</li>
</ol>
</body>
</html>
如下图可以看到执行的成果，前面主动天机了1234作为序号。
2
良多时辰我们想在HTML中利用ABCD或者其他的需要来作为有序列表的序号该怎么做呢？
在HTML中供给了小写字母a来用小写字母暗示列表的序号，年夜写字母A用年夜写字母来暗示列表的序号，i小写罗马数字来暗示序号和I这个年夜写的罗马数字来暗示序号。可以看如下实例。
可以看到如下图的代码和例子，用年夜写字母作为这个有序列表的序号，写法是type="A"，执行成果是A、B、C、D的序号。
3
对于有序列表来说，我们可能碰到一种环境是第二页接着第一页继续书写的，第二页的序号不从一起头的。对于这个环境我们该怎么设计呢？
序号不从一起头的，HTML给ul供给了一个属性，他就是start属性，具体用法如下实例：（这个有序列表从10起头）
<html>
<head><title>列表节制</title></head>
<body>

<ol type="1" start="10">
<li>张三</li>
<li>王四</li>
<li>李五</li>
<li>马六</li>
</ol>
</body>
</html>
可以看到这个有序列表是从10起头的，往下继续的一个序列号。

无序列表

1
HTML中无序列表是用<ul>和<li>的组合节制标签，<ul></ul>节制了无序列表的起头和竣事，<li>/li>节制了列表中的项。具体实例如下：
<html>
<head><title>列表节制</title></head>
<body>

<ul>
<li>张三</li>
<li>王四</li>
<li>李五</li>
<li>马六</li>
</ul>
</body>
</html>
从下图执行成果可以看出，无序列表默认的是圆心实点作为无序列表的标识。
2
若是我么不想无序列表前面的标识是圆心的实点该怎么办呢？
这里供给了disc 实心圆，circle空心圆，square实心方块这几种项目符号便利大师利用。具体实例如下：
<html>
<head><title>列表节制</title></head>
<body>

<ul type="square">
<li>张三</li>
<li>王四</li>
<li>李五</li>
<li>马六</li>
</ul>
</body>
</html>
可以看到项目符号酿成了实心的方块了。其实还有自界说的项目符文，这个我放在零丁的一个经验中了。

界说序列

1
界说列表是经由过程<dl><dt><dd>这三个组合标签来实现的，<dl></dl>暗示界说序列的起头和竣事，<dt></dt>暗示这被诠释的内容<dd></dd>对被诠释内容的一个诠释。
<html>
<head><title>列表节制</title></head>
<body>

<dl>
<dt>测验科目</dt></dt>
<dd>语文</dd>
<dd>数学</dd>
<dd>英语</dd>
</dl>
</body>
</html>
可以看到，被诠释的是测验科目，诠释内容为下面这三个科目。这此中用到了缩进来暗示的。