แท็ก ul ol li หมายถึงอะไร ตัวอย่างของการกำหนดรูปแบบรายการ CSS ul li วิธีเงอะงะแบบดั้งเดิม
ด้วยพื้นฐานที่หลีกเลี่ยงไม่ได้ ตอนนี้เราจะมาดูองค์ประกอบที่ใช้ในการจัดเตรียมโครงสร้างและความหมายให้กับส่วนต่างๆ ของการออกแบบอย่างละเอียดยิ่งขึ้น ถ้าใครไม่ทราบ ul และ li เป็นตัวเลือกที่ดีกว่าข้อความธรรมดามาก เพราะเมื่อตัดข้อความ โดยเฉพาะบนมือถือ มันจะเยื้องอย่างสมบูรณ์และไม่ได้ล้อมรอบเครื่องหมาย
รายการถือเป็นวิธีที่ยอดเยี่ยมในการนำเสนอข้อมูลบนหน้าต่างๆ เนื่องจากอ่านง่ายและดูดี หลายๆ คนอาจคิดว่าสัญลักษณ์แสดงหัวข้อย่อยเป็นภาพขนาดเล็ก แต่อันที่จริงแล้ว พวกมันทั้งหมดถูกสร้างขึ้นด้วยโค้ด HTML ที่ค่อนข้างง่าย คุณสามารถซ้อนรายการประเภทต่างๆ เข้าด้วยกันได้หากต้องการ อย่าลืมปิดรายการให้ถูกต้อง คุณสามารถเล่นกับข้อความที่คุณต้องการในรายการคำสั่งเหล่านี้ทั้งหมด
คุณต้องทราบด้วยว่ารายการนั้นประกอบด้วยหลายองค์ประกอบในขั้นต้น:
1
. ข้อมูลที่ไม่เรียงลำดับ
2
. ข้อมูลการสั่งซื้อ
3
. คำจำกัดความ
เริ่มการติดตั้งกันเลย:
1. ตัวเลือก:
- รายการ
- รายการที่ไม่ซ้ำกัน
- รายการเดิม
- ZORNET.RU - เว็บมาสเตอร์
- รายการอื่น
css
(กสญฺญโลปัน)
ขอบ: 19px 0 0;
ช่องว่างภายใน:0;
สไตล์รายการ: ไม่มี;
เคาน์เตอร์รีเซ็ต: li;
}
.ksangelopan หลี่ (
เส้นขอบ: 2px ทึบ #3575ad;
พื้นหลัง: #d7dee4;
ตำแหน่ง: ญาติ;
ระยะขอบล่าง: 17px;
ช่องว่างภายใน: 15px 9px;
}
.ksangelopan li:เลื่อน (
ดัชนี z: 1;
}
.ksangelopan li:ก่อน (
เส้นขอบ: 2px ทึบ #2270b3;
ตำแหน่ง: แน่นอน;
ด้านบน: -14px;
ช่องว่างภายใน: 3px 9px;
ขนาดตัวอักษร: 11px;
น้ำหนักตัวอักษร: ตัวหนา;
สี: #246eaf;
พื้นหลัง: #f2f4f7;
เคาน์เตอร์ที่เพิ่มขึ้น: li;
เนื้อหา: เคาน์เตอร์ (li);
-webkit-transition-duration: 0.4 วินาที;
ระยะเวลาการเปลี่ยนผ่าน: 0.4 วินาที;
}
.ksangelopan li:hover:before (
พื้นหลัง: #2672b3;
สี: #f7f9fb;
-webkit-transform: แปล (-11px, 0);
-ms-transform: แปล (-11px, 0);
-o-แปลง: แปล (-11px, 0);
การแปลง: แปล (-11px, 0);
}
.ksangelopan li:หลัง (
เนื้อหา: "";
ตำแหน่ง: แน่นอน;
ระยะเวลาการเปลี่ยนภาพ: 0.3 วินาที;
-webkit-transition-property: ความกว้าง;
คุณสมบัติการเปลี่ยนแปลง: ความกว้าง;
ดัชนี z: -1;
พื้นหลัง: #FFF;
ความสูง: 100%;
ซ้าย: 0;
ด้านบน: 0;
ความกว้าง: 0;
}
.ksangelopan li:hover:หลัง (
ความกว้าง: 100%
}
นี่คือการตั้งค่าทั้งหมด
2 ตัวเลือกที่สอง:
- รายการ
- รายการที่ไม่ซ้ำกัน
- รายการเดิม
- ZORNET.RU - เว็บมาสเตอร์
- รายการอื่น
css
เบเลดุซโลปามเกส (
ขอบล่าง: 8px;
ช่องว่างภายใน:0;
สไตล์รายการ: ไม่มี;
เคาน์เตอร์รีเซ็ต: li;
}
.beleduzlopamges ลี่ (
ตำแหน่ง: ญาติ;
เส้นขอบ: 2px ทึบ #195588;
พื้นหลัง: #eff3f7;
ช่องว่างภายใน: 15px 19px 15px 27px;
ขอบ: 12px 0 12px 40px;
-webkit-ระยะเวลาเปลี่ยนผ่าน: 0.3 วินาที;
ระยะเวลาการเปลี่ยนภาพ: 0.3 วินาที;
}
.beleduzlopamges li:hover(
พื้นหลัง: #FFF;
}
.beleduzlopamges li:ก่อน (
ความสูงของบรรทัด: 32px;
ตำแหน่ง: แน่นอน;
ด้านบน: 4px;
ซ้าย: -39px;
ความกว้าง: 39px
จัดข้อความ: กึ่งกลาง;
ขนาดตัวอักษร: 16px;
น้ำหนักตัวอักษร: ตัวหนา;
สี: #f9f5f5;
พื้นหลัง: #275b88;
เคาน์เตอร์ที่เพิ่มขึ้น: li;
เนื้อหา: เคาน์เตอร์ (li);
ระยะเวลาการเปลี่ยนภาพ: 0.2 วินาที;
}
.beleduzlopamges li:เลื่อน:ก่อน (
ความกว้าง:46px;
}
.beleduzlopamges li:หลัง (
ตำแหน่ง: แน่นอน;
ซ้าย: 0;
ด้านบน: 4px;
เนื้อหา: "";
ความสูง: 0;
ความกว้าง: 0;
เส้นขอบ: โปร่งใสทึบ 16px;
ขอบซ้ายสี: #275b88;
-webkit-ระยะเวลาการเปลี่ยนภาพ: 0.2 วินาที;
ระยะเวลาการเปลี่ยนภาพ: 0.2 วินาที;
}
.beleduzlopamges li:hover:หลัง (
ขอบซ้าย: 6px;
}
แกมมาตรงกลางสามารถตั้งค่าได้อย่างอิสระภายใต้สไตล์หลักของไซต์
3 ตัวเลือกที่สาม:
- สคริปต์สำหรับ uCoz
- เทมเพลตสำหรับ uCoz
- ออกแบบเว็บไซต์
- สไตล์สำหรับไซต์
- การจัดรูปแบบใน CSS
css
นีซูอาลิซาเนลาก (
ช่องว่างภายใน:0;
สไตล์รายการ: ไม่มี;
เคาน์เตอร์รีเซ็ต: li;
}
.nizualisanelag หลี่(
ตำแหน่ง: ญาติ;
ช่องว่างภายใน: 9px 17px 17px 25px;
ขอบซ้าย: 39px;
ระยะเวลาการเปลี่ยนภาพ: 0.2 วินาที;
เคอร์เซอร์: ตัวชี้;
น้ำหนักตัวอักษร: ตัวหนา;
สี: #343638;
}
.nizualisanelag li:ก่อน (
เส้นขอบ: โปร่งใสทึบ 3px;
ความสูงของบรรทัด: 35px;
ตำแหน่ง: แน่นอน;
ด้านบน: 0;
ซ้าย:-29px;
ความกว้าง:41px;
จัดข้อความ: กึ่งกลาง;
ขนาดตัวอักษร: 14px;
น้ำหนักตัวอักษร: ตัวหนา;
สี: #619dce;
เคาน์เตอร์ที่เพิ่มขึ้น: li;
เนื้อหา: เคาน์เตอร์ (li);
ระยะเวลาการเปลี่ยนภาพ: 0.3 วินาที;
ขนาดกล่อง: border-box;
}
.nizualisanelag li:เลื่อน:ก่อน (
สี: #337AB7;
}
.nizualisanelag li:หลัง (
ตำแหน่ง: แน่นอน;
ด้านบน: 0;
ซ้าย: -29px;
ความกว้าง: 41px
ความสูง: 41px;
เส้นขอบ: 5px ทึบ #468bd0;
รัศมีเส้นขอบ: 50%
เนื้อหา: "";
ความทึบ: 0.5
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
ขนาดกล่อง: border-box;
}
.nizualisanelag li:เลื่อน:หลังจาก (
แอนิเมชั่น: เข้า-ออกง่าย 500ms เด้งเข้า 0 วินาที;
ความทึบ: 1
}
@คีย์เฟรมเด้งเข้า(
0% {
ความทึบ: 0
แปลงร่าง: scale3d(.3, .3, .3);
}
20% {
แปลงร่าง: scale3d(1.3, 1.3, 1.3);
}
40% {
แปลงร่าง: scale3d(.9, .9, .9);
}
60% {
ความทึบ: 1
แปลงร่าง: scale3d(1.03, 1.03, 1.03);
}
80% {
แปลงร่าง: scale3d(.97, .97, .97);
}
ถึง(
ความทึบ: 1
แปลงร่าง: scale3d(1, 1, 1);
}
}
มาพร้อมกับแอนิเมชั่นที่สวยงาม
4 ตัวเลือกที่สี่:
- องค์ประกอบแรกสำหรับไซต์
- องค์ประกอบที่สองสำหรับไซต์
- องค์ประกอบที่สามสำหรับไซต์
- องค์ประกอบที่สี่สำหรับไซต์
- องค์ประกอบที่ห้าสำหรับไซต์
css
ช่องว่างภายใน:0;
สไตล์รายการ: ไม่มี;
}
.kudezamuden ลิ(
ช่องว่างภายใน: 6px;
}
.kudezamuden li:ก่อน (
ช่องว่างภายในด้านขวา: 11px;
น้ำหนักตัวอักษร: ตัวหนา;
สี: #4979a0;
เนื้อหา: "\2606";
ระยะเวลาการเปลี่ยนผ่าน: 0.4 วินาที;
}
.kudezamuden li:hover:before (
สี: #235e90;
เนื้อหา: "\2605";
}
คล้ายกับเวอร์ชันก่อนหน้า มีเพียงไอคอนเท่านั้นที่เปลี่ยนไป
โดยทั่วไปนี่คือรายการเล็ก ๆ น้อย ๆ ที่จะช่วยให้ผู้ดูแลเว็บสร้างรายการที่สวยงามบนพอร์ทัลซึ่งเขาสามารถจัดเรียงได้มากขึ้นตามที่เขาต้องการดู
หากคุณต้องการใส่รายการในรายการที่มีลำดับเลขแทนรายการที่มีสัญลักษณ์แสดงหัวข้อย่อย ระบบจะใช้ HTML ตามลำดับที่นี่ รายการนี้สร้างโดยใช้แท็ก ol การกำหนดหมายเลขเริ่มต้นที่หนึ่งและเพิ่มขึ้นทีละหนึ่งสำหรับแต่ละองค์ประกอบรายการที่สั่งซื้อตามมาด้วยแท็ก li
งาน
แสดงรายการสัญลักษณ์แสดงหัวข้อย่อยในแนวนอนโดยไม่มีสัญลักษณ์แสดงหัวข้อย่อย
สารละลาย
แท็กรายการสัญลักษณ์แสดงหัวข้อย่อย
- แสดงองค์ประกอบตามค่าเริ่มต้น
- ในแนวตั้งทับกัน ในการสร้างองค์ประกอบการนำทาง ในบางกรณี การแสดงรายการในแนวนอนจะสะดวกกว่า มีหลายวิธีในการรับมุมมองรายการนี้
คุณควรทราบอยู่แล้วว่า HTML มีองค์ประกอบแบบบล็อกและแบบอินไลน์ องค์ประกอบแบบอินไลน์ไม่ได้สร้างบล็อกของตัวเอง ตัวอย่างขององค์ประกอบดังกล่าวคือแท็กหรือ . องค์ประกอบบล็อกจะแสดงในบรรทัดใหม่และสร้างบล็อกสี่เหลี่ยม ตัวอย่างของแท็กดังกล่าว
หรือดังนั้นแท็ก
- ยังเป็นองค์ประกอบบล็อก
เพื่อแท็ก
- ไม่ได้ทำงานเหมือนองค์ประกอบบล็อก คุณสามารถใช้ CSS เพื่อทำให้เป็นแบบอินไลน์ได้
คุณสมบัติ CSS ที่แสดงมีหน้าที่รับผิดชอบในการแสดงองค์ประกอบในเอกสาร พิจารณาค่าสามค่า (แม้ว่าจะมีมากกว่า):
- บล็อก - องค์ประกอบถูกแสดงผลเป็นองค์ประกอบบล็อก
- อินไลน์ - องค์ประกอบแสดงผลเป็นแบบอินไลน์
- อินไลน์บล็อก - องค์ประกอบบล็อกบรรทัด อ่านเพิ่มเติมเกี่ยวกับองค์ประกอบประเภทนี้ด้านล่าง เราจะใช้มัน
ก่อนอื่นมาสร้างรายการแนวนอนโดยเปลี่ยนสัญลักษณ์แสดงหัวข้อย่อยให้เป็นองค์ประกอบแบบอินไลน์ ในรูปแบบ CSS ลองเขียนกฎโดยตั้งค่าตัวเลือก li เป็นคุณสมบัติการแสดงผลด้วยค่า inline
รายการในแนวนอน
ดังนั้นสไตล์นี้จึงใช้งานได้และมีการจัดเรียงรายการในแนวนอน:
รูปที่ 1 ตัวอย่างงาน #1
วิธีนี้มีข้อเสีย สิ่งสำคัญคือองค์ประกอบแบบอินไลน์มีข้อ จำกัด บางประการเมื่อเปรียบเทียบกับองค์ประกอบแบบบล็อก ตัวอย่างเช่น ไม่สามารถระบุความกว้างและความสูงได้ แต่บล็อกสามารถกำหนดได้
ตัวอย่างเช่น เราต้องการให้องค์ประกอบเมนูที่เรากำลังสร้างมีความกว้าง 150px และความสูง 40px ลองเปลี่ยนสไตล์เป็นดังต่อไปนี้ นั่นคือเพิ่มกฎสองข้อที่กำหนดขนาดของรายการเมนู:
การแก้ไขเหล่านี้จะไม่ทำให้เกิดการเปลี่ยนแปลงใดๆ เพื่อให้รายการเมนูวางในแนวนอนและตั้งค่าความกว้างและความสูงได้ จะต้องตั้งค่าเป็นประเภท inline-block ลองเปลี่ยนโค้ดตัวอย่างของเรา:
รายการในแนวนอน
รหัสนี้ใช้งานได้และมองเห็นการเปลี่ยนแปลง:
รูปที่ 2 ตัวอย่างงาน #2 แต่อาจมีตัวเลือกที่แตกต่างกัน เช่น เราต้องแสดงรายการซ้อนในเมนู:
รายการที่ซ้อนกัน
นี่คือผลลัพธ์ของรหัสนี้:
รูปที่ 3 ตัวอย่างงาน #3 เราเห็นว่าบล็อกไม่ได้จัดแนวความสูงตามที่เราต้องการ แน่นอน คุณสามารถระบุความสูงเท่ากันสำหรับบล็อกทั้งหมดได้ แต่เราไม่ทราบค่าที่แน่นอนล่วงหน้าเสมอไป และมันสามารถเปลี่ยนแปลงได้
และที่จริงแล้วทำไมสิ่งนี้ถึงเกิดขึ้น?
บล็อกของเรามีคุณสมบัติการแสดงผลแบบอินไลน์บล็อก ซึ่งหมายความว่ามีคุณสมบัติทั้งองค์ประกอบระดับบล็อก (ความสามารถในการระบุความกว้างและความสูง) และองค์ประกอบแบบอินไลน์ สิ่งที่เราเห็นคือคุณภาพขององค์ประกอบแบบอินไลน์
ลองพิจารณาสตริงที่มีอักขระ "A" ที่มีขนาดต่างกัน:
เอเอเอเอเอเอเอเอ
เราเห็นว่าตัวอักษรทั้งหมดอยู่ในแนวตั้งกับบรรทัดล่างสุด แม่นยำยิ่งขึ้นตามเส้นฐาน แต่ตอนนี้เราจะไม่เข้าไปในป่า สิ่งเดียวกันนี้เกิดขึ้นกับบล็อกของเรา
คุณสมบัติการจัดแนวแนวตั้งใช้เพื่อจัดแนวข้อความในแนวตั้ง ในตัวอย่าง #3 เราจะใช้ top ซึ่งจะจัดเส้นขอบบนสุดขององค์ประกอบให้อยู่ด้านบนขององค์ประกอบที่สูงที่สุดในแถว
ในตอนนี้ นำไปใช้กับสตริงที่มีอักขระ "A" ที่มีขนาดต่างกัน:
เอเอเอเอเอเอเอเอ
ดูเหมือนว่าตัวอักษร "กระโดด" เล็กน้อย ฉันตั้งค่าเส้นขอบ CSS เป็นตัวอักษรที่สูงที่สุด เพื่อให้คุณเห็นว่าไม่มีการข้ามจริงๆ มีช่องว่างระหว่างเส้นขอบด้านบน (ซึ่งอยู่ในแนวเดียวกัน) และจุดสูงสุดของอักขระ "A"
ต้องใช้คุณสมบัติการจัดแนวแนวตั้งกับทุกองค์ประกอบแบบอินไลน์ ซึ่งจะไม่สืบทอดมา คุณสามารถอ่านเพิ่มเติมเกี่ยวกับพร็อพเพอร์ตี้นี้ได้: vertical-align
หลังจากการพูดนอกเรื่อง เราจะวางองค์ประกอบของรายการในแนวนอนต่อไป
วิธีที่สอง
คุณสามารถวางรายการในแนวนอนโดยใช้คุณสมบัติ float คุณสมบัตินี้ระบุว่าด้านใดที่องค์ประกอบจะจัดชิด มีสองตำแหน่ง: ซ้ายและขวา
นี่คือตัวอย่างที่ใช้รหัสนี้:
รายการในแนวนอน
นี่คือผลลัพธ์ของรหัส:
รูปที่ 4 ตัวอย่างการทำงาน ตัวอย่างดูเหมือนจะใช้งานได้ แต่มีความแตกต่างกันเล็กน้อยในการใช้คุณสมบัตินี้ ตอนนี้เราจะพิจารณา ตัวอย่างเช่น ลองใช้โค้ดที่มีรายการแนวนอนสองรายการที่มีวิธีการจัดเรียงองค์ประกอบตามแนวนอนต่างกัน: display และ float :
รายการในแนวนอน
นี่คือผลลัพธ์ของรหัส:
รูปที่ 5 ตัวอย่างการทำงาน ในตัวอย่างเหล่านี้ รายการคอนเทนเนอร์
- มีขอบสีแดงหนา 1 พิกเซล แต่รายการบนสุดซึ่งใช้คุณสมบัติการแสดงผลจะรวมรายการ แต่องค์ประกอบของรายการที่สร้างขึ้นโดยใช้คุณสมบัติ float หลุดออกจากคอนเทนเนอร์
- ยังคงอยู่นอกคอนเทนเนอร์
-
.
- เพื่อปลูกต้นไม้
- สร้างบ้าน
- เลี้ยงดูลูกชาย
- 1เพื่อปลูกต้นไม้
- 2สร้างบ้าน
- 3เลี้ยงดูลูกชาย
- เพื่อปลูกต้นไม้
- สร้างบ้าน
- เลี้ยงดูลูกชาย
- ลี่::ก่อน- สร้างองค์ประกอบหลอกภายในรายการที่เกิดขึ้นแทนลูกคนแรก
- รีเซ็ตตัวนับ: myCounter;- รีเซ็ตตัวนับ css myCounter ภายในแต่ละตัว
- .
- เคาน์เตอร์เพิ่ม: myCounter;- เพิ่มตัวนับ css myCounter สำหรับแต่ละองค์ประกอบหลอก::ก่อน
- เนื้อหา: เคาน์เตอร์ (myCounter);- แสดงค่าปัจจุบันของตัวนับ myCounter ภายใน :: ก่อนองค์ประกอบเทียม
- รายการ #1
- รายการ #2
- รายการ #3
- ...
- A - กำหนดเครื่องหมายในรูปแบบของตัวอักษรละตินตัวพิมพ์ใหญ่ (A, B, C..);
- a - กำหนดเครื่องหมายในรูปแบบของตัวอักษรละตินตัวพิมพ์เล็ก (a, b, c..);
- I - กำหนดเครื่องหมายในรูปแบบของเลขโรมันขนาดใหญ่ (I, II, III, IV..);
- ฉัน - ตั้งค่าเครื่องหมายในรูปแบบของเลขโรมันขนาดเล็ก (i, ii, iii, iv..);
- 1 (ค่าเริ่มต้น) - ตั้งค่าเครื่องหมายในรูปแบบของเลขอารบิค (1, 2, 3..);
- . ระหว่างแท็กเปิดและแท็กปิดคือคำ วลี ย่อหน้า รูปภาพ ชิ้นส่วนของโค้ด และอื่นๆ อีกมากมาย ซึ่งเป็นเนื้อหาของรายการสัญลักษณ์แสดงหัวข้อย่อย
บันทึก
ภายในรายการ คุณสามารถเปลี่ยนบัญชีเป็นของคุณเองได้ มีค่าแอตทริบิวต์พิเศษ = "" สำหรับแท็กนี้
- ซึ่งถูกกำหนดให้เป็นค่าตัวเลข ตัวอย่างเช่น
- รายการ #1
- รายการ #2
- รายการ #3
ตัวอย่างรายการที่มีลำดับเลขใน html (
- )
ตัวอย่างที่ 1 รายการลำดับเลขของ html ในรูปแบบตัวอักษรละติน
ตัวอย่างที่มีตัวพิมพ์ใหญ่
- รายการ #1
- รายการ #2
- รายการ #3
- รายการ #1
- รายการ #2
- รายการ #3
ตัวอย่างตัวพิมพ์เล็ก
- รายการ #10
- รายการ #11
- รายการ #12
นี่คือลักษณะที่ปรากฏบนหน้า:
- รายการ #1
- รายการ #2
- รายการ #3
ตัวอย่างที่ 2 รายการ html ลำดับเลขในตัวอักษรโรมัน
ตัวอย่างที่มีตัวพิมพ์ใหญ่
- รายการ #1
- รายการ #2
- รายการ #3
นี่คือลักษณะที่ปรากฏบนหน้า:
- รายการ #1
- รายการ #2
- รายการ #3
ตัวอย่างตัวพิมพ์เล็ก
- รายการ #1
- รายการ #2
- รายการ #3
นี่คือลักษณะที่ปรากฏบนหน้า:
- รายการ #1
- รายการ #2
- รายการ #3
ตัวอย่างที่ 3 รายการ html ลำดับเลขที่มีตำแหน่งเริ่มต้นต่างกัน
ตัวอย่างที่แสดงความสามารถของแอตทริบิวต์ start ซึ่งช่วยให้คุณตั้งค่าเริ่มต้นของตัวนับ
- รายการ #1
- รายการ #2
- รายการ #3
นี่คือลักษณะที่ปรากฏบนหน้า:
- รายการ #1
- รายการ #2
- รายการ #3
ตัวอย่างที่ 4 การเปลี่ยนแปลงจำนวนในรายการลำดับเลข html
ด้านล่างนี้คือตัวอย่างที่มีความสามารถในการเปลี่ยนค่าตัวนับโดยใช้แอตทริบิวต์ value เมื่อแสดงองค์ประกอบใหม่ในแท็ก
- .
- รายการ #1
- รายการ #2
- รายการ #3
- รายการ #4
นี่คือลักษณะที่ปรากฏบนหน้า:
- รายการ #1
- รายการ #2
- รายการ #3
- รายการ #4
ตัวอย่างที่ 5 รายการเลขย้อนกลับใน html
ด้านล่างนี้คือตัวอย่างรายการลำดับเลขย้อนกลับ (นับในลำดับย้อนกลับ)
- รายการ #1
- รายการ #2
- รายการ #3
- รายการ #4
นี่คือลักษณะที่ปรากฏบนหน้า:
- รายการ #1
- รายการ #2
- รายการ #3
- รายการ #4
ภาษา HTML มีแท็กชุดพิเศษสำหรับนำเสนอข้อมูลในรูปแบบของรายการ รายการเป็นหนึ่งในรูปแบบการนำเสนอข้อมูลที่ใช้บ่อยที่สุดทั้งในเอกสารอิเล็กทรอนิกส์และเอกสารสิ่งพิมพ์ เราเจอรายการเกือบทุกวัน ไม่ว่าจะเป็นรายการความต้องการซื้อของที่ร้านค้า นักเรียนในห้องเรียน หรืองานที่ต้องทำ ความสามารถในการจัดระเบียบโครงสร้างรายการมีอยู่ในโปรแกรมแก้ไขข้อความจำนวนมาก โดยเฉพาะอย่างยิ่งโปรแกรมประมวลผลคำที่มีประสิทธิภาพ Microsoft Word มีเครื่องมือที่สะดวกสำหรับการจัดรูปแบบรายการประเภทต่างๆ (ความเป็นไปได้ของการสร้างรายการ HTML โดยใช้ Microsoft Word จะกล่าวถึงในบทที่ 8) ต่อไปนี้เป็นบางกรณีที่การใช้รายการค่อนข้างสะดวก:
- การรวมข้อมูลเป็นโครงสร้างเดียวเพื่อให้ดูน่าอ่าน
- คำอธิบายของกระบวนการทีละขั้นตอนที่ซับซ้อน
- การจัดเรียงข้อมูลในรูปแบบของสารบัญ ย่อหน้าที่ชี้ไปยังส่วนที่เกี่ยวข้องของเอกสาร
โปรดทราบว่ารายการข้างต้นเป็นเพียงการจัดระเบียบในรูปแบบของโครงสร้างรายการ
HTML มีประเภทหลักของรายการต่อไปนี้: รายการสัญลักษณ์แสดงหัวข้อย่อย ลำดับเลข และรายการคำจำกัดความ แท็กต่อไปนี้ใช้เพื่อใช้งานรายการประเภทต่างๆ:
- ,
- (LI - รายการรายการ, รายการ) แท็ก
- ไม่ต้องการแท็กปิดที่เหมาะสม แม้ว่าโดยหลักการแล้วจะไม่ได้ห้ามก็ตาม เบราว์เซอร์มักจะเริ่มรายการใหม่แต่ละรายการในบรรทัดใหม่เมื่อแสดงเอกสาร
ข้อมูลข้างต้นเพียงพอที่จะสร้างรายการสัญลักษณ์แสดงหัวข้อย่อยเบื้องต้น ต่อไปนี้คือตัวอย่างเอกสาร HTML ที่ใช้รายการสัญลักษณ์แสดงหัวข้อย่อย ซึ่งการแสดงผลของเบราว์เซอร์จะแสดงในรูปที่ 2.1.
ตัวอย่างรายการสัญลักษณ์แสดงหัวข้อย่อย - ราศีเมษ
- ราศีพฤษภ
- ฝาแฝด
- มะเร็ง
- สิงโต
- ราศีกันย์
- เครื่องชั่ง
- แมงป่อง
- ราศีธนู
- ราศีมังกร
- ราศีกุมภ์
- ปลา
สัญญาณราศี:
ข้าว. 2.1.เบราว์เซอร์แสดงรายการสัญลักษณ์แสดงหัวข้อย่อย
โปรดทราบว่านอกเหนือจากรายการที่ทำเครื่องหมายด้วยแท็ก
- อาจมีองค์ประกอบ HTML อื่นๆ อยู่ด้วย ในตัวอย่างข้างต้น หนึ่งในองค์ประกอบเหล่านี้คือข้อความล้วน ซึ่งไม่ใช่รายการ แต่มีบทบาทเป็นส่วนหัว
บันทึก
ในบางตำราเกี่ยวกับภาษา HTML มีข้อบ่งชี้ว่าควรใช้แท็กคอนเทนเนอร์ในการตั้งชื่อรายการ
(LH - ส่วนหัวของรายการ, ส่วนหัวของรายการ) ขณะนี้แท็กนี้ไม่รู้จักโดยเบราว์เซอร์ทั่วไปใดๆ และไม่ได้เป็นส่วนหนึ่งของข้อกำหนด HTML ดังนั้นการใช้งานจึงไม่มีความหมายแม้ว่าจะไม่ทำให้เกิดข้อผิดพลาดก็ตาม ในแท็ก
- สามารถระบุพารามิเตอร์ได้สองพารามิเตอร์: COMPACT และ TYPE
- .
ตัวอย่างการบันทึก:
-
.
บันทึก
เบราว์เซอร์ตีความตัวบ่งชี้ประเภทของเครื่องหมายสำหรับรายการแต่ละรายการแตกต่างกัน เบราว์เซอร์ Netscape เปลี่ยนลักษณะที่ปรากฏของเครื่องหมายสำหรับสิ่งนี้และสิ่งที่ตามมาทั้งหมดจนกว่าจะพบการกำหนดใหม่ของลักษณะที่ปรากฏของเครื่องหมายครั้งถัดไป Internet Explorer จะเปลี่ยนลักษณะของเครื่องหมายสำหรับองค์ประกอบนี้เท่านั้น
แสดงเครื่องหมายกราฟิก
คุณสามารถใช้รูปภาพกราฟิกเป็นเครื่องหมายรายการ ซึ่งใช้กันอย่างแพร่หลายในการสร้างเอกสาร HTML ที่สวยงามและน่าสนใจ ความจริงแล้ว ความเป็นไปได้นี้ไม่ได้มาจากภาษา HTML โดยตรง แต่ถูกนำไปใช้อย่างปลอมแปลง นี่ไม่ได้หมายความว่าไม่แนะนำหรือน่ารังเกียจที่จะทำเช่นนั้น แต่จะไม่มีการใช้โครงสร้างภาษา HTML พิเศษที่นี่
เพื่อให้เข้าใจแนวคิดนี้ คุณต้องเข้าใจวิธีนำรายการไปใช้ในหน้า HTML ปรากฎว่าแท็กรายการ
- (รวมถึงแท็กรายการประเภทอื่น ๆ ซึ่งจะกล่าวถึงด้านล่าง) ดำเนินการเพียงอย่างเดียว - เป็นการระบุเบราว์เซอร์ว่าข้อมูลทั้งหมดที่อยู่หลังแท็กนี้ควรแสดงโดยเลื่อนไปทางขวา (เยื้อง) ตามจำนวนที่กำหนด แท็ก
- การชี้ไปที่รายการแต่ละรายการจะมีเครื่องหมายรายการมาตรฐาน
หากเราต้องการสร้างรายการด้วยเครื่องหมายกราฟิก เราก็สามารถทำได้โดยไม่ต้องใช้แท็กเลย
- . การแทรกภาพกราฟิกที่ต้องการก่อนแต่ละองค์ประกอบของรายการก็เพียงพอแล้ว งานเดียวที่ต้องแก้ไขในกรณีนี้คือแยกองค์ประกอบของรายการออกจากกัน คุณสามารถใช้แท็กย่อหน้าสำหรับสิ่งนี้
หรือบังคับป้อนไลน์
. ตัวอย่างของการใช้งานรายการที่มีเครื่องหมายกราฟิกซึ่งการแสดงจะแสดงในรูปที่ 2.2 แสดงไว้ด้านล่าง:รายการสัญลักษณ์แสดงหัวข้อย่อย สัญญาณราศี:
ราศีเมษ
ข้าว. 2.2.รายการสัญลักษณ์แสดงหัวข้อย่อยพร้อมสัญลักษณ์แสดงหัวข้อย่อยกราฟิก
ในตัวอย่างที่กำหนด ไฟล์กราฟิก Green_ball.gif ใช้เป็นเครื่องหมายองค์ประกอบรายการ โปรดทราบว่าการใช้กราฟิกในหน้า HTML สามารถเพิ่มปริมาณข้อมูลที่ส่งได้อย่างมาก อย่างไรก็ตาม ในกรณีนี้ การเพิ่มขึ้นนี้น้อยมาก ไฟล์เดียวกันนี้ใช้สำหรับเครื่องหมายทั้งหมด
ซึ่งจะส่งเพียงครั้งเดียวเท่านั้น ขนาดของไฟล์ที่มีรูปภาพขนาดเล็กก็มีขนาดเล็กมากเช่นกัน
บันทึก
เทคนิคการสร้างรายการด้วยเครื่องหมายกราฟิกจะกล่าวถึงในบทที่ 8
รายการหมายเลข
รายการประเภทอื่นที่ใช้ใน HTML คือรายการที่มีลำดับเลข มิฉะนั้น รายการประเภทนี้จะเรียกว่าเรียงลำดับ นามสกุลมักใช้เป็นคำแปลอย่างเป็นทางการของชื่อแท็กที่เกี่ยวข้อง
- ด้วยความช่วยเหลือของรายการประเภทนี้ที่จัดอยู่ในเอกสาร HTML (OL - Ordered List รายการที่สั่งซื้อ)
- .
นี่คือตัวอย่างเอกสาร HTML ที่ใช้รายการลำดับเลข แสดงของใครเบราว์เซอร์แสดงในรูป 2.3.
ตัวอย่างรายการลำดับเลข - ซิเรียส
- K อะโนพุส
- อาร์คทูรัส
- อัลฟา เซ็นทอรี
- เวก้า
- เค อาเพลลา
- ริเจล
- โปรไซออน
- อาเคอร์นาร์
- เบต้าเซ็นทอรี
- เวเทลจุส
- อัลเดบารัน
. . .- มิซาร์
. . .- ขั้วโลก
ดาวที่สว่างที่สุดที่มองเห็นได้จากโลกคือ:
ข้าว. 2.Z.รายการหมายเลข
ในแท็ก
- สามารถระบุพารามิเตอร์ต่อไปนี้: COMPACT, TYPE และ START
- .
ตัวอย่างการบันทึก:
- .
พารามิเตอร์แท็ก START
- ช่วยให้คุณสามารถเริ่มนับรายการไม่ได้จากรายการเดียว ค่าของพารามิเตอร์ START ต้องเป็นจำนวนธรรมชาติเสมอ โดยไม่คำนึงถึงประเภทของการกำหนดหมายเลขรายการ นี่คือตัวอย่าง:
- สำหรับรายการที่มีลำดับเลข อนุญาตให้ใช้พารามิเตอร์ TYPE และ VALUE พารามิเตอร์ TYPE สามารถใช้ค่าเดียวกันกับแท็ก
- .
- .
บันทึก
เบราว์เซอร์ตีความการระบุประเภทของการกำหนดหมายเลขสำหรับรายการแต่ละรายการด้วยวิธีต่างๆ เบราว์เซอร์ Netscape เปลี่ยนหมายเลขสำหรับองค์ประกอบนี้และองค์ประกอบที่ตามมาทั้งหมดจนกว่าจะพบการแทนที่ครั้งต่อไป Internet Explorer เปลี่ยนลักษณะตัวเลขสำหรับองค์ประกอบนี้เท่านั้น
วค่าของพารามิเตอร์ VALUE ของแท็ก
- - อนุญาตให้คุณเปลี่ยนจำนวนองค์ประกอบที่กำหนดของรายการ สิ่งนี้จะเปลี่ยนหมายเลขขององค์ประกอบที่ตามมาทั้งหมด การใช้งานทั่วไปสำหรับรายการที่ละเว้นองค์ประกอบบางอย่าง ตัวอย่างของรายการดังกล่าวได้รับด้านบน (รูปที่ 2.3) มันให้รายชื่อดาวที่สว่างที่สุดตามลำดับซึ่งใน 58 และ 75 แห่งมีดาวที่มองเห็นได้ชัดเจนในละติจูดของเรา (Mizar เป็นดาวที่สว่างที่สุดในกลุ่มดาวหมีใหญ่และดาวเหนือคือ Ursa Minor)
นี่เป็นอีกตัวอย่างดั้งเดิมของการใช้หมายเลขประเภทต่างๆ รหัส HTML ด้านล่างกำหนดสามรายการที่มีหมายเลขต่างกัน เพื่อความสะดวกในการดู แต่ละรายการจะอยู่ในเซลล์แยกต่างหากของตาราง ทั้งสามรายการเหมือนกันและแตกต่างกันเฉพาะประเภทของการนับเท่านั้น: ในคอลัมน์แรกของตาราง - เลขอารบิกในคอลัมน์ที่สอง - โรมันและในคอลัมน์ที่สามการนับเป็นตัวอักษรละติน โปรดทราบว่าองค์ประกอบของรายการว่างเปล่า เช่น หลังแท็กใดๆ
- ไม่มีข้อมูล. ตัวอย่างของประเภทนี้สามารถใช้เป็นตารางการติดต่อระหว่างเลขอารบิกและเลขโรมัน ปรากฎว่าสามารถใช้เบราว์เซอร์ที่รองรับรายการเพื่อสร้างตารางดังกล่าวได้ (รูปที่ 2-4) ตราบใดที่คุณพิมพ์รหัส HTML ที่ให้มา การใส่ตัวเลขเป็นเลขโรมันทำงานได้อย่างถูกต้องจนถึงค่า 3999 เมื่อตรวจสอบคอลัมน์ด้านขวา คุณจะเข้าใจวิธีการใช้ตัวเลขในตัวอักษรละติน หลังจากหมดการนับตัวอักษรหนึ่งตัว (จาก A ถึง Z) ตัวเลขสองตัวแรก - AA ฯลฯ จะถือเป็นตัวเลขถัดไป
การใช้ลำดับเลขประเภทต่างๆ ในรายการ -
. . .
-
. . .
-
. . .
ข้าว. 2.4.การกำหนดหมายเลขรายการ HTML ประเภทต่างๆ
รายการคำจำกัดความ
รายการคำจำกัดความ หรือที่เรียกว่าพจนานุกรมคำจำกัดความของคำศัพท์ เป็นรายการประเภทพิเศษ ซึ่งแตกต่างจากรายการประเภทอื่น ๆ แต่ละองค์ประกอบของรายการคำจำกัดความประกอบด้วยสองส่วนเสมอ ส่วนแรกขององค์ประกอบรายการประกอบด้วยคำที่กำหนดไว้ และส่วนที่สองประกอบด้วยข้อความในรูปแบบของรายการพจนานุกรม ซึ่งเปิดเผยความหมายของคำนั้น
มีการระบุรายการข้อกำหนดโดยใช้แท็กคอนเทนเนอร์
- (รายการคำจำกัดความ). ภายในแท็กคอนเทนเนอร์
- (คำนิยาม) คำที่กำหนดจะถูกทำเครื่องหมายและแท็ก
- (คำอธิบายคำจำกัดความ) - ย่อหน้าที่มีความหมาย สำหรับแท็ก
- และ
- คุณสามารถละเว้นแท็กปิดท้ายที่เหมาะสมได้
โดยทั่วไปจะเขียนรายการคำจำกัดความไว้ดังนี้
- ภาคเรียน
- คำจำกัดความของคำศัพท์
ในข้อความหลังแท็ก
- ไม่สามารถใช้องค์ประกอบระดับบล็อก เช่น แท็กย่อหน้า
หรือพาดหัวข่าว
-
. ตามกฎทั่วไป ข้อความของคำที่กำหนดควรอยู่ในบรรทัดเดียว ข้อความที่มีคำจำกัดความจะแสดงโดยเริ่มจากบรรทัดถัดไป (หรือบรรทัดต่อบรรทัดสำหรับบางเบราว์เซอร์) หลังคำจำกัดความ โดยเยื้องไปทางขวา ในข้อมูลที่วางไว้หลังแท็ก
- สามารถวางองค์ประกอบระดับบล็อกได้ โดยเฉพาะอย่างยิ่ง ตามนั้น รายการคำจำกัดความสามารถซ้อนกันได้
ในแท็ก
- อาจระบุพารามิเตอร์ COMPACT ซึ่งมีวัตถุประสงค์คล้ายกับรายการอื่นๆ ที่อธิบายไว้ข้างต้น
- คนวางเฉย
- เฉื่อยชา ฉกรรจ์มาก ปรับตัวได้ช้า
อารมณ์คงที่ไวต่ออิทธิพลภายนอกเล็กน้อย
ความเกียจคร้านของปฏิกิริยาทางอารมณ์และความเชื่องช้าในกิจกรรมโดยเจตนา
- ร่าเริง
- กระฉับกระเฉง กระฉับกระเฉง ปรับตัวได้ -
ความมีชีวิตชีวาและความคล่องตัวของปฏิกิริยาทางอารมณ์ ความเร็วและความแรงของการแสดงเจตจำนง
- เจ้าอารมณ์
- กระฉับกระเฉง กระฉับกระเฉง หมั่นเพียร;
ความหุนหันพลันแล่นและความแข็งแกร่งของปฏิกิริยาทางอารมณ์ อาการแสดงเจตจำนงรุนแรง
- เศร้าโศก
- เรื่อยๆ เหนื่อยง่าย ปรับตัวยาก -
ความอ่อนแอของอาการแสดงเจตจำนงและความเด่นของอารมณ์ซึมเศร้า, ความสงสัยในตนเอง - เซมปา
- ดวงจันทร์
- แผนที่
- โฟบอส
- เดมอส
- ดาวยูเรนัส
- แอเรียล
- อัมเบรียล
- ไททาเนีย
- โอเบอรอน
- มิแรนด้า
- ดาวเนปจูน
- ไทรทัน
- นีเรียด
นี่คือตัวอย่างเอกสาร HTML ที่ใช้รายการคำจำกัดความ:
ตัวอย่างรายการคำจำกัดความ การจำแนกลักษณะนิสัยของมนุษย์ทั่วไป
ก่อตั้งขึ้นในมุมมองของฮิปโปเครตีส
การแสดงเอกสาร HTML ที่กำหนดในเบราว์เซอร์จะแสดงในรูปที่ 2.5.
ข้าว. 2.5.รายการคำจำกัดความ (คล้ายกับกลุ่มของรายการในพจนานุกรม)
ประเภทรายการ
และ - .
ในขั้นต้น รายการประเภทเหล่านี้ถูกมองว่ามีขนาดกะทัดรัดกว่ารายการสัญลักษณ์แสดงหัวข้อย่อยทั่วไป ตามกฎการเขียนองค์ประกอบของรายการเหล่านี้ไม่ได้รับอนุญาตให้ใช้องค์ประกอบบล็อกซึ่งหมายความว่าเป็นไปไม่ได้ที่จะใช้การซ้อนรายการประเภทนี้ แต่ละองค์ประกอบของรายการคือข้อความหนึ่งบรรทัด
สำหรับรายการเช่น
มีการวางแผนที่จะแนะนำขีด จำกัด เกี่ยวกับ "ความยาวของข้อความขององค์ประกอบรายการ (24 อักขระ) ข้อ จำกัด ดังกล่าวจะอนุญาต รายการประเภท
ในรูปแบบคล้ายกับการแสดงรายการไดเร็กทอรีในระบบปฏิบัติการ UNIX และ MS-DOS เมื่อใช้คีย์ /W (ในหลายคอลัมน์) นอกจากนี้ สัญลักษณ์แสดงหัวข้อย่อยจะไม่แสดงสำหรับรายการประเภทนี้ ขณะนี้ยังไม่มีการนำแนวคิดเหล่านี้ไปใช้ เนื่องจากไม่แนะนำให้ใช้รายการประเภทเหล่านี้เพิ่มเติม เบราว์เซอร์เวอร์ชันใหม่แสดงรายการประเภทเหล่านี้ในลักษณะเดียวกับรายการประเภท
- .
รายการที่ซ้อนกัน
มีบางครั้งที่องค์ประกอบรายการประเภทหนึ่งจำเป็นต้องรวมรายการประเภทเดียวกันหรือรายการอื่นทั้งหมด สิ่งนี้จะจัดระเบียบรายการหลายระดับหรือซ้อนกัน HTML อนุญาตให้ซ้อนรายการประเภทต่างๆ โดยพลการ แต่ต้องระมัดระวังเมื่อจัดระเบียบ
ด้านล่างนี้คือโค้ด HTML ของเอกสารที่มีรายการซ้อนกัน ซึ่งการแสดงผลจะแสดงในรูปที่ 2.6. ในตัวอย่างนี้ แต่ละองค์ประกอบของรายการสัญลักษณ์แสดงหัวข้อย่อยมีรายการลำดับเลขของตัวเอง
ตัวอย่างรายการที่ซ้อนกัน ดาวเทียมของดาวเคราะห์บางดวง
- สามารถวางองค์ประกอบระดับบล็อกได้ โดยเฉพาะอย่างยิ่ง ตามนั้น รายการคำจำกัดความสามารถซ้อนกันได้
-
พีตัวอย่างบันทึก:
- .
- .
สัญกรณ์ดังกล่าวกำหนดหมายเลขของรายการจากอักษรละตินตัวพิมพ์ใหญ่ "E" สำหรับการกำหนดหมายเลขประเภทอื่นๆ รายการ START=5 จะกำหนดการกำหนดหมายเลขตามลำดับ ตั้งแต่หมายเลข "5" เลขโรมัน "V" เป็นต้น
การเปลี่ยนประเภทของการกำหนดหมายเลขของรายการและค่าของตัวเลขสามารถทำได้สำหรับองค์ประกอบใด ๆ ของรายการ แท็ก
- สำหรับรายการที่มีลำดับเลข อนุญาตให้ใช้พารามิเตอร์ TYPE และ VALUE พารามิเตอร์ TYPE สามารถใช้ค่าเดียวกันกับแท็ก
พารามิเตอร์ COMPACT มีความหมายเหมือนกับรายการหัวข้อย่อย พารามิเตอร์ TYPE ใช้เพื่อระบุวิธีการกำหนดหมายเลขรายการ สามารถใช้ค่าต่อไปนี้:
TYPE = A - ตั้งค่าเครื่องหมายในรูปแบบของตัวอักษรละตินตัวพิมพ์ใหญ่
TYPE = a - กำหนดเครื่องหมายในรูปแบบของตัวอักษรละตินตัวพิมพ์เล็ก
TYPE = I - กำหนดเครื่องหมายในรูปแบบของเลขโรมันขนาดใหญ่
TYPE = i - ตั้งค่าเครื่องหมายในรูปแบบของเลขโรมันขนาดเล็ก
TYPE = 1 - กำหนดเครื่องหมายในรูปแบบของเลขอารบิก
ตามค่าเริ่มต้น จะใช้ค่า TYPE = 1 เสมอ เช่น การกำหนดหมายเลขโดยใช้เลขอารบิค นอกจากนี้ยังนำไปใช้กับรายการสั่งซื้อที่ซ้อนกัน ซึ่งแตกต่างจากรายการสัญลักษณ์แสดงหัวข้อย่อย เบราว์เซอร์โดยค่าเริ่มต้นจะไม่สร้างหมายเลขที่แตกต่างกันในระดับการซ้อนกันของรายการ โปรดทราบว่าหลังจากหมายเลขขององค์ประกอบรายการ เครื่องหมาย "จุด" จะแสดงเพิ่มเติมเสมอ
สามารถใช้พารามิเตอร์ TYPE ที่มีค่าเดียวกันเพื่อระบุวิธีการกำหนดหมายเลของค์ประกอบแต่ละรายการของรายการ ในการทำเช่นนี้ อนุญาตให้ระบุพารามิเตอร์ TYPE ที่มีค่าสอดคล้องกันในแท็กองค์ประกอบรายการ
รายการประเภทนี้มักจะเป็นลำดับขององค์ประกอบแต่ละรายการ ความแตกต่างจากรายการสัญลักษณ์แสดงหัวข้อย่อยคือในรายการที่มีลำดับเลข แต่ละองค์ประกอบจะนำหน้าด้วยหมายเลขซีเรียลโดยอัตโนมัติ ประเภทของการกำหนดหมายเลขขึ้นอยู่กับเบราว์เซอร์และสามารถตั้งค่าได้โดยพารามิเตอร์ของแท็กรายการ มิฉะนั้น การใช้รายการลำดับเลขจะเหมือนกับการใช้รายการสัญลักษณ์แสดงหัวข้อย่อย
แท็ก
- และ
หากต้องการสร้างรายการที่มีลำดับเลข คุณควรใช้แท็กคอนเทนเนอร์ ซึ่งภายในมีองค์ประกอบทั้งหมดของรายการอยู่ แท็กเริ่มต้นและสิ้นสุดรายการจัดให้มีการขึ้นบรรทัดใหม่ก่อนและหลังรายการ ซึ่งจะเป็นการแยกรายการออกจากเนื้อหาหลักของเอกสาร
เช่นเดียวกับรายการหัวข้อย่อย แต่ละรายการในรายการหัวข้อย่อยต้องขึ้นต้นด้วยแท็ก
- การชี้ไปที่รายการแต่ละรายการจะมีเครื่องหมายรายการมาตรฐาน
พารามิเตอร์ COMPACT เขียนโดยไม่มีค่าและใช้เพื่อระบุเบราว์เซอร์ว่ารายการที่กำหนดควรแสดงในรูปแบบกะทัดรัด ตัวอย่างเช่น แบบอักษรหรือระยะห่างระหว่างบรรทัดของรายการสามารถลดลงได้ เป็นต้น
บันทึก
ปัจจุบัน การมีอยู่ของพารามิเตอร์ COMPACT ในแท็ก
- ไม่ส่งผลต่อการแสดงรายการโดยเบราว์เซอร์ชั้นนำ ดังนั้น การใช้พารามิเตอร์นี้จึงไม่มีความหมาย โดยเฉพาะอย่างยิ่งเนื่องจากข้อกำหนด HTML 4.0 ไม่แนะนำให้ใช้พารามิเตอร์นี้
พารามิเตอร์ TYPE สามารถใช้ค่าต่อไปนี้: ดิสก์ วงกลม และสี่เหลี่ยมจัตุรัส พารามิเตอร์นี้ใช้เพื่อบังคับลักษณะของเครื่องหมายรายการ ลักษณะที่ชัดเจนของเครื่องหมายจะขึ้นอยู่กับเบราว์เซอร์ที่คุณใช้ ตัวเลือกการแสดงผลโดยทั่วไปมีดังนี้:
TYPE = disc - เครื่องหมายจะแสดงเป็นวงกลมเต็ม TYPE = วงกลม - เครื่องหมายจะแสดงเป็นวงกลมที่ไม่เต็ม TYPE = สี่เหลี่ยม - เครื่องหมายจะแสดงเป็นสี่เหลี่ยมเต็ม ตัวอย่างการบันทึก:
-
.
ค่าเริ่มต้นคือ TYPE = แผ่นดิสก์ สำหรับรายการสัญลักษณ์แสดงหัวข้อย่อยที่ซ้อนกัน ค่าเริ่มต้นคือดิสก์ที่ระดับแรก วงกลมที่ระดับที่สอง และสี่เหลี่ยมจัตุรัสที่ระดับที่สาม นี่คือสิ่งที่ทำในเบราว์เซอร์ Netscape และ Internet Explorer เวอร์ชันล่าสุด โปรดทราบว่าเบราว์เซอร์อื่นอาจแสดงเครื่องหมายต่างออกไป ตัวอย่างเช่น ในข้อกำหนด HTML 4.0 ประเภทเครื่องหมายจะแสดงเมื่อระบุ TYPE = สี่เหลี่ยมจัตุรัสเป็นโครงร่างสี่เหลี่ยม
สามารถใช้พารามิเตอร์ TYPE ที่มีค่าเดียวกันเพื่อระบุประเภทของเครื่องหมายสำหรับรายการแต่ละรายการ ในการทำเช่นนี้ อนุญาตให้ระบุพารามิเตอร์ TYPE ที่มีค่าสอดคล้องกันในแท็กองค์ประกอบรายการ
- .
- ,
- ,
, - ด้วยความช่วยเหลือของรายการประเภทนี้ที่จัดอยู่ในเอกสาร HTML (UL - Unordered List, unordered list)
ในรายการสัญลักษณ์แสดงหัวข้อย่อย เพื่อเน้นองค์ประกอบต่างๆ จะใช้อักขระพิเศษที่เรียกว่าเครื่องหมายรายการ (มักเรียกว่าสัญลักษณ์แสดงหัวข้อย่อย ซึ่งเป็นเสียงที่เป็นทางการของสัญลักษณ์แสดงหัวข้อย่อยในภาษาอังกฤษ) เบราว์เซอร์จะกำหนดลักษณะที่ปรากฏของเครื่องหมายรายการ และเมื่อสร้างรายการที่ซ้อนกัน เบราว์เซอร์จะกำหนดลักษณะที่ปรากฏของเครื่องหมายของการซ้อนระดับต่างๆ โดยอัตโนมัติ
แท็ก
- และ<หลี่ >
หากต้องการสร้างรายการสัญลักษณ์แสดงหัวข้อย่อย คุณต้องใช้คอนเทนเนอร์แท็ก ซึ่งภายในมีองค์ประกอบทั้งหมดของรายการอยู่ แท็กรายการเปิดและปิดมีตัวแบ่งบรรทัดก่อนและหลังรายการ ดังนั้นจึงแยกรายการออกจากเนื้อหาหลักของเอกสาร ดังนั้นจึงไม่จำเป็นต้องใช้แท็กย่อหน้าที่นี่
.แต่ละรายการต้องขึ้นต้นด้วยแท็ก
รูปที่ 7 ตัวอย่างการทำงาน นอกจากนี้ ในที่ทำงาน เราไม่รู้เสมอไปว่าองค์ประกอบใดจะเป็นไปตามองค์ประกอบโดยใช้ float อุดมคติคือการปิดการทำงานของคุณสมบัติ float ในบล็อกเดียวกันกับที่เปิดอยู่
สิ่งนี้ทำได้ด้วยองค์ประกอบหลอก นี่คือรหัส:
รายการในแนวนอน
ตอนนี้เรามีรหัสที่ใช้งานได้ 100%
รูปที่ 8 ตัวอย่างการทำงาน เทคนิคนี้กับคุณสมบัติ float มักใช้เมื่อเค้าโครงไซต์เพื่อจัดแนวคอลัมน์ที่สร้างโดยแท็ก
. ด้วยวิธีนี้ เราได้รับโครงสร้างปกติของคอลัมน์โดยมีการจัดแนวความสูงที่ต้องการ เมื่อเราสร้างเมนู ในกรณีส่วนใหญ่ เราไม่สนใจความสูงของบล็อก มันมักจะเท่ากันเสมอ ดังนั้น การใช้กฎ (display : inline-block ) ในกรณีเหล่านี้จึงค่อนข้างสมเหตุสมผลแต่เพื่อความสมบูรณ์ เราได้ตรวจสอบตัวเลือกที่เป็นไปได้ทั้งหมดที่นี่ แม้ว่าอาจมีวิธีอื่นๆ เช่น การใช้ตาราง CSS แต่เครื่องมือค้นหาแนะนำอย่างยิ่งให้ใช้ตารางตามจุดประสงค์เท่านั้น ไม่ใช่เพื่อจัดระเบียบองค์ประกอบการนำทางหรืออื่นๆ
หากคุณเคยพยายามเปลี่ยนรูปแบบ css ของหมายเลขบรรทัด (ตัวเลข) ในรายการสั่งซื้อ
- แน่นอนว่าต้องประสบปัญหา เป็นไปไม่ได้ที่จะเข้าถึงสไตล์ขององค์ประกอบเหล่านี้โดยใช้ตัวเลือก css แต่บ่อยครั้งที่การออกแบบอินเทอร์เฟซเกี่ยวข้องกับการเปลี่ยนสี พื้นหลัง ขนาด ฯลฯ
นี่คือตัวอย่างที่ง่ายที่สุดของ unstyled list:
html
ลองดูหลายวิธีในการแก้ปัญหาข้างต้น
วิธีเงอะงะแบบดั้งเดิม
วิธีดั้งเดิมในการแก้ปัญหานี้คือการซ่อนหมายเลขบรรทัดที่เบราว์เซอร์วางไว้โดยอัตโนมัติ สิ่งนี้ใช้คุณสมบัติรายการสไตล์: ไม่มี; .
css
li( list-style: none; ) .num( color: white; background: #2980B9; display: inline-block; text-align: center; margin: 5px 10px; line-height: 40px; width: 40px; height: 40px; )html
เห็นด้วย มันดูซ้ำซ้อนและไม่ยืดหยุ่น เราซ่อนหมายเลขลำดับที่วางโดยอัตโนมัติและแทนที่ด้วยค่าที่ระบุด้วยตนเอง อุดตันเค้าโครง ฯลฯ
มาดูกันว่าเราจะสามารถบรรลุผลลัพธ์เดียวกันโดยไม่อุดตันเค้าโครงและใช้ pseudo-element::before และคุณสมบัติ css content , counter-increment , counter-reset ได้อย่างไร
วิธีที่ดีและถูกต้อง
ขั้นแรก เราจะให้รหัสและการสาธิต จากนั้นเราจะเข้าใจว่าอะไรคืออะไร
css
ol( รีเซ็ตตัวนับ: myCounter; ) li( สไตล์รายการ: ไม่มี; ) li:ก่อน ( ตัวนับส่วนเพิ่ม: myCounter; เนื้อหา: ตัวนับ(myCounter); สี: สีขาว พื้นหลัง: #2980B9; จอแสดงผล: อินไลน์บล็อก; text-align: center; margin: 5px 10px; line-height: 40px; width: 40px; height: 40px; )html
อย่างที่คุณเห็น รหัส html ยังคงสะอาดและสวยงาม ในกรณีนี้ สไตล์ทั้งหมดขององค์ประกอบรายการจะถูกโอนไปยัง css
มาแบ่งกันทีละจุด:
สามารถดูข้อมูลเพิ่มเติมเกี่ยวกับ css-counter ได้ใน
ข้อแตกต่างเพียงอย่างเดียวคือแท็กนี้สร้างขึ้นสำหรับรายการลำดับเลขเท่านั้น ชื่อของแท็กมาจากตัวย่อภาษาอังกฤษ "Ordered List" ซึ่งเป็นรายการที่มีลำดับเลข
ไวยากรณ์ของแท็ก
โดยที่แอตทริบิวต์ type="value" สามารถใช้ค่าต่อไปนี้ได้
แอตทริบิวต์ start="value" ระบุค่าเริ่มต้น (ค่าเริ่มต้น) ของรายงาน
แอตทริบิวต์ที่ย้อนกลับระบุการนับย้อนกลับ (หากจำเป็น)
แท็ก
- ต้องใช้แท็กปิด
แท็กคู่ใช้เพื่อสร้างองค์ประกอบรายการ
ไม่พบคำตอบสำหรับคำถามของคุณ? ดูที่นี่
ในเวลาเดียวกันเมื่อมองแวบแรกทุกอย่างก็ใช้งานได้ แต่ขอสลับรายการของเรา ใส่รายการด้วย class menu-1 ในโค้ดก่อนรายการที่มี class menu-2 (ตอนนี้ต่ำกว่า)
นี่คือสิ่งที่เราได้รับจากผลลัพธ์:
รูปที่ 6 ตัวอย่างการทำงาน รายการเมนูด้านล่างยังล้อมรอบเมนูด้านบน เนื่องจากไม่มีใครยกเลิกการดำเนินการของคุณสมบัติ float และใช้กับองค์ประกอบที่ตามมาทั้งหมด
จะแก้ปัญหานี้ได้อย่างไร?
ในการทำเช่นนี้ คุณต้องใช้คุณสมบัติ clear ซึ่งจะยกเลิกองค์ประกอบการห่อขององค์ประกอบอื่นหากมีการตั้งค่าคุณสมบัติ float
นี่คือตัวอย่างที่แก้ไขโดยใช้คุณสมบัติที่ชัดเจน:
รายการในแนวนอน
จะเห็นได้ว่ารายการด้านล่างไม่ล้อมรอบรายการด้านบนอีกต่อไป องค์ประกอบจะไม่วิ่งเข้าหากัน แต่ในรายการแท็กรายการแรก
- ยังเป็นองค์ประกอบบล็อก
การใช้แท็กส่วนท้ายเพื่อสร้างส่วนท้ายในหน้า Html5 แท็กส่วนท้ายกำหนด
CSS ระยะขอบและช่องว่างภายใน
การสร้างแผนที่รูปภาพ แผนที่กราฟิก html