HTML แสดงรายละเอียด
รายการคำอธิบายซึ่งประกอบด้วยกลุ่มค่าชื่อและเป็นที่รู้จักเป็นรายการคำนิยามก่อนที่จะ HTML5 คำอธิบายรายการมีไว้สำหรับกลุ่มของ "ข้อกำหนดและคำจำกัดความเมหัวข้อและค่าคำถามและคำตอบหรือกลุ่มอื่น ๆ ของข้อมูลค่าชื่อ"
DL อยู่ในแท็ก HTML และเป็นมาตรฐานใน HTML 2.0; ปัจจุบันยังคง
ตัวอย่างของรายการเรียงลำดับและรายการสั่งซื้อในรูปแบบ HTML:
รายการเรียงลำดับ:
- ชิ้น
- ชิ้น
- ชิ้น
- ชิ้น
รายการสั่งซื้อ:
- รายการแรก
- รายการที่สอง
- รายการที่สาม
- รายการที่สี่
รายการ HTML เรียงลำดับ
รายการเรียงลำดับเริ่มต้นด้วย <ul> แท็ก รายการแต่ละรายการจะเริ่มต้นด้วย <li> แท็ก
รายการจะถูกทำเครื่องหมายด้วยกระสุน (small black circles) :
รายการ HTML เรียงลำดับ - เดอะ Style แอตทริบิวต์
style แอตทริบิวต์สามารถเพิ่มไปยังรายการเรียงลำดับเพื่อกำหนดรูปแบบของเครื่องหมายนี้:
| สไตล์ | ลักษณะ |
|---|---|
| list-style-type:disc | รายการจะถูกทำเครื่องหมายด้วยกระสุน (default) |
| list-style-type:circle | รายการจะถูกทำเครื่องหมายกับแวดวง |
| list-style-type:square | รายการจะมีเครื่องหมายสี่เหลี่ยม |
| list-style-type:none | รายการจะไม่ถูกทำเครื่องหมาย |
Circle :
<ul style="list-style-type:circle">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul> ลองตัวเอง» Square :
<ul style="list-style-type:square">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul> ลองตัวเอง» รายการ HTML ได้รับคำสั่ง
รายการสั่งซื้อเริ่มต้นด้วย <ol> แท็ก รายการแต่ละรายการจะเริ่มต้นด้วย <li> แท็ก
รายการจะถูกทำเครื่องหมายกับตัวเลข:
รายการ HTML สั่งซื้อ - เดอะ Type แอตทริบิวต์
type แอตทริบิวต์สามารถเพิ่มไปยังรายการสั่งเพื่อกำหนดประเภทของเครื่องหมายนี้:
| ชนิด | ลักษณะ |
|---|---|
| type="1" | รายการนี้จะถูกนับเข้ากับตัวเลข (default) |
| type="A" | รายการนี้จะถูกนับเข้ากับตัวอักษรพิมพ์ใหญ่ |
| type="a" | รายการนี้จะถูกนับเข้ากับอักษรตัวพิมพ์เล็ก |
| type="I" | รายการนี้จะถูกนับเข้ากับตัวเลขโรมันพิมพ์ใหญ่ |
| type="i" | รายการนี้จะถูกนับเข้ากับตัวเลขโรมันพิมพ์เล็ก |
HTML คำอธิบายรายการ
HTML นอกจากนี้ยังสนับสนุนรายการคำอธิบาย
รายการคำอธิบายเป็นรายการคำศัพท์ที่มีคำอธิบายของแต่ละคำ
<dl> แท็กกำหนดรายการคำอธิบายที่ <dt> แท็กกำหนดระยะ (name) และ <dd> แท็กอธิบายแต่ละเทอม:
ตัวอย่าง
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl> ลองตัวเอง» รายการ HTML ซ้อน
รายการสามารถซ้อนกัน (lists inside lists) :
ตัวอย่าง
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul> ลองตัวเอง» รายการสามารถมีรายการใหม่และองค์ประกอบ HTML อื่น ๆ เช่นภาพและการเชื่อมโยงอื่น ๆ
รายการแนวนอน
รายการ HTML สามารถสไตล์ในรูปแบบที่แตกต่างกันมากกับ CSS
วิธีการหนึ่งที่นิยมคือการรูปแบบรายการที่จะแสดงในแนวนอน:
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<style>
ul#menu li {
display:inline;
}
</style>
</head>
<body>
<h2>Horizontal List</h2>
<ul id="menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>PHP</li>
</ul>
</body>
</html> ลองตัวเอง» มีลักษณะพิเศษเล็ก ๆ น้อย ๆ ที่คุณสามารถทำให้มันมีลักษณะเหมือนเมนู:
ตัวอย่าง
ul#menu {
padding: 0;
}
ul#menu li {
display: inline;
}
ul#menu li a {
background-color: black;
color: white;
padding: 10px 20px;
text-decoration: none;
border-radius: 4px 4px 0 0;
}
ul#menu li a:hover {
background-color: orange;
} ลองตัวเอง» บทสรุป
- ใช้ HTML <ul> องค์ประกอบในการกำหนดรายการเรียงลำดับ
- ใช้รูปแบบ HTML style แอตทริบิวต์ที่จะกำหนดรูปแบบกระสุน
- ใช้ HTML <ol> องค์ประกอบในการกำหนดรายการสั่งซื้อ
- ใช้แบบ HTML type แอตทริบิวต์การกำหนดประเภทหมายเลข
- ใช้ HTML <li> องค์ประกอบในการกำหนดรายการสินค้า
- ใช้ HTML <dl> องค์ประกอบกำหนดรายการคำอธิบาย
- ใช้ HTML <dt> องค์ประกอบในการกำหนดระยะคำอธิบาย
- ใช้ HTML <dd> องค์ประกอบในการกำหนดข้อมูลคำอธิบาย
- รายการสามารถซ้อนกันภายในรายการ
- รายการสามารถมีองค์ประกอบ HTML อื่น ๆ
- ใช้การแสดงผล CSS คุณสมบัติ: inline เพื่อแสดงรายการแนวนอน
ทดสอบตัวเองด้วยการออกกำลังกาย!
การใช้สิทธิ 1 » ใช้สิทธิ 2 » ออกกำลังกาย 3 » 4 การออกกำลังกาย» ใช้สิทธิ 5 » ออกกำลังกาย 6 »
รายการแท็ก HTML
| แท็ก | ลักษณะ |
|---|---|
| <ul> | กำหนดรายการเรียงลำดับ |
| <ol> | กำหนดรายการสั่งซื้อ |
| <li> | กำหนดรายการสินค้า |
| <dl> | กำหนดรายการคำอธิบาย |
| <dt> | กำหนดระยะในรายการคำอธิบาย |
| <dd> | กำหนดรายละเอียดในรายการคำอธิบาย |