खोज…


परिचय

HTML सूचियों को निर्दिष्ट करने के लिए तीन तरीके प्रदान करता है: सूचीबद्ध सूचियाँ, अनियंत्रित सूचियाँ और विवरण सूचियाँ। आदेशित सूचियाँ सूची तत्वों के क्रम को इंगित करने के लिए क्रमिक अनुक्रमों का उपयोग करती हैं, अनियंत्रित सूचियाँ एक परिभाषित प्रतीक का उपयोग करती हैं जैसे कि कोई निर्दिष्ट क्रम में तत्वों को सूचीबद्ध करने के लिए एक बुलेट के रूप में और विवरण सूचियाँ अपने बच्चों के साथ तत्वों को सूचीबद्ध करने के लिए इंडेंट का उपयोग करती हैं। यह विषय HTML मार्कअप में इन सूचियों के कार्यान्वयन और संयोजन की व्याख्या करता है।

वाक्य - विन्यास

  • <ol> ordered list items </ol>
  • <ul> unordered list items </ul>
  • <li> list item (ordered and not) </li>
  • <dl> description list items </dl>
  • <dt> description list title </dt>
  • <dd> description list description </dd>

टिप्पणियों

यह सभी देखें

आप प्रत्येक सूची आइटम को चिह्नित करने के लिए किस प्रकार के आइकन का उपयोग करने के लिए <ul> टैग में एक सूची-शैली-प्रकार सीएसएस संपत्ति जोड़ सकते हैं, उदाहरण के लिए <ul style="list-style-type:disc"> । निम्नलिखित सूची-शैली-प्रकार की अनुमति है:

  • "सूची-शैली-प्रकार: डिस्क" डिफ़ॉल्ट डॉट है।
  • "सूची-शैली-प्रकार: सर्कल" एक अनफ़िल्ड सर्कल है।
  • "सूची-शैली-प्रकार: वर्ग" एक भरा हुआ वर्ग है।
  • "सूची-शैली-प्रकार: कोई नहीं" बिल्कुल भी कोई निशान का उपयोग नहीं करता है।

क्रमांकन कैसे किया जाता है, इसे बदलने के लिए आप एक <ol> टैग में एक प्रकार का गुण भी जोड़ सकते हैं, उदाहरण के लिए <ol type="1"> । निम्नलिखित प्रकारों की अनुमति है:

  • प्रकार = "1" डिफ़ॉल्ट रूप है।
  • प्रकार = "ए" वर्णानुक्रम में अपरकेस अक्षरों का उपयोग करता है
  • प्रकार = "a" वर्णमाला क्रम में निचले अक्षरों का उपयोग करता है
  • प्रकार = "मैं" अपरकेस अक्षर के साथ रोमन अंकों का उपयोग करता है
  • प्रकार = "i" लोअरकेस अक्षर के साथ रोमन अंकों का उपयोग करता है

अव्यवस्थित सूची

एक अनियंत्रित सूची <ul> टैग के साथ बनाई जा सकती है और प्रत्येक सूची आइटम <li> टैग के साथ बनाया जा सकता है जैसा कि नीचे दिए गए उदाहरण द्वारा दिखाया गया है:

<ul>
  <li>Item</li>
  <li>Another Item</li>
  <li>Yet Another Item</li>
</ul>

यह एक बुलेटेड सूची का उत्पादन करेगा (जो कि डिफ़ॉल्ट शैली है):

  • मद
  • एक और आइटम
  • फिर भी एक और आइटम

आपको मदों की एक सूची प्रदर्शित करने के लिए ul का उपयोग करना चाहिए, जहां वस्तुओं का क्रम महत्वपूर्ण नहीं है। यदि आइटम के क्रम को बदलने से सूची गलत हो जाती है, तो आपको <ol> उपयोग करना चाहिए।

आदेशित सूचि

एक आदेशित सूची <ol> टैग के साथ बनाई जा सकती है और प्रत्येक सूची आइटम <li> टैग के साथ नीचे दिए गए उदाहरण में बनाया जा सकता है:

<ol>
  <li>Item</li>
  <li>Another Item</li>
  <li>Yet Another Item</li>
</ol>

यह एक क्रमांकित सूची का उत्पादन करेगा (जो कि डिफ़ॉल्ट शैली है):

  1. मद
  2. एक और आइटम
  3. फिर भी एक और आइटम

मैन्युअल रूप से नंबर बदल रहे हैं

ऐसे कुछ तरीके हैं जिनसे आप खेल सकते हैं कि कौन सी संख्या एक ऑर्डर की गई सूची में सूची आइटम पर दिखाई देती है। पहला तरीका start विशेषता का उपयोग करके, एक शुरुआती संख्या निर्धारित start है। सूची इस निर्धारित संख्या पर शुरू होगी, और हमेशा की तरह एक-एक वेतन वृद्धि जारी रखेंगी।

<ol start="3">
  <li>Item</li>
  <li>Some Other Item</li>
  <li>Yet Another Item</li>
</ol>

यह एक क्रमांकित सूची का उत्पादन करेगा (जो कि डिफ़ॉल्ट शैली है):

  1. मद
  2. कुछ अन्य आइटम
  3. फिर भी एक और आइटम

