เหตุใดแท็ก <p> จึงไม่มีแท็ก <div> อยู่ข้างใน

169

เท่าที่ฉันรู้นี้ถูกต้อง:

<div>
  <p>some words</p>
</div>

แต่นี่เป็นสิ่งที่ผิด:

<p>
  <div>some words</div>
</p>

คนแรกสามารถผ่านการตรวจสอบ W3C (XHTML 1.0) แต่คนที่สองไม่สามารถ ฉันรู้ว่าไม่มีใครจะเขียนโค้ดเหมือนที่สอง ฉันแค่อยากรู้ว่าทำไม

และความสัมพันธ์ของแท็กอื่น ๆ เกี่ยวข้องกับอะไรกัน?

html xhtml

— Henry H Miao
แหล่งที่มา

9

เพราะ<p>เป็นองค์ประกอบระดับบล็อกและ (ควรจะ) ใช้สำหรับแสดงข้อความก็จะไม่อนุญาตให้มีองค์ประกอบอื่น ๆ ระดับบล็อกภายในนั้น แต่คนเดียวแบบอินไลน์เช่นและ<span> <strong>

— Bojangles

22

JamWaffles: นั่นpคือองค์ประกอบระดับบล็อกไม่มีส่วนเกี่ยวข้องกับมัน divเป็นหนึ่งและอนุญาตให้บล็อกอื่น ๆ

— Joey

อาจเป็นไปได้ซ้ำกันของ: stackoverflow.com/questions/4967976/… (unflagged): คำตอบที่เหมาะสมสำหรับคำตอบนั้นจะตอบวิธีอ่านข้อมูลจำเพาะ HTML และตอบคำถามนี้ด้วย

— Ciro Santilli 郝海东冠状病六四事件法轮功

การประกาศสไตล์ของ div เนื่องจากอินไลน์ไม่ทำงาน

— Triynko

198

สถานที่ที่มีสิทธิ์ในการค้นหาความสัมพันธ์ของการบรรจุที่อนุญาตคือข้อกำหนดของ HTML ดูตัวอย่างเช่นhttp://www.w3.org/TR/html4/sgml/dtd.html มันระบุองค์ประกอบที่เป็นองค์ประกอบบล็อกและที่อยู่ในบรรทัด สำหรับรายการเหล่านั้นค้นหาส่วนที่ระบุว่า "โมเดลเนื้อหา HTML"

สำหรับองค์ประกอบ P จะระบุสิ่งต่อไปนี้ซึ่งระบุว่าองค์ประกอบ P ได้รับอนุญาตให้มีองค์ประกอบแบบอินไลน์เท่านั้น

<!ELEMENT P - O (%inline;)*            -- paragraph -->

สิ่งนี้สอดคล้องกับhttp://www.w3.org/TR/html401/struct/text.html#h-9.3.1ซึ่งกล่าวว่าองค์ประกอบ P "ไม่สามารถมีองค์ประกอบระดับบล็อก (รวมถึงตัว P)"

— โคลินแคมป์เบล
แหล่งที่มา

74

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

— Stoutie

3

ยังคงใช้ได้สำหรับ HTML 5 หรือไม่ ข้อมูลจำเพาะเชื่อมโยงโดยเฉพาะการอ้างอิง HTML 4 และHTML 5 ไม่ได้มีการกำหนดประเภทเอกสาร

— Ajedi32

2

@ Ajedi32 ใช่ที่นี่ HTML5 ได้เปลี่ยนชื่อคำศัพท์มากมาย แต่ "เนื้อหาที่อนุญาต: เนื้อหาการใช้ถ้อยคำ" หมายถึงสิ่งเดียวกันกับ%inlineบิตด้านบน ดูคำตอบของ Oriol

— Mr Lister

@Stoutie ใช่กับ ya นั่นเป็นเหตุผลที่ Stack Overflow มีอยู่

— Captain Hypertext

69

ในระยะสั้นมันเป็นไปไม่ได้ที่จะวาง<div>องค์ประกอบภายใน<p>ใน DOM เนื่องจาก<div>แท็กเปิดจะปิด<p>องค์ประกอบโดยอัตโนมัติ

— defau1t
แหล่งที่มา

2

อ่านี่อธิบายได้ว่าทำไมมีพื้นที่ขนาดใหญ่ก่อนที่ div ภายใน ap เพราะอันที่จริงจบลงก่อน div

