ตัวจัดรูปแบบและบีบอัด HTML
จัดระเบียบ HTML ที่รกให้อ่านง่าย หรือบีบอัดเพื่อใช้งานจริง
เกี่ยวกับเครื่องมือนี้
จัดระเบียบ HTML ที่ออกมาจากบันเดิลเลอร์ จากตัวดึงข้อมูลเว็บ หรือจากตัวแก้ไขแบบ WYSIWYG: อิลิเมนต์ถูกย่อหน้าตามความกว้างที่คุณเลือก แอตทริบิวต์อยู่บรรทัดของมัน และเนื้อหาใน pre/textarea ถูกคงไว้ทุกไบต์ ส่วนโหมดบีบอัดจะตัดคอมเมนต์ทิ้งและยุบช่องว่างระหว่างแท็ก — โดยทั่วไปลดขนาดหน้าเว็บที่เขียนด้วยมือได้ 10–25%
การบีบอัดที่นี่ระมัดระวังโดยตั้งใจ: สคริปต์และสไตล์แบบอินไลน์ถูกปกป้อง คอมเมนต์แบบมีเงื่อนไขรอด และช่องว่างเดี่ยว ๆ ระหว่างอิลิเมนต์แบบอินไลน์ถูกรักษาไว้ เพื่อไม่ให้ “คลิก <a>ที่นี่</a> เลย” เชื่อมติดกันเป็นคำเดียว คุณจึงได้การบีบอัดที่ปลอดภัย ไม่ใช่แบบดุดันที่สุด
ทั้งสองการทำงานเกิดขึ้นในเบราว์เซอร์ของคุณ — หน้าเว็บที่ยังไม่เผยแพร่และมาร์กอัปหน้าจอผู้ดูแลระบบภายในจึงไม่เคยออกจากเครื่อง
คำถามที่พบบ่อย
- การบีบอัดจะทำให้ JavaScript หรือ CSS แบบอินไลน์ของฉันพังไหม?
- ไม่ — บล็อก <script>, <style>, <pre> และ <textarea> ถูกยกเว้นจากการยุบช่องว่างทั้งหมด มีเพียงมาร์กอัประหว่างแท็กเท่านั้นที่ถูกแตะ หากต้องการบีบตัวสคริปต์เอง ให้นำไปผ่านตัวบีบอัด JavaScript แยกต่างหาก
- ทำไมช่องว่างระหว่างแท็กจึงลบได้อย่างปลอดภัย?
- ส่วนใหญ่ปลอดภัย: ช่องว่างระหว่างอิลิเมนต์ระดับบล็อกไม่มีผลทางสายตา แต่ระหว่างอิลิเมนต์แบบอินไลน์มีผล นั่นคือเหตุผลที่ตัวบีบอัดยุบช่องว่างที่ติดกันให้เหลือช่องเดียวแทนที่จะลบทิ้ง ส่วนเลย์เอาต์ที่พึ่งพาเทคนิคช่องว่างของ inline-block เป็นข้อยกเว้นที่หายากซึ่งควรตรวจดูสักหน่อย
- ตัวจัดรูปแบบซ่อม HTML ที่ไม่ถูกต้องให้ไหม?
- มันจัดรูปแบบสิ่งที่คุณให้มาโดยไม่ตรวจกับข้อกำหนดของ HTML — แท็กที่ไม่ได้ปิดก็ยังไม่ได้ปิด เบราว์เซอร์ผ่อนปรนกับมาร์กอัปมั่ว ๆ อยู่แล้ว การจัดรูปแบบจึงยังช่วยให้คุณเห็นโครงสร้างมากพอที่จะจับปัญหาได้
- ควรใช้ความกว้างของการย่อหน้าเท่าใด?
- 2 ช่องว่างคือธรรมเนียมที่ครองพื้นที่ในโค้ดเบสฝั่งเว็บ และเป็นค่าเริ่มต้นของคู่มือสไตล์ของเฟรมเวิร์กส่วนใหญ่ เลือก 4 หากทีมของคุณตกลงกันไว้แบบนั้น — ตัวเลือกนี้เป็นเรื่องความสวยงามล้วน ๆ