HTML无序列表ul标签用法

Posted 2023-05-10

参考技术A

我们在用html编写页面的时候，经常需要用ul标签来调整列表。那么如何使用ul标签呢？下面我给大家分享一下。

工具/材料

sublime text

01

首先我们打开sublime text软件新建一个html文档，如下图所示

02

然后在html文档中加入ul标签内容，如下图所示

03

运行页面代码以后你就会看到ul中的内容按顺序输出了，如下图所示

04

另外我们也可以通过type属性指定内容前面的标签类型，如下图所示

2.列表标签

列表就是用来布局的,表格是用来显示数据的.

列表的特点:整齐,整洁,有序,作为布局会更加自已和方便

三大类:无序列表,有序列表和自定义列表

无序列表:

<ul>

　　<li>列表项</li>

</ul>

<ul>标签表示HTML页面中项目的无序列表,一般会以项目符号呈现表项,而列表项使用<li>标签定义.

• 无序列表的各个列表项之间没有顺序级别之分,是并列的
• <ul></ul>中只能嵌套<li></li>,直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的
• <li>与</li>之间相当于一个容器,可以容纳所有元素
• 无序列表会带自己的样式属性,但在实际使用时,我们会使用CSS来设置

有序列表:

即为有排列顺序的列表,其各个列表项会按照一定的顺序排列定义,在HTML标签中,<ol>标签用于定义有序列表,列表排序以数字来显示,并且使用<li>标签来定义列表项,语法如下:

<ol>

　　<li>列表项</li>

</ol>

1. <ol></ol>中只能嵌套<li></li>,直接在<ol></ol>标签中输入其他标签或者文字的做法是不被允许的
2. <li></li>之间相当于一个容器,可以容纳所有元素
3. 无序列表会带自己的样式属性,但在实际使用时,我们会使用CSS来设置.

自定义列表:

在HTML标签中,<dl>标签用于定义描述列表,该标签会与<dt>(定义项目/名字)和<dd>(描述每一个项目/名字)一起使用

<dl>

<dt>名词1</dt>

<dd>名词1解释</dd>

</dl>

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

2.<dt>和<dd>个数没有上限(限制),经常是一个<dt>对应多个<dd>