บทความ IT เจ๋งๆ
6 HTML Features ที่ไม่ค่อยมีใครสนใจ แต่มีประสิทธิภาพมาก
02-เม.ย.-21
คัมภีร์เทพ IT
HTML ถือเป็นแกนหลักสำคัญของ Website มันเป็น Markup Language ที่ทรงพลังและมี Features มากมายที่มีประโยชน์ต่อ Developers ด้วย HTML5 คุณสามารถสร้าง UI ที่ยอดเยี่ยมและใช้งานได้โดยไม่ต้องใช้ JavaScript หรือ CSS ในบทความนี้เรามาดู 6 HTML Features ที่ไม่ค่อยมีใครสนใจ แต่มีประสิทธิภาพมาก
1. Meter tag
Meter Tag <meter> เป็นหนึ่งใน Features ที่มีประโยชน์และมีประสิทธิภาพของ HTML มันช่วยให้คุณสร้าง Meter ได้โดยไม่ต้องใช้ JavaScript หรือ CSS
ดูตัวอย่าง Code ด้านล่าง:
Output:
คุณสามารถดูได้ใน Codepen ที่อยู่ด้านล่างนี้:
2. Attribute required
Attribute required จะช่วยให้คุณสามารถทำ Form Validation ได้โดยไม่ต้องใช้ JavaScript มันจะป้องกันไม่ให้สามารถ Submit Form ได้หากยังไม่ได้กรอกข้อมูลใด ๆ
นี่คือตัวอย่าง Code:
คุณสามารถดูได้ใน Codepen ที่อยู่ด้านล่างนี้:
3. Download attribute
Attribute download HTML ส่วนใหญ่จะใช้กับ Link Tags เพื่อให้ Users สามารถ Download Files จาก Website ไปยังคอมพิวเตอร์ของพวกเขาได้
นี่คือตัวอย่าง Code:
คุณจำเป็นต้องระบุชื่อ File ใน Attribute download และ Path ของ File ใน href Attribute
คุณสามารถดูได้ใน Codepen ที่อยู่ด้านล่างนี้:
4. HTML Drag & Drop
หนึ่งใน Features ที่มีประสิทธิภาพของ HTML ก็คือ Drag & Drop API ที่จะช่วยให้คุณสามารถลากและวาง Element ต่าง ๆ บน Web Page ได้
สิ่งที่คุณทำได้ก็คือ เพียงแค่ใช้ Attribute draggable กับ Element จากนั้นคุณอาจต้องใช้ JavaScript เล็กน้อย เพื่อจัดการกับ Drag & Drop Events
นี่คือตัวอย่าง Code:
5. Defer และ Async attributes
Attribute defer ถูกใช้กับ Script Tags เมื่อมีการ Link JavaScript Files กับ HTML มันใช้สำหรับ External Scripts เท่านั้น
นี่คือตัวอย่าง Code:
มันจะบอกให้ Browser ไม่ต้องรอ JavaScript File เมื่อ Render HTML สิ่งนี้จะทำการ Render DOM ก่อน จากนั้นจะทำการ Execute Script
ส่วน Attribute async จะมีความคล้ายคลึงกับ defer แต่มีข้อแตกต่างเพียงอย่างเดียวก็คือ async จะบอกให้ Browser Run Script ในขณะที่ Load UI ไปด้วย
คุณไม่จำเป็นต้องใส่ Script Tags ที่ด้านล่างของ Body Tag อีกต่อไป
6. Abbr tag
Tag <abbr> ใน HTML จะช่วยให้คุณสามารถแสดงชื่อย่อของคำ เมื่อวาง Mouse เหนือคำเหล่านั้น
นี่คือตัวอย่าง Code:
คุณสามารถดูได้ใน Codepen ที่อยู่ด้านล่างนี้:
ที่มา: https://javascript.plainenglish.io/
รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert
|
|
อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ
|
|
บทความล่าสุด