a11y.skipToMainContent
1

HTML/CSS/ JS Sandbox

เขียน HTML, CSS และจาวาสคริปต์ในเครื่องมือแก้ไขแท็บ 3 ตัว และดูตัวอย่างสดทันที ดีสําหรับการส่งเสริมการสอน หรือการทดลองอย่างรวดเร็ว.

Preview

Was this tool helpful?
Send output to:
Advertisement

How to use HTML/CSS/JS Sandbox

  1. เขียนหรือวาง HTML ในแท็บ HTML, CSS ในแท็บ CSS และ JS ในแท็บ JS.
  2. เปิด/ ปิด การเปิดอัตโนมัติ เพื่อดูการเปลี่ยนแปลงที่ปรากฎตามที่คุณพิมพ์อยู่ หรือคลิกที่ตําแหน่ง เพื่อรีเฟรชภาพตัวอย่างด้วยตนเอง.
  3. การ ตรวจ สอบ และ การ ทํา เครื่องหมาย — กล่อง ทราย ที่ มี กรอบ ป้องกัน รหัส ของ คุณ ไว้.
  4. คลิกดาวน์โหลด HTML เพื่อบันทึกงานของคุณเป็นแฟ้มแบบยืนยง.

อะไรคือ?

กล่องทรายนี้รวมเอกสาร HTML, CSS และ JS ของคุณ เข้าเป็นเอกสารเดียวและแปลงเป็นรูปแบบ Isple ที่ฝังอยู่ในแผ่นทราย โดยใช้ที่อยู่ URL แบบพิมพ์แข็ง การปรับปรุงภาพตัวอย่างอัตโนมัติ (deplutd 500 มม.) เมื่อมีการใช้งานการสลับการเปิดอัตโนมัติ หรือทําด้วยตนเองเมื่อคุณคลิกที่การทํางาน การประมวลผลทั้งหมดแยกอยู่ในกรอบภาพ — ไม่มีสคริปต์ใด ๆ ในกล่องทรายสามารถเข้าถึงหน้าแม่ได้

ใช้แท็บเพื่อสลับระหว่างบรรณาธิการ ดาวน์โหลดงานของคุณเป็นแฟ้ม HTML แบบมาตรฐาน ตัวอย่างปริยายเป็นโปรแกรมขัดแย้งง่าย ๆ คุณสามารถแก้ไขหรือแทนที่ได้ทั้งหมด

Advertisement

FAQ

นี่เป็นรหัสเพน หรือ เจเอสไฟเดิล?
มันเป็นทางเลือกของลูกค้าที่เบากว่า ไม่มีบัญชี ไม่มีเซิร์ฟเวอร์ ไม่มีขั้นตอนสร้าง แค่เขียนโค้ด แล้วดูผลทันที สําหรับโครงการที่ซับซ้อนที่มีหลายไฟล์, CodePen หรือ StackBlitz เป็นตัวเลือกที่ดีกว่า.
ฉันสามารถใช้ห้องสมุดภายนอกเช่น react?
ใช่ — รวมทั้งลิงก์ CDN ในรูปแบบ HTML ของคุณด้วย (เช่น <code> http; tracks= "httpspknown.com/react/umd/react.js.js"> (2003). กล่องทรายดําเนินการสิ่งที่คุณใส่ใน HTML, CSS, และ เจเอส แผง.
รหัสฉันปลอดภัยไหม?
ไม่ ทุกอย่างอยู่ในเบราว์เซอร์ของคุณ ใช้ปุ่มดาวน์โหลด HTML เพื่อบันทึกงานของคุณไว้ภายในเครื่อง ไม่มีคลังของแม่ข่ายข้างเคียง.

Related tools

Author

MW
Marcus Webb"The DevTool Craftsman"

Full-Stack Developer & Tools Architect

Marcus has been writing code since the dial-up era. He has contributed to open-source developer tools, built CI/CD pipelines for startups, and debugged production incidents at 3 AM more times than he would like to admit. His philosophy is that the best developer tool is the one that gets out of your way, and he writes about practical tooling that helps teams ship faster with fewer headaches.

← Back to Developer Tools · All tags

Last updated:

Advertisement