องค์ประกอบบล็อกโดยทั่วไปเป็นองค์ประกอบคอนเทนเนอร์สำหรับองค์ประกอบอื่น ๆ โดยทั่วไปองค์ประกอบบล็อกจะเริ่มต้นในบรรทัดใหม่ สามารถรองรับองค์ประกอบแบบอินไลน์และองค์ประกอบบล็อกอื่น ๆ ได้ พิเศษมากสามารถใช้เพื่อเก็บองค์ประกอบบล็อกอื่น ๆ เท่านั้น หากไม่ได้รับความช่วยเหลือจาก CSS องค์ประกอบบล็อกจะถูกจัดเรียงทีละบรรทัด ด้วย CSS เราสามารถเปลี่ยนโหมดเค้าโครงเริ่มต้นของ HTML นี้ และวางองค์ประกอบบล็อกในตำแหน่งที่คุณต้องการ แทนที่จะขึ้นบรรทัดใหม่อย่างโง่เขลาทุกครั้ง ควรชี้ให้เห็นว่าแท็กตารางยังเป็นองค์ประกอบประเภทบล็อกอีกด้วย ความเร็วในการโหลดหน้าเว็บไม่มีความแตกต่างอื่นใด แต่หากผู้ใช้ทั่วไปคลิกปุ่มดูซอร์สโค้ดของหน้าโดยไม่ตั้งใจ ความแตกต่างระหว่างทั้งสองจะมีขนาดใหญ่มาก ซอร์สโค้ดหน้าเค้าโครง CSS ได้รับการออกแบบตามแนวคิดการสร้างใหม่ที่ดี อย่างน้อยก็ช่วยให้ผู้ใช้ทั่วไปที่ไม่มีประสบการณ์ในการพัฒนาเว็บสามารถเข้าใจเนื้อหาได้อย่างรวดเร็ว จากมุมมองนี้ โค้ดเค้าโครง CSS ควรมีประสบการณ์ด้านสุนทรียภาพที่ดีกว่า คุณสามารถนึกถึง div องค์ประกอบคอนเทนเนอร์ของบล็อกเป็นกล่อง หรือถ้าคุณเล่นโดยใช้การตัดก็จะเข้าใจง่ายกว่า ก่อนอื่นเราตัดบทความที่จำเป็นออกจากหนังสือพิมพ์และนิตยสารต่างๆ เนื้อหาที่ตัดแต่ละชิ้นเป็นบล็อก จากนั้นเราก็ติดกระดาษเหล่านี้ลงบนกระดาษเปล่าแผ่นใหม่ตามความตั้งใจในการจัดวางของเรา สิ่งนี้จะสร้างนามธรรมที่เป็นเอกลักษณ์ของคุณเอง เนื่องจากเป็นส่วนขยายของเทคโนโลยี การออกแบบเลย์เอาต์ของเว็บจึงมีรูปแบบเดียวกัน โดยทั่วไปองค์ประกอบอินไลน์จะขึ้นอยู่กับองค์ประกอบพื้นฐานในระดับความหมาย องค์ประกอบอินไลน์สามารถเก็บข้อความหรือองค์ประกอบอินไลน์อื่นๆ เท่านั้น และองค์ประกอบอินไลน์ทั่วไป "a" คือ ควรสังเกตว่าชื่อภาษาจีนสำหรับองค์ประกอบอินไลน์ประกอบด้วยองค์ประกอบอินไลน์ องค์ประกอบอินไลน์ องค์ประกอบอินไลน์ และองค์ประกอบอินไลน์ที่หลากหลาย โดยพื้นฐานแล้วไม่มีการแปลแบบครบวงจร เพียงแค่เรียกมันตามที่คุณต้องการ นอกจากนี้ เมื่อพูดถึงองค์ประกอบแบบอินไลน์ เราจะนึกถึงแอตทริบิวต์การแสดงผลที่เรียกว่า display:inline คุณลักษณะนี้สามารถแก้ไขปัญหาขอบลอยคู่ของ IE ที่มีชื่อเสียงได้ องค์ประกอบบล็อก (องค์ประกอบบล็อก) และองค์ประกอบแบบอินไลน์ (องค์ประกอบอินไลน์) เป็นแนวคิดในข้อกำหนด HTML ความแตกต่างพื้นฐานระหว่างองค์ประกอบบล็อกและองค์ประกอบแบบอินไลน์คือองค์ประกอบบล็อกโดยทั่วไปจะเริ่มต้นด้วยบรรทัดใหม่ เมื่อเพิ่มการควบคุม CSS ความแตกต่างของแอตทริบิวต์ระหว่างองค์ประกอบบล็อกและองค์ประกอบแบบอินไลน์จะไม่แตกต่างกันอีกต่อไป ตัวอย่างเช่น เราสามารถเพิ่มแอตทริบิวต์ เช่น display:block ลงในการอ้างอิงองค์ประกอบแบบอินไลน์ เพื่อให้มีแอตทริบิวต์เริ่มต้นจากบรรทัดใหม่ทุกครั้ง องค์ประกอบตัวแปรจะขึ้นอยู่กับสององค์ประกอบข้างต้นและเปลี่ยนแปลงไปตามสภาพแวดล้อม แนวคิดพื้นฐานของมันคือต้องพิจารณาว่าองค์ประกอบนั้นเป็นองค์ประกอบบล็อกหรือองค์ประกอบแบบอินไลน์ตามบริบท องค์ประกอบตัวแปรยังคงเป็นขององค์ประกอบสองหมวดหมู่ข้างต้น เมื่อบริบทกำหนดหมวดหมู่แล้ว จะต้องเป็นไปตามกฎขององค์ประกอบบล็อกหรือองค์ประกอบแบบอินไลน์ รายละเอียดการจำแนกประเภทบล็อกและอินไลน์ของแท็ก html: องค์ประกอบบล็อก div css xhtml xml ตัวอย่างซอร์สโค้ด ตัวอย่างซอร์สโค้ด องค์ประกอบแบบอินไลน์ div css xhtml xml ตัวอย่างซอร์สโค้ด ตัวอย่างซอร์สโค้ด องค์ประกอบที่ไม่แน่นอน div css xhtml xml ตัวอย่างซอร์สโค้ด ตัวอย่างซอร์สโค้ด
○ ที่อยู่ - ที่อยู่ ○ blockquote - เครื่องหมายคำพูดบล็อก ○ กึ่งกลาง - บล็อกการจัดตำแหน่ง ○ dir - รายการไดเร็กทอรี ○ div - ความสะดวกสบายระดับบล็อกที่ใช้กันทั่วไป นอกจากนี้ยังเป็นแท็กหลักของเค้าโครง CSS กระท่อม dl - รายการคำจำกัดความ ○ fieldset - กลุ่มควบคุมแบบฟอร์ม ○ รูปแบบ - การโต้ตอบ แบบฟอร์ม ○ h1 - หัวเรื่องหลัก ○ h2 - คำบรรยาย ○ h3 - หัวเรื่องระดับ 3 ○ h4 - ส่วนหัวระดับ 4 ○ h5 - ส่วนหัวระดับ 5 ◎ h6 - ส่วนหัวระดับ 6 ○ hr - เส้นคั่นแนวนอน ○ isindex - พร้อมท์อินพุต
○ เมนู - รายการเมนู ○ noframes - เฟรมเนื้อหาเสริม (แสดงเนื้อหาบล็อกนี้สำหรับเบราว์เซอร์ที่ไม่รองรับเฟรม) ○ noscript - เนื้อหาสคริปต์เสริม (แสดงเนื้อหานี้สำหรับเบราว์เซอร์ที่ไม่รองรับสคริปต์)
○ ol - รูปแบบการเรียงลำดับ ○ p - ย่อหน้า ○ ข้อความที่จัดรูปแบบไว้ล่วงหน้า ○ ตาราง - ตาราง ○ ul - รายการที่ไม่ได้เรียงลำดับ
⁴ a - จุดยึด ⁴ abbr - ตัวย่อ ⁃ อักษรย่อ - ตัวอักษรเริ่มต้น ⁴ b - ตัวหนา (ไม่แนะนำ)
○ bdo - แทนที่ bidi
○ ใหญ่ - แบบอักษรขนาดใหญ่ ○ br - ตัวแบ่งบรรทัด ○ อ้างอิง - เครื่องหมายคำพูด ○ รหัส - รหัสคอมพิวเตอร์ (จำเป็นเมื่ออ้างถึงซอร์สโค้ด)
○ dfn - กำหนดฟิลด์ ○ em - เน้น ○ แบบอักษร - การตั้งค่าแบบอักษร (ไม่แนะนำ)
○ i - ตัวเอียง ○ img - รูปภาพ ○ อินพุต - กล่องอินพุต ○ kbd - กำหนดข้อความของแป้นพิมพ์ ○ ป้ายกำกับ - ป้ายกำกับตาราง ○ q - เครื่องหมายคำพูดสั้น ○ s - ขีดเส้นใต้ (ไม่แนะนำ)
○ samp - กำหนดโค้ดคอมพิวเตอร์ตัวอย่าง ○ เลือก - การเลือกรายการ ○ ข้อความตัวอักษรขนาดเล็ก - ขนาดเล็ก ○ ช่วง - คอนเทนเนอร์แบบอินไลน์ที่ใช้กันทั่วไป กำหนดบล็อกภายในข้อความ ○ ขีดฆ่า - ขีดเส้นใต้ ○ เน้นหนักแน่น - ตัวหนา ○ ย่อย - ตัวห้อย ○ sup - ตัวยก ○ พื้นที่ข้อความ - กล่องป้อนข้อความหลายบรรทัด ○ tt - ข้อความเทเล็กซ์ ○ u - ขีดเส้นใต้ ○ var - กำหนดตัวแปร
องค์ประกอบที่ไม่แน่นอนคือองค์ประกอบบล็อกหรือองค์ประกอบแบบอินไลน์ขึ้นอยู่กับบริบท
◎ แอปเพล็ต-แอปเพล็ต java
➠ ปุ่ม - ปุ่ม ➠ เดล - ลบข้อความ ➠ iframe - เฟรมอินไลน์
○ ins - ข้อความที่แทรก ○ แผนที่ - บล็อกรูปภาพ (แผนที่)
➠ วัตถุ - วัตถุวัตถุ ➠ สคริปต์ - สคริปต์ไคลเอนต์