HTML - Listeler

HTML, web yazarlarına bilgi listelerini belirtmek için üç yol sunar. Tüm listeler bir veya daha fazla liste öğesi içermelidir. Listeler şunları içerebilir -

  • <ul>- Sırasız liste. Bu, öğeleri düz madde işaretleri kullanarak listeleyecektir.

  • <ol>- Sıralı bir liste. Bu, öğelerinizi listelemek için farklı sayı şemaları kullanacaktır.

  • <dl>- Bir tanım listesi. Bu, öğelerinizi bir sözlükte düzenlendikleri gibi düzenler.

HTML Sırasız Listeler

Sırasız liste, özel bir sırası veya sırası olmayan ilgili öğeler koleksiyonudur. Bu liste HTML kullanılarak oluşturulmuştur<ul>etiket. Listedeki her öğe bir madde işaretiyle işaretlenir.

Misal

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Unordered List</title>
   </head>
	
   <body>
      <ul>
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ul>
   </body>
   
</html>

Bu, aşağıdaki sonucu verecektir -

Type Özniteliği

Kullanabilirsiniz type<ul> etiketi için özellik, beğendiğiniz madde işaretinin türünü belirtmek için. Varsayılan olarak bir disktir. Olası seçenekler aşağıdadır -

<ul type = "square">
<ul type = "disc">
<ul type = "circle">

Misal

Aşağıda, <ul type = "square"> kullandığımız bir örnek verilmiştir

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Unordered List</title>
   </head>

   <body>
      <ul type = "square">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ul>
   </body>

</html>

Bu, aşağıdaki sonucu verecektir -

Misal

Aşağıda, <ul type = "disc"> kullandığımız bir örnek verilmiştir -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Unordered List</title>
   </head>
	
   <body>
      <ul type = "disc">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ul>
   </body>

</html>

Bu, aşağıdaki sonucu verecektir -

Misal

Aşağıda, <ul type = "circle"> kullandığımız bir örnek verilmiştir -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Unordered List</title>
   </head>

   <body>
      <ul type = "circle">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ul>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

HTML Sıralı Listeler

Öğelerinizi madde işaretli yerine numaralı bir listeye koymanız gerekirse, HTML sıralı liste kullanılacaktır. Bu liste kullanılarak oluşturulur<ol>etiket. Numaralandırma birden başlar ve <li> ile etiketlenmiş her ardışık sıralı liste öğesi için bir artar.

Misal

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Ordered List</title>
   </head>

   <body>
      <ol>
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ol>
   </body>

</html>

Bu, aşağıdaki sonucu verecektir -

Type Özniteliği

Kullanabilirsiniz type<ol> etiketi için özellik, beğendiğiniz numaralandırma türünü belirtmek için. Varsayılan olarak bir sayıdır. Olası seçenekler aşağıdadır -

<ol type = "1"> - Default-Case Numerals.
<ol type = "I"> - Upper-Case Numerals.
<ol type = "i"> - Lower-Case Numerals.
<ol type = "A"> - Upper-Case Letters.
<ol type = "a"> - Lower-Case Letters.

Misal

Aşağıda, <ol type = "1"> kullandığımız bir örnek verilmiştir

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Ordered List</title>
   </head>

   <body>
      <ol type = "1">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ol>
   </body>

</html>

Bu, aşağıdaki sonucu verecektir -

Misal

Aşağıda, <ol type = "I"> kullandığımız bir örnek verilmiştir

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Ordered List</title>
   </head>
	
   <body>
      <ol type = "I">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ol>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

Misal

Aşağıda, <ol type = "i"> kullandığımız bir örnek verilmiştir

<!DOCTYPE html>
<html>
   
   <head>
      <title>HTML Ordered List</title>
   </head>
	
   <body>
      <ol type = "i">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ol>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

Misal

Aşağıda, <ol type = "A"> kullandığımız bir örnek verilmiştir

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Ordered List</title>
   </head>
	
   <body>
      <ol type = "A">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ol>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

Misal

Aşağıda, <ol type = "a"> kullandığımız bir örnek verilmiştir

<!DOCTYPE html>
<html>
   
   <head>
      <title>HTML Ordered List</title>
   </head>
	
   <body>
      <ol type = "a">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ol>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

Başlangıç ​​Özniteliği

Kullanabilirsiniz start<ol> etiketi için öznitelik, ihtiyacınız olan numaralandırmanın başlangıç ​​noktasını belirtmek için. Olası seçenekler aşağıdadır -

<ol type = "1" start = "4">    - Numerals starts with 4.
<ol type = "I" start = "4">    - Numerals starts with IV.
<ol type = "i" start = "4">    - Numerals starts with iv.
<ol type = "a" start = "4">    - Letters starts with d.
<ol type = "A" start = "4">    - Letters starts with D.

Misal

Aşağıda, <ol type = "i" start = "4"> kullandığımız bir örnek verilmiştir

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Ordered List</title>
   </head>
	
   <body>
      <ol type = "i" start = "4">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ol>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

HTML Tanım Listeleri

HTML ve XHTML, adı verilen bir liste stilini destekler definition listsgirişler bir sözlük veya ansiklopedide olduğu gibi listelenir. Tanım listesi, bir sözlük, terimler listesi veya diğer ad / değer listesini sunmanın ideal yoludur.

Tanım Listesi aşağıdaki üç etiketi kullanır.

  • <dl> - Listenin başlangıcını tanımlar
  • <dt> - Bir terim
  • <dd> - Terim tanımı
  • </dl> - Listenin sonunu tanımlar

Misal

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Definition List</title>
   </head>
	
   <body>
      <dl>
         <dt><b>HTML</b></dt>
         <dd>This stands for Hyper Text Markup Language</dd>
         <dt><b>HTTP</b></dt>
         <dd>This stands for Hyper Text Transfer Protocol</dd>
      </dl>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -