91热爆

Lists

Ordered lists

An ordered list will display items in number sequence. For example:

  1. Milk
  2. Bread
  3. Bananas
  4. Soup

An ordered list uses the <ol>鈥</ol> tags. The <li>鈥</li> tags are used for each item in the list.

<ol>
	<li> Milk </li>
	<li> Bread </li>
	<li> Bananas </li>
	<li> Soup </li>
</ol>

By default, ordered lists will start with the number one. However, it is possible to change both the starting value and the type of list when using HTML5. In the example shown below, the start property has been changed to twenty.

<ol start="20">
	<li> Milk </li>
	<li> Bread </li>
	<li> Bananas </li>
	<li> Soup </li>
</ol>

This would show on screen as:

20. Milk

21. Bread

22. Bananas

23. Soup

When deciding upon the style of an ordered list, it is possible to select:

1 (Used by default)Ordered list of decimal numbers (1, 2, 3, etc.)
aAlphabetically ordered lower case list (a, b, c etc.)
AAlphabetically ordered upper case list (A, B, C etc.)
iLowercase Roman numerals (i, ii, iii etc.)
IUppercase Roman numerals (I, II, III etc.)
1 (Used by default)
Ordered list of decimal numbers (1, 2, 3, etc.)
a
Alphabetically ordered lower case list (a, b, c etc.)
A
Alphabetically ordered upper case list (A, B, C etc.)
i
Lowercase Roman numerals (i, ii, iii etc.)
I
Uppercase Roman numerals (I, II, III etc.)

In the example shown below style A is used.

<ol type="A">
	<li> Milk </li>
	<li> Bread </li>
	<li> Bananas </li>
	<li> Soup </li>
</ol>

This would show on screen as:

A. Milk

B. Bread

C. Bananas

D. Soup

Developers can also create CSS rules to apply styles and starting values. In contemporary web development, it would be more common to use CSS to style lists but ordered lists can still be altered using the HTML examples shown above. Using CSS allows developers to access more styles that are not supported using only HTML.

Unordered lists

An unordered list will appear as bullet points. For example:

<ul>
	<li> Milk </li>
	<li> Bread </li>
	<li> Bananas </li>
	<li> Soup </li>
</ul>

Would appear on screen as:

  • Milk
  • Bread
  • Bananas
  • Soup

Unlike ordered lists, HTML5 does not support changing the properties of unordered lists within HTML code. To change the style of unordered lists it is necessary to use CSS rules.