HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLで引用符を使用するためのガイド

ソースを引用したり、HTMLの周囲のテキストから引用を識別したりする方法はいくつかあります。今日は、HTML引用要素について説明します：

、 、 、<アドレス> 、 および 。それぞれに独自のユースケースがあります。それぞれを識別し、マークアップでの使用方法を示します。

ブロッククォート

elementは、複数行の長い引用テキストに使用されます。この要素は、引用自体を周囲の段落やその他の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

要素は、短い引用符を引用符で囲みます。これは、やによく似たインライン要素ですが、引用符用です。見積もりが複数行にまたがる場合は、代わりに

を使用する必要があります。 

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

略語

頭字語を文章の流れに含めずに定義したい場合があります。 でそれを行います 鬼ごっこ。これは、、、またはと同様のインライン要素でもあります。 タグの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>

アドレス

address要素は、個人または企業の作成者の連絡先情報と、物理アドレス、電子メールアドレス、ソーシャルメディアリンク、電話番号、個人のWebサイト、およびその他の連絡先のようなアイテムのいずれかを定義します。

テキストは斜体で表示され、アドレスブロックの前後に改行があります。 

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

引用

cite要素は、今日お話しする最後の引用要素です。 citeタグは、クリエイティブな作品のタイトルを定義します。これはインライン要素であり、斜体でレンダリングされます。

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

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

結論

確認してみましょう。今日は次のことを確認しました：

  • –長い引用符に使用
  • –1行以内の短い引用符に使用
  • –テキストで略語を定義するために使用されます
  • <アドレス> –作成者または作成者の連絡先情報を定義するために使用されます
  • –テキストを左から右にレンダリングするか右から左にレンダリングするかを制御するために使用されます
  • –何かのタイトルを定義するために使用されます

多くの引用要素があり、それぞれにユースケースがあります。プロジェクトに適したものを必ず修正してください！


  1. HTMLDOMBodyオブジェクト

    HTML DOM Bodyオブジェクトは、HTMLの要素に関連付けられています。 bodyタグ内に設定された属性とその値は、子ノードのいずれかによってオーバーライドされない限り、HTMLドキュメント全体に残ります。bodyオブジェクトを使用して、これらのプロパティとその値にアクセスして操作できます。 プロパティ 以下は、HTMLDOMBodyオブジェクトのプロパティです- 注 −以下のプロパティはHTML5ではサポートされていません。代わりにCSSを使用してください- プロパティ 説明 aLink ドキュメントのアクティブなリンクの色を設定または返すには。 背景

  2. HTMLonerrorイベント属性

    HTML onerrorイベント属性は、HTMLドキュメントに外部ファイルをロードしているときにエラーが発生したときにトリガーされます。 構文 以下は構文です- <tagname onerror=”script”>Content</tagname> HTMLonerrorイベント属性の例を見てみましょう- 例 <!DOCTYPE html> <html> <head> <style>    body {       color: #000; &n