前端入门：HTML（列表）

1.有序列表：

type的类型一共有5种：A、a、I、i、1（大小写英文，大小写罗马数字，数字）

start：代表的是从哪一个开始，例如5就是从E开始

当没有type时，默认的是从数字1开始，而且ol标签里只能放li标签，如果要创建其他标签，需要放在li标签里

 <ol type="A" start="5">

            <li>把冰箱门打开</li>

            <li>把大象装进去</li>

            <li>把冰箱门关住</li>

        </ol>

2.无序列表：指列表项中的内容，是没有时间、空间或者逻辑等顺序要求的

type一共有四种形式：disc(实心圆点）、circle（空心圆）、square（实心方块）、none（隐藏项目符号），当不定义时，默认为实心圆点

  <ul type="disc">

            <li>接电话</li>

            <li>抱孩子</li>

            <li>关煤气</li>

        </ul>

3.自定义列表：除了列表外，还有标题

<dl></dl>：定义列表，这个为其余两个的父标签

<dt></dt>：定义术语，与dd为兄弟标签

<dd></dd>：定义描述，可以有多个

这种字体大小一致，标题和内容之间有缩进，要解决这个问题需要学习css

 <dl>

            <dt>怎么能够天天开心？</dt>

            <dd>可以运动</dd>

            <dd>积极向上</dd>

        </dl>

        <dl>

            <dt>帮助中心</dt>

            <dd>账户管理</dd>

            <dd>订单指南</dd>

            <dd>订单操作</dd>

        </dl>

4.快速创建标签（Emmed插件）

<!-- ctrl+/ -->：ctrl+/快速创建注释

         <!-- 创建一个标签，并且标签里面有文本 -->

         <!-- h1{这个是一级标签} -->

         <h1>这个是一级标签</h1>

         <!-- 创建多个相同的标签，并且标签里面有文本 -->

         <!-- 标签名{标签文本内容}*标签重复次数 -->

         <!-- h1{这是一级标签}*5 -->

         <h1>这是一级标签</h1>

         <h1>这是一级标签</h1>

         <h1>这是一级标签</h1>

         <h1>这是一级标签</h1>

         <h1>这是一级标签</h1>

        <!-- 创建多个不同的标签，并且标签里面有文本 -->

        <!-- 标签${标题文$本内容}*标签重复次数 -->

        <!-- h${这是第$级别的标题}*6 -->

        <h1>这是第1级别的标题</h1>

        <h2>这是第2级别的标题</h2>

        <h3>这是第3级别的标题</h3>

        <h4>这是第4级别的标题</h4>

        <h5>这是第5级别的标题</h5>

        <h6>这是第6级别的标题</h6>

        <!-- 嵌套标签 -->

        <!-- 父标签名>子标签名{子标签文本}*子标签重复次数 -->

        <!-- ul>li{这是一个ul标签里面的五个li标签}*5 -->

        <ul>

            <li>这是ul标签里面的五个li标签</li>

            <li>这是ul标签里面的五个li标签</li>

            <li>这是ul标签里面的五个li标签</li>

            <li>这是ul标签里面的五个li标签</li>

            <li>这是ul标签里面的五个li标签</li>

        </ul>

        <!-- ul*5>li{这是五个ul标签里面的各有一个li标签} -->

        <ul>

            <li>这是五个ul标签里面的各有一个li标签</li>

        </ul>

        <ul>

            <li>这是五个ul标签里面的各有一个li标签</li>

        </ul>

        <ul>

            <li>这是五个ul标签里面的各有一个li标签</li>

        </ul>

        <ul>

            <li>这是五个ul标签里面的各有一个li标签</li>

        </ul>

        <ul>

            <li>这是五个ul标签里面的各有一个li标签</li>

        </ul>

4.列表案例

要实现的效果如下：

源代码如下：

 <!-- 列表案例 -->

        <h3 align="center">综合案例</h3>

        <p>

            &emsp;&emsp;万里长城，龙脉绵延，是中华民族的骄做，无论是“望长城内外惟余羿葬”的诗句，还是“万里长城永不倒”的歌谣，

            或是“巨龙机卧轮聚巍峨”的诗歌，无不展现着长城在中国人心中的分量，其实长城也是西家端下永久的绘画题材，中国画中的国

            画长城有着倪深的内在含义和许多美好7的9商意，所以中国人喜欢西长城覆色而后挂于厅量，不但求吉析福，还承载着中华悠悠历史

            和美好希置以及勇败天畏的中华魂。山调大脊”。自建成至今，这座县衙大门一直是怀柔的街署正门。且历经多次修，仍保持原风格。

        </p>

        <p>

            &nbsp;&nbsp; &nbsp;&nbsp;今天给大家带来几幅元鲁通家的长城作品，元鲁撞面金色长域山水面的王字，他的北国长城面作品，

            既有着深漫的传统积淀，又有着鲜明的时代气息，雄浑博大、气势恢宏，博得了画界同仁和众多书面爱好者的青睐，多幅作品曾被

            国内知名的艺术机构收蒙及作为外交国礼赠国外政要。

        </p>

        <p align="center"><img src="E:\学习前端\one.png" alt = ""></p>

        <!-- 有序列表 -->

        <b><h3>费曼学习法</h3></b>

        <ol type="1" start="1">

            <li>

                <a href="https://v3.bootcss.com/components/#navbar">按所学内容，迅速记录到一张纸上</a>

            </li>

            <li>

                <a href="https://dict.youdao.com/">联系传授别人</a>

            </li>

            <li>

                <a href="https://fontawesome.dashgame.com/">查漏补缺，找到不足之处</a>

            </li>

            <li>

                <a href="https://www.baidu.com">优化及完善</a>

            </li>

        </ol>

        <!-- 无序列表 -->

        <b><h3>小段子</h3></b>

        <ul type="disc">

            <li>北冥有鱼</li>

            <li>其名为鲲</li>

            <li>鲲之大</li>

            <li>不知其几千里也</li>

            <li>化而为鸟</li>

            <li>其名为鹏</li>

        </ul>

        <!-- 自定义列表 -->

        <b><h3>图文混排</h3></b>

        <dl>

            <dt>

                <img src="E:\学习前端\three.jpg" alt = "电影名称：《我和我的祖国》" width="300" hight="280">

            </dt>

            <dd>电影名称：《我和我的祖国》</dd>

            <dd>领衔主演：黄渤，张译，韩昊霖，杜江，葛优</dd>

            <dd>导演：陈凯歌，张一白，管虎，薛晓路，徐峥</dd>

            <dd>类型：剧情</dd>

        </dl>

        <dl>

            <dt>

                <img src="E:\学习前端\two.jpg"alt = "电影名称：《建党伟业》" width="300" hight="280">

            </dt>

            <dd>电影名称：《建党伟业》</dd>

            <dd>领衔主演：任达华，聂远，郭涛，马少骅，一真</dd>

            <dd>导演：韩三平，黄建新，沈东，陆川，李少红</dd>

            <dd>类型：剧情，历史</dd>

        </dl>