前端笔记_列表标签
这篇文章学习列表标签,在HTML中,列表标签可分为三大类:
- 无序列表
- 有序列表
- 自定义列表
无序列表
无序列表的简单理解就是一个列表,其中的元素没有先后顺序,按照子代码排列
使用语法
<ul>
<li>分享</li>
<li>每一刻</li>
<li>的美好</li>
</ul>
效果演示
- 分享
- 每一刻
- 的美好
注意的点:
在<ul>标签中只能使用<li>标签,但是<li>标签可以看做一个容器,能放任何标签
有序标签
有序标签,简单理解就是生成列表其中的每一个列表元素,都按照顺序排列起来
使用语法
排名
<ol>
<li>张三</li>
<li>李四</li>
<li>王五</li>
</ol>
效果演示
排名
- 张三
- 李四
- 王五
注意的点
和无序标签一样,只能存放<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



共有 0 条评论