列表标签 ul+ol/li

04-07、列表标签 ul+ol/li

概述

列表标签：无序列表ul+li、有序列表ol+li和定义列表 dl dt dd 三种，在网页制作中应用非常广泛，列表就是信息资源的一种展示形式。

特点：

它们都是块元素，可以受到宽度，高度，内外间距的影响，独占文档流
列表标签元素可以嵌套：块元素（div,p,h1~h6,自身ul li ），也可以嵌套行内元素(strong,a，span,em ,i) ，图片，表单等等。

无序列表 ul+li：

ul - 英文全称是：un + ordered list 意思是：不排序的列表
li - 英文全称是：list item 意思是：列表项
无序默认情况下是：一个圆点
如果要更改ul的显示规则，可以考虑使用list-style修改即可。

<ul>
	<li>列表</li>
    <li>列表</li>
    <li>列表</li>
</ul

有序列表 ol+li：

ol英文全称是：ordered list 意思是：排序的列表
li - 英文全称是：list item 意思是：列表项
有序默认情况下是：一个数字
如果要更改ol的显示规则，可以考虑使用list-style修改即可。

<ol>
	<li>列表</li>
    <li>列表</li>
    <li>列表</li>
</ol>

代码

demo13.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表标签学习-ul/ol/li</title>
    <style>
       ul{
            list-style: disc;
       }
    </style>
</head>
<body>
    
    <!--无序的列表-->
    <ul>
        <li>
            IT·互联网前端开发·Java开发
            <ul>
                <li>
                    IT·互联网前端开发·Java开发
                    <ul>
                        <li>IT·互联网前端开发·Java开发</li>
                        <li>IT·互联网前端开发·Java开发</li>
                        <li>IT·互联网前端开发·Java开发</li>
                        <li>IT·互联网前端开发·Java开发</li>
                    </ul>    
                </li>
                <li>IT·互联网前端开发·Java开发</li>
                <li>IT·互联网前端开发·Java开发</li>
            </ul>
        </li>
        <li>设计·创作平面设计·室内设计</li>
        <li>考试·考证公务员·教师考试</li>
    </ul>

    <!--有序的列表-->
    <ol>
        <li>
            IT·互联网前端开发·Java开发
            <ul>
                <li>
                    IT·互联网前端开发·Java开发
                    <ul>
                        <li>IT·互联网前端开发·Java开发</li>
                        <li>IT·互联网前端开发·Java开发</li>
                        <li>IT·互联网前端开发·Java开发</li>
                        <li>IT·互联网前端开发·Java开发</li>
                    </ul>    
                </li>
                <li>IT·互联网前端开发·Java开发</li>
                <li>IT·互联网前端开发·Java开发</li>
            </ul>
        </li>
        <li>设计·创作平面设计·室内设计</li>
        <li>考试·考证公务员·教师考试</li>
    </ol>


</body>
</html>