HTML <li> ਟੈਗ

  • ਪਿਛਲਾ ਪੰਨਾ <legend>
  • ਅਗਲਾ ਪੰਨਾ <link>

ਵਿਵਰਣ ਅਤੇ ਵਰਤੋਂ

<li> ਲੇਬਲ ਵਰਤੋਂ ਕਰਕੇ ਸੂਚੀ ਵਿਸ਼ੇਸ਼ਤਾ ਨਿਰਧਾਰਿਤ ਕਰੋ。

<li> ਲੇਬਲ ਵਰਤੋਂ ਕਰਕੇ ਕਰਨੀ ਵਾਲੀ ਸੂਚੀ:<ol>) ਅਤੇ ਬੇਸਰਕਾਰੀ ਸੂਚੀ (<ul>) ਅਤੇ ਮੇਨੂ ਸੂਚੀ (<menu>) ਵਿੱਚ。

<ul> ਅਤੇ <menu> ਵਿੱਚ, ਸੂਚੀ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਸਧਾਰਨ ਤੌਰ 'ਤੇ ਪ੍ਰੋਜੈਕਟਾਂ ਦੇ ਨਾਲ ਪ੍ਰਦਰਸ਼ਿਤ ਹੁੰਦੀਆਂ ਹਨ。

<ol> ਵਿੱਚ, ਸੂਚੀ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਸਧਾਰਨ ਤੌਰ 'ਤੇ ਨੰਬਰ ਜਾਂ ਅੱਕਰਾਂ ਨਾਲ ਪ੍ਰਦਰਸ਼ਿਤ ਹੁੰਦੀਆਂ ਹਨ。

ਸੁਝਾਅ:CSS ਦੀ ਮਦਦ ਨਾਲ:ਸੂਚੀ ਸਟਾਈਲ ਸੈਟ ਕਰੋ。

ਹੋਰ ਦੇਖੋ:

HTML ਸਿੱਖਿਆ:HTML ਲਿਸਟ

HTML DOM ਸੰਦਰਭ ਮੁੱਦਾ:Li ਆਬਜੈਕਟ

CSS ਸਿੱਖਿਆ:ਸੂਚੀ ਦੀ ਸਟਾਈਲ ਸੈਟ ਕਰੋ

ਇਨਸਟੈਂਸ

ਉਦਾਹਰਣ 1

ਇੱਕ ਕਰਨੀ ਵਾਲੀ (<ol>) ਅਤੇ ਇੱਕ ਬੇਸਰਕਾਰੀ (<ul>) ਦੇ HTML ਸੂਚੀਆਂ:

<ol>
  <li>ਕਾਫੀ</li>
  <li>ਚਾਏ</li>
  <li>ਦੁੱਧ</li>
</ol>
<ul>
  <li>ਕਾਫੀ</li>
  <li>ਚਾਏ</li>
  <li>ਦੁੱਧ</li>
</ul>

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

ਉਦਾਹਰਣ 2

ਵਿਆਕਤੀਤਾ ਵਿੱਚ value ਵਿਸ਼ੇਸ਼ਤਾ ਵਰਤੋਂ ਕਰੋ:

<ol>
  <li value="100">ਕਾਫੀ</li>
  <li>ਚਾਏ</li>
  <li>ਦੁੱਧ</li>
  <li>ਪੁਰਾ ਪਾਣੀ</li>
  <li>ਨਿਰਮਲ ਰਸਾਇਣ</li>
  <li>ਬਿਅਰ</li>
</ol>

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

ਉਦਾਹਰਣ 3

ਵੱਖ-ਵੱਖ ਸੂਚੀ ਸਟਾਈਲ ਸ਼ੈਲੀ ਸੈਟ ਕਰੋ (ਉਪਯੋਗ ਕਰਕੇ CSS):

<ol>
  <li>ਕਾਫੀ</li>
  <li style="list-style-type:lower-alpha">ਚਾਏ</li>
  <li>ਦੁੱਧ</li>
</ol>
<ul>
  <li>ਕਾਫੀ</li>
  <li style="list-style-type:square">ਚਾਏ</li>
  <li>ਦੁੱਧ</li>
