一、列表标签的分类
1、无序列表
2、有序列表
3、自定义列表
二、列表标签的特点
使得界面更加的干净、整洁、有序。
三、列表标签的应用
1、无序列表(ul)
无序列表的各个列表项之间是没有顺序级别之分的,是并列的。
基本语法格式如下:
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ul>
注:ul标签中只能存放li标签,而li 标签相当于一个容器,可以放任何标签。
2、有序列表(ol)
有序列表中的各个列表项之间是有顺序之分的,比如说比赛名次等必须按照1 2 3的顺序排列,在输出时,有序列表会自动给列表项之前加上顺序,1、2、3…
有序列表的基本语法格式如下:
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ol>
3、自定义列表
基本语法格式入下;
- 兰州市
- 城关区
- 安宁区
- 七里河区
- 西固区
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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标签中选择使用其他标签。
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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>
结果如下图: