ต่อไปนี้เป็นแท็ก HTML ที่ไม่ได้ใช้ประโยชน์หรือเข้าใจผิด 10 รายการ บางทีพวกเขาอาจไม่เป็นที่รู้จักกันดี แต่มีประโยชน์มากในบางสถานการณ์
นักพัฒนาเว็บมักต้องการเข้าใจและเชี่ยวชาญหลายภาษาและเป็นผลให้การเรียนรู้ทุกอย่างในภาษาเป็นเรื่องยุ่งยาก แต่มันก็ง่ายที่จะพบว่าคุณไม่ได้ใช้ประโยชน์จากแท็กพิเศษ แต่มีประโยชน์มากขึ้นอย่างเต็มที่
แปลจาก: tutsplus
น่าเสียดายที่เรายังไม่ได้เข้าสู่ศักยภาพทั้งหมดของแท็ก HTML ที่ไม่ค่อยมีใครรู้จัก แต่มันจะไม่เข้าสู่อาณาจักรที่สายเกินไปและเริ่มเขียนรหัสเพื่อเปิดเผยพลังงานของแท็กที่ยังไม่ได้สำรวจเหล่านี้
ต่อไปนี้เป็นแท็ก HTML ที่ไม่ได้ใช้ประโยชน์หรือเข้าใจผิด 10 รายการ บางทีพวกเขาอาจไม่เป็นที่รู้จักกันดี แต่มีประโยชน์มากในบางสถานการณ์
1. <Cite>
ดูเหมือนว่าทุกคนจะคุ้นเคยกับแท็ก <lockquote> แต่คุณรู้จักน้องชายตัวเล็กของ <blockquote> <cite> หรือไม่? <cite> อนุญาตให้คุณกำหนดข้อความภายในองค์ประกอบเป็นข้อมูลอ้างอิง โดยทั่วไปเบราว์เซอร์จะใช้ตัวเอียงเพื่อแสดงข้อความในแท็ก <cite> แต่สามารถเปลี่ยนแปลงได้ด้วย CSs เล็กน้อย
แท็ก <cite> มีประโยชน์สำหรับการอ้างอิงไปยังไดเรกทอรีหรือเว็บไซต์อื่น ๆ นี่คือตัวอย่างของการใช้แท็กอ้างอิงในวรรค:
หนังสือองค์กรที่ก้าวหน้าของ David Allen ที่ทำงานให้สำเร็จ ทำให้เกิดพายุที่จะลืม 2. <PetGroup>
แท็ก <PetGroup> เป็นวิธีที่ยอดเยี่ยมในการกำหนดตัวเลือกการจัดกลุ่มในแท็กที่เลือก ตัวอย่างเช่นหากคุณต้องการจัดกลุ่มรายการภาพยนตร์ตามเวลาคุณสามารถทำได้:
12
<label for = showtimes> เวลาวางจำหน่าย </label> <select id = showtimes name = showtimes> <optgroup label = 1: 00 pm> </optgroup> <ตัวเลือกค่า = Titanic> Titanic </opovie> <opotion = nd> slumdog เศรษฐี value = bkrw> The Lion King </petion> <ตัวเลือกค่า = stf> superman </petion> </select>
การสาธิต:
สามารถแยกแยะรายการภาพยนตร์ได้ด้วยสายตา 3. <คำย่อ>
<คำย่อ> เป็นวิธีการกำหนดหรือตีความชุดของข้อความ เมื่อคุณใส่ข้อความโดยใช้แท็ก <sadronym> กับเมาส์ของคุณกล่องที่แสดงเนื้อหาของแท็กชื่อจะปรากฏด้านล่าง ตัวอย่างเช่น:
1
เว็บไซต์ Weibo <ชื่อตัวย่อ = ก่อตั้งขึ้นในปี 2549> Twitter </sconym> ได้หยุดทำงานบ่อยครั้งเมื่อเร็ว ๆ นี้
ตัวอย่าง:เว็บไซต์ Weibo Twitter หยุดทำงานเมื่อเร็ว ๆ นี้ 4. <dront>
แท็ก <drened> เป็นแท็กเล็ก ๆ ที่ไม่เด่นมาก แต่นั่นไม่ได้หมายความว่ามันไร้ประโยชน์ ตามชื่อแนะนำ <ที่อยู่> ช่วยให้คุณสามารถใช้แท็กความหมายใน HTML ฉลากขนาดเล็กนี้จะแสดงเนื้อหาในฉลากในตัวเอียงเริ่มต้น แน่นอนว่าการใช้สไตล์สามารถเปลี่ยนสไตล์เริ่มต้นได้อย่างง่ายดาย
1234
<dront> Glen Stansberry1234 Web Dev Laneanywhere, USA </address> 5. <ins> และ <del>
หากคุณต้องการใช้แท็กเพื่อแสดงเวอร์ชันที่แก้ไขแล้ว <ins> และ <del> นั้นถูกต้อง ตามชื่อที่แนะนำ <ins> ไฮไลต์เนื้อหาที่เพิ่มเข้ามาด้วยขีดล่างในขณะที่ <el> ใช้ strikethrough เพื่อแสดงข้อมูลที่ถูกลบออก
1
John <del> ชอบ </el> <ins> Loves </ins> iPod ใหม่ของเขา
ตัวอย่าง: ทุกคน ชอบ ถูกทอดทิ้ง zblog 6. <labled>
ดูเหมือนว่าองค์ประกอบแบบฟอร์มมักจะลืมเมื่อใดที่จะทำเครื่องหมายข้อความ สำหรับองค์ประกอบแบบฟอร์มสิ่งที่พบบ่อยที่สุดที่ฉันลืมคือแท็ก <lable> ไม่เพียง แต่เป็นวิธีที่สะดวกในการติดแท็กข้อความแท็ก <label> ยังสามารถผ่านแอตทริบิวต์เพื่อระบุองค์ประกอบที่จะเชื่อมโยง <label> ไม่เพียง แต่ควบคุมสไตล์ได้ง่าย แต่ยังช่วยให้คุณสามารถคลิกชื่อได้
12
<label for = username> ชื่อผู้ใช้ < /label> <input id = ชื่อผู้ใช้ประเภท = text /> 7. <FieldSet>
FieldSet เป็นแท็กขนาดเล็กที่คุณสามารถใช้เพื่อเพิ่มการจัดกลุ่มแบบลอจิคัลลงในองค์ประกอบแบบฟอร์มของคุณ แท็ก <fieldset> จะวาดกล่องรอบ ๆ องค์ประกอบภายใน อีกประเด็นหนึ่งคือคุณสามารถเพิ่มแท็ก <baild> ลงใน FieldSet เพื่อกำหนดชื่อของกลุ่ม
1234567
<form> <fieldset> <legend> คุณฉลาดกว่านักเรียนอายุ 5 ปีหรือไม่? </Legend> แน่นอน <ชื่ออินพุต = ใช่ประเภท = ค่าวิทยุ = ใช่/> ฉันไม่ทราบ <ชื่ออินพุต = ไม่มีประเภท = ค่าวิทยุ = ไม่ใช่/> </fieldset> </form>
ตัวอย่าง: 8. <abbr>แท็ก <Abbr> ค่อนข้างคล้ายกับแท็ก <scronym> ความแตกต่างคือแท็ก <abbr> ใช้เพื่อกำหนดตัวย่อเท่านั้น เช่นเดียวกับ <sadronym> คุณสามารถกำหนดคุณสมบัติชื่อเรื่องสำหรับแท็กนี้ เมื่อผู้ใช้วางเมาส์ไว้บนข้อความตัวย่อเนื้อหาทั้งหมดจะแสดงด้านล่าง <abbr> แท็กไม่ค่อยได้ใช้ แต่มีประโยชน์มากสำหรับตัวอ่านหน้าจอตัวตรวจสอบการสะกดและเครื่องมือค้นหา
1
<abbr title = brainless> nc </bbr> เป็นคำที่ไม่มีการเปลี่ยนแปลง
ตัวอย่าง:มันเป็นคำศัพท์ที่ไม่เป็นอารยธรรมมากนัก มันเป็นคำศัพท์ที่ไม่เป็นอารยธรรมมากนัก 9. Rel
REL อาจเป็นคุณสมบัติ ที่มีประโยชน์อย่างยิ่ง และองค์ประกอบ HTML ใด ๆ สามารถใช้คุณสมบัติ REL ได้ ช่วยผ่านพารามิเตอร์เพิ่มเติมโดยไม่ระบุเพิ่มเติม สิ่งนี้มีประโยชน์มากเมื่อใช้ JavaScript ใน HTML หากคุณมีลิงค์ที่คุณต้องการแก้ไขภายในบรรทัดคุณสามารถเพิ่ม:
1
<a rel = clickable href = page.html> ลิงค์นี้สามารถแก้ไขได้ </a>
JavaScript จะค้นหาลิงค์ที่มีแอตทริบิวต์ Rel Clickable และใช้ AJAX และอนุญาตให้แก้ไขภายในบรรทัด นี่เป็นเพียงการใช้เทคนิคหลายอย่างที่คุณสามารถใช้แอตทริบิวต์ REL เนื่องจากศักยภาพของมันไม่มีที่สิ้นสุด เพื่อนที่สนใจสามารถศึกษาการแนะนำของ W3C เกี่ยวกับ REL ในเชิงลึก 10. <wbr>
<wbr> แท็กเป็นแท็กที่ไม่น่าเชื่อและไม่น่ากลัว พูดตรงไปตรงมาฉันสงสัยว่าคุณจะได้สัมผัสกับแท็กนี้เพราะแทบจะไม่เคยใช้เลย (แน่นอนฉันแทบจะไม่เห็นแท็กนี้ก่อนที่ฉันจะเขียนโพสต์นี้) ในความเป็นจริงแท็กนี้เป็นตัวแบ่งสายซอฟต์ช่วยให้คุณสามารถระบุจุดพักบรรทัดในบรรทัดที่แน่นอนซึ่งบ่งชี้ว่าการแบ่งบรรทัดอาจแตกหัก ณ จุดนั้น แต่ไม่จำเป็นต้องทำลายมัน แต่จะหยุดพักเมื่อจำเป็นเท่านั้น หากคุณต้องการหลีกเลี่ยงแถบเลื่อนแนวนอนการใช้แท็กนี้ดีมาก
ตัวอย่าง:ด้านล่างเป็นกล่องกว้าง 200 พิกเซลโดยไม่มีการกำหนดล้น NOWBRNOWBRNOWBRNOWBRNOWBRNOWBRNOWBRNOWBRNOWBRNOWBRNOWBRNOWBRNOWBRNOWBR
Havawbr Havawbr Havawbrhavawbrhavawbrhavawbrhavawbrhavawbrhavawbr Havawbr
หากคุณต้องการให้ได้เอฟเฟกต์เดียวกันโดยไม่ต้องใช้แท็ก <wbr> คุณสามารถลองใช้ & & ขี้อาย; ว่ากันว่าไม่มีแท็กทั้งสามนี้ได้รับการสนับสนุนอย่างเต็มที่จากเบราว์เซอร์ทั้งหมด คุณสามารถใช้บทความนี้เพื่อดูการสนับสนุนของแต่ละเบราว์เซอร์สำหรับสามแท็ก
PS: หลังจากแปลบทความนี้ด้วยความยากลำบาก Shenfei รู้สึกถึงเสน่ห์ของความหมายและพลังของแท็ก HTML ฉันเชื่อว่าเราไม่ได้ตระหนักถึงแท็กมากมาย เป็นผลให้ทุกคนคุ้นเคยกับแท็กทั่วไปและทุกคนไม่สามารถใช้แท็กที่ไม่ธรรมดาได้ ดังที่ฉันได้อธิบายไว้ในบทความก่อนหน้านี้ส่วนใหญ่ของความหมายคือการใช้ฉลากที่เหมาะสมในสถานที่ที่เหมาะสมแทนที่จะเพียงแค่แบ่งพวกเขา หากเราสามารถเรียนรู้แท็ก HTML ได้มากขึ้นเราสามารถเขียนรหัส HTML ความหมายได้มากขึ้นซึ่งสามารถลดความยากลำบากและภาระงานของการเขียน CSS ได้อย่างมากและทำให้โครงสร้างหน้าของเรามีเหตุผลมากขึ้น