12 HTML:列表元素

列表元素的种类以及使用:

1.无序列表

列表项的顺序不影响语义
<ul> css:list-style-type 可以修改列表项前面的样式
<li> 列表里的条目

2.有序列表

列表项的顺序影响语义
<ol>
type,表示序号的类型,1表示数字编号(默认),a表示小写字母,A表示大写字母,i表示小写罗马数字,I表示大写罗马数字
start,数字表示列表项开始的序号
reverse,布尔属性,对序号进行反转
<li> value,表示此项开始的序号

3.自定义列表

<dl>包含术语定义以及描述的列表由键-值对列表组成,常用来表示术语解释或者问答等,其中术语和对术语的描述可以是多对多的关系
<dt> 申明一个术语
<dd> 术语的描述

P.S.三种列表可以嵌套,实际开发中也经常需要嵌套,尤其是用作导航。


练习:

实现三个歌单的html部分

<ul>
     <li>云音乐飙升榜
        <ol>
            <li>最美的期待</li>
            <li>Pray For Me</li>
            <li>Logo</li>
        </ol>
    </li>
    <li>云音乐新歌榜
        <ol>
            <li>等你下课</li>
            <li>最美的期待</li>
            <li>你要的全拿走</li>
        </ol>
    </li>
    <li>网易原创歌曲榜
        <ol>
            <li>一直往前走</li>
            <li>昨日的你</li>
            <li>如期</li>
        </ol>
    </li>
</ul>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容