วิธีการเขียนโค้ด HTML ได้เร็วขึ้น

Sep 10, 2025
วิธีการ
Write HTML faster
(เครดิตรูปภาพ: ในอนาคต)

เว็บไซต์ที่ทันสมัยต้องการรหัส HTML มากมาย เลย์เอาต์ที่ซับซ้อนที่มีมุมมองและสถานะต่าง ๆ ที่แตกต่างกันอาจเป็นเรื่องยากที่จะสร้างด้วยเครื่องมือแก้ไขข้อความง่ายๆ โชคดีที่มีโฮสต์ของเครื่องมือรุ่น HTML ที่นั่นเพื่อทำงานกับ ที่นี่เราดูอย่างรวดเร็วที่สองของเครื่องมือยอดนิยม Emmet และ Pug

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

ต้องการที่จะหักเลี้ยวรหัส? ลองเหล่านี้ ผู้สร้างเว็บไซต์ . หรือเพื่อความช่วยเหลือเป็นพิเศษระหว่างทางเลือก เว็บโฮสติ้ง บริการด้วยการสนับสนุนด้านเทคนิค

สร้าง HTML ในการบิน

เมื่อเขียน HTML จำนวนมากในครั้งเดียวการเขียนแท็กแต่ละอันด้วยมืออาจน่าเบื่อมากมาก ตัวอย่างเช่นเมื่อเขียนรายการลิงก์เราต้องตรวจสอบให้แน่ใจว่า & lt; ul & gt; & lt; li & gt; และ & lt; a & gt; แท็กเปิดและปิดทั้งหมดในสถานที่ที่เหมาะสม มิฉะนั้นลิงก์อาจไม่ทำงานและเค้าโครงหน้าทั้งหมดจะไปอย่างสมบูรณ์ Haywire

Emmet

เร่งกระบวนการ HTML และ CSS ของคุณด้วย Emmet (เครดิตภาพ: Emmet.io)

วิธีการใช้ Emmet

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

nav>ul>li*3>a.chapter{Chapter $ of 3}

Emmet จะตรวจจับองค์ประกอบนี้แยกวิเคราะห์องค์ประกอบลงใน HTML มาตรฐานตามที่แสดงด้านล่าง ดูอย่างรวดเร็วที่องค์ประกอบ Emmet แสดงให้เห็นว่า & lt; li & gt; ถูกคูณด้วย ( * 3 ) และแต่ละคน & lt; li & gt; อินสแตนซ์จะถูกเรียกว่าบทตามด้วยหมายเลขที่เหมาะสม (สูงสุด 3)

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

 & lt; nav & gt;
  & lt; ul & gt;
    & lt; li & gt; & lt; a href = "class =" บท "& gt; บทที่ 1
 3 & lt; / a & gt; & lt; / li & gt;
    & lt; li & gt; & lt; a href = "class =" บท "& gt; บทที่ 2
 3 & lt; / a & gt; & lt; / li & gt;
    & lt; li & gt; & lt; a href = "class =" บท "& gt; บทที่ 3
 3 & lt; / a & gt; & lt; / li & gt;
  & lt; / ul & gt;
& lt; / nav & gt;

Emmet ยังตระหนักถึงบริบท ตัวอย่างเช่นถ้าเรากำลังแก้ไข & lt; ตาราง & gt; เป็นไปได้ว่าเราจะต้องการบางอย่าง & lt; tr & gt; (นี่คือแถว) องค์ประกอบเพื่อเติมเต็ม สิ่งที่เราต้องทำคือระบุจำนวนที่เราต้องการ

นี่เป็นเพียงตัวอย่างด่วนของสิ่งที่ Emmet สามารถทำได้ แต่มีตัวเลือกการกำหนดค่ามากมายที่มีอยู่ สิ่งเหล่านี้รวมถึงการตัดต่อ CSS, BEM (Modifier องค์ประกอบบล็อก) และมีแม้แต่เครื่องกำเนิดไฟฟ้า ipsum lorem

