HTML 教程

HTML 属性

HTML 标签列表

HTML API

HTML 案例

HTML 颜色

HTML5 进阶

HTML 其它

HTML 面试问题

HTML 无序列表

HTML 无序列表或项目符号列表以项目符号格式显示元素。我们可以在不需要以任何特定顺序显示项目的情况下使用无序列表。HTML ul 标签用于无序列表。可以有 4 种类型的项目符号列表：

  • disc

  • circle

  • square

  • none

为了表示不同的有序列表，<ul> 标签中有 4 种属性。

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

HTML 无序列表示例

例子 (Example)

<ul>  
 <li>HTML</li>  
 <li>Java</li>  
 <li>JavaScript</li>  
 <li>SQL</li>  
</ul>
自己试试 »

输出：

  • HTML

  • Java

  • JavaScript

  • SQL

ul type="circle"

例子 (Example)

<ul type="circle">  
 <li>HTML</li>  
 <li>Java</li>  
 <li>JavaScript</li>  
 <li>SQL</li>  
</ul>
自己试试 »

输出：

  • HTML

  • Java

  • JavaScript

  • SQL

ul type="square"

例子 (Example)

<ul type="square">  
 <li>HTML</li>  
 <li>Java</li>  
 <li>JavaScript</li>  
 <li>SQL</li>  
</ul>
自己试试 »

输出：

  • HTML

  • Java

  • JavaScript

  • SQL

ul type="none"

例子 (Example)

<ul type="none">  
 <li>HTML</li>  
 <li>Java</li>  
 <li>JavaScript</li>  
 <li>SQL</li>  
</ul>
自己试试 »

输出：


  • HTML

  • Java

  • JavaScript

  • SQL

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

例子 (Example)

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

代码：

例子 (Example)

<!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>
自己试试 »

支持浏览器

元素ChromeIEFirefoxSafariOpera
<ul>YesYesYesYesYes
上一主题 HTML 有序列表 下一主题 HTML 描述列表
  • 使用社交账号登录,本站支持
全部评论(0)

便捷工具