senarai HTML


HTML menyokong senarai tersusun, tidak tersusun dan ditentukan:

Senarai HTML

< tr class="firstRow">

Senarai tertib

  1. Item senarai pertama

    有序列表

    1. 第一个列表项

    2. 第二个列表项

    3. 第三个列表项

    无序列表

    • 列表项

    • 列表项

    • 列表项

    < /li>

  2. Item senarai kedua

  3. Item senarai ketiga

Senarai tidak tersusun

  • Item senarai

  • Item senarai

    tryitimg.gif

    在线实例

    < /li>

  • Senaraikan item<🎜>

<🎜 ><🎜><🎜>tryitimg.gif

Contoh Dalam Talian<🎜>

1. Senarai tidak tersusun
Contoh ini menunjukkan senarai tidak tersusun.

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head> 
<body>

<h4>无序列表:</h4>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

2. Senarai tertib
Contoh ini menunjukkan senarai tersusun.

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
 
</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

(Lebih banyak contoh boleh didapati di bahagian bawah halaman ini.)

Senarai Tidak Tertib HTML

Senarai tidak tersusun ialah senarai item, dengan item dalam Titik tebal (biasanya bulatan hitam kecil) ditandakan.

Senarai tidak tersusun menggunakan <ul> tag li>

</ul>

Pelayar dipaparkan seperti berikut:

Kopi

  • Susu

  • Senarai Tertib HTML

    • Begitu juga, senarai pesanan juga merupakan senarai item , dan item senarai ditandakan dengan nombor. Senarai tertib bermula dengan teg <ol> Setiap item senarai bermula dengan teg <li>
Item senarai bernombor.

<ol>

<li>Kopi</li>

<li>Susu</li>

</ol>

Pelayar dipaparkan seperti berikut:

Kopi

  1. Susu

  2. Senarai Tersuai HTML

    3. Senarai tersuai bukan sekadar senarai item, tetapi gabungan item dan ulasannya.
Senarai tersuai bermula dengan teg <dl> Setiap item senarai tersuai bermula dengan <dt>. Takrifan setiap item senarai tersuai bermula dengan <dd>. 

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

Pelayar memaparkan seperti berikut:
Kopi

  • - minuman panas hitam

  • Susu

  • - minuman sejuk putih

  • Nota- Petua Berguna

Petua:
Perenggan, pemisah baris, imej, pautan, senarai lain, dsb. boleh digunakan di dalam item senarai.

Lagi contoh

1. Pelbagai jenis senarai tersusun
Contoh ini menunjukkan pelbagai jenis senarai tertib.

Instance


<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<h4>编号列表：</h4>
<ol>
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

<h4>大写字母列表：</h4>
<ol type="A">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

<h4>小写字母列表：</h4>
<ol type="a">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

<h4>罗马数字列表：</h4>
<ol type="I">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

<h4>小写罗马数字列表：</h4>
<ol type="i">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

2. Pelbagai jenis senarai tak tertib Contoh ini menunjukkan pelbagai jenis senarai tak tertib.

Instance


<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<p><b>注意：</b> 在 HTML 4中 ul 属性已废弃，HTML5 已不支持该属性，因此我们使用 CSS 代替来定义不同类型的无序列表如下：</p>

<h4>圆点列表：</h4>
<ul style="list-style-type:disc">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ul>  

<h4>圆圈列表：</h4>
<ul style="list-style-type:circle">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ul>  

<h4>正方形列表：</h4>
<ul style="list-style-type:square">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ul>

</body>
</html>


Jalankan contoh »

Klik butang "Jalankan contoh" untuk melihat tika dalam talian

3. Senarai bersarang
Contoh ini menunjukkan cara menyusun senarai .

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<h4>嵌套列表：</h4>
<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

4 Senarai Bersarang 2
Contoh ini menunjukkan senarai bersarang yang lebih kompleks.

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<h4>嵌套列表：</h4>
<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea
        <ul>
          <li>China</li>
          <li>Africa</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

5. Senarai tersuai
Contoh ini menunjukkan senarai definisi.

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<h4>一个自定义列表：</h4>
<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>

</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Teg senarai HTML

< /tr >
TagPenerangan
<ol>
标签描述
<ol>定义有序列表
<ul>定义无序列表
<li>定义列表项
<dl>定义定义列表
<dt>自定义列表项目
<dd>定义自定列表项的描述
Tentukan senarai tersusun
<ul>Tentukan senarai tidak tersusun
<li><🎜>Tentukan item senarai
<dl><🎜>Senarai definisi definisi
< ;dt><🎜>Item senarai tersuai
<dd><🎜>Tentukan perihalan item senarai tersuai
<🎜>
←
→