列表

最新推荐文章于 2024-07-23 20:15:47 发布

Samatha_子衿

最新推荐文章于 2024-07-23 20:15:47 发布

阅读量122

点赞数

分类专栏：前端文章标签： html

本文链接：https://blog.csdn.net/weixin_44489591/article/details/104733437

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1.列表的分类

无序列表

用 ul创建无序列表，li创建列表项

有序列表

用 ol创建有序列表，li创建列表项

定义列表

dl：创建定义列表
dt ：定义的内容标题
dd：对内容的解释说明

2.列表嵌套

ul，ol，dl之间可以相互嵌套。使用如下：

<ul>
      <li>
      nihao
        <ul>
          <li>哈哈/li></li>
          <li>哈哈</li>
        </ul>
      </li>
</ul>

在这里插入图片描述

完整代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>列表</title>
  </head>
  <body>
    <!-- 无序列表 -->
    <ul>
      <li>无序</li>
      <li>无序</li>
    </ul>

    <!-- 有序列表 -->
    <ol>
      <li>有序</li>
      <li>有序</li>
    </ol>

    <!-- 定义列表 -->
    <dl>
      <dt>定义的内容</dt>
      <dd>解释说明1</dd>
      <dd>解释说明2</dd>
      <dd>解释说明3</dd>
    </dl>

    <!-- 列表之间可以相互嵌套使用 -->
    <ul>
      <li>
        nihao
        <ul>
          <li>哈哈</li>
          <li>哈哈</li>
        </ul>
      </li>
    </ul>

    <!-- 综合 -->
    <dl>
      <dt>菜单</dt>
      <dd>
        <ol>
          <li>
            火爆猪肝
            <ul>
              <li>猪肝，蒜</li>
            </ul>
          </li>
          <li>
            干锅仔鸡
            <ul>
              <li>鸡肉，洋葱</li>
            </ul>
          </li>
          <li>
            麻婆豆腐
            <ul>
              <li>豆腐，豆瓣酱，葱</li>
            </ul>
          </li>
        </ol>
      </dd>
    </dl>
  </body>
</html>

Samatha_子衿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
列表

1.列表的分类无序列表用ul创建无序列表，li创建列表项有序列表用ol创建有序列表，li创建列表项定义列表dl：创建定义列表dt ：定义的内容标题dd：对内容的解释说明2.列表嵌套ul，ol，dl之间可以相互嵌套。使用如下：<ul> <li> nihao <ul> <li...
复制链接

扫一扫