html-列表

本文详细介绍了HTML中无序列表(ul-li)、有序列表(ol-li)和定义列表(dl-dd)的结构、用法和实例,包括嵌套和自定义内容的处理,有助于理解HTML列表的基本构建。
摘要由CSDN通过智能技术生成

目录

1.无序列表

1.1实例

li标签拓展

 2.有序标签

2.1实例

2.2有序列表的嵌套

3.定义列表

3.1实例

3.2dd和dt标签

4.常用结构


1.无序列表

没有顺序之分

作用定义一个没有顺序的列表结构

两个标签组成:ul ,li

ul:ulordered list(无序列表)(容器级标签)

li:list item(列表项)(容器级标签)列表项之间没有先后列表之分,列表项之前的前缀样式由css控制,只负责结构的搭建

ul内部嵌套li,父子关系,ul内部必须嵌套li标签,li内部可以嵌套任何标签,甚至是ul标签。

1.1实例

<body>
    <h2>四大名著</h2>
    <ul>
        <li>西游记</li>
        <li>红楼梦</li>
        <li>水浒传</li>
        <li>三国演义</li>
    </ul>
</body>

li标签拓展
<body>
    <h2>四大名著</h2>
    <ul>
        <li>
            <h3>西游记</h3>
            <ul>
                <li>唐僧</li>
                <li>孙悟空</li>
                <li>猪八戒</li>
                <li>沙悟净</li>
            </ul>
        </li>
        <li>
            <h3>红楼梦</h3>
            <ul>
                <li>林黛玉</li>
                <li>贾宝玉</li>
                <li>王熙凤</li>
            </ul>
        </li>
        <li>
            <h3>水浒传</h3>
            <ul>
                <li>宋江</li>
                <li>武松</li>
                <li>林冲</li>
            </ul>
        </li>
        <li>
            <h3>三国演义</h3>
            <ul>
                <li>曹操</li>
                <li>刘备</li>
                <li>关羽</li>
            </ul>
        </li>
    </ul>
</body>

 2.有序标签

作用:定义一个有序列表的结构

两个标签组成:ol ,li

ol:ordered list(有序列表) li:还是列表项(与无序列表一致)

ol内只能有li标签

2.1实例

<body>
    <h2>年级排名情况</h2>
    <ol>
        <li>年级一班</li>
        <li>年级三班</li>
        <li>年级二班</li>
    </ol>
</body>

2.2有序列表的嵌套

<body>
    <h2>年级排名情况</h2>
    <ol>
        <li>
            <h3>年级二班</h3>
            <ol>
                <li>张三1</li>
                <li>李四1</li>
                <li>王五1</li>
            </ol>
        </li>
        <li>
            <h3>年级一班</h3>
            <ol>
                <li>李四2</li>
                <li>王五2</li>
                <li>张三2</li>
            </ol>
        </li>
    </ol>
</body>

3.定义列表

作用,定义一个标题和内容自定义的列表结构

三个标签组成: dl,dt,dd

dl:definition list 创建一个自定义列表

dt:definition term定义主题或定义术语,表示列表的主题

dd:definition description定义解释项,表示解释说明前面的主题内容

dl内部只能存放dt和dd;dt和dd是同级关系

3.1实例

<body>
    <h2>文案</h2>
    <dl>
        <dt>emo文案</dt>
        <dd>emo文案1,2,3</dd>

        <dt>积极文案</dt>
        <dd>积极文案1,2,3</dd>
        
        <dt>鸡汤</dt>
        <dd>鸡汤1,2,3</dd>
    </dl>
</body>

3.2dd和dt标签

每个dt主题可以跟多个dd,每个dd解释的是上一个最近的dt

<body>
    <h2>文案</h2>
    <dl>
        <dt>emo文案</dt>
        <dd>emo文案1,2,3</dd>
        <dd>哭哭文案1,2,3</dd>

        <dt>积极文案</dt>
        <dd>积极文案1,2,3</dd>
        <dd>笑笑文案1,2,3</dd>

        <dt>鸡汤</dt>
        <dd>鸡汤1,2,3</dd>
        <dd>无用鸡汤1,2,3</dd>
    </dl>
</body>


dt和dd都是容器级标签,可以存放任何内容

<body>
    <h2>文案</h2>
      <dl>
         <dt>emo文案</dt>
         <dd>
             <p>emo文案1,2,3</p>
             <p>哭哭文案1,2,3</p>
         </dd>

         <dt>积极文案</dt>
         <dd>
            <p>积极文案1,2,3</p>
            <p>笑笑文案1,2,3</p>
         </dd>

         <dt>鸡汤</dt>
         <dd>
             <p>鸡汤1,2,3</p>
             <p>无用鸡汤1,2,3</p>
         </dd>
     </dl>
</body>

4.常用结构

<body>
    <h2>文案</h2>
    <dl>
         <dt>emo文案</dt>
         <dd>
             <p>emo文案1,2,3</p>
             <p>哭哭文案1,2,3</p>
         </dd>
     </dl>
     <dl>
         <dt>积极文案</dt>
         <dd>
         <p>积极文案1,2,3</p>
         <p>笑笑文案1,2,3</p>
         </dd>
     </dl>
     <dl>
         <dt>鸡汤</dt>
         <dd>
             <p>鸡汤1,2,3</p>
             <p>无用鸡汤1,2,3</p>
         </dd>
     </dl>
</body>

  • 10
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

木兮.

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值