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

ข้อดีของการมาร์กอัปข้อความ

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

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

สุดท้ายแต่ไม่ท้ายสุด โปรดจำไว้ว่ามาตรฐานใหม่ (เช่น HTML 4.01 และ XHTML 1.0 และ 1.1) สัญญาว่าจะแยกเนื้อหา (ข้อมูลในหน้าเว็บ) ออกจากการนำเสนอและสไตล์ (โดยปกติจะใช้โดย CSS) หากโปรแกรมเมอร์ต้องแยก HTML ออกจาก CSS แล้วบังคับให้เบราว์เซอร์ดึงข้อมูลบางส่วนของหน้าที่รวมส่วนต่างๆ ของหน้าเข้าด้วยกัน พวกเขาจะสูญเสียประโยชน์ส่วนใหญ่ของมาตรฐานเหล่านี้ การแยกส่วนเหล่านี้ออกจากกันเมื่อมาถึงเบราว์เซอร์ทำให้เบราว์เซอร์มีความยืดหยุ่นอย่างที่ไม่เคยมีมาก่อนในการรับ HTML จากเซิร์ฟเวอร์

ความคิดเพิ่มเติมเกี่ยวกับ

การแก้ไขข้อความธรรมดาของมาร์กอัป: ถูกหรือผิด?
ข้อความธรรมดาเหมาะสำหรับการจัดเก็บมาร์กอัป แต่ไม่เหมาะสำหรับการแก้ไขมาร์กอัป ความนิยมคือการใช้ IDE เช่น Macromedia DreamWeaver หรือ Microsoft® FrontPage® ที่มีประสิทธิภาพมากกว่า เพื่อจัดการมาร์กอัปหน้าเว็บ สภาพแวดล้อมเหล่านี้มักมีทางลัดและความช่วยเหลือในการสร้างเว็บเพจ โดยเฉพาะอย่างยิ่งเมื่อใช้ CSS และ JavaScript ซึ่งทั้งสองอย่างนี้มาจากไฟล์อื่นที่ไม่ใช่มาร์กอัปหน้าจริง ไม่สำคัญว่าหลายๆ คนจะยังชอบ Notepad หรือ vi รุ่นเก่าดีๆ (ฉันยอมรับว่าฉันเป็นหนึ่งในนั้น) ไม่ว่าจะด้วยวิธีใด ผลลัพธ์ที่ได้คือไฟล์ข้อความที่เต็มไปด้วยมาร์กอัป

ข้อความบนเว็บ:

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

ข้อเสียของมาร์กอัปข้อความ

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

·ใช้สไตล์ CSS (โดยปกติจะมาจากสไตล์ชีตหลายสไตล์ในไฟล์ภายนอก) เพื่อมาร์กอัปตามประเภทองค์ประกอบ คลาส ID และตำแหน่งในเอกสาร HTML
·ใช้สไตล์และการจัดรูปแบบกับส่วนต่างๆ ของเอกสาร HTML ตามโค้ด JavaScript (โดยปกติจะอยู่ในไฟล์ภายนอก)
·เปลี่ยนค่าฟิลด์แบบฟอร์มตามโค้ด JavaScript
·อิงตามโค้ด JavaScript รองรับเอฟเฟ็กต์ภาพ เช่น การพลิกภาพและการสลับภาพ

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

·เพิ่มสไตล์อินไลน์ให้กับข้อความ?
·ใช้สไตล์กับข้อความ HTML ในเบราว์เซอร์และให้เนื้อหาอยู่ตรงกลางหรือไม่?
·ใช้ HTML ที่ไม่มีสไตล์แล้วใช้การจัดรูปแบบในภายหลังหรือไม่

ปัญหาที่ยากมากเหล่านี้เป็นสาเหตุว่าทำไมคนจำนวนไม่มากที่เขียนเบราว์เซอร์ในปัจจุบัน (ใครก็ตามที่เขียนเบราว์เซอร์ควรยอมรับคำขอบคุณอย่างจริงใจของฉัน)

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

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

ใช้มุมมองแบบต้นไม้

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

ในมาร์กอัปข้อความ

<หัว>


<ร่างกาย>

ต้นไม้ ต้นไม้ ทุกที่

ยินดีต้อนรับสู่หน้าที่จริงๆที่น่าเบื่อ

เดี๋ยวกลับมาใหม่ครับ.

