列表
作用
布局内容排列整齐的区域
列表分类
无序列表
作用
布局排列整齐的不需要规定顺序的区域
标签
ul嵌套li，ul是无需列表，li是列表条目
一个ul包含多个li，li独占一行
ul标签里面只能包裹li标签，li标签里面可以包裹任何内容
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>无序列表</title>
</head>
<body>
<ul>
<li>海绵宝宝</li>
<li>派大星</li>
<li>章鱼哥</li>
</ul>
</body>
</html>实现效果
有序列表
作用
布局排列整齐的需要规定顺序的区域
标签
ol嵌套li，ol是有列表，li是列表条目
注意事项：
ol标签里面只能包裹li标签，li标签里面可以包裹所有标签
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ol>
<li>海绵宝宝</li>
<li>派大星</li>
<li>章鱼哥</li>
</ol>
</body>
</html>实现效果
定义列表
标签
dl嵌套dt和dd，dl是定义列表，dt是定义列表的标题，dd是定义列表的描述/详情
注意事项：dl标签里面只能包裹dt和dd标签，dt和dd标签里面可以包裹所有标签
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>定义列表</title>
</head>
<body>
<dl>
<dt>比奇堡</dt>
<!-- 描述默认缩进 -->
<dd>海绵宝宝</dd>
<dd>派大星</dd>
<dd>章鱼哥</dd>
</dl>
</body>
</html>实现效果
扫一扫
2999
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