นอกจากนี้ยังเป็นที่น่าสังเกตว่าบรรณาธิการรหัสส่วนใหญ่มี Emmet สร้างขึ้นหรือสนับสนุนผ่านปลั๊กอิน คุณสามารถหาข้อมูลเพิ่มเติมเกี่ยวกับเรื่องนี้ใน เอกสาร Emmet หน้า.

ใช้ปั๊กสำหรับเนื้อหาแบบไดนามิก

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

ก้าวไปข้างหน้าปั๊ก นี่เป็นเครื่องมือสำหรับการเทมเพลตสำหรับ HTML คุณสามารถเขียนหน้าในรูปแบบ ". pug" และปั๊กจะอ่านไฟล์นั้นฉีดข้อมูลแบบไดนามิกบางอย่างลงในมันและส่งคืน HTML มาตรฐาน ตัวอย่างด้านล่างนี้เป็นวิธีที่คุณจะเขียนรหัสในปั๊กเพื่อสร้าง HTML เดียวกันกับตัวอย่าง Emmet (ด้านบน) 

 ul
  แต่ละ val ใน [1, 2, 3]
    หลี่
      A (href = "" คลาส = "บท") บท
# {val} ของ 3

ไฟล์ปั๊กใช้การเยื้องเพียงอย่างเดียวเพื่อระบุการซ้อนมันสามารถวนซ้ำกว่าค่าเพื่อสร้าง HTML จำนวนมากในการผ่านครั้งเดียวไฟล์ ". pug" เหล่านี้ได้รับการออกแบบให้นำกลับมาใช้ซ้ำหลายครั้งในโครงการ

ปั๊กสามารถติดตั้งจากผู้จัดการแพ็คเกจ npm .แต่ถ้าคุณต้องการข้อมูลเพิ่มเติมเกี่ยวกับวิธีการเริ่มต้นกับปั๊กจ่ายการเยี่ยมชม เว็บไซต์ .

เนื้อหานี้ปรากฏในนิตยสาร Web Designer

อ่านเพิ่มเติม:

  • 10 ที่ดีที่สุด Frameworks CSS
  • ภาพเคลื่อนไหว CSS ตัวอย่างเพื่อสร้างใหม่
  • 8 แท็ก HTML ที่คุณต้องใช้ (และ 5 เพื่อหลีกเลี่ยง)

วิธีการ - บทความยอดนิยม

วิธีใช้ Gravity Sketch

วิธีการ Sep 10, 2025

(เครดิตรูปภาพ: Gravity Sketch) Gravity Sketch, เครื่องมือการออ�..

ผู้ออกแบบ Affinity: วิธีการใช้ข้อ จำกัด

วิธีการ Sep 10, 2025

ผู้ออกแบบ Affinity เป็นที่นิยม ศิลปะเวกเตอร์ ..

สร้างวัสดุกระเบื้องในนักออกแบบสาร

วิธีการ Sep 10, 2025

นักออกแบบสารเป็นเครื่องมือที่ยอดเยี่ยมสำหรั..

8 ความลับการรักษาความปลอดภัย WordPress ที่สำคัญ

วิธีการ Sep 10, 2025

ในช่วง 15 ปีที่ผ่านมา WordPress ได้กลายเป็นระบบการจัดการเนื้อหาที่ได้รับค�..

แปลงภาพถ่ายเป็นชุด VR

วิธีการ Sep 10, 2025

โดยทั่วไปแล้วเมื่อมีคนกล่าวถึงความเป็นจริงท..

วิธีการสร้างโลกสำหรับโรงภาพยนตร์

วิธีการ Sep 10, 2025

เมื่อถูกขอให้ทำเวิร์กช็อปในการสร้างสภาพแวดล..

พลังที่เหลือเชื่อของ Flexbox

วิธีการ Sep 10, 2025

Flexbox หรือเค้าโครงกล่องที่ยืดหยุ่นเป็นโมดูลเค้�..

วิธีการรับรูปแบบ Zbrush ของคุณเข้าสู่ Maya

วิธีการ Sep 10, 2025

สำหรับสิ่งนี้ กวดวิชามายา ฉันจะแสดงให้ค�..

หมวดหมู่