— AaronLS

2

คุณสามารถวางdivองค์ประกอบภายในp ได้ใน DOMmyP.appendChild(myDiv)เช่น แต่เครื่องมือแยกวิเคราะห์ HTML จะไม่ทำเช่นนั้น

— Oriol

1

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

39

ตาม HTML5 โมเดลเนื้อหาของdivองค์ประกอบคือเนื้อหาการไหล

องค์ประกอบส่วนใหญ่ที่ใช้ในเนื้อความของเอกสารและแอปพลิเคชันถูกจัดประเภทเป็นเนื้อหาการไหล

ซึ่งรวมถึงpองค์ประกอบซึ่งสามารถใช้ได้เฉพาะที่คาดว่าจะมีเนื้อหาการไหล

ดังนั้นdivองค์ประกอบสามารถมีpองค์ประกอบ

อย่างไรก็ตามรูปแบบเนื้อหาของpองค์ประกอบคือเนื้อหาการวลี

เนื้อหาวลีเป็นข้อความของเอกสารรวมถึงองค์ประกอบที่ทำเครื่องหมายข้อความนั้นในระดับย่อหน้า วิ่งเนื้อหาถ้อยคำรูปแบบวรรค

ที่ไม่ได้รวมdivองค์ประกอบซึ่งสามารถใช้ได้เฉพาะที่เนื้อหาไหลคาดว่า

ดังนั้นpองค์ประกอบต้องไม่มีdivองค์ประกอบ

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

<p>
  <div>some words</div>
</p>

แยกเป็น

<p></p>
<div>some words</div>
</p>

และสุดท้าย</p>คือข้อผิดพลาด

— Oriol
แหล่งที่มา

แต่ถ้าใน CSS ถ้าฉันตั้ง div ไว้แบบอินไลน์ทำไมมันไม่เคารพมัน?

— Sanjay

เนื่องจากค่า CSS ถูกนำไปใช้หลังจากการแยกวิเคราะห์ ... แม้ว่าเราdiv as inline in CSSจะไม่ใช้ประโยชน์เนื่องจากโครงสร้างการแยกวิเคราะห์ใหม่มี<p>Text</p> <div>some words</div> <p></p> ความเข้าใจที่ถูกต้องหรือไม่

— Sanjay

@Sanjay ใช่ดูเหมือนว่าคุณจะถูก และยิ่งกว่านั้นในระหว่างการสังเกตของฉันหากคุณใส่ <span> ภายใน <p> จากนั้นตั้งช่วงการแสดงผลเป็น "บล็อก" มันจะถูกแสดงผลเป็นองค์ประกอบบล็อกทั่วไปโดยไม่มีผลดังกล่าว

— Andrii Naumovych

-1

หลังจาก X HTML, อนุสัญญาได้รับการเปลี่ยนแปลงและตอนนี้มันเป็นส่วนผสมของการประชุมของ XML และ HTML ดังนั้นนี่คือเหตุผลที่แนวทางที่สองผิดและตัวตรวจสอบความถูกต้อง W3C ยอมรับสิ่งที่ถูกต้องตามมาตรฐานและอนุสัญญา

— geekdev786
แหล่งที่มา

XHTML ไม่เปลี่ยนแปลงมากนัก องค์ประกอบ p ไม่เคยได้รับอนุญาตให้มีองค์ประกอบ div

— เควนติน

-7

เนื่องจากdivแท็กมีลำดับความสำคัญสูงกว่าpแท็ก pแท็กหมายถึงแท็กวรรคในขณะที่divแท็กแท็กหมายถึงเอกสาร

คุณสามารถเขียนหลาย ๆ ย่อหน้าในแท็กเอกสาร แต่คุณไม่สามารถเขียนเอกสารในย่อหน้าได้ เหมือนกับไฟล์ DOC

— Gaurav Agrawal
แหล่งที่มา

2

จริงๆแล้วมันคือการหาร มิฉะนั้นจะเป็น<doc>: D

— Kyle

6

ความสำคัญไม่ได้เป็นแนวคิดที่ใช้กับองค์ประกอบ HTML และ div หมายถึงส่วนที่เป็น @KyleSevenoaks กล่าว :)

— SimplGy

ไฟล์ DOC คืออะไร Microsoft Wordไฟล์?

— Peter Mortensen