学习HTML与CSS的第五天————列表标签、

最新推荐文章于 2024-09-20 14:39:18 发布

不爱学习的大头

最新推荐文章于 2024-09-20 14:39:18 发布

阅读量150

点赞数

文章标签： css3 css html5 html

本文链接：https://blog.csdn.net/weixin_44055237/article/details/104563385

版权

列表标签

<!DOCTYPE html>
<html>
    <head>
      <meta charset="utf-8"/>
      <title>列表标签</title>
      <style type="text/css"> 
      /* 
          去掉项目符号
       */
      ul{
        list-style: none;
      }
      </style>
    </head>
    <body>
      <!-- 
          在HMTL中也可以常见列表，在网页中一共有三种列表：
            1、无序列表
            2、有序列表
            3、定义列表
       -->
       <!-- 
            无序列表
                - 使用ul标签来创建一个无序列表
                - 使用li在ul中创建一个一个的列表项

            通过type属性可以修改无须列表的项目符号
                可选值：
                      disc，默认值，实心的圆点
                      square，实心的方块
                      circle，空心的圆圈

            注意，默认的项目符号一般不使用
            如果需要项目符号，则可以使用为li设置背景图片的形式

            ul和li都是块元素
        -->
       <ul>
          <li>科比</li>
          <li>乔丹</li>
          <li>奥尼尔</li>
          <li>詹姆斯</li>
       </ul>
       <!-- 
         有序列表
            与无序列表类似，只是用ol代替ul
            有序列表使用有序的序号作为项目符号
            tpye属性，可以指定序号的类型
                可选值：1、默认值、使用阿拉伯数字
                          a/A采用小写或大写字母作为序号
                          i/I采用小写或大写字母作为序号
          ol也是块元素
        -->
        <ol type="A">
          <li>库里</li>
          <li>汤普森</li>
          <li>杜兰特</li>
        </ol>
        <!-- 
          列表之间都是可以互相嵌套，可以在无序中放有序列表，也可以在有序列表中放无序列表

         -->
         <p>菜谱</p>
         <ul>
           <li>
             鱼香肉丝
             <ol>
               <li>鸡肉</li>
               <li>红萝卜</li>
             </ol>
            </li>
           <li>红烧牛肉</li>
           <li>宫保鸡丁</li>
          </ul>
          <!-- 
            定义列表用来对一些词汇或内容进行定义
            使用dl来创建一个定义列表
                dl中有两个子标签
                    dt：被定义的内容
                    dd：对定义内容的描述、
            同样dl、ul、ol
           -->
           <dl>
             <dt>武松</dt>
             <dd>景阳岗打虎英雄，战斗力99</dd>
             <dd>后因打死西门庆，投奔梁上，落草为寇</dd>
             <dt>武大</dt>
             <dd>著名悲惨人物，战斗力为0</dd>
             <dd>打虎英雄武松的哥哥</dd>
           </dl>
    </body>
</html>