payment by upi: sinhamit@icici or payment by bank account name: amit kumar sinha, account number: 2646728782 IFSC code: KKBK0005660 SWIFT: KKBKINBB

Please support if you like my work by payment through upi: sinhamit@icici or payment by bank

account name: Amit Kumar Sinha,
account number: 2646728782
IFSC code: KKBK0005660
SWIFT: KKBKINBB

List Items   in Category: एचटीएमएल   by amit

🕙 Posted on 2023-04-23 at 15:44:58

विभिन्न प्रकार की सूचियाँ:

HTML में, विभिन्न प्रकार की सूची होती है, जहाँ आप आइटम रख सकते हैं।

अक्रमित सूची

<ul> </ul> अक्रमित सूची HTML तत्व है, जिसमें आप <li> </li> HTML सूची आइटम रख सकते हैं।

    सरल अक्रमित सूची में, जहाँ आप type विशेषता नहीं जोड़ते हैं, आउटपुट गोलियों (bullets) के साथ प्रदर्शित किया जाएगा।

<ul>
  <li>वस्तु 1</li>
  <li>वस्तु 2</li>
  <li>वस्तु 3</li>
</ul>

  • वस्तु 1
  • वस्तु 2
  • वस्तु 3

    जब type विशेषता का मान 'square' होता है तो अक्रमित सूचियाँ गोलियों (bullets) के बजाय वर्ग (square) के साथ प्रदर्शित होती हैं।

<ul type="square">
  <li>वस्तु 1</li>
  <li>वस्तु 2</li>
  <li>वस्तु 3</li>
</ul>

  • वस्तु 1
  • वस्तु 2
  • वस्तु 3

    जब type विशेषता का मान 'circle' होता है तो अक्रमित सूचियाँ गोलियों (bullets) के बजाय वृत (circle) के साथ प्रदर्शित होती हैं।

<ul type="circle">
  <li>वस्तु 1</li>
  <li>वस्तु 2</li>
  <li>वस्तु 3</li>
</ul>

  • वस्तु 1
  • वस्तु 2
  • वस्तु 3

    type विशेषता के बजाय, अब 'list-style-type' या 'list-style' के लिए अलग-अलग मान या तो style विशेषता या एम्बेडेड या बाहरी स्टाइलशीट (CSS) में जोड़े जाते हैं।

<ul style="list-style-type: decimal-leading-zero;">
  <li>वस्तु 1</li>
  <li>वस्तु 2</li>
  <li>वस्तु 3</li>
</ul>

  • वस्तु 1
  • वस्तु 2
  • वस्तु 3

    आप इन अक्रमित सूची को एक दूसरे में नेस्ट कर सकते हैं (type या style विशेषता, एम्बेडेड या बाहरी स्टाइलशीट के बिना भी)। डिफ़ॉल्ट व्यवहार है:

<ul>
  <li>एक</li>
  <li>दो</li>
  <ul>
    <li>2.1</li>
    <li>2.2</li>
    <ul>
      <li>2.2.1</li>
      <li>2.2.2</li>
      <li>2.2.3</li>
    </ul>
    <li>2.3</li>
  </ul>
  <li>तीन</li>
</ul>

  • एक
  • दो
    • 2.1
    • 2.2
      • 2.2.1
      • 2.2.2
      • 2.2.3
    • 2.3
  • तीन

    कुछ डेवलपर इन NESTED अक्रमित सूचियों को <li> </li> तत्व के अंदर रखते हैं, लेकिन आउटपुट नीचे जैसा ही प्रदर्शित होता है:

<ul>
  <li>एक</li>
  <li>दो
  <ul>
    <li>2.1</li>
    <li>2.2
    <ul>
      <li>2.2.1</li>
      <li>2.2.2</li>
      <li>2.2.3</li>
    </ul>
</li>
    <li>2.3</li>
  </ul>
</li>
  <li>तीन</li>
</ul>

  • एक
  • दो
    • 2.1
    • 2.2
      • 2.2.1
      • 2.2.2
      • 2.2.3
    • 2.3
  • तीन

क्रमित सूची

<ol> </ol> क्रमित सूची HTML तत्व है, जिसमें आप <li> </li> HTML सूची आइटम रख सकते हैं।

    सरल क्रमित सूची में, जहाँ आप type विशेषता नहीं जोड़ते हैं, आउटपुट 1 से शुरू होने वाले पूर्णांक (integer संख्याओं) के साथ प्रदर्शित किया जाएगा।

<ol>
  <li>वस्तु 1</li>
  <li>वस्तु 2</li>
  <li>वस्तु 3</li>
</ol>

  1. वस्तु 1
  2. वस्तु 2
  3. वस्तु 3

    जब type विशेषता का मान 'a' होता है तो क्रमित सूचियां लोअरकेस अक्षरों से शुरू होती हैं।

<ol type="a">
  <li>वस्तु 1</li>
  <li>वस्तु 2</li>
  <li>वस्तु 3</li>
</ol>

  1. वस्तु 1
  2. वस्तु 2
  3. वस्तु 3

    जब type विशेषता का मान 'A' होता है तो क्रमित सूचियां अपरकेस अक्षरों से शुरू होती हैं।

