列表标签的分类及使⽤
⼀、列表标签的分类
1、⽆序列表
2、有序列表
3、⾃定义列表
⼆、列表标签的特点
使得界⾯更加的⼲净、整洁、有序。
三、列表标签的应⽤
1、⽆序列表(ul)
⽆序列表的各个列表项之间是没有顺序级别之分的，是并列的。
基本语法格式如下：
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
html ul标签...
</ul>
注：ul标签中只能存放li标签，⽽li 标签相当于⼀个容器，可以放任何标签。
2、有序列表（ol）
有序列表中的各个列表项之间是有顺序之分的，⽐如说⽐赛名次等必须按照1 2 3的顺序排列，在输出时，有序列表会⾃动给列表项之前加上顺序，1、2、3…
有序列表的基本语法格式如下：
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ol>
3、⾃定义列表
基本语法格式⼊下;
兰州市
城关区
安宁区
七⾥河区
西固区
注：多个dd标签对应于⼀个dt标签。 在sublime中写⼀段代码分别实现这三中标签：
<title>Document</title>
</head>
<body>
<!-- 1、⽆序列表 -->
<ul>
<li>彭昱畅</li>
<li>刘昊然</li>
<li>张⼦枫</li>
</ul>
<!-- 2、有序列表 -->
<ol>
<li>第⼀名</li>
<li>第⼆名</li>
<li>第三名</li>
</ol>
<!--3、⾃定义列表 -->
<dl>
<dt>兰州市</dt>
<dd>城关区</dd>
<dd>安宁区</dd>
<dd>七⾥河区</dd>
<dd>西固区</dd>
</dl>
</body>
</html>
输出的结果如下所⽰：
补充⽆序列表;
由于Ul标签中只能存放li标签，所以想要为以上⽆序列表中的三⼈添加更多信息，则可以选择在li标签中选择使⽤其他标签。代码如下：
<title>Document</title>
</head>
<body>
1、⽆序列表<br />
<ul>
<li>彭昱畅
<p>
彭昱畅，1994年10⽉25⽇出⽣于江西省新余市，毕业于上海戏剧学院⽊偶表演系，中国内地男演员</p>
<p>
2015年12⽉，参演爱情喜剧《太⼦妃升职记》，以强公公⼀⾓正式出道,2016年1⽉，以湖南卫视《天天向上》“天天⼩兄弟”主持登场；同年主演明星养成⽹络剧《明星志愿》和搜狐⾃制剧《刺客列传》；2017年，出演青春励志剧《浪花⼀朵朵》；同年，凭借校园励志⽚《闪光少⼥》提名第20届上海电影节亚洲新⼈奖最佳男演员奖；同年，参加浙江卫视《演员的诞⽣》；2018年4⽉13⽇，作为固定成员参加湖南卫视的综艺节⽬《向往的⽣活》第⼆季。2019年，参演都市情感剧《都挺好》 [10]  ；8⽉，获2019福布斯中国100名⼈榜荣誉。
</p>
</li>
<li>刘昊然
<p>
刘昊然，1997年10⽉10⽇出⽣于河南省平顶⼭市，中国内地男演员，就读于中央戏剧学院表演系本科。2014年，主演电影《北京爱情故事》，正式出道，凭借该⽚提名第21届北京⼤学⽣电影节最佳新⼈奖。2015年5⽉，加盟国防教育特别节⽬《真正男⼦汉》；7⽉，以专业和⽂化双科第⼀名的成绩被
中央戏剧学院录取.
</p>
</li>
<li>张⼦枫
<p>
张⼦枫，2001年8⽉27⽇出⽣于河南省三门峡市，中国内地⼥演员。在5岁时，张⼦枫开始拍⼴告并因参演多部电视剧从⽽进⼊演艺圈。2009年，凭灾难情感⽚《唐⼭⼤地震》的“⼩⽅登”⼀⾓⽽崭露头⾓，并获得第31届⼤众电影百花奖最佳新⼈奖。
</p>
</li>
</ul>
</body>
</html>
结果如下图：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。