รายการแบบมีลำดับและไม่มีลำดับ
สร้างรายการแบบมีหมายเลขและรายการหัวข้อย่อย
รายการแบบมีลำดับและไม่มีลำดับ เป็นบทเรียน HTML for Kids ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน HTML for Kids และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส HTML for Kids มีบทเรียนทั้งหมด 4 บทเรียน
รายการแบบเรียงลำดับและไม่เรียงลำดับ
ยินดีต้อนรับสู่บทเรียนถัดไป วันนี้เราจะเรียนรู้วิธีสร้างรายการใน HTML รายการช่วยจัดระเบียบข้อมูลและทำให้อ่านง่ายขึ้น
รายการคืออะไร
รายการเป็นวิธีที่ดีในการจัดกลุ่มรายการที่เกี่ยวข้องกัน HTML มีรายการหลักสองประเภท:
- รายการแบบเรียงลำดับ: รายการย่อยมีหมายเลขกำกับ (1, 2, 3...)
- รายการแบบไม่เรียงลำดับ: รายการย่อยมีจุดนำหน้า
มาเรียนรู้วิธีสร้างรายการทั้งสองประเภทกัน
การสร้างรายการแบบเรียงลำดับ
รายการแบบเรียงลำดับสร้างโดยใช้แท็ก <ol> ส่วนรายการย่อยแต่ละรายการจะเพิ่มโดยใช้แท็ก <li> (รายการย่อย)
ตัวอย่าง:
<ol>
<li>Wake up</li>
<li>Eat breakfast</li>
<li>Go to school</li>
</ol>
การสร้างรายการแบบไม่เรียงลำดับ
รายการแบบไม่เรียงลำดับสร้างโดยใช้แท็ก <ul> ส่วนรายการย่อยแต่ละรายการจะเพิ่มโดยใช้แท็ก <li> เช่นเดียวกับรายการแบบเรียงลำดับ
ตัวอย่าง:
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Cherries</li>
</ul>
รายการแบบซ้อน
คุณสามารถสร้างรายการหนึ่งไว้ภายในอีกรายการหนึ่งได้ ซึ่งเรียกว่ารายการแบบซ้อน คุณสามารถซ้อนรายการแบบมีลำดับและรายการแบบไม่มีลำดับไว้ภายในกันได้
ตัวอย่าง:
<ul>
<li>Fruits
<ul>
<li>Apples</li>
<li>Bananas</li>
</ul>
</li>
<li>Vegetables
<ul>
<li>Carrots</li>
<li>Spinach</li>
</ul>
</li>
</ul>
รายการพร้อมคำอธิบาย
HTML ยังช่วยให้คุณสร้างรายการคำอธิบายโดยใช้แท็ก <dl>, <dt> และ <dd> ได้ด้วย:
<dl>: ใช้กำหนดรายการ<dt>: ใช้กำหนดคำศัพท์ (ชื่อเรื่อง)<dd>: ใช้กำหนดคำอธิบาย
ตัวอย่าง:
<dl>
<dt>HTML</dt>
<dd>The language used to create web pages.</dd>
<dt>CSS</dt>
<dd>The language used to style web pages.</dd>
</dl>การเพิ่มรูปแบบให้รายการ
คุณสามารถใช้ CSS เพื่อเปลี่ยนลักษณะที่ปรากฏของรายการได้ ตัวอย่างเช่น คุณสามารถเปลี่ยนรูปแบบของจุดนำหน้าหรือตัวเลขได้
ตัวอย่าง:
<style>
ul {
list-style-type: square; /* Changes bullets to squares */
}
ol {
list-style-type: upper-roman; /* Changes numbers to Roman numerals */
}
</style>
<ul>
<li>Apples</li>
<li>Bananas</li>
</ul>
<ol>
<li>First Step</li>
<li>Second Step</li>
</ol>
ลองทำด้วยตนเอง
มาสร้างหน้าเว็บอย่างง่ายที่มีทั้งรายการแบบมีลำดับและรายการแบบไม่มีลำดับกัน ตัวอย่างมีดังนี้:
<!DOCTYPE html>
<html>
<head>
<title>HTML Lists</title>
</head>
<body>
<h1>My To-Do List</h1>
<h2>Morning Routine</h2>
<ol>
<li>Wake up</li>
<li>Brush my teeth</li>
<li>Have breakfast</li>
</ol>
<h2>Shopping List</h2>
<ul>
<li>Milk</li>
<li>Bread</li>
<li>Eggs</li>
</ul>
</body>
</html>
ทำได้ดีมาก!
ขอแสดงความยินดี! คุณได้เรียนรู้วิธีสร้างรายการแบบมีลำดับ รายการแบบไม่มีลำดับ รายการแบบซ้อน และรายการคำอธิบายแล้ว เครื่องมือเหล่านี้เหมาะอย่างยิ่งสำหรับจัดระเบียบข้อมูลบนหน้าเว็บของคุณ ในบทเรียนถัดไป เราจะเรียนรู้วิธีเพิ่มลิงก์เพื่อเชื่อมโยงหน้าเว็บและเว็บไซต์ต่าง ๆ เตรียมพร้อมสำหรับความสนุกเพิ่มเติมได้เลย!
คำถามที่พบบ่อย
บทเรียน “รายการแบบมีลำดับและไม่มีลำดับ” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “รายการแบบมีลำดับและไม่มีลำดับ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส HTML for Kids ให้อัปเกรดเป็น CoddyKit PRO คอร์ส HTML for Kids มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “รายการแบบมีลำดับและไม่มีลำดับ”
สร้างรายการแบบมีหมายเลขและรายการหัวข้อย่อย คุณปฏิบัติ HTML for Kids ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน HTML for Kids หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน HTML for Kids บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “รายการแบบมีลำดับและไม่มีลำดับ” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน HTML for Kids นี้ได้ไหม
ได้ บทเรียน HTML for Kids ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- หัวเรื่องและย่อหน้า
- รายการแบบมีลำดับและไม่มีลำดับ
- ลิงก์: เชื่อมโยงโลกเว็บ
- รูปภาพ: เพิ่มรูปลงในหน้าเว็บ