รายการ HTML 3 ประเภทและวิธีใช้งาน

ประเด็นที่สำคัญ

รายการเรียงลำดับ ไม่เรียงลำดับ และอธิบาย

รายการที่เรียงลำดับเป็นองค์ประกอบทั่วไปใน HTML ที่สามารถจัดเรียงได้โดยใช้ค่าตัวเลขหรือไม่ใช่ตัวเลขที่เรียกว่า"ประเภทรายการที่เรียงลำดับ"นอกจากนี้ รายการเหล่านี้ยังสามารถปรับแต่งเพิ่มเติมได้ด้วยความช่วยเหลือของแอตทริบิวต์ต่างๆ เช่น คุณลักษณะ"type"ซึ่งเปิดใช้งานตัวเลือกการจัดรูปแบบส่วนบุคคล ในขณะที่แอตทริบิวต์"start"และ"reversed"ช่วยให้สามารถปรับตำแหน่งรายการเริ่มต้นและทิศทางของรายการได้ ตามลำดับ

รายการที่ไม่เรียงลำดับเป็นวิธีในการจัดระเบียบและนำเสนอข้อมูลในลักษณะที่กระชับ โดยจัดกลุ่มรายการที่เชื่อมโยงกันอย่างหลวมๆ หรือไม่มีความสำคัญเป็นพิเศษ ลักษณะที่ปรากฏของรายการเหล่านี้สามารถปรับแต่งได้โดยใช้ Cascading Style Sheets (CSS) เพื่อปรับเปลี่ยนสไตล์สัญลักษณ์แสดงหัวข้อย่อย ซึ่งอาจรวมถึงการเปลี่ยนแปลงขนาด รูปร่าง สี และตำแหน่งภายในรายการ ฟีเจอร์นี้ช่วยให้นักออกแบบและนักพัฒนาปรับแต่งรายการแบบไม่เรียงลำดับเพื่อให้เหมาะกับการออกแบบภาพต่างๆ ขณะเดียวกันก็รักษารูปแบบที่อ่านง่ายสำหรับผู้ใช้

รายการ HTML ทำหน้าที่เป็นองค์ประกอบโครงสร้างพื้นฐานสำหรับการจัดประเภทของข้อมูลที่สัมพันธ์กันบนหน้าเว็บ ไม่ว่าเราจะสร้างเมนูนำทาง จัดเรียงผลิตภัณฑ์ตามข้อเสนอพิเศษ หรือพยายามแสดงข้อมูลที่ซับซ้อนในรูปแบบที่เข้าใจง่าย รายการเหล่านี้พิสูจน์แล้วว่าเป็นเครื่องมือที่ขาดไม่ได้ในการทำงานให้สำเร็จ

มีรายการ HTML หลักอยู่สามประเภท ซึ่งรองรับบทบาททางสถาปัตยกรรมที่โดดเด่นในการออกแบบและพัฒนาเว็บไซต์

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

รายการเรียงลำดับ HTML เป็นวิธีที่มีประสิทธิภาพในการจัดระเบียบชุดขององค์ประกอบที่สัมพันธ์กันในลำดับเฉพาะ เพื่อสร้างรายการดังกล่าวการใช้ประโยชน์ของ

 <!-- Ordered list -->
<ol>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ol>

รหัสนี้แสดงมุมมองต่อไปนี้:

สิ่งสำคัญคือต้องทราบว่าตามค่าเริ่มต้น รายการเรียงลำดับจะเป็นไปตามลำดับตัวเลข อย่างไรก็ตาม เรามีความยืดหยุ่นในการเปลี่ยนแปลงการจัดเรียงนี้ผ่านการใช้แอตทริบิวต์"type"แอตทริบิวต์นี้ให้สิทธิ์ผู้ใช้ในการควบคุมปัจจัยที่กำหนดองค์กรของรายชื่อ มีตัวเลือกต่างๆ สำหรับเลือกวิธีการเรียงลำดับ ได้แก่ ตัวอักษร (ทั้งตัวพิมพ์ใหญ่และตัวพิมพ์เล็ก) ค่าตัวเลข หรือแม้แต่เลขโรมันในรูปแบบตัวพิมพ์ใหญ่หรือตัวพิมพ์เล็ก

 <!-- Ordered list -->
