บทความ IT เจ๋งๆ
15 HTML Features ที่คุณ (อาจ) ยังไม่เคยรู้จักหรือใช้งาน
23-ธ.ค.-22
คัมภีร์เทพ IT
ในช่วงไม่กี่ปีที่ผ่านมา Front-End Development ได้ถูกปฏิวัติให้ดีขึ้น การเกิดขึ้นของ SPA Framework ทำให้เกิดการเปลี่ยนแปลงครั้งใหญ่ในแวดวง Web Development แต่ขณะเดียวกันคุณก็อาจพลาด Features พื้นฐานของ HTML ไป ดังนั้นบทความนี้จะกล่าวถึง 15 HTML Features ที่คุณ (อาจ) ยังไม่เคยรู้จักหรือใช้งาน
1. Content Editable
contenteditable เป็น Attribute ที่สามารถถูก Set ค่าใน Element เพื่อให้ Content สามารถแก้ไขได้ มันทำงานร่วมกับ Elements เช่น DIV, P, UL เป็นต้น คุณจำเป็นต้องระบุพวกมัน เช่น <element contenteditable=”true|false”>
2. Details Tag
<details> Tag จะเตรียมรายละเอียดตามความต้องการไว้ให้ User โดยค่า Default แล้ว Widget จะถูกปิดการใช้งาน แต่เมื่อถูกเปิดการใช้งาน มันจะช่วยขยายและแสดง Content อยู่ภายใน
<summary> Tag จะถูกใช้งานกับ <details> Tag เพื่อระบุหัวข้อที่สามารถมองเห็นได้
3. Datalist
<datalist> Tag จะถูกใช้เพื่อระบุรายการของ Pre-Defined Options และมี Autocomplete Feature ไว้ให้
4. Range
range Input Type จะทำงานเหมือน Slider Range Selector
5. Meter
<meter> Tag จะกำหนดการวัดแบบ Scalar ภายใน Range ที่กำหนด หรือตามค่าของเศษส่วน
6. Progress
<progress> Tag จะแสดงถึงความคืบหน้าของ Task
7. Color Picker
มันเป็นสิ่งที่ช่วยให้คุณ สามารถเลือกสีที่ต้องการได้อย่างง่ายดาย
8. Mark Content
เราจะใช้ <mark> Tag เพื่อใช้เน้น Content ที่เป็น Text
9. Blockquote & Cite
หาก Content ของคุณ มาจากการรวบรวมของหลาย ๆ Sources คุณก็ควรจะอ้างอิงถึงแหล่งที่มาเหล่านั้นด้วย
10. Abbreviation
"abbr" ย่อมาจากคำว่า Abbreviation หรือตัวย่อ นั่นเอง แนวคิดก็คือ หากคุณใช้ Title (เช่น “Mr.”) หรือตัวย่อ (เช่น “SHIELD”) เจ้า abbr Tag จะช่วยระบุว่า คำย่อนั้นหมายถึงอะไร
11. <del> and <ins>
จริง ๆ แล้ว มี Tag สำหรับ Text ที่ถูกขีดฆ่า และมีอีก Tag หนึ่งที่จะระบุถึง Text ที่ถูกแทนที่
12. Output
<output> Tag จะใช้เพื่อแสดงผลของการคำนวณ โดยทั่วไปแล้ว Element นี้ จะกำหนด Area ที่จะถูกใช้ในการแสดงผลจากการคำนวณบางอย่างในรูปแบบ Text
13. Hidden
เมื่อพูดถึงการซ่อน Elements เราส่วนใหญ่มักจะลองใช้วิธีการต่าง ๆ เช่น จะใช้ opacity:0, visibility:hidden, height:0; width:0, display:none ใน CSS File ของเรา ซึ่งพวกมันมี Use Cases ของตัวเองและทำงานใน Layouts ที่แตกต่างกัน สำหรับตัวเลือกอื่นที่คล้ายกันก็คือ hidden HTML Attribute หาก Element ใดมีการระบุเป็น hidden ไว้ Element นั้นก็จะถูกซ่อนไว้
14. Time
<time> Tag จะถูกใช้เพื่อกำหนด time (หรือ datetime) ที่ต้องการ
datetime Attribute ของ Element นี้ ถูกใช้เพื่อแปลงเวลาให้อยู่ในรูปแบบที่ Machine สามารถอ่านได้ เพื่อให้ Browsers สามารถเสนอการเพิ่ม date reminders ผ่านปฏิทินของ User รวมทั้ง Search Engines ก็สามารถสร้างผลการค้นหาที่ชาญฉลาดขึ้น
15. Audio
<audio> Tag จะกำหนดเสียงและมี 3 Files ได้แก่ MP3, WAV และ OGG ที่รองรับและสามารถใช้กับ Tag นี้ได้ จากนั้น Browser จะทำการเลือก File แรกที่รองรับการใช้งาน
ที่มา: https://medium.com/codex/
รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert
|
|
อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ
|
|
บทความล่าสุด