html-列表

木兮.

已于 2024-03-20 22:27:31 修改

阅读量458

点赞数 10

文章标签： html 前端

于 2024-03-20 22:26:19 首次发布

本文链接：https://blog.csdn.net/2301_78251908/article/details/136890502

版权

本文详细介绍了HTML中无序列表(ul-li)、有序列表(ol-li)和定义列表(dl-dd)的结构、用法和实例，包括嵌套和自定义内容的处理，有助于理解HTML列表的基本构建。

摘要由CSDN通过智能技术生成

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
评论
html-列表

作用，定义一个标题和内容自定义的列表结构三个标签组成： dl，dt，dddl：definition list 创建一个自定义列表dt：definition term定义主题或定义术语，表示列表的主题dd：definition description定义解释项，表示解释说明前面的主题内容dl内部只能存放dt和dd；dt和dd是同级关系。
复制链接

扫一扫