<ol type="a">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ol> 

การรวมแอตทริบิวต์ “type” ไว้ในองค์ประกอบรายการเรียงลำดับ ("") ทำให้ได้การนำเสนอภาพที่ได้รับการแก้ไขดังที่แสดงด้านล่าง:

“start” ซึ่งกำหนดจำนวนรายการที่จะแสดงที่จุดเริ่มต้นของรายการ และ"กลับรายการ"ซึ่งจะกลับลำดับของรายการเพื่อให้แสดงจากรายการสุดท้ายก่อน

คุณลักษณะ start ช่วยให้สามารถเริ่มต้นการจัดเรียงองค์ประกอบจากตำแหน่งที่กำหนดโดยใช้ค่าจำนวนเต็ม ตามภาพประกอบ เมื่อรวม start="3" ไว้ในองค์ประกอบ โดยไม่ต้องระบุประเภท ที่เฉพาะเจาะจง ก็จะเริ่มจัดระเบียบรายการจากเลขสาม ในกรณีที่ระบุ type="a" หรือ type="I" ก็จะเริ่มเรียงลำดับจาก’c’หรือ’I’ตามลำดับ

 <!-- Ordered list -->
<ol type="I" start="3">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ol> 

รหัสด้านบนแสดงมุมมองต่อไปนี้:

คุณลักษณะ “reversed” ช่วยให้สามารถจัดลำดับองค์ประกอบภายในรายการใหม่ได้โดยการสลับค่าบูลีน โดยมีการตั้งค่าเริ่มต้นเป็นเท็จ

 <!-- Ordered list -->
<ol reversed="true">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ol> 

เมื่อดำเนินการโค้ดที่ให้มา จะส่งผลให้มีการแสดงตารางบนเว็บเบราว์เซอร์พร้อมคุณสมบัติและเนื้อหาเฉพาะตามที่อธิบายไว้ด้านล่าง:html ชื่อตาราง

รายการไม่เรียงลำดับ

รายการที่ไม่เรียงลำดับทำหน้าที่เป็นวิธีที่มีประสิทธิภาพในการจัดระเบียบและนำเสนอรายการต่างๆ ที่เชื่อมโยงกันทางแนวคิด แต่ไม่จำเป็นต้องมีลำดับหรือการจัดอันดับที่เฉพาะเจาะจง โดยทั่วไปแล้ว เว็บเบราว์เซอร์จะใช้สัญลักษณ์แสดงหัวข้อย่อยเพื่อแสดงถึงแต่ละองค์ประกอบภายในคอลเลกชันดังกล่าว

ในการสร้างกระดานข่าวที่ไม่มีโครงสร้างซึ่งประกอบไปด้วยชุดของรายการ ต้องใช้องค์ประกอบ HTML (เพื่อแสดงถึงคอนเทนเนอร์) และ (สำหรับทุกๆ รายการ) ตามลำดับ

 <ul>
  <li>Item 1</li>
  <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ul> 

รหัสนี้แสดงมุมมองต่อไปนี้:

ลักษณะทั่วไปของรายการแบบไม่เรียงลำดับจะแสดงด้วยรูปร่างวงกลมที่เรียกว่า"ดิสก์"ในอดีต เราสามารถใช้คุณลักษณะ"ประเภท"เพื่อกำหนดการแสดงภาพของรายการที่ไม่เรียงลำดับได้ ขออภัย แอตทริบิวต์เฉพาะนี้ถือว่าล้าสมัยและไม่ได้รับการสนับสนุนอีกต่อไป ขอแนะนำเป็นอย่างยิ่งให้ใช้ “คุณสมบัติประเภทรายการสไตล์รายการ CSS” ที่ใช้กันอย่างแพร่หลาย เพื่อให้ได้การปรับแต่งตามที่ต้องการเกี่ยวกับรายการที่ไม่เรียงลำดับ

 <style>
