5-列表标签

列表标签

列表都不是单打独斗的，通常都是一组标签组成

1、无序列表

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

由两个标签组成，ul（容器级标签），li（容器级）

ul：英文ulordered list（无序列表）

li：英文list item（列表项）

无序列表的基本使用

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

需要注意的是，ul内部嵌套li，它们是父子关系。

规定：ul标签的内部必须只能嵌套li，li标签的内部可以嵌套任何标签，甚至是ul

列表的拓展，li标签内部可以继续嵌套列表结构

<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>
            <li>卢俊义</li>
        </ul>
    </li>
    <li>
        <h3>红楼梦</h3>
        <ul>
            <li>林黛玉</li>
            <li>薛宝钗</li>
            <li>王熙凤</li>
            <li>贾宝玉</li>
        </ul>
    </li>
    <li>
        <h3>三国演义</h3>
        <ul>
            <li>刘备</li>
            <li>曹操</li>
            <li>孙权</li>
            <li>张飞</li>
        </ul>
    </li>
</ul>

无序列表项之间没有先后顺序之分的

列表项之前的前缀样式是有CSS去控制的

2、有序列表

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

需要有两个标签组成ol，li

ol：英文ordered list（有序列表）

li：英文list item（列表项）

需要注意的是，ol内部嵌套li，它们是父子关系。

规定：ul标签的内部必须只能嵌套li，li标签的内部可以嵌套任何标签，甚至是ul

基本使用

<h2>三年级排名情况</h2>
<ol>
    <li>三年级2班</li>
    <li>三年级1班</li>
    <li>三年级2班</li>
</ol>

ol标签的嵌套

<h2>三年级期末考试排名</h2>
<ol>
    <li>
        <h3>三年级2班</h3>
        <ol>
            <li>王同学</li>
            <li>张同学</li>
            <li>李同学</li>
        </ol>
    </li>
    <li>
        <h3>三年级1班</h3>
        <ol>
            <li>樊同学</li>
            <li>周同学</li>
            <li>孟同学</li>
        </ol>
    </li>
    <li>
        <h3>三年级3班</h3>
        <ol>
            <li>刘同学</li>
            <li>赵同学</li>
            <li>李同学</li>
        </ol>
    </li>
</ol>

3、定义列表

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

2. 由三个标签组成，dl，dt，dd

dl英文：definition list 表示创建一个自定义列表结构

dt英文：definition term定义主题或者定义术语，表示一个列表的主题

dd英文：definition description 定义解释项，表示解释和说明前面的主题内容

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

基本使用：

<h2>国内女明星</h2>
<dl>
    <dt>杨幂</dt>
    <dd>作品：《三生三世》、《宫》、《仙剑奇侠传》等</dd>

    <dt>赵丽颖</dt>
    <dd>作品：《花千骨》、《楚乔传》、《陆贞传奇》等</dd>

    <dt>刘诗诗</dt>
    <dd>作品：《步步惊心》、《仙剑奇侠传》、《女医明妃传》等</dd>
</dl>

3. 每个dt主题的后面可以跟0-多个解释的dd，每个dd解释的就是上一个最近的dt

<dl>
    <dt>杨幂</dt>
    <dd>作品：《三生三世》、《宫》、《仙剑奇侠传》等</dd>
    <dd>家庭：小糯米</dd>
    <dd>迪丽热巴</dd>

    <dt>赵丽颖</dt>
    <dd>作品：《花千骨》、《楚乔传》、《陆贞传奇》等</dd>
    <dd>家庭：冯绍峰</dd>

    <dt>刘诗诗</dt>
    <dd>作品：《步步惊心》、《仙剑奇侠传》、《女医明妃传》等</dd>
    <dd>家庭：吴奇隆</dd>
</dl>

4. dt和dd都是容器级标签，内部可以存放任意内容

<dl>
    <dt>杨幂</dt>
    <dd>
        <p>作品：《三生三世》、《宫》、《仙剑奇侠传》等</p>
        <p>家庭：小糯米</p>
        <p>工作室：迪丽热巴</p>
    </dd>

    <dt>赵丽颖</dt>
    <dd>
        <p>作品：《花千骨》、《楚乔传》、《陆贞传奇》等</p>
        <p>家庭：冯绍峰</p>
    </dd>

    <dt>刘诗诗</dt>
    <dd>
        <p>作品：《步步惊心》、《仙剑奇侠传》、《女医明妃传》等</p>
        <p>家庭：冯绍峰</p>
    </dd>
</dl>