七、列表标签

126 阅读2分钟

七、列表标签

一)列表的应用场景

场景:在网页中按照“行”展示关联性的内容,如:新闻列表、排行榜等;

特点:按照“行”的方式,整齐显示内容

种类:无序列表、有序列表、自定义列表

二)无序列表(ul)

1.场景:在网页中表示一组无顺序之分的列表,如:新闻列表;

2.标签组成:

标签名说明
ul表示无序列表的整体,用于包裹标签
li表示无序列表里的每一项,用于包含每一行的内容

3.显示特点:列表的每一项前面默认显示圆点标识

4.注意事项:

*ul标签中只允许包含li标签;

*li标签可以包含任意内容。

5.代码格式:

    <h1>水果列表</h1>
    <ul>
        <li>释迦</li>
        <li>莲雾</li>
        <li>猕猴桃</li>
        <li>香蕉</li>
        <li>苹果</li>
    </ul>

6.显示效果:

image-20210821161905886.png

三)有序列表(ol)

1.场景:在网页中表示一组有顺序之分的列表,如:排行榜等。

2.标签组成:

标签名说明
ol表示有序列表的整体,用于包裹li标签
li表示有序列表里的每一项,用于包含每一行的内容

3.显示特点:列表的每一项前默认显示序号标识

4.注意事项:

*ol标签中只允许包含li标签;

*li标签里可以包含任意内容。

5.代码格式:

    <h1> 山河令男角排行榜 </h1>
        <ol>
            <li>周子舒</li>
            <li>温客行</li>
            <li>叶白衣</li>
            <li>蝎王</li>
            <li>曹蔚宁</li>
            <li>张成岭</li>
        </ol>

6.显示效果:

image-20210821162733858.png

四)自定义列表(dl)

1.场景网页的底部导航中通常会使用。

如:

image-20210821163025310.png

2.标签组成:

标签名说明
dl表示自定义列表的整体,用于包裹dt/dd标签
dt表示自定义列表的主题
dd表示自定义列表的针对主题的每一项内容

3.显示特点:dd前默认会有缩进效果

4.注意事项:

*dl标签中只允许包含dt/dd标签;

*dd/dt标签可以包含任意内容。

5.代码格式:

    <dl>
        <dt>帮助中心</dt>
        <dd>账户管理</dd>
        <dd>购物指南</dd>
        <dd>订单操作</dd>
​
    </dl>
​

6.效果显示:

image-20210821163746469.png

(Alt多选之后,同时按Ctrl+Shift+方向右键,多选文字,剪切,再在需要粘贴的地方用Alt多选,然后粘贴)

五)边框合并

使用场景:让相邻表格边框进行合并,得到细线边框的效果

代码:border-collapse:collapse;