前端笔记_列表标签

这篇文章学习列表标签,在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可以对其进行设置,自定义标签也是如此。列表不同于表格,表格更多是用来展示数据,而列表才是用来页面布局。

 

好了,这篇文章就到这里啦!

怡然一记
前端笔记_列表标签
https://xsunhua.cn/215.html
THE END
分享
二维码
打赏
海报
前端笔记_列表标签
这篇文章学习列表标签,在HTML中,列表标签可分为三大类: 无序列表 有序列表 自定义列表 无序列表 无序列表的简单理解就是一个列表,其中的元素没有先后顺序……
<<上一篇
下一篇>>
文章目录
关闭
目 录