个性化阅读
专注于IT技术分析

HTML无序列表| HTML项目符号列表

本文概述

HTML无序列表或项目符号列表以项目符号格式显示元素。我们可以使用无序列表, 而无需按任何特定顺序显示项目。 HTML ul标签用于无序列表。项目符号列表可以有4种类型:

  • 碟片
  • 广场
  • 没有

为了表示不同的有序列表, <ul>标记中有4种类型的属性。

类型 描述
Type “disc” 这是默认样式。在这种样式中, 列表项用项目符号标记。
Type “circle” 在这种样式中, 列表项用圆圈标记。
Type “square” 在这种样式中, 列表项用正方形标记。
Type “none” 在这种样式中, 列表项未标记。

HTML无序列表示例

<ul>
 <li>HTML</li>
 <li>Java</li>
 <li>JavaScript</li>
 <li>SQL</li>
</ul>

立即测试

输出:

  • 的HTML
  • 爪哇
  • 的JavaScript
  • 的SQL

ul type =“ circle”

<ul type="circle">
 <li>HTML</li>
 <li>Java</li>
 <li>JavaScript</li>
 <li>SQL</li>
</ul>

立即测试

输出:

  • 的HTML
  • 爪哇
  • 的JavaScript
  • 的SQL

ul type =“ square”

<ul type="square">
 <li>HTML</li>
 <li>Java</li>
 <li>JavaScript</li>
 <li>SQL</li>
</ul>

立即测试

输出:

  • 的HTML
  • 爪哇
  • 的JavaScript
  • 的SQL

ul type =“ none”

<ul type="none">
 <li>HTML</li>
 <li>Java</li>
 <li>JavaScript</li>
 <li>SQL</li>
</ul>

立即测试

输出:

  • 的HTML
  • 爪哇
  • 的JavaScript
  • 的SQL

注意:HTML5不支持type属性, 可以使用list-style-type的CSS属性代替type。以下是显示ul标签的CSS属性的示例。

<ul style="list-style-type: square;">
	<li>HTML</li>
	<li>Java</li>
	<li>JavaScript</li>
	<li>SQL</li>
  </ul>

码:

<!DOCTYPE html>
<html>
 <head>
  </head>
 <body>
 <h2>The type attribute with CSS property</h2>
   <ul style="list-style-type: square;">
	<li>HTML</li>
	 <li>Java</li>
           <li>JavaScript</li>
           <li>SQL</li>
    </ul>
 </body>
</html>

立即测试

输出:

HTML无序列表| HTML项目符号列表

支持的浏览器

Element Chrome IE Firefox Opera Safari
<ul> Yes Yes Yes Yes Yes
赞(0)
未经允许不得转载:srcmini » HTML无序列表| HTML项目符号列表

评论 抢沙发

评论前必须登录!