เบราว์เซอร์ยอมรับเพจและแปลงเป็นโครงสร้างแบบต้นไม้ ดังแสดงในรูปที่ 1

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

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

เส้นที่ลากจากรากแสดงถึงความสัมพันธ์ระหว่างส่วนต่างๆ ที่มีป้ายกำกับ องค์ประกอบ head และ body เป็นองค์ประกอบย่อยขององค์ประกอบรูท html title เป็นองค์ประกอบย่อยของ head และข้อความ "Trees, ต้นไม้, ทุกที่" เป็นองค์ประกอบย่อยของ title ต้นไม้ทั้งหมดถูกจัดระเบียบในลักษณะนี้จนกระทั่งเบราว์เซอร์ได้รับโครงสร้างที่คล้ายกับรูปที่ 1

คำศัพท์เพิ่มเติมบางคำ

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

ค่าของวัตถุ

เมื่อคุณเข้าใจคำศัพท์พื้นฐานแล้ว ก็ถึงเวลามุ่งเน้นไปที่สี่เหลี่ยมเล็กๆ ที่มีชื่อองค์ประกอบและข้อความ (รูปที่ 1) แต่ละสี่เหลี่ยมเป็นวัตถุ เบราว์เซอร์จะแก้ไขปัญหาข้อความบางอย่างภายในนั้น ด้วยการใช้ออบเจ็กต์เพื่อแสดงแต่ละส่วนของเอกสาร HTML คุณสามารถเปลี่ยนองค์กร ใช้สไตล์ อนุญาตให้ JavaScript เข้าถึงเอกสาร และอื่นๆ ได้อย่างง่ายดาย

ประเภทออบเจ็กต์และ

เครื่องหมายคุณสมบัติ แต่ละประเภทที่เป็นไปได้มีประเภทออบเจ็กต์ของตัวเอง ตัวอย่างเช่น องค์ประกอบใน HTML จะแสดงด้วยประเภทวัตถุองค์ประกอบ ข้อความในเอกสารแสดงด้วยประเภทข้อความ แอ็ตทริบิวต์แสดงด้วยประเภทแอททริบิวต์ และอื่นๆ

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

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

someDiv.style.height = "300px";

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

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

ระหว่างทางคุณอาจค้นพบสิ่งแปลก ๆ บางอย่าง ตัวอย่างเช่น พิจารณาสิ่งต่อไปนี้:

เกิดอะไรขึ้นกับแอตทริบิวต์?
·แล้วข้อความที่แบ่งออกเป็นองค์ประกอบ (เช่น em และ b) ล่ะ?
·แล้ว HTML ที่มีโครงสร้างไม่ถูกต้อง (เช่น เมื่อแท็กปิด p หายไป)?

เมื่อคุณคุ้นเคยกับปัญหาเหล่านี้แล้ว คุณจะสามารถเข้าใจส่วนต่อไปนี้ได้ดีขึ้น

ความเข้มงวดบางครั้งก็เป็นสิ่งที่ดี

หากคุณลองออกกำลังกายที่ฉันเพิ่งพูดถึงไป คุณอาจพบปัญหาที่อาจเกิดขึ้นกับมุมมองแบบต้นไม้ที่ทำเครื่องหมายไว้ (ถ้าไม่ ก็แค่เชื่อคำพูดของฉัน!) ที่จริงแล้ว จะพบปัญหาบางอย่างในรายการที่ 1 และรูปที่ 1 อันดับแรก ดูว่าองค์ประกอบ p สลายตัวอย่างไร หากคุณถามนักพัฒนาเว็บทั่วไปว่า "เนื้อหาข้อความขององค์ประกอบ p คืออะไร" คำตอบที่พบบ่อยที่สุดคือ "ยินดีต้อนรับสู่หน้าเว็บที่น่าเบื่อจริงๆ" หากคุณเปรียบเทียบสิ่งนี้กับรูปที่ 1 คุณจะเห็นว่าคำตอบนี้ (แม้ว่าจะสมเหตุสมผลก็ตาม) นั้นไม่ถูกต้อง

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

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

ในตัวอย่างนี้ องค์ประกอบ p มีสามส่วนที่แตกต่างกัน:

· ข้อความก่อนองค์ประกอบ em · องค์ประกอบ em เอง · ข้อความหลังองค์ประกอบ em

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

