前端笔记_列表标签

这篇文章学习列表标签，在HTML中，列表标签可分为三大类:

• 无序列表
• 有序列表
• 自定义列表

无序列表

无序列表的简单理解就是一个列表，其中的元素没有先后顺序，按照子代码排列

使用语法

<ul>
<li>分享</li>
<li>每一刻</li>
<li>的美好</li>
</ul>

效果演示

• 分享
• 每一刻
• 的美好

注意的点:

在<ul>标签中只能使用<li>标签，但是<li>标签可以看做一个容器，能放任何标签

有序标签

有序标签，简单理解就是生成列表其中的每一个列表元素，都按照顺序排列起来

使用语法

排名
<ol>
<li>张三</li>
<li>李四</li>
<li>王五</li>
</ol>

效果演示

排名

1. 张三
2. 李四
3. 王五

注意的点

和无序标签一样，只能存放<li>标签，但是<li>标签中可以使用任何标签

自定义标签

通过样式可以发现，他没有预定样式，但是他不同于有序和无序标签，他是通过三个标签组成:

• <dl> #容器
• <dt> #头部
• <dd> #描述

使用语法

<dl>
<dt>联系我们</dt>
<dd>官方网站</dd>
<dd>官方微信</dd>
<dd>官方邮箱</dd>
</dl>

效果演示

联系我们

官方网站

官方微信

官方邮箱

注意的点

自定义列表是通过三个标签而实现的，但是<dl>与<dt>,<dd>是父子关系，但是<dt>,<dd>是同列关系。

其他

无序标签和有序标签，都有预格式存在，但是通过CSS可以对其进行设置，自定义标签也是如此。列表不同于表格，表格更多是用来展示数据，而列表才是用来页面布局。

好了，这篇文章就到这里啦！