HTML 中的 ul 是什么意思

2025 年 3 月 25 日 | 阅读 2 分钟

ul 是 HTML 中的一个标签。HTML 的 <ul> 标签用于设计无序列表项。<ul> 标签是成对出现的标签，所以必须关闭它。要定义列表中的项，我们必须在 <ul> 标签中使用 <li> 标签。如果我们想在 HTML 文档中创建有序列表项，那么我们必须使用 <ol> 标签。

此标签还使用 type 属性，该属性设置列表项的项目符号样式。我们可以在 type 属性中指定以下值

圆盘
圆
Square

通过示例，我们可以轻松理解 <ul> 标签。因此，我们将提供以下各种示例。

示例 1：此示例使用 type 属性以及不同的值。

<!Doctype Html>
<Html>   
<Head>    
<Title>   
Ul tag with Type attribute
</Title>
</Head>
<Body> 
Hello User!.... <br>
The following list uses the Square mark in front of list items. 
<ul type="square">
<li> Cars </li>
<li> bikes </li>
<li> Aeroplanes </li>
<li> Trains </li>
<li> Ships </li>
</ul>
The following list uses the Circle mark in front of list items. 
<ul type="Circle">
<li> BMW </li>
<li> Audi </li>
<li> Mercedes </li>
<li> Jaguar </li>
<li> Lamborghini </li>
</ul>
The following list uses the Disc mark in front of list items. 
<ul type="disc">
<li> Apache </li>
<li> KTM </li>
<li> R15 </li>
<li> Ducati </li>
<li> Harley-Davidson </li>
</ul>
</Body> 
</Html>

示例 1 的输出显示在以下截图中

示例 2：此示例描述了如何在 HTML 中创建嵌套无序列表

<!Doctype Html>
<Html>   
<Head>    
<Title>   
Nested Unordered list
</Title>
</Head>
<Body> 
Hello User!.... <br>
The following list uses the Square mark in front of list items. 
<ul type="square">
<li> Cars: </li>
<ul type="Circle">
<li> BMW </li>
<ul type="square">
<li> BMW X5 </li>
<li> BMW X7 </li>
<li> BMW Z4 </li>
<li> BMW M2 </li>
</ul>
<li> Audi </li>
<ul type="square">
<li> Audi Q8 </li>
<li> Audi Q7 2020 </li>
<li> Audi Q3 </li>
<li> Audi A7 </li>
</ul>
<li> Mercedes </li>
<li> Jaguar </li>
<ul type="square">
<li> Jaguar XF </li>
<li> Jaguar XE </li>
<li> Jaguar E Pace </li>
<li> Jaguar I Pace </li>
</ul>
<li> Lamborghini </li>
</ul>
<li> bikes: </li>
<ul type="disc">
<li> Apache </li>
<li> KTM </li>
<li> R15 </li>
<li> Ducati </li>
<li> Harley-Davidson </li>
</ul>
<li> Aeroplanes </li>
<ul type="circle">
<li> Air India </li>
<li> Indigo</li>
<li> Vistara </li>
<li> GoAir </li>
<li> SpiceJet </li>
</ul>
<li> Trains </li>
<li> Ships </li>
</ul>
</Body> 
</Html>

示例 2 的输出显示在以下截图中

下一个主题如何在 HTML 中添加社交媒体图标

← 上一个下一个 →

HTML 中的 ul 是什么意思

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

HTML 教程

HTML 属性

HTML 标签列表

HTML5 高级

HTML API

HTML 颜色名称

HTML 杂项

选择题

面试题

HTML 中的 ul 是什么意思

相关帖子

HTML CSS

HTML 调查模板

HTML 容器

HTML 输入框

HTML 日期选择器

HTML Onclick 事件

如何在 HTML 中嵌入 YouTube 视频

HTML 中最大的标题的正确标签

HTML 5 accept 属性

HTML 中的 Hspace 和 Vspace

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器