การวิเคราะห์กฎการทำรังสำหรับแท็ก XHTML

ในภาษา XHTML เราทุกคนรู้ว่าแท็ก UL มีแท็ก LI, DL มีกฎ DT และ DD-KENCKING สำหรับแท็กคงที่เหล่านี้ชัดเจนมาก อย่างไรก็ตามมีแท็กมากมายที่เป็นอิสระและไม่ได้ผูกติดกันเช่น H1, Div, P ... ดังนั้นกฎการทำรังสำหรับแท็กเหล่านี้คืออะไร? มาพูดคุยเกี่ยวกับหัวข้อนี้วันนี้

เมื่อพูดถึงกฎการทำรังของแท็ก XHTML เราต้องรู้ก่อนว่ามีแท็ก XHTML สองประเภทหนึ่งเรียกว่า องค์ประกอบบล็อก และอีกอันเรียกว่า องค์ประกอบอินไลน์ (อินไลน์ซึ่งหลายคนเรียกมันว่า

มาตรฐานการแบ่ง สำหรับองค์ประกอบระดับบล็อกและองค์ประกอบที่ฝังอยู่นั้นง่ายมาก กรุณาใส่รหัสสองบรรทัดต่อไปนี้ลงในแท็กตัวถัง:

<div style = border: 1px solid red;> div1 </div>

<div style = border: 1px solid red;> div2 </div>

เอฟเฟกต์การแสดงผลของเบราว์เซอร์:

div1div2

ทั้งสอง divs นำเสนอในหน้าครอบครองพื้นที่สองแถว หากพวกเขาได้รับอนุญาตให้ลอยหรือตั้งค่าอื่น ๆ ไม่มีใครอยู่ข้างๆกัน พวกเขาทุกคนครอบครองช่องว่างของตัวเองมากเกินไป หากคุณเห็นแท็กบางตัวที่มีปรากฏการณ์นี้คุณสามารถเรียกได้ว่า: องค์ประกอบบล็อก (บล็อก) ;

จากนั้นใส่รหัสสองบรรทัดต่อไปนี้ลงในแท็กตัวถัง:

<span style = border: 1px red red;> span1 </span>

<span style = border: 1px solid red;> span2 </span>

เอฟเฟกต์การแสดงผลของเบราว์เซอร์:

Span1 Span2

คราวนี้มีสองช่วงที่จัดเรียงเคียงข้างกันและพวกเขาเป็นมิตรและเป็นมิตรเป็นมิตรและกลมกลืน ... สำหรับพฤติกรรมการติดฉลากเช่นนี้เราสามารถเรียกพวกเขาว่า: องค์ประกอบอินไลน์ ;

ความแตกต่างระหว่างองค์ประกอบระดับบล็อกและองค์ประกอบที่ฝังอยู่:

·องค์ประกอบระดับบล็อก โดยทั่วไปใช้เพื่อสร้างสถาปัตยกรรมเว็บไซต์เค้าโครงและพกพาเนื้อหา ... งานใหญ่เหล่านี้เป็นองค์ประกอบระดับบล็อกซึ่งรวมถึงแท็กต่อไปนี้:

div, ul, li, dl, dt, dd, h1 ~ h6, p, ที่อยู่ ...

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

a, span, strong, sub, sup, img ...

·บล็อกองค์ประกอบและองค์ประกอบที่ฝังอยู่ สามารถ แปลงกันได้ และรหัสการแปลงมีดังนี้:

แสดง: บล็อก; /* แปลงเป็นบล็อกองค์ประกอบ*/

แสดง: อินไลน์; /* แปลงเป็นองค์ประกอบที่ฝังอยู่*//

· กฎการโทร สำหรับ CSS ระหว่าง องค์ประกอบบล็อกและองค์ประกอบที่ฝังอยู่นั้น แตกต่างกัน (บทความนี้กล่าวถึงการทำรังฉลากดังนั้นฉันจะไม่อธิบายจุดความรู้นี้)

หลังจากทำความเข้าใจองค์ประกอบบล็อกและองค์ประกอบที่ฝังอยู่แล้วคุณสามารถแสดง รายการกฎการทำรังของแท็ก XHTML :

1. องค์ประกอบบล็อกสามารถมีองค์ประกอบแบบอินไลน์หรือองค์ประกอบบล็อกบางอย่าง แต่องค์ประกอบแบบอินไลน์ไม่สามารถมีองค์ประกอบบล็อกได้ มันสามารถมีองค์ประกอบอินไลน์อื่น ๆ เท่านั้น :

<div> <h1> </h1> <p> </p> </div> - ใช่

<a href =#> <span> </span> </a> - ใช่

<span> <div> </div> </span> - ผิด

2. องค์ประกอบระดับบล็อกไม่สามารถวางไว้ใน <p> :

<p> <ol> <li> </li> </ol> </p> - ผิด

<p> <div> </div> </p> - ผิด

3. มีองค์ประกอบระดับบล็อกพิเศษหลายอย่างที่สามารถมีองค์ประกอบที่ฝังตัวเท่านั้นและไม่สามารถมีองค์ประกอบระดับบล็อกได้ แท็กพิเศษเหล่านี้คือ:

H1, H2, H3, H4, H5, H6, P, DT

4. แท็ก div สามารถรวมอยู่ใน LI - บทความนี้ไม่จำเป็นต้องมีรายการแยกต่างหาก แต่หลายคนบนอินเทอร์เน็ตมีข้อสงสัยเกี่ยวกับเรื่องนี้ดังนั้นฉันจะอธิบายสั้น ๆ ที่นี่:

แท็ก Li และ Div เป็นคอนเทนเนอร์สำหรับการโหลดเนื้อหาที่มีสถานะเท่ากันและไม่มีความแตกต่างระหว่างระดับ (ตัวอย่างเช่น: H1 และ H2 ที่มีลำดับชั้นที่เข้มงวด^_^) คุณควรรู้ว่าแท็ก LI สามารถรองรับ UL หรือ OL ได้ ทำไมบางคนถึงคิดว่า Li ไม่สามารถรองรับ Div ต่อไปได้? อย่าใช้หลี่ที่ตระหนี่อย่ามองหลี่ผอมอย่างที่เป็นจริงหลี่มีจิตใจที่ยิ่งใหญ่ ...

5. องค์ประกอบระดับบล็อกและองค์ประกอบระดับบล็อกเป็นแบบขนานและองค์ประกอบอินไลน์และองค์ประกอบอินไลน์เป็นแบบขนาน:

<div> <h2> </h2> <p> </p> </div> - ใช่

<div> <a href =#> </a> <span> </span> </div> - ใช่

<div> <h2> </h2> <span> </span> </div> - ผิด