home

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

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

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

บล็อคโควต

<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> องค์ประกอบใส่เครื่องหมายคำพูดรอบคำพูดสั้น ๆ นี่คือองค์ประกอบแบบอินไลน์ คล้ายกับ หรือ แต่สำหรับเครื่องหมายคำพูด หากใบเสนอราคาของคุณครอบคลุมหลายบรรทัด คุณควรใช้

แทน 

<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> แท็ก นอกจากนี้ยังเป็นองค์ประกอบแบบอินไลน์ที่คล้ายกับ , หรือ กำหนดตัวย่อของคุณภายในแอตทริบิวต์ title ในแท็ก ของคุณ 

<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>

ที่อยู่

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

ข้อความจะแสดงเป็นตัวเอียงและมีตัวแบ่งบรรทัดก่อนและหลังช่องที่อยู่ 

<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> องค์ประกอบเพื่อแสดงข้อความที่มีการแทนที่แบบสองทิศทาง ใช้แอตทริบิวต์ 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>

อ้างอิง

องค์ประกอบอ้างอิงคือองค์ประกอบใบเสนอราคาสุดท้ายที่เราพูดถึงในวันนี้ แท็กอ้างอิงกำหนดชื่องานสร้างสรรค์ เป็นองค์ประกอบแบบอินไลน์และแสดงผลเป็นตัวเอียง

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

<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> – ใช้สำหรับคำพูดสั้น ๆ ไม่เกินหนึ่งบรรทัด
  • <abbr> – ใช้เพื่อกำหนดตัวย่อในข้อความของเรา
  • <address> – ใช้เพื่อกำหนดข้อมูลติดต่อสำหรับผู้สร้างหรือผู้แต่ง
  • <bdo> – ใช้เพื่อควบคุมว่าข้อความจะแสดงผลจากซ้ายไปขวาหรือขวาไปซ้าย
  • <cite> – ใช้เพื่อกำหนดชื่อเรื่องของบางสิ่ง

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