【九月打卡】第2天 前端工程师2022版 列表标签第一讲

课程名称：前端工程师2022版

课程章节：列表标签

课程讲师： elex

课程内容：

列表标签一共有三种：

一、无序列表：unordered list，没有刻意顺序的列表

1、标签：<ul>定义无序列表，<li>定义列表项

2、语法：

           <ul>

                <li>列表项1</li>

                <li>列表项2</li>

                <li>列表项3</li>

            </ul>

3、使用规则：

（1）<ul>中嵌套<li>标签，<ul>标签的子标签只能是<li>标签

（2）<li>标签不能单独使用，需要放在<ul>中使用

（3）嵌套列表的实现：<li>标签中可以包含任何标签，包括<ul>标签、h、p

4、标签属性：type(HTML5中已经废弃)

属性值：circle（空心圆），square（实心方块），disc（实心圆，默认值）

5、使用场景：页面列出搜索结果、新闻条目、导航条

二、有序列表：ordered list，有刻意顺序的列表

1、标签：<ol>定义有序列表，<li>定义列表项

2、语法：

           <ol>

                <li>列表项1</li>

                <li>列表项2</li>

                <li>列表项3</li>

            </ol>

3、使用规则：

（1）<ol>中嵌套<li>标签，<ol>标签的子标签只能是<li>标签

（2）<li>标签不能单独使用，需要放在<ol>中使用

（3）嵌套列表的实现：<li>标签中可以包含任何标签，包括<ol>标签

4、标签属性：不常用：type&start&reversed

type属性：设置列表前面编号的类型，a/A：小写/大写英文字母编号；i/I：小写/大写罗马数字编号；1：表示数字编号（默认）

start属性：用于指定列表编号的起始值，必须是整数，且值为阿拉伯数字（不需要管type属性值）

reversed属性：用于指定列表中条目是否倒序排列，不需要值，只要写该单词就好，一般用该属性时不用start，否则会产生干扰

5、使用场景：页面显示排行榜

三、定义列表：definition list，需要逐条给出定义描述的列表

1、标签：<dl>定义了定义列表，<dt>定义列表中的项目，<dd>定义列表项目的描述

2、语法：

           <dl>

                <dt>草莓牛奶</dt>

                <dd>草莓牛奶是草莓加牛奶</dd>

            </dl>

3、使用规则：参考ul和ol

4、使用场景：只要页面文字构成定义关系

课程收获：

谢谢老师，讲的非常细致，很容易懂。