आप किसी विशिष्ट सूची आइटम को किसी विशिष्ट संख्या में स्पष्ट रूप से सेट कर सकते हैं। एक निर्दिष्ट मूल्य के साथ एक के बाद एक और सूची आइटम उस सूची आइटम के मूल्य से एक के बाद एक बढ़ाना जारी रखेंगे, जहां अनदेखी मूल सूची में थी।

<li value="7"></li>

यह भी ध्यान देने योग्य है कि, किसी सूची आइटम पर सीधे value विशेषता का उपयोग करके, आप कम मूल्य पर नंबरिंग को पुनरारंभ करके आदेशित सूची की मौजूदा नंबरिंग प्रणाली को ओवरराइड कर सकते हैं। इसलिए यदि मूल सूची पहले से ही मान 7 तक थी, और मूल्य 4 पर एक सूची आइटम का सामना करना पड़ा, तो वह सूची आइटम अभी भी 4 के रूप में प्रदर्शित होगा और उस बिंदु से फिर से गिनती जारी रखेगा।

<ol start="5">
  <li>Item</li>
  <li>Some Other Item</li>
  <li value="4">A Reset Item</li>
  <li>Another Item</li>
  <li>Yet Another Item</li>
</ol>

तो ऊपर दिया गया उदाहरण 5, 6, 4, 5, 6 के नंबरिंग पैटर्न का अनुसरण करने वाली सूची का उत्पादन करेगा - फिर से पिछले की तुलना में कम संख्या में शुरू करना और सूची में 6 नंबर की नकल करना।

नोट: start और value विशेषताएँ केवल एक संख्या को स्वीकार करती हैं - भले ही आदेशित सूची रोमन अंकों या अक्षरों के रूप में प्रदर्शित करने के लिए सेट हो।

5

आप अपने ol तत्व में reversed जोड़कर नंबरिंग को उल्टा कर सकते हैं:

<ol reversed>
  <li>Item</li>
  <li>Some Other Item</li>
  <li value="4">A Reset Item</li>
  <li>Another Item</li>
  <li>Yet Another Item</li>
</ol>

यदि आप लगातार किसी सूची में जोड़ रहे हैं, जैसे कि नए पॉडकास्ट एपिसोड या प्रस्तुतियों के साथ रिवर्स नंबरिंग मददगार है, और आप चाहते हैं कि सबसे हालिया आइटम पहले दिखाई दें।


अंक का प्रकार बदलना

आप type विशेषता का उपयोग करके आसानी से सूची आइटम मार्कर में दिखाए गए अंकों के प्रकार को बदल सकते हैं

<ol type="1|a|A|i|I">
प्रकार विवरण उदाहरण
1 डिफ़ॉल्ट मान - दशमलव संख्या 1,2,3,4
a वर्णानुक्रम में आदेश दिया गया (निचला) ऐ बी सी डी
A वर्णानुक्रम में आदेश दिया गया (अपरकेस) ऐ बी सी डी
i रोमन अंक (लोअरकेस) I, II, III, IV
I रोमन अंक (अपरकेस) मैं, द्वितीय, तृतीय, चतुर्थ

आपको आइटम की एक सूची प्रदर्शित करने के लिए ol का उपयोग करना चाहिए, जहां आइटम जानबूझकर ऑर्डर किए गए हैं और ऑर्डर पर जोर दिया जाना चाहिए। यदि आइटम के क्रम को बदलने से सूची गलत नहीं होती है, तो आपको <ul> उपयोग करना चाहिए।

विवरण सूची

एक विवरण सूची (या परिभाषा सूची , जैसा कि इसे HTML5 से पहले कहा गया था) को dl तत्व के साथ बनाया जा सकता है। इसमें नाम-मान समूह होते हैं, जहाँ नाम dt तत्व में दिया जाता है, और dd तत्व में मान दिया जाता है।

<dl>
  <dt>name 1</dt>
  <dd>value for 1</dd>
  <dt>name 2</dt>
  <dd>value for 2</dd>
</dl>

लाइव डेमो

एक नाम-मूल्य समूह में एक से अधिक नाम और / या एक से अधिक मूल्य हो सकते हैं (जो विकल्पों का प्रतिनिधित्व करते हैं):

<dl>

  <dt>name 1</dt>
  <dt>name 2</dt>
  <dd>value for 1 and 2</dd>

  <dt>name 3</dt>
  <dd>value for 3</dd>
  <dd>value for 3</dd>

</dl>

लाइव डेमो

नेस्टेड सूची

आप किसी सूची आइटम के उप-आइटम का प्रतिनिधित्व करने के लिए सूचियों को घोंसला कर सकते हैं।

<ul>
  <li>item 1</li>
  <li>item 2
    <ul>
      <li>sub-item 2.1</li>
      <li>sub-item 2.2</li>
    </ul>
  </li>
  <li>item 3</li>
</ul>
  • वस्तु 1
  • आइटम 2
    • उप मद 2.1
    • उप-मद 2.2
  • आइटम 3

नेस्टेड लिस्ट में li एलिमेंट का बच्चा होना है।

आप विभिन्न प्रकार की सूची भी बना सकते हैं:

<ol>
    <li>Hello, list!</li>
    <li>
        <ul>
            <li>Hello, nested list!</li>
        </ul>
    </li>
</ol>


Modified text is an extract of the original Stack Overflow Documentation
के तहत लाइसेंस प्राप्त है CC BY-SA 3.0
से संबद्ध नहीं है Stack Overflow