HTML - รายการ

HTML เสนอผู้เขียนเว็บสามวิธีในการระบุรายการข้อมูล รายการทั้งหมดต้องมีองค์ประกอบรายการอย่างน้อยหนึ่งรายการ รายการอาจมี -

  • <ul>- รายการที่ไม่เรียงลำดับ นี่จะแสดงรายการโดยใช้สัญลักษณ์แสดงหัวข้อย่อยธรรมดา

  • <ol>- รายการสั่งซื้อ ซึ่งจะใช้รูปแบบตัวเลขที่แตกต่างกันเพื่อแสดงรายการของคุณ

  • <dl>- รายการคำจำกัดความ สิ่งนี้จะจัดเรียงรายการของคุณในลักษณะเดียวกับที่จัดเรียงในพจนานุกรม

HTML Unordered Lists

รายการที่ไม่เรียงลำดับคือชุดของรายการที่เกี่ยวข้องซึ่งไม่มีคำสั่งหรือลำดับพิเศษ รายการนี้สร้างขึ้นโดยใช้ HTML<ul>แท็ก แต่ละรายการในรายการจะมีสัญลักษณ์แสดงหัวข้อย่อย

ตัวอย่าง

<!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>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

ประเภทแอตทริบิวต์

คุณสามารถใช้ได้ typeแอตทริบิวต์สำหรับ <ul> แท็กเพื่อระบุประเภทของสัญลักษณ์แสดงหัวข้อย่อยที่คุณต้องการ โดยค่าเริ่มต้นจะเป็นแผ่นดิสก์ ต่อไปนี้เป็นตัวเลือกที่เป็นไปได้ -

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

ตัวอย่าง

ต่อไปนี้เป็นตัวอย่างที่เราใช้ <ul type = "square">

<!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>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

ตัวอย่าง

ต่อไปนี้เป็นตัวอย่างที่เราใช้ <ul type = "disc"> -

<!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>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

ตัวอย่าง

ต่อไปนี้เป็นตัวอย่างที่เราใช้ <ul type = "circle"> -

<!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>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

รายการสั่งซื้อ HTML

หากคุณจำเป็นต้องใส่รายการของคุณในรายการที่มีลำดับเลขแทนสัญลักษณ์แสดงหัวข้อย่อยรายการลำดับ HTML จะถูกใช้ รายการนี้สร้างขึ้นโดยใช้<ol>แท็ก การกำหนดหมายเลขเริ่มต้นที่หนึ่งและจะเพิ่มขึ้นทีละรายการสำหรับองค์ประกอบรายการที่เรียงลำดับต่อเนื่องกันที่แท็กด้วย <li>

ตัวอย่าง

<!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>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

ประเภทแอตทริบิวต์

คุณสามารถใช้ได้ typeแอตทริบิวต์สำหรับแท็ก <ol> เพื่อระบุประเภทของหมายเลขที่คุณต้องการ โดยค่าเริ่มต้นจะเป็นตัวเลข ต่อไปนี้เป็นตัวเลือกที่เป็นไปได้ -

<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.

ตัวอย่าง

ต่อไปนี้เป็นตัวอย่างที่เราใช้ <ol type = "1">

<!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>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

ตัวอย่าง

ต่อไปนี้เป็นตัวอย่างที่เราใช้ <ol type = "I">

<!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>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

ตัวอย่าง

ต่อไปนี้เป็นตัวอย่างที่เราใช้ <ol type = "i">

<!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>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

ตัวอย่าง

ต่อไปนี้เป็นตัวอย่างที่เราใช้ <ol type = "A">

<!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>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

ตัวอย่าง

ต่อไปนี้เป็นตัวอย่างที่เราใช้ <ol type = "a">

<!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>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

แอตทริบิวต์เริ่มต้น

คุณสามารถใช้ได้ startแอตทริบิวต์สำหรับแท็ก <ol> เพื่อระบุจุดเริ่มต้นของการกำหนดหมายเลขที่คุณต้องการ ต่อไปนี้เป็นตัวเลือกที่เป็นไปได้ -

<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.

ตัวอย่าง

ต่อไปนี้เป็นตัวอย่างที่เราใช้ <ol type = "i" start = "4">

<!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>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

รายการนิยาม HTML

HTML และ XHTML รองรับรูปแบบรายการที่เรียกว่า definition listsโดยมีการแสดงรายการเหมือนในพจนานุกรมหรือสารานุกรม รายการคำจำกัดความเป็นวิธีที่ดีที่สุดในการนำเสนออภิธานศัพท์รายการคำศัพท์หรือรายการชื่อ / ค่าอื่น ๆ

รายการคำจำกัดความใช้ประโยชน์จากแท็กสามแท็กต่อไปนี้

  • <dl> - กำหนดจุดเริ่มต้นของรายการ
  • <dt> - คำศัพท์
  • <dd> - นิยามคำศัพท์
  • </dl> - กำหนดจุดสิ้นสุดของรายการ

ตัวอย่าง

<!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>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -