Detailed graphic explanation of the differences between ordered lists, unordered lists and custom lists in HTML

Lists are often used in page layout. Lists are divided into ordered lists, unordered lists and custom lists. Do you know the difference between ordered lists, unordered lists and custom lists? This article will introduce to you what tags are used in ordered lists, unordered lists and custom lists, as well as the differences between the three. It has certain reference value and interested friends can take a look.

1. Unordered list

tag is used to define an unordered list. Use the
tag together with the
• tag. You can create an unordered list.

  Example: Use an unordered list to list four major classics. The code is as follows:
  

  <ul>
     <li>红楼梦</li>
     <li>水浒传</li>
     <li>三国演义</li>
     <li>西游记</li>
  </ul>

  Copy after login

  Rendering:

  

  ##Unordered List attribute type, the default style is a small black circle, which is disc. The type attributes include disc (default solid circle), circle (hollow circle), square (solid square), and none (cancel the prefix).

  2. Ordered list

  tag can define an ordered list. Use the
  tag together with the
  1. tag. You can create an ordered list, and the order of the list is displayed numerically.
     The sample code is as follows:

     <ol>
        <li>红楼梦</li>
        <li>水浒传</li>
        <li>三国演义</li>
        <li>西游记</li>
     </ol>

     Copy after login
     Rendering:

     

     The ordered list has two attributes, namely type and start. type has five attribute values: 1, a, A, i, I (Roman numerals), which are used to indicate the style of the list prefix. start indicates which number of the type type to start from. For example, when type = "a" and start = "4", it means that the lowercase letter type is selected, and the list starts from the fourth letter d.

     3. Customized list

     tag can define a description list, and the

     tag is used together with

     and

     , create a custom list (description list).

     The sample code is as follows:

     <dl>
          <dt>中国四大名著</dt>
            <dd>红楼梦</dd>
           <dd>西游记</dd>
            <dd>水浒传</dd>
            <dd>三国演义</dd>
     </dl>

     Copy after login

     Rendering:

     

     In the custom list (description list), there are an indentation.

     The difference between ordered lists, unordered lists and custom lists:

     Both ordered lists and unordered lists have prefixes, but ordered lists have capital letters , lowercase letters, numbers and Roman numerals, etc., while the prefixes of the unordered list are solid circles, hollow circles, solid squares. The difference between a custom list, an ordered list, and an unordered list is that it has indentation but no prefix.

     【Related Tutorial Recommendations】

     1.

     CSS3 Video Tutorial2.
     CSS Online Manual3.
     bootstrap tutorial

The above is the detailed content of Detailed graphic explanation of the differences between ordered lists, unordered lists and custom lists in HTML. For more information, please follow other related articles on the PHP Chinese website!