</ul>

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

ਉਦਾਹਰਣ 4

ਸੂਚੀ ਵਿੱਚ ਇੱਕ ਸੂਚੀ (ਨਾਨ-ਸ਼ਾਖਤ ਸੂਚੀ) ਬਣਾਓ:

<ul>
  <li>ਕਾਫੀ</li>
  <li>ਚਾਹ</li>
    <ul>
      <li>ਪੁਰਵਾ</li>
      <li>ਗਲੈਬਾਕ
    </ul>
  </li>
  <li>ਦੁੱਧ</li>
</ul>

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

ਉਦਾਹਰਣ 5

ਇੱਕ ਵਧੇਰੇ ਜਿਹੀ ਨਾਵਾਜ਼ੀ ਸੂਚੀ ਬਣਾਓ:

<ul>
  <li>ਕਾਫੀ</li>
  <li>ਚਾਹ</li>
    <ul>
      <li>ਪੁਰਵਾ</li>
      <li>ਹਰਬਤ ਚਾਹ</li>
        <ul>
          <li>ਲੀਚਾ</li>
          <li>ਲੰਗਜ਼ੀ</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>ਦੁੱਧ</li>
</ul>

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

ਪ੍ਰਤੀਯੋਗਿਤਾ

ਪ੍ਰਤੀਯੋਗਿਤਾ ਮੁੱਲ ਵਰਣਨ
value ਨੰਬਰ ਇਹ ਮਾਤਰ <ol> ਲਿਸਟ ਲਈ ਪ੍ਰਤੀਯੋਗਿਤਾ ਹੈ।ਲਿਸਟ ਆਬਜੈਕਟ ਦੀ ਸ਼ੁਰੂਆਤੀ ਮੁੱਲ ਨਿਰਧਾਰਿਤ ਕਰਦੇ ਹਨ।ਅਗਲੇ ਲਿਸਟ ਆਬਜੈਕਟ ਇਸ ਸੰਖਿਆ ਵਿੱਚ ਵਾਧਾ ਕਰਦੇ ਹਨ。

ਗਲੋਬਲ ਪ੍ਰਤੀਯੋਗਿਤਾ

<li> ਟੈਗ ਨੇ ਇਵੈਂਟ ਪ੍ਰਤੀਯੋਗਿਤਾ ਦਾ ਸਮਰਥਨ ਕਰਦੇ ਹਨ HTML ਵਿੱਚ ਗਲੋਬਲ ਪ੍ਰਤੀਯੋਗਿਤਾ。

ਈਵੈਂਟ ਪ੍ਰਤੀਯੋਗਿਤਾ

<li> ਟੈਗ ਨੇ ਇਵੈਂਟ ਪ੍ਰਤੀਯੋਗਿਤਾ ਦਾ ਸਮਰਥਨ ਕਰਦੇ ਹਨ HTML ਵਿੱਚ ਈਵੈਂਟ ਪ੍ਰਤੀਯੋਗਿਤਾ。

ਮੂਲਤਬੀ CSS ਸੈਟਿੰਗ

ਮੋਸਟ ਬਰਾਉਜ਼ਰਜ਼ ਨਾਲ ਹੇਠ ਲਿਖੇ ਮੂਲਤਬੀ ਮੁੱਲ ਦਿਖਾਉਣਗੇ <li> ਅਬਜੈਕਟ:

li {
  display: list-item;
}

ਬਰਾਉਜ਼ਰ ਸਮਰਥਨ

ਚਰਮੀ ਐਂਜਲ ਫਾਇਰਫਾਕਸ ਸੈਫਾਰੀ ਓਪਰਾ
ਚਰਮੀ ਐਂਜਲ ਫਾਇਰਫਾਕਸ ਸੈਫਾਰੀ ਓਪਰਾ
ਸਮਰਥਨ ਸਮਰਥਨ ਸਮਰਥਨ ਸਮਰਥਨ ਸਮਰਥਨ
  • ਪਿਛਲਾ ਪੰਨਾ <legend>
  • ਅਗਲਾ ਪੰਨਾ <link>