Home  >  Article  >  Web Front-end  >  Detailed explanation of the usage of ol tag in HTML5_html5 tutorial skills

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

WBOY
WBOYOriginal
2016-05-16 15:46:262535browse

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>
    5. <ol>
    6.  <li start="60" >Coffeeli>
    7.  <li>Teali> 
    8. 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>

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn