【学习打卡】第3天 前端零基础入门 第三章

课程名称：前端零基础入门（体系课）

课程章节： 第三章 列表标签

主讲老师：(课程中没有显示)

课程内容：

今天学习的内容包括：

• 列表标签(有序、无序和定义)

• 这些标签的使用方法

• 在网页中的使用场景
  

  
  

课程收获：

无序列表表现方式及属性

无序列表type属性属性更改列表开头的图形：

    圆形：<ul type="disc">

    正方形：<ul type="square">

    空心圆：<ul type="circle">   

-------------------------------

无序列表使用<ul>标签显示，里面每一项分别用<li>标签区分

    <ul>

    <li>列表项</li>

    <li>列表项</li>

    ......

    </ul>

有序列表表现方式及属性

有序列表使用 "type" 属性更改列表开头的符号：

type属性值：

1 使用数字进行排序 1,2,3,4...

a 使用小写字母进行排序 a,b,c,d...

A 使用大写字母进行排序 A,B,C,D...

i 使用小写罗马数字排序 i,ii,iii,iv...

I 使用大写罗马数字排序 I,II,III,IV...

-------------------------------

有序列表使用<ol>标签显示，里面每一项分别用<li>标签区分

    <ol>

    <li>列表项</li>

    <li>列表项</li>

    ......

    </ol>

定义列表标签（符合结构：定义列表项+列表项描述）

定义列表使用<dl>标签显示，列表项使用<dt>，列表项描述使用<dd>。

    ① <dt>和<dd>为同级标签，不能互相嵌套

    ② <dt>和<dd>都要放进<dl>标签内

    ③ <dd>相对来说会缩进

---------------

<dl>

    <dt></dt>

        <dd></dd>

        <dd></dd>

    <dt></dt>

        <dd></dd>

    ...

</dl>      

----列表标签应用场景----(开发中ul，ol的编号去掉，使用图片代替)

有序列表应用场景:

畅销榜

无序列表应用场景:

1.新闻列表

2.商品列表

3.导航条

定义列表的应用场景(网页底部):

1.做网站尾部的相关信息

2.做图文混排

3.带摘要的新闻列表

HTML中列表标签的分类

1 无序列表(最多)(unordered list)

2 有序列表(最少)(ordered list)

3 定义列表(其次)(definition list)

浏览器自带调试工具：

查看页面元素的方式

1:鼠标右键查看网页源代码

2:键盘快捷键 F12/(Fn+F12)/Ctrl+Shift+I 

今天学习课程共用了60分钟，学习了一下html的有序列表、无序列表和定义列表标签的使用方法以及在网页中的使用场景等,今天也是收获满满的一天，希望能够每天学习一点点,一直坚持下，加油! 

下载视频