HayqSystem

HTML5 Ցուցակներ

HTML5 Ցուցակներ ։ HTML5-ում ցուցակներ ստեղծելու համար օգտագործեք <ol> (լռելյայն համարակալված ցուցակ) և <ul> (չհամարակալված ցուցակ ըստ լռելյայն) տարրերը.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Project HTML5</title>
    </head>
    <body>
        <h2>Համարակալված ցուցակ</h2>
        <ol>
            <li>iPhone 6S</li>
            <li>Galaxy S7</li>
            <li>Nexus 5X</li>
            <li>Lumia 950</li>
        </ol>
        <h2>Ոչ համարակալված ցուցակ</h2>
        <ul>
            <li>iPhone 6S</li>
            <li>Galaxy S7</li>
            <li>Nexus 5X</li>
            <li>Lumia 950</li>
        </ul>
    </body>
</html>

Համարակալված ցուցակում տարրերի լռելյայն համարակալումն օգտագործում է 1-ից սկսած ստանդարտ թվերը: Չհամարակալված ցուցակում յուրաքանչյուր կետին նախորդում է սև կետ:

Անհրաժեշտության դեպքում մենք կարող ենք հարմարեցնել տարրի կողքին ցուցադրվող համարակալումը կամ խորհրդանիշը՝ օգտագործելով list-style-type ոճը: Այս ոճը կարող է տարբեր իմաստներ ունենալ: Մենք կնշենք միայն հիմնական և հաճախ օգտագործվողները: Համարակալված ցուցակների համար list-style-type-ը կարող է ընդունել հետևյալ արժեքները.

1․ decimal ։ տասնորդական թվեր՝ հաշվելով 1-ից

2․ decimal-leading-zero : տասնորդական թվեր, որոնց նախորդում է զրո, օրինակ՝ 01, 02, 03, … 98, 99

3․ lower-roman : փոքրատառ հռոմեական թվեր, օրինակ՝ i, ii, iii, iv, v

4․ upper-roman : մեծ հռոմեական թվեր, օրինակ՝ I, II, III, IV, V…

5․ lower-alpha ։ փոքրատառ հռոմեական տառեր, օրինակ՝ a, b, c…, z

6․ upper-alpha: մեծ հռոմեական տառեր, օրինակ՝ A, B, C, … Z

Համարակալված ցուցակների համար, օգտագործելով start հատկանիշը, կարող եք լրացուցիչ նշել այն նիշը, որով կսկսվի համարակալումը: Օրինակ:

<h2>list-style-type = decimal</h2>
<ol style="list-style-type:decimal;" start="3">
    <li>iPhone 6S</li>
    <li>Galaxy S7</li>
    <li>Nexus 5X</li>
    <li>Lumia 950</li>
</ol>
<h2>list-style-type = upper-roman</h2>
<ol style="list-style-type:upper-roman;">
    <li>iPhone 6S Plus</li>
    <li>Galaxy S7 Edge</li>
    <li>Nexus 6P</li>
    <li>Lumia 950 XL</li>
</ol>
<h2>list-style-type = lower-alpha</h2>
<ol style="list-style-type:lower-alpha;">
    <li>LG G 5</li>
    <li>Huawei P8</li>
    <li>Asus ZenFone 2</li>
</ol>

Չդասավորված ցուցակի համար list-style-type հատկանիշը կարող է ընդունել հետևյալ արժեքները.

1․ disc ։ սև սկավառակ

2․ circle: դատարկ շրջան

3․ square: քառակուսի:

<h2>list-style-type = disc</h2>
<ul style="list-style-type:disc;">
    <li>iPhone 6S</li>
    <li>Galaxy S7</li>
    <li>Nexus 5X</li>
    <li>Lumia 950</li>
</ul>
<h2>list-style-type = circle</h2>
<ul style="list-style-type:circle;">
    <li>iPhone 6S Plus</li>
    <li>Galaxy S7 Edge</li>
    <li>Nexus 6P</li>
    <li>Lumia 950 XL</li>
</ul>
<h2>list-style-type = square</h2>
<ul style="list-style-type:square;">
    <li>LG G 5</li>
    <li>Huawei P8</li>
    <li>Asus ZenFone 2</li>
</ul>