接着上节内容,我们继续分享关于列表的内容,无序列表的列表项是没有顺序的,默认情况下,列表项符号是 ●,可以通过属性type改变列表项符号。
<html>
<head>
<title>无序列表</title>
</head>
<body>
<ul>
<li>无序列表项</li>
<li>无序列表项</li>
<li>无序列表项</li>
<li>无序列表项</li>
</ul>
</body>
</html>
无序列表,ul,英文意思是 unordered list,列表项li,也是list item。使用<ul></ul>标签符表示一个无序列表开始和结束,<li>表示一个列表项。无序列表的标签符也是需要成对使用的,在其内部不能存在其他标签。
<html>
<head>
<title>无序列表</title>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
<li>PHP</li>
</ul>
</body>
</html>
<html>
<head>
<title>无序列表</title>
</head>
<body>
<ul type="circle">
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
<li>PHP</li>
</ul>
</body>
</html>
<html>
<head>
<title>无序列表</title>
</head>
<body>
<ul type="square">
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
<li>PHP</li>
</ul>
</body>
</html>
可以通过type属性,改变列表项符号的样式。
type属性 | |
属性 | 序号类型 |
disc | 默认值,实心圆 ● |
circle | 空心圆 ○ |
square | 实心正方形 ■ |
无序列表type属性在实际开发中,可以用CSS层叠样式表实现,后期我们分享关于CSS时再说。
在前端开发中,无序列表的使用很广泛,是HTML中极其重要的标签符,我们经常需要用到它来制作导航栏、文本列表、图片列表等。
疑问:无序列表ul元素内部的子元素是否只允许li元素?
解答:是的,ul元素的子元素只能是li,不能是其他元素。对于ul内部的文本,也只能在li元素中添加,不能在li元素外部添加。示例代码如下:
<html>
<head>
<title>无序列表,错误写法</title>
</head>
<body>
<ul type="circle">
前端技术的三个核心部分:
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
</ul>
</body>
</html>
<html>
<head>
<title>无序列表,正确写法</title>
</head>
<body>
前端技术的三个核心部分:
<ul type="circle">
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
</ul>
</body>
</html>
下节我们接着说定义列表的内容。