html之列表标签

一，无序列表

<!--
    列表标签
    1,作用:
    2,html中的列表标签分类
    (1),无序列表(最多) unordered list
    (2),有序列表(最少) ordered list
    (3),定义列表(其次) definition list

    3,无序列表的作用:
    4,无序列表格式: <ul>
                <li> 要显示的内容</li>
            </ul>
    5,无序列表注意点:
    (1),HTML标签是给一堆数据做了予以的限制,但是并不能修改其显示样式,修改显示样式就会用到css
    (2),ul和li标签是同时出现的
    (3),ul和li是一个组合,不推荐其他的标签写在里面
    (4),复杂的内容可以放在li标签里面
    (5),最重要的一点，嵌套使用，可以在ul li 列表标签里面嵌套使用 ul li 列表标签，只能在li标签里面其那套

    6,无序列表应用场景:
    (1)新闻列表
    (2)商品列表
    (3)导航条
-->

<h2>中国的城市有哪些</h2>
<ul>
    <li>广州</li>
    <li>北京</li>
    <li>定西</li>
    <li>兰州</li>
    <li>上海</li>
</ul>

<!--
    无序列表ul li 标签中可以嵌套无序列表标签ul li,只能嵌套在li中

    小技巧:在webStorm里面快速敲出ul li标签的方法
        先敲出 ul>li 然后点击 tab 键就会补全,
        如果是要多个li,先敲出 ul>li*4(表示有4个li) 然后点击 tab 键就会补全
-->
<h1>物品清单</h1>
<ul>
    <li>
        <h2>蔬菜</h2>
        <ul>
            <li>白菜</li>
            <li>萝卜</li>
            <li>黄瓜</li>
        </ul>
    </li>

    <li>
        <h2>水果</h2>
        <ul>
            <li>橘子</li>
            <li>苹果</li>
            <li>香蕉</li>
        </ul>
    </li>
</ul>

二，有序列表

<!--
    有序列表格式
    <ol>
        <li></li>
    <ol>
-->

<ol>
    <li>演员</li>
    <li>小丑</li>
    <li>女人不应该让男人流泪</li>
    <li>唱歌</li>
</ol>

三，定义列表

<!--
    定义列表格式
    <dl>
        <dt></dt>
        <dd></dd>
    </dl>

    dt:definition title 定义的标题
    dd:definition description 定义的描述

应用场景:
    (1)做网站尾部的相关信息
    (2)图文混排
-->
<dl>
    <dt>北京</dt>
    <dd>中国首都</dd>

    <dt>上海</dt>
    <dd>大都市</dd>
</dl>