1209列表元素

无序列表

ul+li

<ul>
    <li>牛奶一箱</li>
    <li>蛋糕一个</li>
    <li>苹果10斤</li>
</ul>

效果图

有序列表

ol+li

<ol>
    <li>牛奶一箱</li>
    <li>蛋糕一个</li>
    <li>苹果10斤</li>
</ol>

效果图

自定义列表

dl+dt+dd…

<dl>
<dt>名称：</dt>
<dd>php中文网</dd>
<dt>地址：</dt>
<dd>这是地址</dd>
<dt>联系：</dt>
<dd>电话：<a href="tel:1234567896">123456**456</a></dd>
<dd>邮箱：<a href="mailto:admin@admin.com"></a></dd>
</dl>

效果图

应用1.导航

<ul class="menu">
<li><a href="#">首页</a></li>
<li><a href="#">视频教学</a></li>
<li><a href="#">社区问答</a></li>
<li><a href="#">资料下载</a></li>
<li><a href="#">登录</a></li>
</ul>

效果图

应用2.通用列表

    <ul>
        <li>
            <a href="https://www.php.cn/course/812.html"><img src="https://img.php.cn/upload/course/000/000/001/5d240e769553b901.jpg" alt=""></a>
            <a href="">web前端开发</a>
        </li>
        <li>
            <a href="https://www.php.cn/course/812.html"><img src="https://img.php.cn/upload/course/000/000/001/5d240e769553b901.jpg" alt=""></a>
            <a href="">web前端开发</a>
        </li>
        <li>
            <a href="https://www.php.cn/course/812.html"><img src="https://img.php.cn/upload/course/000/000/001/5d240e769553b901.jpg" alt=""></a>
            <a href="">web前端开发</a>
        </li>
        <li>
            <a href="https://www.php.cn/course/812.html"><img src="https://img.php.cn/upload/course/000/000/001/5d240e769553b901.jpg" alt=""></a>
            <a href="">web前端开发</a>
        </li>
    </ul>