HTML - ul 标签_HTML 菜鸟教程

HTML <ul> 标签用于创建无序列表。无序列表项显示为项目符号，项目符号可以是各种形式，如点、圆或正方形。

<ul>（无序列表）用于对没有数字排序的项目集合进行分组。无序列表包含用于创建列表项的多个 <li> 标签。

语法


<ul> ..... </ul>

属性

<ul> 标签支持 HTML 的全局属性和事件属性。也接受下面列出的一些特定属性。

属性	值	描述
compact	compact	指定无序列表应以紧凑样式（已弃用）显示。
type	disc circle square	指定列表项的不同项目符号样式（已弃用）。

<ul> 标签示例

下面的示例将说明 <ul> 标签的用法。在哪里、何时以及如何使用 <ul> 标签。如何创建嵌套的 uonordered 列表。

创建无序列表<ul>

在以下示例中，我们将在 HTML 中创建一个无序列表 <ul>，以默认的项目符号格式显示列表的相关项。


<!DOCTYPE html>
<html lang="en">
<head>
		<title>HTML ul 标签示例_qikepu.com</title>
</head>
<body>
		<!-- 创建无序列表 -->
		<h3>
			 基础Web开发技术列表
		</h3>
		<ul>
			 <li>HTML</li>
			 <li>CSS</li>
			 <li>JavaScript</li>
		</ul>
</body>
</html>

创建<ul>不同的项目列表

以下是无序列表 <ul> 的另一个示例。在这里，我们使用 type 属性来显示不同项目符号格式的项目列表。


<!DOCTYPE html>
<html lang="en">
<head>
		<title>HTML ul 标签示例 _qikepu.com</title>
</head>
<body>
		<!-- 创建无序列表 -->
		<h3>默认或光盘未排序列表</h3>
		<ul type="disc">
			 <li>HTML</li>
			 <li>CSS</li>
			 <li>JavaScript</li>
		</ul>
	  
		<h3>无序列表循环</h3>
		<ul type="circle">
			 <li>HTML</li>
			 <li>CSS</li>
			 <li>JavaScript</li>
		</ul>
	  
		<h3>方形无序列表</h3>
		<ul type="square">
			 <li>HTML</li>
			 <li>CSS</li>
			 <li>JavaScript</li>
		</ul>
</body>
</html>

<ul>嵌套

在以下示例中，我们将创建嵌套的无序列表 <ul> 以显示列表的相关项。


<!DOCTYPE html>
<html lang="en">

<head>
		<title>HTML ul 标签示例_qikepu.com</title>
</head>

<body>
		<!-- 创建无序嵌套列表 -->
		<h3>Web开发工具和技术列表</h3>
		<ul type="disc">
				<li>HTML</li>
				<li>CSS
						<ul>
								<li>Bootstrap / Tailwind CSS</li>
								<li>SASS / LESS</li>
						</ul>
				</li>
				<li>JavaScript
						<ul>
								<li>ReactJS</li>
								<li>NodeJS</li>
						</ul>
				</li>
		</ul>
</body>

</html>

支持的浏览器

浏览器
是否支持	Yes	Yes	Yes	Yes	Yes

<< HTML - nav 标签 HTML - ol 标签 >>