HTML资料之列表

最新推荐文章于 2022-04-16 20:14:42 发布

原创最新推荐文章于 2022-04-16 20:14:42 发布 · 337 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #列表

HTML 专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了HTML中的三种列表类型：无序列表、有序列表及自定义列表的使用方法与格式。包括不同类型的列表标记及其效果展示，适用于初学者快速掌握HTML列表的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

◆ 无序列表
格式：

<ul type="">
    <li></li>    列表项
    <li></li>
    ...
</ul>

type: 无序列表前的标记
    ★ square：小方块
    ★ disc： 实心小圆圈，默认
    ★ circle： 空心小圆圈

注：一般设置列表样式，不直接在type属性中设置，都是通过css来设置。

示例：

<ul type="square">
    <li>纸上得来终觉浅</li>
    <li>绝知此事要躬行</li>
</ul>

效果图：

纸上得来终觉浅
绝知此事要躬行

◆ 有序列表
格式：

<ol>
    <li></li>    列表项
    <li></li>
    ...
</ol>

type：有序列表前的标记
    ★ 1：数字，默认
    ★ a：小写字母
    ★ A：大写字母
    ★ i：小写罗马数字
    ★ I：大写罗马数据
start：决定了开始的位置，例如3就代表从第三个开始。

注：一般设置列表样式，不直接在type属性中设置，都是通过css来设置。

示例：

<ol type="i">
    <li>纸上得来终觉浅</li>
    <li>绝知此事要躬行</li>
</ol>

效果图：

纸上得来终觉浅
绝知此事要躬行

◆ 自定义列表
格式：

<dl>
  <dt></dt>    小标题
  <dd></dd>   解释标题
  <dd></dd>   解释标题
  ...
</dl>

示例：

<dl>
  <dt>内容</dt> 
  <dd>纸上得来终觉浅</dd>
  <dd>绝知此事要躬行</dd>
</dl>

效果图：

内容

纸上得来终觉浅

绝知此事要躬行