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

  • disc
  • circle
  • square
  • none

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

类型描述
输入“disc”这是默认样式。在这种风格中,列表项用项目符号标记。
输入“circle”在这种风格中,列表项用圆圈标记。
输入“square”在这种风格中,列表项用方块标记。
输入“none”在这种风格中,列表项没有标记。

HTML 无序列表示例

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

输出:

  • HTML
  • Java
  • JavaScript
  • SQL

ul 类型=“circle"

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

输出:

  • HTML
  • Java
  • JavaScript
  • SQL

ul 类型 =“square”

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

输出:

  • HTML
  • Java
  • JavaScript
  • SQL

ul 类型 =“none”

<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 属性的示例。

<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-unordered-list-bulleted-list.png

标签: html, HTML教程, HTML技术, HTML学习, HTML学习教程, HTML下载, HTML语言, HTML开发, HTML入门教程, HTML进阶教程, HTML高级教程, HTML面试题, HTML笔试题, HTML编程思想