home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

คู่มือการใช้เครื่องหมายคำพูดใน HTML

มีหลายวิธีอ้างอิงแหล่งที่มา หรือแยกคำพูดออกจากข้อความรอบข้างใน HTML วันนี้เราจะเรียนรู้ HTML Quotation Elements: <blockquote>, <q>, <abbr>, <address>, <bdo> และ <cite> แต่ละตัวมีกรณีใช้งานเฉพาะ เราจะแยกแยะและแสดงวิธีใช้ในมาร์กอัป

Blockquote

เอลิเมนต์ <blockquote> ใช้สำหรับข้อความอ้างอิงหลายบรรทัด ยาว แยกคำพูดออกจากย่อหน้าหรือองค์ประกอบ HTML อื่นๆ ตัวอย่างใช้โซลิโลควีของนักเขียนชื่อดัง:

<html> <head> <style> body { font-family: 'Roboto'; margin: 20px; } blockquote p { width: 80%; margin: 0px 20px; text-align: right; } </style> </head> <body> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora doloribus quae mollitia vitae inventore minus sed id ut facere officiis cupiditate corporis, ratione, neque repellat cumque temporibus, dicta at labore. Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos aliquam adipisci at earum, optio consequatur et, alias corrupti voluptatum voluptates repellendus, tenetur suscipit qui nostrum totam veritatis doloremque laborum officia! Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem nostrum voluptate, perferendis amet hic totam perspiciatis excepturi. Nam earum, neque, in nihil magni aliquid id, iste deserunt tempore corporis eaque?</p> <blockquote> "To be, or not to be: that is the question: Whether 'tis nobler in the mind to suffer The slings and arrows of outrageous fortune, Or to take arms against a sea of troubles, And by opposing end them?..." <p>&mdash;<em>Hamlet</em>, Act III, Scene I</p> </blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora doloribus quae mollitia vitae inventore minus sed id ut facere officiis cupiditate corporis, ratione, neque repellat cumque temporibus, dicta at labore. Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos aliquam adipisci at earum, optio consequatur et, alias corrupti voluptatum voluptates repellendus, tenetur suscipit qui nostrum totam veritatis doloremque laborum officia! Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem nostrum voluptate, perferendis amet hic totam perspiciatis excepturi. Nam earum, neque, in nihil magni aliquid id, iste deserunt tempore corporis eaque?</p> </body> </html>

q

เอลิเมนต์ <q> ใส่เครื่องหมายคำพูดรอบคำพูดสั้น เป็น inline element คล้าย <span> หรือ <strong> แต่สำหรับคำพูด หากคำพูดครอบหลายบรรทัด ควรใช้ <blockquote> แทน

<html> <head> <style> body { font-family: 'Roboto'; margin: 20px; } </style> </head> <body> <p> The mission statement for the Make-A-Wish Foundation is <q>Together, we create life-changing wishes for children with critical illnesses.</q> </p> </body> </html>

abbr

บางครั้งต้องการนิยามอักษรย่อโดยไม่รวมในข้อความหลัก ทำได้ด้วยแท็ก <abbr> เป็น inline element คล้าย <span>, <em>, หรือ <q> กำหนดอักษรย่อในแอตทริบิวต์ title ภายในแท็ก <abbr>

<html> <head> <style> body { font-family: 'Roboto'; margin: 20px; } </style> </head> <body> <abbr title="COrona VIrus Disease 2019">COVID-19</abbr> was first discovered in December 2019 in Wuhan, China. </body> </html>

address

เอลิเมนต์ address กำหนดข้อมูลติดต่อของผู้สร้าง (บุคคลหรือธุรกิจ) และข้อมูลต่อไปนี้: ที่อยู่จริง, อีเมล, ลิงก์โซเชียลมีเดีย, เบอร์โทร, เว็บไซต์ส่วนตัว และรายการติดต่ออื่นๆ

ข้อความแสดงตัวเอียง และมี line break ก่อนและหลังบล็อก address

<html> <head> <style> body { font-family: 'Roboto'; margin: 20px; } </style> </head> <body> <address> Written for Career Karma by Christina Kopecky<br /> Other Articles: <a href="https://careerkarma.com/blog/author/christina-kopecky/">Career Karma Author Page</a><br/> Twitter: <a href="https://twitter.com/cmvnk" target="_blank" rel="noopener noreferrer">@cmvnk</a><br /> Github: <a href="https://github.com/ckopecky" target="_blank" rel="noopener noreferrer">ckopecky</a><br /> </address> </body> </html>

bdo

เมื่อทำงานกับภาษาที่อ่านจากขวาไปซ้าย ใช้แท็กที่เรนเดอร์ข้อความขวา-ซ้ายให้อัตโนมัติ ใช้เอลิเมนต์ <bdo> เรนเดอร์ข้อความด้วย bi-directional override รับแอตทริบิวต์ dir ระบุทิศทาง ค่าเริ่มต้น "ltr" ใช้ "rtl" สำหรับขวา-ซ้าย

<html> <head> <style> body { font-family: 'Roboto'; margin: 20px; } </style> </head> <body> <bdo dir="rtl">This renders Right-to-Left</bdo><br /> <bdo>This renders Left-to-Right</bdo> </body> </html>

cite

เอลิเมนต์ cite เป็นองค์ประกอบอ้างอิงสุดท้าย แท็ก cite กำหนดชื่อผลงานสร้างสรรค์ เป็น inline element แสดงตัวเอียง

<html> <head> <style> body { font-family: 'Roboto'; margin: 20px; } p { margin: 0; padding: 0; } </style> </head> <body> <p> <cite>Mona Lisa</cite>, Leonardo da Vinci <br /> <sup>The Louvre (since 1797)</sup> </p> </body> </html>

สรุป

มาทบทวน: วันนี้เราได้ดู:

  • <blockquote> – ใช้สำหรับคำพูดยาว
  • <q> – ใช้สำหรับคำพูดสั้น ไม่เกิน 1 บรรทัด
  • <abbr> – ใช้นิยามอักษรย่อในข้อความ
  • <address> – ใช้กำหนดข้อมูลติดต่อผู้สร้าง/ผู้เขียน
  • <bdo> – ใช้ควบคุมการเรนเดอร์ข้อความซ้าย-ขวา หรือ ขวา-ซ้าย
  • <cite> – ใช้กำหนดชื่อของสิ่งใดสิ่งหนึ่ง

มีองค์ประกอบอ้างอิงมากมาย แต่ละตัวมีกรณีใช้งานเฉพาะ อย่าลืมเลือกตัวที่เหมาะสมสำหรับโปรเจกต์ของคุณ!