ul { list-style-type: square; }
 </style> 

โค้ดที่กล่าวมาข้างต้นจะแก้ไขการแสดงข้อมูลที่ให้ไว้ด้วยภาพโดยการสร้างโครงสร้าง HTML ที่มีองค์ประกอบ div หลายรายการ โดยที่แต่ละองค์ประกอบจะได้รับการกำหนดคุณลักษณะต่างๆ และมีเนื้อหาเฉพาะ

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

รายการที่ซ้อนกัน

โดยพื้นฐานแล้ว รายการที่ซ้อนกันประกอบด้วยองค์ประกอบจากรายการที่กว้างกว่าซึ่งรวมอยู่ภายในนั้น การก่อตัวของโครงสร้างดังกล่าวอาจเกิดขึ้นได้จากการผสมผสานกันอย่างลงตัวของทั้งรายการสั่งซื้อและรายการที่ไม่เรียงลำดับ การกำหนดค่าดังกล่าวสามารถพรรณนาระบบลำดับชั้นที่ซับซ้อนและมีความซับซ้อนมากขึ้นได้

 <H3>Chicken Pasta Insturctions</H3>
<ol>
   <li>Boil pasta.</li>
   <li>
   Season chicken breast.
    <ul>
       <li>salt and pepper</li>
       <li>paprika</li>
       <li>garlic powder</li>
       <li>Italian seasoning</li>
     </ul>
  </li>
  <li>Heat olive oil in pot over medium-high heat.</li>
   <li>Add chicken breast to pan and cook for 5 minutes.</li>
   <li>Add heavy cream and parmesan cheese to empty pot.</li>
   <li>Add pasta and slice chicken to cream sauce.</li>
</ol> 

รหัสนี้แสดงมุมมองต่อไปนี้:

รายการคำอธิบาย

แท็ก HTML ใช้เพื่อกำหนดรายการคำอธิบาย ซึ่งประกอบด้วยคำที่สื่อความหมาย ( ) และรายละเอียดที่เกี่ยวข้อง ( ) รูปแบบที่มีโครงสร้างนี้จัดให้มีการจัดระเบียบที่ชัดเจนในการนำเสนอข้อมูลในลักษณะลำดับชั้น ช่วยเพิ่มความสามารถในการอ่านและความเข้าใจ

 <h3>Popular Laptops</h3>
<dl>
  <dt>MacBook Pro</dt>
   <dd>
     Provides up to 22 hours of battery life,
     has an advanced camera, and a magic keyboard with touch ID.
   </dd>

  <dt>MSI GS76 Stealth</dt>
   <dd>
    A powerful gaming laptop with supercharged graphics and customized keys.
   </dd>
</dl> 

รหัสด้านบนแสดงมุมมองต่อไปนี้:

จัดระเบียบเนื้อหาของคุณด้วยรายการ HTML ที่ถูกต้อง

การเลือกรายการ HTML ที่ใช้ในการพัฒนาเว็บควรขึ้นอยู่กับข้อมูลที่ตั้งใจจะถ่ายทอดให้กับผู้ใช้ ตามภาพประกอบ เมื่อต้องการสร้างการนำเสนอต่อเนื่อง เช่น ขั้นตอนในการเตรียมอาหารหรือทำงานบ้าน รายการสั่งซื้อจะเหมาะสมที่สุด

เมื่อพิจารณาถึงการจัดระเบียบเนื้อหาที่ไม่จำเป็นต้องใช้กระบวนการหรือลำดับทีละขั้นตอน เช่น ข้อมูลข้อเท็จจริงหรือคำจำกัดความ การใช้รายการที่ไม่มีโครงสร้างอาจเป็นทางเลือกที่เป็นประโยชน์มากกว่า นอกจากนี้ ในกรณีที่เราต้องการนำเสนอบทสรุปของคำศัพท์และคำอธิบายที่เกี่ยวข้อง หรือการรวบรวมคำถามและการตอบกลับ การใช้รูปแบบรายการคำจำกัดความจะให้ผลลัพธ์ที่ดีที่สุด