有序列表&无序列表&自定义列表

最新推荐文章于 2023-04-12 07:59:58 发布

Dr.93

最新推荐文章于 2023-04-12 07:59:58 发布

阅读量314

点赞数 1

文章标签： html 前端

本文链接：https://blog.csdn.net/weixin_59967356/article/details/128078829

版权

有序列表ol【有固定顺序】

快捷方式：输入 ol>li 会直接出现如下所示，ol>li*3会直接出现三个li

如下图：有序列表类型为A，从第6个字母开始算起

<body>
    <!-- 注释 -->
    <!-- 1，li里面可以随意放标签，但是ol里面只能放置li 
         2，数字是自动生成的
         3，tape类型为: 1、A、a、i、I
         4，start： 取值只能是一个数字  
         type=类型  start=开始
    -->

    <ol type="A"  start="6">
        <li>打开冰箱</li> 
        <li>放入大象</li>
        <li>关闭冰箱</li>
    </ol>
    
</body>

无序列表ul 【无固定顺序】

快捷方式：输入 ul>li 会直接出现如下所示，ul>li*3会直接出现三个li

<body>
       <ul>
           <li> <li>
       </ul>
</body>

如下图：无序列表类型为disc，会显示为实心圆

<body>
       <!--
            1.ui里面只能放li,li里面可以放其他标签
            2.默认的是黑色的实心圆
            3.type类型：disc, circle, square, none取消显示(用的多)
       -->

    <ul type="disc">
        <li>科目一</li>
        <li>科目二</li>
        <li>科目三</li>
    </ul>

</body>

自定义列表dl【图文混合】

快捷键：dl>dt+dd 或 dl>dt{1111}+dd{222}直接回车

<body>
      <dl>
          <dt>我是图片1</dt>
          <dd>我是文字1</dd>
      </dl>

      <dl>
          <dt>我是图片2</dt>
          <dd>我是文字2</dd>
      </dl>
</body>