一、无序列表简介
无序列表,很好理解,有序列表的列表项是有一定顺序的,而无序列表的列表项是没有顺序的。默认情况下,无序列表的列表项符号是●,不过可以通过type属性来改变其样式。
语法:
<ul>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
说明:
ul,即unordered list(无序列表)。li,即list(列表项)。
在该语法中,使用<ul></ul>标签表示一个无序列表的开始和结束,<li>表示这是一个列表项。一个无序列表可以包含多个列表项。
注意,ul标签和li标签也是配合一起使用,不可以单独使用,而且ul标签的子标签也只能是li标签,不能是其他标签。这一点跟有序列表是一样的。
举例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无序列表</title>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>Vue.js</li>
</ul>
</body>
</html>
浏览器预览效果如下图所示。
二、type属性
跟有序列表一样,我们也可以使用type属性来定义列表项符号。
语法:
<ul type="属性值">
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
说明:
在无序列表中,type属性取值如下表所示。
属性值 | 列表项符号 |
---|---|
disc | 实心圆●(默认值) |
circle | 空心圆○ |
square | 正方形■ |
跟有序列表一样,对于无序列表的列表项符号,等学了CSS之后,我们可以放弃type属性,而使用list-style-type属性。
举例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>type属性</title>
</head>
<body>
<ul type="circle">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>Vue.js</li>
</ul>
</body>
</html>
浏览器预览效果如下图所示。
三、深入无序列表
在实际的前端开发中,无序列表比有序列表更为实用。更准确点说,我们一般都是使用无序列表,几乎用不到有序列表。不说别的,就拿绿叶学习网来说,主导航、工具栏、动态栏等地方都用到了无序列表。凡是需要显示列表数据的地方都用到了,可谓无处不在!
下面,我们再来看看大型网站在哪些地方用到了无序列表,如下面3张图片所示。
可能很多人都疑惑:这些效果是怎样用无序列表做出来的呢?网页外观嘛,当然都是用CSS来实现的啊!现在不懂没关系,为了早日做出这种美观的效果,小伙伴们好好加油把CSS学好!
此外,对于无序列表来说,还有以下两点要注意。
- (1)ul元素的子元素只能是li,不能是其他元素。
- (2)ul元素内部的文本,只能在li元素内部添加,不能在li元素外部添加。
举例:ul的子元素只能是li,不能是其他元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<ul>
<div>前端最核心3个技术:</div>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>
浏览器预览效果如下图所示。
分析:
上面代码是错误的,因为ul元素的子元素只能是li元素,不能是其他元素。正确做法是这样:
<div>前端最核心3个技术:</div>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
举例:文本不能直接放在ul元素内
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<ul>
前端最核心3个技术:
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>
浏览器预览效果如下图所示。
分析:
上面代码是错误的,因为文本不能直接放在ul元素内。