HTML Lists

Unordered HTML List 用项目符号表示

An unordered list starts with the

tag. Each list item starts with the
• tag.

  The list items will be marked with bullets (small black circles) by default:

  
  
  
  
  An unordered HTML list
  
  
    
  Coffee
    
  Tea
    
  Milk
    
  
  
  
  

  Unordered HTML List - Choose List Item Marker
  The CSS list-style-type property is used to define the style of the list item marker:

  Value Description
  disc Sets the list item marker to a bullet (default) 实心小黑点
  circle Sets the list item marker to a circle 空心小圆点
  square Sets the list item marker to a square 实心黑方框
  none The list items will not be marked 无

  
  
  
  
  Unordered List with Disc Bullets
  
  
    
  Coffee
    
  Tea
    
  Milk
    
  
  
  
  

  
    
  Coffee
    
  Tea
    
  Milk
  
  

  
    
  Coffee
    
  Tea
    
  Milk
  
  

  
    
  Coffee
    
  Tea
    
  Milk
  
  

  Ordered HTML List 用有序数字表示

  An ordered list starts with the

  tag. Each list item starts with the
  1. tag.

     The list items will be marked with numbers by default:

     
     
     
     
     An ordered HTML list
     
     
       
     Coffee
       
     Tea
       
     Milk
       
     
     
     
     

     An ordered HTML list

     1. Coffee
     2. Tea
     3. Milk

     Ordered HTML List - The Type Attribute

     The type attribute of the

     tag, defines the type of the list item marker:
     Type Description
     type="1" The list items will be numbered with numbers (default) 默认的数字列表
     type="A" The list items will be numbered with uppercase letters 大写字母A. B. C.列表
     type="a" The list items will be numbered with lowercase letters 小写字母a. b. c.列表
     type="I" The list items will be numbered with uppercase roman numbers 大写罗马数字列表 I. II. III.
     type="i" The list items will be numbered with lowercase roman numbers 小写罗马数字列表 i. ii. iii.

     Numbers:

     
     
     
     
     Ordered List with Numbers
     
     
       
     Coffee
       
     Tea
       
     Milk
       
     
     
     
     

     Uppercase Letters:

     
       
     Coffee
       
     Tea
       
     Milk
     
     

     Lowercase Letters:

     
       
     Coffee
       
     Tea
       
     Milk
     
     

     Uppercase Roman Numbers:

     
       
     Coffee
       
     Tea
       
     Milk
     
     

     Lowercase Roman Numbers:

     
       
     Coffee
       
     Tea
       
     Milk
     
     

     HTML Description Lists

     HTML also supports description lists.

     A description list is a list of terms, with a description of each term.

     The

     tag defines the description list, the

     tag defines the term (name), and the

     tag describes each term:

     • description list

     • description term/name
     • description data/each term

     
     
     
     
     A Description List
     
     
       
     Coffee
       
     - black hot drink
       
     Milk
       
     - white cold drink
     
     
     
     
     

     A Description List
     Coffee
     - black hot drink
     Milk
     - white cold drink

     Nested HTML Lists

     List can be nested (lists inside lists):

     
     
     
     
     A Nested List
     List can be nested (lists inside lists):
     
     
       
     Coffee
       
     Tea
         
     
         
     Black tea
         
     Green tea
         
       
       
     Milk
     
     
     
     
     

     Note: List items can contain new list, and other HTML elements, like images and links, etc.

     Control List Counting

     By default, an ordered list will start counting from 1. If you want to start counting from a specified number, you can use the start attribute:

     
     
     
     
     The start attribute
     By default, an ordered list will start counting from 1. Use the start attribute to start counting from a specified number:
     
     
       
     Coffee
       
     Tea
       
     Milk
     
     
     
       
     Coffee
       
     Tea
       
     Milk
     
     
     
     
     

     Horizontal List with CSS

     HTML lists can be styled in many different ways with CSS.

     One popular way is to style a list horizontally, to create a navigation menu:

     
     
     
     
     
     
     
     
       
     Home
       
     News
       
     Contact
       
     About
     
     
     
     
     

     Tip: You can learn much more about CSS in our CSS Tutorial.

     Chapter Summary

     • Use the HTML
       element to define an unordered list
       • Use the CSS list-style-type property to define the list item marker
       • Use the HTML
         element to define an ordered list
         1. Use the HTML type attribute to define the numbering type
         2. Use the HTML
         3. element to define a list item
         4. Use the HTML

            element to define a description list

         5. Use the HTML
            element to define the description term
         6. Use the HTML
            element to describe the term in a description list
         7. Lists can be nested inside lists
         8. List items can contain other HTML elements
         9. Use the CSS property float:left or display:inline to display a list horizontally