<ol type="A">
  <li>वस्तु 1</li>
  <li>वस्तु 2</li>
  <li>वस्तु 3</li>
</ol>

  1. वस्तु 1
  2. वस्तु 2
  3. वस्तु 3

    जब type विशेषता का मान 'i' होता है तो क्रमित सूचियां लोअरकेस रोमन न्यूमेरिक (संख्या) प्रतीकों से शुरू होती हैं। start विशेषता का उपयोग तब किया जाता है जब हम चाहते हैं कि सूची किसी अन्य संख्या से शुरू हो।

<ol type="i" start="5">
  <li>वस्तु 1</li>
  <li>वस्तु 2</li>
  <li>वस्तु 3</li>
</ol>

  1. वस्तु 1
  2. वस्तु 2
  3. वस्तु 3

    जब type विशेषता का मान 'I' होता है तो क्रमित सूचियां अपरकेस रोमन न्यूमेरिक (संख्या) प्रतीकों से शुरू होती हैं।

<ol type="I" start="4">
  <li>वस्तु 1</li>
  <li>वस्तु 2</li>
  <li>वस्तु 3</li>
</ol>

  1. वस्तु 1
  2. वस्तु 2
  3. वस्तु 3

<ol>
  <li>वस्तु 1</li>
  <ol type="A" start="8">
    <li>वस्तु 1</li>
    <li>वस्तु 2</li>
    <ol type="i" start="5">
      <li>वस्तु 1</li>
      <li>वस्तु 2</li>
      <li>वस्तु 3</li>
    </ol>
    <li>वस्तु 3</li>
  </ol>
  <li>वस्तु 2</li>
  <ul type="square">
    <li>वस्तु 1</li>
    <li>वस्तु 2</li>
    <li>वस्तु 3</li>
  </ul>
  <li>वस्तु 3</li>
</ol>

  1. वस्तु 1
    1. वस्तु 1
    2. वस्तु 2
      1. वस्तु 1
      2. वस्तु 2
      3. वस्तु 3
    3. वस्तु 3
  2. वस्तु 2
    • वस्तु 1
    • वस्तु 2
    • वस्तु 3
  3. वस्तु 3

सावधानी: जैसा कि ऊपर बताया गया है, आपको छोटे रोमन नंबर को लोअरकेस वर्णमाला के साथ और अपरकेस रोमन नंबर को अपरकेस वर्णमाला के अक्षरों के साथ नहीं मिलाना चाहिए, क्योंकि पाठक नेस्टेड ऑर्डर की गई सूचियों से भ्रमित हो सकते हैं।


    आप गोलियों (bullets) के स्थान पर अक्रमित सूची आइटमों में छोटी छवियों (रिज़ॉल्यूशन 32px × 32 px से कम होना चाहिए) का भी उपयोग कर सकते हैं।

<ul style="list-style-image: url( './images/ra-favicon.png' );">
  <li>वस्तु 1</li>
  <li>वस्तु 2</li>
  <li>वस्तु 3</li>
</ul>

  • वस्तु 1
  • वस्तु 2
  • वस्तु 3

    आप <dl> परिभाषा सूची </dl> में शब्दों का भी उपयोग कर सकते हैं, अर्थात, <dt> परिभाषा शब्द </dt> , गोलियों (bullets) के स्थान पर और उनके संबंधित विवरण सूची आइटम <dd> परिभाषा विवरण </dd> में , जैसा कि नीचे समझाया गया है :

<dl>
  <dt> एक </dt>
    <dd> एक पहला है। </dd>
  <dt> दो </dt>
    <dd> दो दूसरा है। </dd>
  <dt> तीन </dt>
    <dd> तीन तीसरा है। </dd>
</dl>

एक
एक पहला है।
दो
दो दूसरा है।
तीन
तीन तीसरा है।

बूटस्ट्रैप फ्रेमवर्क <dd></dd> के मार्जिन-लेफ्ट के मान को शून्य में बदल देता है।

Leave a Comment:

Place Your Image Here Size 90x120

Amit Sinha March 2nd, 2023 at 9:30 PM

😃 😄 😁 😆 😅 😂 😉 😊 😇 😍 😘 😚 😋 😜 😝 😶 😏 😒 😌 😔 😪 😷 😵 😎 😲 😳 😨 😰 😥 😢 😭 😱 😖 😣 😞 😓 😩 😫 😤

Place Your Profile Image Here

Ribhu March 3rd, 2023 at 9:30 PM

🐵 🐒 🐶 🐩 🐺 🐱 🐯 🐅 🐆 🐴 🐎 🐮 🐂 🐃 🐄 🐷 🐖 🐗 🐽 🐏 🐑 🐐 🐪 🐫 🐘 🐭 🐁 🐀 🐹 🐰 🐇

Profile Image

Abhya March 4th, 2023 at 9:30 PM

🍈 🍉 🍊 🍋 🍌 🍍 🍎 🍏 🍐 🍑 🍒 🍓 🍅 🍆 🌽 🌰 🍞 🍖 🍗 🍔 🍟 🍕 🍳 🍲 🍱 🍘 🍙 🍚 🍛