HTML <ul> టాగ్

  • ముందు పేజీ <u>
  • తరువాత పేజీ <var>

కోర్సు పరిశీలన:

<ul> నిర్వచనం మరియు ఉపయోగం

టాగ్ ఉపయోగించండి అనాక్రమ (ప్రత్యక్ష పద్ధతి) జాబితా నిర్వచించడానికి. <ul> టాగ్ మరియు <li> టాగ్ ఉపయోగించండి అనాక్రమ జాబితా సృష్టించడానికి.

అడ్వైజరీ:CSS ఉపయోగించండి ద్వారా:జాబితా శైలిని అమర్చండి.

అడ్వైజరీ:క్రమవారమైన జాబితాలకు ఉపయోగించండి: <ol> టాగ్.

మరింత విచారణ కోసం చూడండి:

HTML శిక్షణా కోర్సు:HTML జాబితా

HTML DOM పరికల్పన పుస్తకం:Ul ఆబ్జెక్ట్

CSS శిక్షణా కోర్సు:జాబితా శైలిని అమర్చండి

ఉదాహరణ

ఉదాహరణ 1

అనాక్రమ హెచ్చరణలు ఉన్న హెచ్చరణలు జాబితా:

<ul>
  <li>కాఫీ</li>
  <li>టీ</li>
  <li>పాలు</li>
</ul>

స్వయంగా ప్రయత్నించండి

ఉదాహరణ 2

వివిధ జాబితా శైలులను అమర్చండి (ఉపయోగించండి CSS):

<ul style="list-style-type:circle">
  <li>కాఫీ</li>
  <li>టీ</li>
  <li>పాలు</li>
</ul>
<ul style="list-style-type:disc">
  <li>కాఫీ</li>
  <li>టీ</li>
  <li>పాలు</li>
</ul>
<ul style="list-style-type:square">
  <li>కాఫీ</li>
  <li>టీ</li>
  <li>పాలు</li>
</ul>

స్వయంగా ప్రయత్నించండి

ఉదాహరణ 3

జాబితాలో పద్ధతిని విస్తరించండి మరియు చికిత్సించండి (ఉపయోగించండి CSS):

<ul style="line-height:180%">
  <li>కాఫీ</li>
  <li>టీ</li>
  <li>పాలు</li>
</ul>
<ul style="line-height:80%">
  <li>కాఫీ</li>
  <li>టీ</li>
  <li>పాలు</li>
</ul>

స్వయంగా ప్రయత్నించండి

ఉదాహరణ 4

జాబితాలో మరొక జాబితా సృష్టించండి (నెస్టెడ్ జాబితా):

<ul>
  <li>కాఫీ</li>
  <li>టీ
    <ul>
      <li>పుర్ చా
      <li>గ్రీన్ టీ</li>
    </ul>
  </li>
  <li>పాలు</li>
</ul>

స్వయంగా ప్రయత్నించండి

ఉదాహరణ 5

కాస్ట్ కంప్లెక్స్ నెస్టెడ్ జాబితాలు సృష్టించండి:

<ul>
  <li>కాఫీ</li>
  <li>టీ
    <ul>
      <li>పుర్ చా
      <li>గ్రీన్ టీ
        <ul>
          <li>బీచ్ చా
          <li>లూంగ్ చా
        </ul>
      </li>
    </ul>
  </li>
  <li>పాలు</li>
</ul>

స్వయంగా ప్రయత్నించండి

గ్లౌబల్ అట్రిబ్యూట్స్

<ul> టాగ్ ఇవెంట్ అట్రిబ్యూట్స్ సహాయపడుతుంది HTML లో గ్లౌబల్ అట్రిబ్యూట్స్.

ఇవెంట్ అట్రిబ్యూట్స్

<ul> టాగ్ ఇవెంట్ అట్రిబ్యూట్స్ సహాయపడుతుంది HTML లో ఇవెంట్ అట్రిబ్యూట్స్.

అప్రమేయ CSS సెట్టింగ్స్

అధికారిక బ్రౌజర్లు క్రింది మూలధనం వినియోగించతాయి: <ul> కంపోనెంట్:

ul {
  display: block;
  list-style-type: disc;
  margin-top: 1em;
  margin-bottom: 1 em;
  margin-left: 0;
  margin-right: 0;
  padding-left: 40px;
}

స్వయంగా ప్రయత్నించండి

బ్రౌజర్ సపోర్ట్

చ్రోమ్ ఎడ్జ్ ఫైర్ఫాక్స్ సఫారీ ఆపెరా
చ్రోమ్ ఎడ్జ్ ఫైర్ఫాక్స్ సఫారీ ఆపెరా
మద్దతు మద్దతు మద్దతు మద్దతు మద్దతు
  • ముందు పేజీ <u>
  • తరువాత పేజీ <var>