Softonic

ตัวจัดรูปแบบ HTML

ขั้นตอน 1 / 3

วาง HTML ได้สูงสุด 100,000 อักขระ โดยจะไม่มีการเรียกใช้โค้ด

ถัดไป: เลือกระยะเยื้อง

วาง HTML เลือกการเยื้องสองหรือสี่ช่องว่าง แล้วตรวจสำเนาที่อ่านง่ายขึ้น เครื่องมือจะเพิ่มการเยื้องเฉพาะส่วนที่มีโครงสร้างชัดเจน โดยคงข้อความ แอตทริบิวต์ และเนื้อหาในบล็อกที่ต้องรักษารูปแบบไว้ตามเดิม หากโครงสร้างไม่ชัดเจน ข้อมูลที่วางไว้จะไม่เปลี่ยน และจะแสดงคำเตือนโดยไม่มีผลลัพธ์ที่จัดรูปแบบแล้ว

จัดรูปแบบ HTML ในสามขั้นตอน

  1. 1

    วาง HTML ของคุณ

    ป้อนมาร์กอัปที่ต้องการจัดให้อ่านง่าย จะวางเฉพาะส่วนหรือทั้งเอกสารก็ได้

  2. 2

    เลือกการเยื้อง

    เลือกสองหรือสี่ช่องว่างสำหรับบล็อกที่ซ้อนกัน การเลือกนี้เปลี่ยนรูปแบบการจัดวางผลลัพธ์ โดยไม่เปลี่ยนแท็กหรือแอตทริบิวต์ของ HTML

  3. 3

    ตรวจและนำผลลัพธ์ไปใช้

    เปรียบเทียบผลลัพธ์กับต้นฉบับ แล้วคัดลอกหรือดาวน์โหลดหากเหมาะกับโครงการของคุณ หากมีคำเตือน จะไม่มีผลลัพธ์ที่จัดรูปแบบแล้ว

สิ่งที่เปลี่ยนและสิ่งที่คงเดิม

เครื่องมือเยื้องบล็อกที่มีโครงสร้างชัดเจน โดยไม่แยกประโยคที่อยู่คั่นระหว่างแท็ก ตัวอย่างเช่น โค้ดที่เขียนติดกันนี้:

<main><section><h2>ข่าว</h2><p>อ่าน <a href="/news">ข่าวล่าสุด</a></p></section></main>

จัดให้อ่านง่ายได้ดังนี้:

<main>
  <section>
    <h2>ข่าว</h2>
    <p>อ่าน <a href="/news">ข่าวล่าสุด</a></p>
  </section>
</main>

คำรอบลิงก์และค่า href คงเดิม หากโครงการของคุณใช้การเยื้องสี่ช่องว่าง ก็เลือกเปลี่ยนได้ เครื่องมือไม่เรียงแอตทริบิวต์ ไม่เปลี่ยนเครื่องหมายอัญประกาศ ไม่แก้เอนทิตี ไม่ย่อโค้ด และไม่ซ่อม HTML

ช่องว่างระหว่างองค์ประกอบอาจมีผลต่อ CSS สคริปต์ และเทมเพลต การเยื้องบล็อกที่ชัดเจนอาจเพิ่มการขึ้นบรรทัดใหม่และช่องว่างระหว่างแท็ก โปรดตรวจผลลัพธ์ก่อนนำไปใช้ในเอกสารที่ไวต่อช่องว่าง เนื้อหาภายใน <pre>, <code>, <textarea>, <script> และ <style> จะคงตามที่ป้อน

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

คำถามที่พบบ่อย

ไม่ เครื่องมือเปลี่ยนเฉพาะการเยื้องเมื่อโครงสร้างชัดเจน ไม่ได้ตรวจหาข้อผิดพลาดของ HTML ทุกกรณีหรือเพิ่มแท็กที่หายไป คำเตือนหมายถึงเครื่องมือไม่มั่นใจพอที่จะจัดรูปแบบต้นฉบับ

เครื่องมือคงข้อความที่อยู่ในบรรทัดเดียวกัน รวมถึงช่องว่างรอบองค์ประกอบในบรรทัด แต่อาจเพิ่มช่องว่างระหว่างบล็อกที่มีโครงสร้างชัดเจน จึงควรเปรียบเทียบผลลัพธ์ก่อนใช้ในเทมเพลตที่ไวต่อช่องว่าง

บล็อก pre, code, textarea, script และ style ที่สมบูรณ์จะคงตามที่ป้อน เครื่องมือไม่จัดรูปแบบเนื้อหาภายในใหม่

การจัดรูปแบบทำงานในเบราว์เซอร์ ขั้นตอนต่าง ๆ จะเก็บข้อมูลที่ป้อนในที่เก็บข้อมูลเซสชันของแท็บนี้ เพื่อใช้ต่อในแต่ละขั้นตอน

หากแท็กปิดที่ละไว้ทำให้ไม่แน่ใจว่าจะเยื้องอย่างไร ข้อมูลที่ป้อนจะคงเดิม และเครื่องมือจะแสดงคำเตือนโดยไม่มีผลลัพธ์ที่จัดรูปแบบแล้ว หากต้องการรูปแบบที่คาดเดาได้ ให้เพิ่มแท็กปิดให้ครบ

เครื่องมือที่เกี่ยวข้อง

ตัวสร้างการตั้งค่า Webpack

สร้าง webpack.config.js สำหรับ webpack 5 ทั้งแบบ JavaScript ล้วน React หรือ Vue พร้อม TypeScript, Babel, CSS หรือ Sass, รูปภาพ, HtmlWebpackPlugin, เซิร์ฟเวอร์สำหรับพัฒนา และคำสั่ง npm install

เครื่องแปลงฐานตัวเลข

แปลงตัวเลขระหว่างฐานสอง ฐานแปด ฐานสิบ ฐานสิบหก และฐานกำหนดเองตั้งแต่ 2 ถึง 36 พร้อมการแยกค่าประจำหลัก

อ้างอิงตัวอักษร HTML

รายการที่สามารถค้นหาได้ขององค์ประกอบ HTML พร้อมรหัสชื่อและรหัสตัวเลข รวมถึงฟังก์ชันสำเนาด้วยคลิกเดียวสำหรับตัวอักษรพิเศษและสัญลักษณ์ต่างๆ

ตัวแปลง Timestamp

แปลง timestamp ของ Unix ในหน่วยวินาทีหรือมิลลิวินาทีเป็นวันที่ที่อ่านง่ายในเขตเวลา UTC และเขตเวลาหลัก และแปลงวันที่กลับเป็นค่า epoch

เครื่องสุ่มที่อยู่

สร้างระเบียนคล้ายที่อยู่ 1–20 รายการสำหรับแบบจำลองและการทดสอบ ด้วยรูปแบบประเทศแบบย่อ

ตารางอ้างอิง ASCII

ตาราง ASCII ครบตั้งแต่ 0 ถึง 127 พร้อมค่าเลขฐานสิบ ฐานสิบหก ฐานแปด ฐานสอง และรูปแบบการอ้างอิงอักขระแบบตัวเลขของ HTML รวม NUL, LF และ DEL

เครื่องมือนี้มีให้บริการในภาษาอื่น