เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ · HTML บรรณาธิการ WYSIWYG
Enter กับ Shift+Enter: วิธีที่ผู้แก้ไขเลือกระหว่าง <p>, <div> และ <br>
· มันทำงานอย่างไร
html เป็นที่พอใจ การแก้ไขข้อความ
อธิบายโมเดลย่อหน้าที่อยู่เบื้องหลังโปรแกรมแก้ไขเบราว์เซอร์: เหตุใด Enter จึงสร้าง <p> หรือ <div> เหตุใด Shift+Enter จึงแทรก <br> และวิธีกำหนดระยะห่างของคุณ
เหตุใดการเว้นวรรคจึงผิดใน CMS แต่ใช้ได้ในตัวแก้ไข — เปิดขึ้นพร้อมกับปัญหา double-gap หรือ no-gap แบบคลาสสิก
การเว้นวรรคที่ดูสะดวกในตัวแก้ไขสามารถเปลี่ยนแปลงได้เมื่อแฟรกเมนต์เข้าสู่ CMS เนื่องจากบล็อกได้รับระยะขอบจากสไตล์ชีตปลายทาง สองย่อหน้าและสองบรรทัดที่คั่นด้วย br มีโครงสร้างที่แตกต่างกัน แม้ว่าการแสดงตัวอย่างหนึ่งครั้งจะมีระยะห่างในแนวตั้งที่ใกล้เคียงกันก็ตาม
ToolAcre เปิดเผยความแตกต่างในแหล่งที่มา ไม่มีระยะขอบที่คัดลอกหรือรูปแบบอินไลน์ ดังนั้นการเว้นวรรคย่อหน้าจึงมาจาก wrapper แสดงตัวอย่างหรือปลายทางที่ใหม่กว่า CSS ผู้เขียนควรเลือกโครงสร้างตามความหมายและตรวจสอบองค์ประกอบที่ต่อเนื่องกัน แทนที่จะเพิ่มการกดแป้นเปล่าจนกว่ามุมมองชั่วคราวจะดูถูกต้อง
บล็อกเทียบกับตัวแบ่งแบบอินไลน์ — อธิบายว่า <p> และ <div> เป็นบล็อกที่มีระยะขอบของตัวเอง ในขณะที่ <br> เป็นตัวแบ่งบรรทัดภายในบล็อก
ย่อหน้าและ div เป็นคอนเทนเนอร์แบบบล็อก br เป็นองค์ประกอบตัวแบ่งบรรทัดที่เป็นโมฆะภายในโฟลว์อื่น โปรแกรมแก้ไขนี้อนุญาตให้ใช้ p และ br แต่ไม่อนุญาต div div ที่วางจะถูกคลายออก โดยคงคำของมันไว้และอนุญาตให้สืบทอดได้ในขณะที่ละทิ้ง Wrapper br ที่ผ่านการฆ่าเชื้อแล้วจะถูกปล่อยออกมาเป็น `<br />`
ที่อยู่ทางไปรษณีย์สามารถเป็นหนึ่งย่อหน้าโดยจงใจขึ้นบรรทัดใหม่ เนื่องจากบรรทัดนั้นรวมกันเป็นหนึ่งหน่วย สองความคิดที่เป็นอิสระจะแสดงเป็นสองย่อหน้าได้ดีกว่า ปลายทางสามารถจัดรูปแบบระยะขอบ p อย่างสม่ำเสมอ ในขณะที่องค์ประกอบ br ซ้ำๆ ที่ใช้เป็นตัวเว้นวรรคในแนวตั้งจะเข้ารหัสลักษณะที่ปรากฏลงในเนื้อหาโดยตรง
สิ่งที่ Enter ทำที่นี่ขึ้นอยู่กับเบราว์เซอร์และไม่ได้กำหนดค่าโดย ToolAcre
ToolAcre ไม่ได้ตั้งค่าคำสั่งตัวแยกย่อหน้าเริ่มต้นหรือสกัดกั้น Enter เบราว์เซอร์ที่แก้ไขได้จะจัดการคีย์ และผู้ฟังอินพุตจะรีเฟรชเอาต์พุตในภายหลัง ข้อจำกัดของพื้นที่เก็บข้อมูลเตือนว่าพฤติกรรมของกลไกแตกต่างกัน ดังนั้นการยืนยันว่า Enter จะสร้าง p เสมอ สร้าง div เสมอ หรือตามกฎเฉพาะเวอร์ชันเดียว ถือเป็นแนวทางความเข้ากันได้
ขั้นตอนการฆ่าเชื้อจะจำกัดขอบเขตของการซีเรียลไลซ์ที่มาถึงให้แคบลง div ที่สร้างโดยเบราว์เซอร์ไม่สามารถคงอยู่ได้ในฐานะ div แม้ว่าข้อความจะคงอยู่ก็ตาม นี่อาจทำให้แหล่งที่มาสุดท้ายแตกต่างไปจากแผนผังที่อยู่ตรงกลางที่มีชีวิตอีกครั้ง โหมดแหล่งที่มาจึงเป็นที่สำหรับสร้างองค์ประกอบ p ที่ชัดเจนเมื่อความหมายของย่อหน้าคงที่มีความสำคัญ
สามารถเขียน Soft Break ในซอร์สได้ แต่ไม่มีการใช้สัญญา Shift+Enter
แถบเครื่องมือไม่มีปุ่ม "soft break" และโค้ดไม่ได้ลงทะเบียน Shift+Enter เบราว์เซอร์อาจใช้ท่าทางนั้น แต่บทความนี้ไม่ได้รับประกันผลลัพธ์ โหมดแหล่งที่มาสามารถรักษา br ที่อนุญาตไว้ได้ ซึ่งเป็นวิธีการกำหนดเพื่อแสดงการเว้นวรรคภายในย่อหน้าหลังจากตรวจสอบผลลัพธ์ภาพ
ลักษณะการทำงานของแป้นพิมพ์ยังขึ้นอยู่กับสถานะการเลือกและการแก้ไขที่โมดูลไม่ได้ทดสอบอีกด้วย ใช้เบราว์เซอร์ที่เกี่ยวข้องกับงานของคุณ จากนั้นอ่านแหล่งที่มา หากท่าทางสร้างบล็อกที่ไม่ต้องการ ให้เขียนส่วนใหม่อย่างชัดเจน แทนที่จะอาศัยคำอธิบายทางลัดที่คัดลอกมาจากเฟรมเวิร์กตัวแก้ไขอื่น
ตัวอย่างการทำงาน: สร้างที่อยู่และบันทึก จากนั้นตรวจสอบแทนที่จะคาดการณ์
สำหรับที่อยู่ ให้ใช้โหมดแหล่งที่มาเพื่อสร้าง p ด้วย br ระหว่างผู้รับ ถนน และท้องที่ สำหรับข้อความสั้นๆ ให้สร้างองค์ประกอบ p สองรายการ กลับสู่โหมดภาพ ซึ่งแหล่งที่มาจะถูกทำความสะอาดก่อนที่จะแทรก และเปรียบเทียบภาพตัวอย่างโดยไม่ต้องถือว่าระยะขอบตรงกับเว็บไซต์สุดท้าย
จากนั้นคัดลอก HTML และตรวจสอบส่วนแยกจากการดาวน์โหลด HTML ผลลัพธ์ที่คัดลอกมีมาร์กอัปร่างกายที่ถูกสุขลักษณะ การดาวน์โหลดประกอบด้วยเอกสารฉบับสมบูรณ์พร้อมตัวอย่าง ToolAcre ของ CSS ความแตกต่างนี้สามารถอธิบายได้ว่าเหตุใดการเปิดไฟล์ที่ดาวน์โหลดจึงดูสมบูรณ์มากกว่าการวางส่วนที่คัดลอกลงในระบบที่มีสไตล์ต่างกัน
ย่อหน้าว่างและช่องว่างที่ไม่แยกจะยังคงอยู่เมื่อผู้เขียนใหม่รองรับเท่านั้น
ย่อหน้าว่างที่อนุญาตสามารถคงอยู่ได้เนื่องจาก p ได้รับการยอมรับ และไม่มีกฎใดที่จะลบบล็อกว่าง เอนทิตีที่ไม่ทำลายพื้นที่ที่รู้จักอาจกลายเป็นอักขระที่ถอดรหัสและถูกหลีกในภายหลังตามการใช้งานเอนทิตีท้องถิ่น รหัสไม่ได้จัดเตรียมกฎการล้างข้อมูลโดยเฉพาะซึ่งกำหนดเป้าหมายไปที่ย่อหน้าตัวเว้นวรรค
ดังนั้น “ฆ่าเชื้อทันที” จึงไม่ใช่เครื่องมือทำความสะอาดเลย์เอาต์ โดยจะลบมาร์กอัปและแอตทริบิวต์ที่ไม่รองรับ ปรับสมดุลแท็กและแหล่งที่มาของรูปแบบ แต่สามารถรักษาความว่างเปล่าที่อนุญาตเชิงโครงสร้างได้ ลบสิ่งประดิษฐ์การเว้นวรรคโดยเจตนาในโหมดต้นฉบับหรือโหมดภาพ และปล่อยให้ปลายทาง CSS จัดหาระยะขอบปกติแทนที่จะสะสมบล็อกว่าง
สิ่งนี้ไม่ครอบคลุม — CSS กฎการยุบระยะขอบหรือการกำหนดค่าเฟรมเวิร์กตัวแก้ไข
บทความนี้ไม่ครอบคลุมถึงการยุบระยะขอบ การกำหนดค่าตัวคั่นเฟรมเวิร์ก เมทริกซ์แป้นพิมพ์เบราว์เซอร์ต่อเบราว์เซอร์ หรือลักษณะเฉพาะในการเว้นวรรคอีเมล นอกจากนี้ยังไม่ได้อ้างว่าการแสดงตัวอย่างทำซ้ำ CMS แซนด์บ็อกซ์แบบเบาใช้แบบอักษรเนื้อความ ความสูงของบรรทัด ลักษณะการเติมและการแบ่งของตัวมันเอง
และจะไม่ถือว่าเอาต์พุตที่กรองแล้วเป็นสิ่งพิมพ์ที่ปลอดภัยในระดับสากล การส่งที่เป็นอันตรายจำเป็นต้องมีการฆ่าเชื้อฝั่งเซิร์ฟเวอร์ที่เหมาะสมกับปลายทาง แม้ว่าการแสดงตัวอย่างในเครื่องแบบใช้แล้วทิ้งจะยังคงเฉื่อยก็ตาม ความหมายย่อหน้า พฤติกรรมการแก้ไขเบราว์เซอร์ และนโยบายความปลอดภัย ถือเป็นข้อกังวลสามประการที่แยกจากกันซึ่งไม่ควรรวมไว้ในการทดสอบ "ดูถูกต้อง" เพียงอย่างเดียว
ประเด็นสำคัญ: เลือกตัวแบ่งที่ตรงกับความหมาย — สรุปโมเดลและวิธีแก้ไข HTML WYSIWYG ของ ToolAcre ให้คุณตรวจสอบได้ว่าแต่ละคีย์สร้างองค์ประกอบใด
เลือกตัวแบ่งที่ตรงกับเนื้อหา แต่ตรวจสอบแทนที่จะคาดเดาการกดปุ่ม ToolAcre ให้สิทธิ์การเข้าถึงแหล่งที่มาโดยตรง ยอมรับ p และ br คลาย div และแสดงการเรนเดอร์แบบแซนด์บ็อกซ์ ข้อเท็จจริงเหล่านั้นสนับสนุนขั้นตอนการทำงานที่ทำซ้ำได้โดยไม่ต้องให้คำมั่นสัญญาเกี่ยวกับ Enter หรือ Shift+Enter
สร้างที่อยู่และบันทึกย่อ สลับโหมดสองครั้ง และตรวจสอบให้แน่ใจว่าโครงสร้างที่ต้องการนั้นผ่านการฆ่าเชื้อแล้ว หากปลายทางใช้ช่องว่างที่น่าประหลาดใจ ให้ตรวจสอบ CSS ของปลายทางนั้น แทนที่จะแทรก HTML ที่ว่างเปล่าลงไปอีก ความหมายที่มั่นคงเดินทางได้ดีกว่าการเว้นวรรคที่ปรับให้ดูตัวอย่างเดี่ยวๆ