Detailed explanation of the usage of ol tag in HTML5_html5 tutorial skills

Definition and usage

tag defines an ordered list.
Differences between HTML 4.01 and HTML 5
In HTML 4.01, the "start" attribute was deprecated, while in HTML 5 it is allowed.
The "compact" and "type" attributes were deprecated in HTML 4.01 and are no longer supported in HTML 5.
Tips and Notes
Tip: Use CSS to define the type of the list.
Example

XML/HTML CodeCopy content to clipboard
1. <ol>
2.  <li>Coffeeli> 
3.  <li>Teali> 
4. ol>
6. <ol>
7.  <li start="60" >Coffeeli>
8.  <li>Teali> 
9. ol>




The OL tag serial number control provided by HTML5
The OL tag displays data in the form of an ordered list, and it will automatically number the data. But sometimes the data is not numbered starting from 1, or the numbers are arranged in reverse order, or the numbers are completely messy. In this case, you need to use some parameters provided for the OL tag in HTML5 to set. Unfortunately, it is currently not compatible with IE.
Now, we have an HTML document like this


XML/HTML CodeCopy content to clipboard
1. <ol>
2. <li>Potatoli> 
3. <li>onionli> 
4. <li>Carrotli> 
5. <li>Tenderloinli> 
6. ol>

It will appear like this


These serial numbers start from 1 and increase by default. What if you need to arrange the serial numbers in the OL tag in reverse order? This just needs to add a reserved attribute to OL.


XML/HTML CodeCopy content to clipboard
1. <ol reversed="reversed" >
2. This is a writing method inherited from XHTML. In fact, you can write it directly
3. <ol reversed>

This already complies with the HTML5 standard. After adding this, you can get the result like this


There is no problem in Chrome and Firefox, but IE is not compatible with it (at least I tested IE10 and it is not compatible). Well, we are just learning about this function now. As for whether IE actually implements it, we will not discuss it for the time being.
Next, what if you don’t want it to start from 1? For example, if we want it to start from 3, we can add the start attribute to the OL tag and set it to 3.


XML/HTML CodeCopy content to clipboard
1. <ol start="3" >



Finally, what to do with something that is completely irregular but orderly? For example, if I want 2, 1, 3, 4, what should I do with this arrangement? In fact, you can control this serial number by adding the value attribute to LI.


XML/HTML CodeCopy content to clipboard
1. <ol>
2. <li value="2" >Potatoesli>
3. <li value="1" >Onionli>
4. <li value="3" >Carrotli>
5. <li value="4" >Tenderloinli>
6. ol>