手记

【九月打卡】第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、使用场景:只要页面文字构成定义关系


课程收获:

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



1人推荐
随时随地看视频
慕课网APP