前端学习(HTML5列表标签的使用)(六)-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_74246993/article/details/142530990

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

前言

前言

表格是用来显示数据的，那么列表就是用来布局的

列表的最大特点就是整齐，整洁和有序，用来布局会更加的自由和方便

列表可以分为：无序列表，有序列表和自定义列表

无序列表

通过ur标签进行定义HTML页面中项目的无序列表，以项目符号呈现列表项，列表项使用<li>标签进行定义

基本语法格式：

<ul>

<li>first</li>

<li>second</li>

<li>third</li>

<li>fourth</li>

<li>fifth</li>

<li>sixth</li>

</ul>

特点

1.在无序列表中无顺序级别之分，是并列关系

2.ul标签中只能嵌套li标签，直接在ul标签中输入其他标签和文字的做法是不允许的

3.li标签之间相当于一个容器，可以容纳所有的元素

4.无序列表会带有自己的样式属性，但在实际使用时，可以使用CSS来设置属性

有序列表

有排列顺序的列表，各个列表项会按照一定的顺序排列定义

在HTML标签中，ol标签用于定义有序列表，列表排序以数字来显示，并使用li标签定义列表项

基本语法格式：

<ol>

<li>first</li>

<li>second</li>

<li>third</li>

<li>fourth</li>

<li>fifth</li>

<li>sixth</li>

</ol>

特点

1.ol标签中只能嵌套li标签，直接在ol标签中输入其他标签和文字的做法是不允许的

2.li标签之间相当于一个容器，可以容纳所有的元素

3.有序列表会带有自己的样式属性，但在实际使用时，可以使用CSS来设置属性

自定义列表

自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号

基本语法格式：

<dl>

</dl>

特点

1.dl里面只能包含dt和dd

2.dt和dd个数没有限制，经常是一个dt对应多个dd

3.在HTML标签中，dl标签用于定义描述列表，该标签会与dt（定义项目/名字）和dd（描述每一个项目/名字）一起使用

代码示例：

<!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>

<ul>

<li>first</li>

<li>second</li>

<li>third</li>

<li>fourth</li>

<li>fifth</li>

<li>sixth</li>

</ul>

<ol>

<li>first</li>

<li>second</li>

<li>third</li>

<li>fourth</li>

<li>fifth</li>

<li>sixth</li>

</ol>

<dl>

<dt>名词</dt>

<dd>名词解释</dd>

<dd>名词解释</dd>

</dl>

</body>

</html>