<div> </div> ส่วน/ส่วนในเอกสารสามารถกำหนดเพื่อแบ่งเอกสารออกเป็นส่วนที่เป็นอิสระและต่าง ๆ <div> </div> แท็กสามารถใช้เป็นเครื่องมือขององค์กรที่เข้มงวดและไม่ใช้รูปแบบใด ๆ ที่จะเชื่อมโยงกับมันซึ่งมีแนวคิดในการแยกฉลาก HTML และสไตล์การแสดงออก ในงานจริงเรามักจะระบุคุณสมบัติ ID หรือคลาสสำหรับ <div> </div> แท็กเพื่อให้แท็กมีประสิทธิภาพมากขึ้น <div> </div> เป็นองค์ประกอบระดับบล็อกซึ่งหมายความว่าเนื้อหาจะเริ่มแถวใหม่โดยอัตโนมัติ และการเปลี่ยนแปลงที่แท้จริงคือ <div> รูปแบบที่ไม่ซ้ำกันโดยเนื้อแท้
HTML ต่อไปนี้จำลองโครงสร้างของเว็บไซต์ข่าว แต่ละคู่ของ <div> </div> แท็กรวมชื่อและนามธรรมของแต่ละข่าวนั่นคือ <div> </div> เพิ่มโครงสร้างเพิ่มเติมให้กับเอกสาร ในเวลาเดียวกันเนื่องจาก <div> </div> เหล่านี้เป็นขององค์ประกอบประเภทเดียวกันคุณสามารถใช้คุณสมบัติ class = news เพื่อระบุแท็ก <div> </div> เหล่านี้ จัดรูปแบบ <div> </div>
<div class = ข่าว> <h2> ข่าวสาร 1 </h2> <p> ข้อความบางข้อความ <H2> <H2> <H2> ข่าวข่าว 2 </h2> <p> ข้อความบางข้อความ2. <span> </span> ฉลาก
<span> แท็กใช้เพื่อรวมองค์ประกอบบรรทัดในเอกสาร
<span style = สี: สีแดง> หมายเหตุ: </span>ประการที่สององค์ประกอบระดับบล็อกและองค์ประกอบบรรทัด
องค์ประกอบบล็อกและองค์ประกอบที่เกี่ยวข้อง/องค์ประกอบที่เกี่ยวข้องภายในเป็นแนวคิดใน CSS นี่เป็นเพราะองค์ประกอบเหล่านี้แสดงเป็นชิ้นส่วนของเนื้อหานั่นคือบล็อก ในทางตรงกันข้ามองค์ประกอบต่าง ๆ เช่น <span> </span> และ <strong> </strong> ถูกเรียกในองค์ประกอบ -ไลน์
แนวคิดขององค์ประกอบระดับบล็อกและองค์ประกอบผ้าลินินไม่ได้รับการแก้ไข แต่มีความสัมพันธ์ เราสามารถใช้ประเภทของแอตทริบิวต์การแสดงผลขององค์ประกอบเพื่อเปลี่ยนประเภทที่สร้างขึ้น ซึ่งหมายความว่าโดยการตั้งค่าคุณสมบัติการแสดงผลเป็นบล็อกมันสามารถสร้างองค์ประกอบในบรรทัด (เช่น <a> องค์ประกอบ) ดูเหมือนองค์ประกอบระดับบล็อก ในฐานะที่เป็นอินไลน์ เอกสาร.
<div id = dv1 style = display: block> ฉันเป็นองค์ประกอบระดับบล็อก </div> <div id = dv2 style = display: inline> ฉันเป็นบรรทัดของบรรทัด </div> <div id = div3 style = display: none> ฉันไม่สามารถมองเห็นได้ </div>ประการที่สามการเปรียบเทียบ <div> </div> และ <span> </span>
1. ในทำนองเดียวกัน: <div> </div> ฉลากและ <span> </span> แท็กใช้เพื่อจำแนกแท็ก แต่ไม่มีความหมายในทางปฏิบัติ
2. คะแนนที่แตกต่างกัน: <div> </div> ฉลากเป็นองค์ประกอบระดับบล็อกและเบราว์เซอร์จะเพิ่มฉลากธนาคารโดยอัตโนมัติก่อนและหลังมัน </br>;
หากคุณต้องการแสดงเนื้อหาสองรายการในบรรทัดเดียวกันในเค้าโครงเว็บวิธีที่ง่ายที่สุดคือแพ็คด้วยแท็ก <span> </span> ตัวอย่างเช่นหน้าหนึ่งมีองค์ประกอบที่อยู่ติดกันสององค์ประกอบหนึ่งคือ <div> </div> และอีกองค์ประกอบคือ <span> </span> หากคุณต้องการแสดงในแถวเดียวกันคุณสามารถเปลี่ยน <div> </div> เป็น <span> </span> สิ่งนี้ได้ แน่นอนว่ามันสามารถนำไปใช้ได้โดยการตั้งค่าคุณสมบัติการแสดงผลของ <div> </div> และป้ายกำกับอื่น ๆ ผ่าน CSS เป็นอินไลน์