HTML <li> 标籤

  • หน้าก่อนหน้า <legend>
  • หน้าต่อไป <link>

Paglilingkuran at paggamit

<li> Tag na nagtutukoy sa mga bagay sa listahan.

<li> Tag na ginamit para sa magkakasunod na listahan (<ol>) at mga walang kaugnay na listahan (<ul>) at mga listahan ng menu (<menu>) sa loob ng:

Sa <ul> at <menu>, ang mga bagay sa listahan ay kadalasang magpakita ng bilog na marka.

Sa <ol>, ang mga bagay sa listahan ay kadalasang magpapakita ng numero o alpabeto.

Paalaala:Gumamit ng CSS upangI-set ng estilo ng listahan。

Mga pangkalahatang katanungan:

Tuturuan ng HTML:HTML รายการ

HTML DOM Mga Sanggunian:Li Obheto

Tuturuan ng CSS:I-set ng estilo ng listahan

Eksemplo

Halimbawa 1

Isang magkakasunod na listahan (<ol>) at isang walang kaugnay na listahan (<ul>) ng listahan sa HTML:

<ol>
  <li>กาแฟ</li>
  <li>Te</li>
  <li>นม</li>
</ol>
<ul>
  <li>กาแฟ</li>
  <li>Te</li>
  <li>นม</li>
</ul>

ทดลองด้วยตัวเอง

Halimbawa 2

Sa magkakasunod na listahan gamitin ang attribute ng value:

<ol>
  <li value="100">Kape</li>
  <li>Te</li>
  <li>นม</li>
  <li>Pang-alaga ng tubig</li>
  <li>Jus</li>
  <li>Bitin</li>
</ol>

ทดลองด้วยตัวเอง

Halimbawa 3

I-set ng iba't ibang uri ng estilo ng listahan (gumamit ng CSS):

<ol>
  <li>กาแฟ</li>
  <li style="list-style-type:lower-alpha">Te</li>
  <li>นม</li>
</ol>
<ul>
  <li>กาแฟ</li>
  <li style="list-style-type:square">Te</li>
  <li>นม</li>
</ul>

ทดลองด้วยตัวเอง

Halimbawa 4

Sa listahan gumawa ng isang listahan (nakahulugan ng listahan):

<ul>
  <li>กาแฟ</li>
  <li>ชา</li>
    <ul>
      <li>พูเถร</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;
}

การสนับสนุนโปรแกรมนี้

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
สนับสนุน สนับสนุน สนับสนุน สนับสนุน สนับสนุน
  • หน้าก่อนหน้า <legend>
  • หน้าต่อไป <link>