ย้อนกลับไปในสมัยก่อน เมื่อมาตรฐาน HTML กลายเป็นเป้าหมายที่เคลื่อนไหว ไม่สำคัญว่าคุณจะสิ้นสุดแท็ก <p> อย่างถูกต้องหรือแยกกฎการจัดรูปแบบออกจากโค้ดสไตล์ของคุณ แท็กที่ไม่ตรงกัน คุณลักษณะที่ขาดหายไป องค์ประกอบที่ซ้อนกันไม่ดี - การขาดมาตรฐานที่นำมาใช้อย่างกว้างขวางส่งผลให้เกิดข้อผิดพลาดเหล่านี้และข้อผิดพลาดอื่น ๆ แต่เนื่องจากเบราว์เซอร์ส่วนใหญ่มีระบบอัจฉริยะในตัวเพื่อหลีกเลี่ยงข้อผิดพลาดเหล่านี้ นักพัฒนาส่วนใหญ่ คุณจะไม่ได้ตระหนักถึงการมีอยู่ของมันเลย .
แม้ว่าเบราว์เซอร์เองจะพยายามแก้ไขข้อผิดพลาดเหล่านี้ แต่ไม่ได้หมายความว่าคุณสามารถเพิกเฉยต่อปัญหาเหล่านี้ได้ เพื่อให้หน้าเว็บของคุณทำงานอย่างสม่ำเสมอในทุกเบราว์เซอร์ HTML ของคุณจะต้องสอดคล้องกับกฎและไวยากรณ์ที่กำหนดไว้ในมาตรฐาน W3C โดยสมบูรณ์ มีเครื่องมือมากมายเพื่อให้บรรลุข้อกำหนดนี้ ทั้งทางออนไลน์และออฟไลน์ บทความนี้จะกล่าวถึงหนึ่งในนั้น พวกเขา: HTML Tidy ที่ยอดเยี่ยมมาก
HTML Tidy เป็นเครื่องมือตรวจสอบ HTML ฟรี ได้รับการออกแบบมาเพื่อตรวจสอบโค้ด HTML ของคุณและชี้ตำแหน่งที่ไม่สอดคล้องกับมาตรฐานที่เผยแพร่โดย W3C โดยสมบูรณ์ สามารถใช้ในการวิเคราะห์ไฟล์ HTML หรือสตริงที่มีคำสั่ง HTML ได้ สามารถทำการแก้ไขที่จำเป็นโดยอัตโนมัติเพื่อให้โค้ดเป็นไปตามมาตรฐานที่เกี่ยวข้อง
ติดตั้ง
HTML Tidy ใช้งานได้ฟรีและสามารถทำงานบนแพลตฟอร์ม Windows, Macintosh และ *NIX ได้ เวอร์ชันไบนารี่พร้อมใช้งานทันที หากคุณใช้แพลตฟอร์ม *NIX คุณอาจต้องการคอมไพล์และติดตั้งจากซอร์สโค้ดด้วยตัวเอง นี่คือสิ่งที่คุณสามารถทำได้ ทำ: แตกไฟล์ต้นฉบับไปยังโฟลเดอร์ชั่วคราวของคุณและดำเนินการติดตั้งคอมไพล์พื้นฐาน เช่นนี้:
เชลล์> cd /tmp/tidy/build/gmake
เปลือก> ทำ
เชลล์> ทำการติดตั้ง
เมื่อกระบวนการนี้เสร็จสมบูรณ์ คุณควรจะสามารถค้นหา Tidy เวอร์ชันไบนารีที่คอมไพล์แล้วได้ในโฟลเดอร์ /tmp/tidy/bin/tidy คัดลอกไฟล์นี้ไปยังโฟลเดอร์ระบบของคุณ /usr/local/bin / เพื่อให้เข้าถึงได้ง่ายกว่า . ตอนนี้คุณพร้อมที่จะใช้เครื่องมือนี้แล้ว
การใช้งานขั้นพื้นฐาน
เมื่อติดตั้งเวอร์ชันไบนารีแล้ว คุณสามารถเริ่มใช้เวอร์ชันนี้เพื่อตรวจสอบโค้ด HTML ได้ทันที รายการ A จะแสดงตัวอย่างง่ายๆ:
รายการก:
เปลือก> เรียบร้อย -e -q index.html
บรรทัด 1 คอลัมน์ 1 - คำเตือน: ไม่มีการประกาศ <!DOCTYPE>
บรรทัดที่ 2 คอลัมน์ 1 - คำเตือน: การแทรกองค์ประกอบ 'ชื่อ' ที่ขาดหายไป
บรรทัดที่ 4 คอลัมน์ 1 - คำเตือน: <body> แอตทริบิวต์ที่เป็นกรรมสิทธิ์ leftmargin
บรรทัดที่ 6 คอลัมน์ 1 - คำเตือน: <table> ความสูงของแอตทริบิวต์ที่เป็นกรรมสิทธิ์
บรรทัดที่ 6 คอลัมน์ 1 - คำเตือน: <table> ขาดแอตทริบิวต์สรุป
บรรทัดที่ 11 คอลัมน์ 37 - คำเตือน: <img> ไม่มีแอตทริบิวต์ alt
บรรทัดที่ 15 คอลัมน์ 1 - คำเตือน: <table> ขาดแอตทริบิวต์สรุป
บรรทัดที่ 17 คอลัมน์ 50 - คำเตือน: <img> ไม่มีแอตทริบิวต์ alt
ในตัวอย่างนี้ Tidy พบข้อผิดพลาดที่อาจเกิดขึ้นแปดรายการในไฟล์และพิมพ์คำเตือนสำหรับข้อผิดพลาดแต่ละรายการ โปรดทราบว่าข้อผิดพลาดเหล่านี้ไม่ใช่ข้อผิดพลาดร้ายแรง แต่เพียงเตือนว่าบางส่วนของโค้ดไม่ถูกต้องมากนัก
คุณสามารถแก้ไขไฟล์ต้นฉบับได้โดยอัตโนมัติโดยเพิ่มตัวเลือก -m (ตัวแก้ไข) ในบรรทัดคำสั่ง:
เปลือก> เรียบร้อย -m -q index.html
หากคุณต้องการทดสอบเว็บไซต์ขนาดใหญ่ คุณสามารถใช้ไวด์การ์ดในบรรทัดคำสั่งเพื่อทดสอบไฟล์ทั้งหมดในโฟลเดอร์ (แทนที่จะเป็นเพียงไฟล์เดียว):
เปลือก> เรียบร้อย -m -q *.html
หากคุณต้องการให้ Tidy ช่วยเขียนเว็บเพจที่แก้ไขแล้วลงในไฟล์ใหม่ (แทนที่จะเขียนทับไฟล์ต้นฉบับ) ให้ใช้ตัวเลือก -output ด้วยชื่อไฟล์ใหม่ ดังตัวอย่างต่อไปนี้:
เปลือก> เรียบร้อย -output index.html.new -q index.html
คุณสามารถส่งออกข้อผิดพลาดทั้งหมดไปยังไฟล์บันทึกแยกต่างหากเพื่อการตรวจทานในภายหลังผ่านตัวเลือก -e ("ข้อผิดพลาด"):
เปลือก> เรียบร้อย -f error.log index.html
โปรดทราบว่าหากโค้ด HTML ของคุณมีโค้ด PHP, ASP หรือ JSP ที่ฝังอยู่ Tidy จะเพิกเฉยต่อโค้ดเหล่านั้นและปล่อยไว้เดิม ซึ่งหมายความว่าคุณสามารถเรียกใช้ Tidy tools บนสคริปต์ฝั่งเซิร์ฟเวอร์ได้ เพื่อตรวจสอบส่วนของโค้ด HTML นี่คือ ตัวอย่าง:
เชลล์> เรียบร้อย -e -q processor.php
คุณยังสามารถรันเครื่องมือ Tidy แบบโต้ตอบได้ โดยเรียกเฉพาะไฟล์โปรแกรมโดยไม่ต้องต่อท้ายอาร์กิวเมนต์ใดๆ ในตัวอย่างนี้ Tidy จะรออินพุตจากคอนโซลและตรวจสอบข้อผิดพลาด รายการ B จะแสดงตัวอย่างนี้:
รายการบี
เปลือก> เป็นระเบียบเรียบร้อย
<html>
บรรทัด 1 คอลัมน์ 1 - คำเตือน: ไม่มีการประกาศ <!DOCTYPE>
<หัว>
<title>นี่คือการทดสอบ
</หัว>
บรรทัดที่ 3 คอลัมน์ 1 - คำเตือน: ไม่มี </title> ก่อน </head>
<body ขอบซ้าย=0>
<p>
นี่เป็นย่อหน้าที่สิ้นสุดอย่างไม่ดี
</ร่างกาย>
</html>
บรรทัดที่ 5 คอลัมน์ 1 - คำเตือน: <body> แอตทริบิวต์ที่เป็นกรรมสิทธิ์ leftmargin
ข้อมูล: เนื้อหาเอกสารดูเหมือนเป็นกรรมสิทธิ์ของ HTML
คำเตือน 3 รายการ พบข้อผิดพลาด 0 รายการ!
โปรดทราบว่านอกเหนือจากการเตือนข้อผิดพลาดแบบเรียลไทม์แล้ว Tidy ยังสามารถพิมพ์โค้ดเวอร์ชันที่ถูกต้องที่ส่วนท้ายของอินพุตได้อีกด้วย:
<html>
<หัว>
<meta name=เนื้อหาตัวสร้าง=
HTML Tidy สำหรับ Linux/x86 (เวอร์ชัน 1 กันยายน 2548) ดูที่ www.w3.org>
<title>นี่คือการทดสอบ</title>
</หัว>
<body ขอบซ้าย=0>
<p>นี่เป็นย่อหน้ายุติอย่างเลวร้าย</p>
</ร่างกาย>
</html>
แอปพลิเคชั่นขั้นสูง
คุณยังสามารถควบคุมวิธีที่ Tidy แก้ไขไฟล์ได้ด้วยการส่งพารามิเตอร์เฉพาะบนบรรทัดคำสั่ง ตัวอย่างเช่น หากต้องการให้ Tidy เยื้องโค้ดใหม่อย่างถูกต้อง คุณสามารถเพิ่มตัวเลือก -i ("indent") :
เปลือก> เรียบร้อย - เอาต์พุต new.html -i index.html
หากต้องการแทนที่ <font> และองค์ประกอบการจัดรูปแบบอื่น ๆ ที่เกี่ยวข้องกับกฎสไตล์ CSS คุณสามารถใช้ตัวเลือก -c ("clear"):
เปลือก> เรียบร้อย - เอาต์พุต new.html -c index.html
ตามค่าเริ่มต้น Tidy จะใช้อักษรตัวพิมพ์เล็กสำหรับแท็กและแอตทริบิวต์ทั้งหมดในไฟล์ HTML หากคุณต้องการใช้อักษรตัวพิมพ์ใหญ่ คุณสามารถเพิ่มตัวเลือก -u ("ตัวพิมพ์ใหญ่") ดังที่แสดงในตัวอย่างต่อไปนี้:
เปลือก> เรียบร้อย - เอาต์พุต new.html -c -u index.html
หากต้องการตัดข้อความตามความกว้างของบรรทัด คุณสามารถเพิ่มตัวเลือก -w ("การตัดบรรทัด") ด้วยความกว้างของบรรทัดที่ระบุ ดังที่แสดงในตัวอย่างต่อไปนี้:
เปลือก> เรียบร้อย - เอาต์พุต new.html -w 40 index.html
คุณสามารถแปลงเอกสาร HTML เป็นเอกสาร XHTML ที่มีรูปแบบถูกต้องได้โดยการเพิ่มตัวเลือก -asxhtml:
เปลือก> เรียบร้อย - เอาต์พุต new.html -asxhtml index.html
การดำเนินการย้อนกลับสามารถทำได้ผ่านตัวเลือก -ashtml:
เปลือก> เรียบร้อย - เอาต์พุต new.html -ashtml index.html
หากคุณต้องการปรับเปลี่ยนตัวเลือกเริ่มต้นของ Tidy อย่างมาก ทางที่ดีควรใส่ตัวเลือกเหล่านี้ไว้ในไฟล์การกำหนดค่าแยกต่างหากซึ่งคุณสามารถอ้างอิงได้ทุกครั้งที่คุณเรียกใช้โปรแกรม รายการ C จะแสดงตัวอย่างไฟล์การกำหนดค่า:
รายการค:
เปล่า: ใช่ # ลบ HTML ที่เป็นกรรมสิทธิ์
ประเภทเอกสาร: auto # ตั้งค่าประเภทเอกสาร
drop-empty-paras: ใช่ # ลบแท็ก <p> ว่างโดยอัตโนมัติ
แก้ไขแบ็กสแลช: ใช่ # แทนที่ด้วย / ใน URL
คุณสมบัติตามตัวอักษร: ใช่ # รักษาช่องว่างในค่าแอตทริบิวต์
ตัวอักษรล่าง: ใช่ # แปลงค่าแอตทริบิวต์เป็นตัวพิมพ์เล็ก
output-xhtml: ใช่ # สร้างเอาต์พุต XHTML ที่ถูกต้อง
เครื่องหมายคำพูด: ใช่ # แทนที่ & ด้วย &
เครื่องหมายคำพูด: ใช่ # แทนที่ด้วย
แอตทริบิวต์ที่ซ้ำกัน: Keep-last # ใช้คุณสมบัติสุดท้ายของแอตทริบิวต์ที่ซ้ำกัน
เยื้อง: ใช่ # เยื้องรหัสโดยอัตโนมัติ
เยื้องช่องว่าง: 2 # จำนวนช่องว่างที่จะเยื้อง
wrap-php: ไม่มีข้อความ # wrap อยู่ในแท็ก PHP
การเข้ารหัสถ่าน: การเข้ารหัสอักขระ ascii # ที่จะใช้
เครื่องหมายเป็นระเบียบเรียบร้อย: no # ละเว้นข้อมูลเมตาที่เป็นระเบียบในรหัสที่ถูกต้อง
เมื่อจัดระเบียบไฟล์ คุณสามารถบอกให้ Tidy ใช้การตั้งค่าเหล่านี้ได้โดยเพิ่มตัวเลือก -config ลงในบรรทัดคำสั่ง:
เปลือก> เรียบร้อย - เอาต์พุต a.html -configconfig.tidy index.html
คุณสามารถรับรายการตัวเลือกการกำหนดค่าด้วยตัวเลือก -help-config:
เปลือก> เรียบร้อย -help-config...quote-ampersand Boolean y/n,
ใช่/ไม่ใช่, t/f, จริง/เท็จ, 1/0เครื่องหมายคำพูดบูลีน y/n,
ใช่/ไม่ใช่ t/f จริง/เท็จ 1/0quote-nbsp บูลีน y/n
ใช่/ไม่ใช่, t/f, จริง/เท็จ, 1/0 คุณสมบัติซ้ำเก็บก่อน
keep-lastreplace-color Boolean ใช่/ไม่ใช่
t/f, จริง/เท็จ, 1/0 แสดงเฉพาะเนื้อหาบูลีนเท่านั้น y/n,
ใช่/ไม่ใช่, t/f, จริง/เท็จ, 1/0...
หรือใช้ตัวเลือก -show-config เพื่อดูภาพรวมของการตั้งค่าการกำหนดค่าปัจจุบัน:
เชลล์> เรียบร้อย -show-config...show-body-only
ข้อผิดพลาดบูลีน noshow จำนวนเต็ม
6show-คำเตือนสไตล์บูลีนใช่สไลด์
Stringsplit Boolean หมายเลข...
สุดท้าย คุณสามารถใช้ตัวเลือก -h เพื่อขอความช่วยเหลือจากบรรทัดคำสั่ง:
เปลือก> เรียบร้อย -h
เพียงเท่านี้ หวังว่าคุณจะพบว่า Tidy เป็นเครื่องมือที่มีค่าอย่างยิ่งในการช่วยให้ไซต์ของคุณสอดคล้องกับมาตรฐานการเผยแพร่ W3C โดยสมบูรณ์ ประเด็นต่างๆ ในคู่มือนี้จะช่วยให้คุณมีแนวคิดในการควบคุมเครื่องมือ HTML Tidy รหัสของคุณและช่วยให้คุณใช้เครื่องมือนี้ได้อย่างมีประสิทธิภาพมากขึ้น