มันสำคัญมากที่จะต้องเข้าใจแนวคิดนี้ แม้ว่าข้อความ "จริงๆ" มักจะปรากฏพร้อมกับข้อความองค์ประกอบ p อื่นๆ แต่ก็ยังคงเป็นข้อความลูกโดยตรงขององค์ประกอบ em อาจมีรูปแบบที่แตกต่างจากข้อความ p อื่นๆ และสามารถย้ายไปมาได้โดยอิสระจากข้อความอื่น

เพื่อระลึกถึงสิ่งนี้ ให้ลองสร้างไดอะแกรม HTML ในรายการ 2 และ 3 เพื่อให้แน่ใจว่าข้อความมีองค์ประกอบหลักที่ถูกต้อง (ไม่ว่าข้อความจะปรากฏบนหน้าจอในที่สุดอย่างไร)

รายการ 2. มาร์กอัป

<หัว>


<ร่างกาย>

ให้ความสนใจปิด ใช่ไหม

รายการ 3. การซ้อนองค์ประกอบที่ฉลาดยิ่งขึ้น

<หัว>


<ร่างกาย>

<ตาราง>
ขั้นตอนกระบวนการ
1หาองค์ประกอบราก
2จัดการกับ head ก่อน
เพราะปกติแล้วมันง่าย
3ทำงานผ่าน เนื้อหา
เพียงแค่ใช้เวลาของคุณ

ลิงก์นี้ ไม่ ใช้งานอยู่ แต่ถ้าใช่ คำตอบก็คือคำตอบ
ถึง นี้
อยู่ที่นั่น แต่ ทำแบบฝึกหัดต่อไป!

คุณจะพบคำตอบสำหรับแบบฝึกหัดเหล่านี้ในไฟล์ GIF ในตอนท้ายของบทความนี้, Tricky-solution.gif ในรูปที่ 2 และ Trickier-solution.gif ในรูปที่ 3 อย่ามอง ใช้เวลาในการตอบอัตโนมัติก่อน สิ่งนี้จะช่วยให้คุณเข้าใจว่ากฎต่างๆ มีผลบังคับใช้อย่างไรเมื่อจัดระเบียบแผนผัง และจะช่วยให้คุณเชี่ยวชาญ HTML และโครงสร้างแผนผังได้อย่างแท้จริง

แล้วคุณสมบัติล่ะ?

คุณกำลังประสบปัญหาบางอย่างเมื่อพยายามคิดว่าจะทำอย่างไรกับคุณสมบัติ? ดังที่กล่าวไว้ก่อนหน้านี้ แอตทริบิวต์มีประเภทออบเจ็กต์ของตัวเอง แต่แอตทริบิวต์นั้นไม่ใช่ลูกขององค์ประกอบที่แสดงองค์ประกอบที่ซ้อนกันและข้อความไม่อยู่ในแอตทริบิวต์ "ระดับ" เดียวกันดังที่คุณจะสังเกตเห็น คำตอบของแบบฝึกหัดในรายการ 2 และ 3 ไม่มีการแสดงคุณสมบัติ

จริงๆ แล้วคุณสมบัติถูกจัดเก็บไว้ในโมเดลออบเจ็กต์ที่เบราว์เซอร์ใช้ แต่มีบางกรณีพิเศษ แต่ละองค์ประกอบมีรายการคุณสมบัติที่มีอยู่ แยกจากรายการออบเจ็กต์ลูก ดังนั้นองค์ประกอบ div อาจมีรายการที่มีแอตทริบิวต์ "id" และแอตทริบิวต์ "class" อื่น

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

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

HTML ที่ยุ่งเหยิง

ก่อนที่จะมาดูวิธีที่เบราว์เซอร์แปลงมาร์กอัปเป็นการนำเสนอแบบต้นไม้ มีอีกหัวข้อหนึ่งที่ควรค่าแก่การสำรวจ กล่าวคือ วิธีที่เบราว์เซอร์จัดการกับมาร์กอัปที่มีรูปแบบไม่ถูกต้อง Well-formed เป็นคำที่ใช้กันอย่างแพร่หลายใน XML และมีความหมายพื้นฐานสองประการ:

·แท็กเปิดทุกแท็กจะมีแท็กปิดที่ตรงกัน ดังนั้นทุก

ในเอกสารจึงตรงกัน