よく使われる HTML 形式のタグ_Powernode Java Academy

1. タイトル

HTML では、<h1></h1> から <h6></h6> までの 6 つの <h> タグが定義されており、これらは異なるフォントサイズの見出しに使用されます。フォントサイズは大きいものから小さいものの順になっており、<h1> が最大で、<h6> が最小です。

見出しタグでは次の点に注意する必要があります: a. ブラウザはタイトルの前後に自動的に空白行を追加します。見出しタグはブロックレベル要素であるため、デフォルトでは、HTML はブロックレベル要素の前後に余分な空白行 (<br/>) を自動的に追加します。 b. タイトルはページ全体にとって重要です。太字や大きなテキストを作成するためだけではなく、タイトルにのみ HTML 見出しタグを使用する必要があります。見出しタグは SEO に非常に適しており、検索エンジンはタイトルを使用して Web ページの構造とコンテンツをインデックスし、ユーザーはタイトルを使用して Web ページをすばやく閲覧するため、タイトルを使用してドキュメントの構造を示すことが重要です。メインの見出し（最も重要なもの）として <h1> を使用し、次に <h2>（次に重要なもの）、次に <h3> というように使用します。

 <!--<h> タグはタイトルを設定するために使用されます。検索エンジンが優先するように、重要な情報を <h1> に配置します。 -->
      <h1>
          チャイナワン</h1>
      <h2>
        中国 II</h2>
      <h3>
          チャイナスリー</h3>
      <h4>
          チャイナフォー</h4>
     <h5>
        チャイナファイブ</h5>
     <h6>
       チャイナシックス

効果は次のようになります（フォントサイズは大きいものから小さいものまで）。

2. 改行 <br/>、改行なし <nobr></nobr>、段落区切り <p></p>

HTML の改行タグ <br/> と段落区切りタグ <p></p> の違いは、改行タグ <br/> は単なる復帰であるのに対し、 <p></p> は段落区切りである点です。 <p> タグはブロックレベル要素であるため、その前後に比較的大きなスペースが入ります (<br/> は自動的に追加されます)。一方、<br/> タグは行レベル要素であるため、前後にスペースを入れずに行を単純に折り返します。 <br/> の反対のタグとして、<nobr></nobr> があります。これは改行なしを意味し、通常はブラウザがプログラムコードや改行が不要なその他の場所を自動的に折り返すのを防ぐために使用されます。

 <!-- 改行と段落区切り: -->   
      <p>
          これは最初の段落です<br /> <!--改行-->
          改行タグが使用されています<br />
          効果をぜひご覧ください<br />
          わかりやすい</p>
      <p>
          これは 2 番目の段落です</p> <!--セクション、自動改行-->
      <p>
         これは3番目の段落です</p>
     <p>
     <nobr> <!--改行を禁止-->
    整数 i =0,j=10;
     </nobr>
     </p>

3. 水平線タグ <hr/>

<hr /> タグは HTML ページに水平線を作成します。これを行う 1 つの方法は、水平線 (<hr> タグ) を使用して記事内のセクションを区切ることです。 <hr/> タグは幅と高さを設定でき、これら 2 つの属性はそれぞれピクセルとパーセンテージで表現できます。さらに、<hr/> タグには、size (太さ)、color (色)、noshade (影なし) 属性があります。

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
 <ヘッド>
      <タイトル></タイトル>
  </head>
  <本文>
      <hr size="5" color="#FF0000" />
      <!-- サイズ (太さ) が 5、色が赤の hr タグを定義します -->
    <hr width="60" />
     <!--width 属性は 60px です-->
     <hr width="60%" />
     <!--幅は60%です-->
     <hr size="10" />
     <!--サイズは10pxです-->
     <hr size="10%" />
    <!--サイズは 10% です-->
     <!--align 属性、可能な値は left、right、center です -->
     <hr width="20%" align="left" />
     <hr width="20%" align="right" />
     <hr width="20%" align="center" />
     <hr color="#FF0000" />
     <!--noshade 属性、影効果を設定しません-->
     <hr noshade="noshade" />
 </本文>
</html>

4. テキスト書式タグ

 <!-- 一般的なテキストフォーマットタグ -->
  <center>博客园</center> は中央に <b>Hello, World!</center> を表示します。 </b>太字の場合は、<strong> タグを使用することをお勧めします。
  <i>斜めの</i>イタリック体です。
  <u>私は下線タグです</u> が下線付きです。
  <em>強調、斜体</em>
  <sub>2</sub> 下付き文字、例: H<sub>2</sub>O
  <sup>2</sup> 上付き文字、例: 10<sup>2</sup> 
  <!-- フォント サイズの設定は、絶対フォント サイズと相対フォント サイズの 2 つに分けられます。絶対フォント サイズは <font> タグの size 属性で設定され、相対フォント サイズは既定のフォントの相対値です。 -->
  <!-- 絶対フォント サイズは 1 から 7 までの数値です -->
  <!--color (色の設定) サイズ (1-7)。 -->
  <!--face 属性はフォントを設定するために使用されます-->
 <font></font>フォント タグ、<font color="red" size="7" face="隶书">赤</font>

5. 事前フォーマットタグ <pre>

<pre> 事前フォーマットタグ。Web ページのコンテンツをそのまま表示します。特定の特別なコンテンツを表示するために使用することも、コンピュータプログラミングのソースコードを表示するために使用することもできます (たとえば、Blog Garden のソースコードは <pre> タグを通じて表示されます)。

 <p>pre タグは、そのまま表示したい特別なコンテンツを表示します:</p>
      <前> 
      私は良い子です。
          これは気に入りました。これはフォーマット済みのタグです____
    （。\
     \ |   
      \ |___(\--/)
    __/ （ . . ）
   「'._. '-.O.' こんにちは、子猫です！」 
        '-.\ "|\
           '.,,/'.,,
  (⊙_⊙)?何って言ったの？ ? ? ?
  </pre>
 <p>pre タグはコンピュータ コードを表示するのに最適です:</p>
 <前>
 i = 1 から 10 まで
      印刷する
 次に私
 </pre>

6. <marquee></marquee> タグ

<marquee></marquee> タグのペアは、ブラウザにその中のテキストと画像を移動するように指示します。

     <div>
         <!--marquee タグ 一部のブラウザでサポートされています: IE、FF-->
         <!--direction 属性: コンテンツの移動方向を指定します。指定可能な値は、左、右、上、下です -->
         <!--behavior 属性: タグの動作を指定します。指定できる値は scroll、alternate、slide です -->
         <marquee direction="left" scrolldelay="" behavior="alternate">
         みなさんこんにちは。私のホームページへようこそ！ ......
         </マーキー>
     </div>

7. その他のフォーマットタグの例。

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <ヘッド>
      <タイトル></タイトル>
  </head>
  <本文>
   <!--<abbr>略語を表示: -->
   <abbr title="英国放送協会">
          BBC</abbr><br />
  <!-- <acronym> フレーズの略語を表示します: -->
   <acronym title="ワールド ワイド ウェブ">www</acronym><br />
   <!--<blockquote> は長いテキストの引用を定義します:-->
      <引用>
          <p>
              2、3日を超えると、世界最高の予測も推測に過ぎなくなり、
              6 つか 7 つは価値がありません。
          </p>
          <br />
        <!-- <q> タグは短い引用を定義します: -->
          <q>q ラベル!!!</q>
      </blockquote>
  <!--<address>住所、署名、文書作成者情報など:-->
      <住所>
        北京市海淀区中関村ソフトウェアパーク、[email protected]
      </アドレス>
  <!-- <bdo> タグは dir 属性を使用してテキストの表示順序を定義します: -->
      <bdo dir="ltr">電源ノード</bdo><br /> <!--ltr: 左から右、左から右へ-->
      <bdo dir="rtl">電源ノード</bdo><br /> <!--rtl:右から左、右から左へ-->
 </本文>
 </html>

2. HTML リスト

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   <html xmlns="http://www.w.org//xhtml">
   <ヘッド>
       <タイトル></タイトル>
   </head>
   <本文>
       <b>HTML リスト:</b><br />
     <hr size="5" color="#FF0000;" />
       <br />
      <!--まず、順序なしリスト (ul:unordered list)-->
      <font size="+" color="#FF" face="华文楷体">I. 順序なしリスト:</font><br />
      .デフォルト:<br />
      <ul>
          <li>バナナ</li>
          <li>アップル</li>
          <li>オレンジ</li>
      </ul>
      type属性を使用します:<br />
      <!--ul タイプ属性の値:
        円: 実線の円、円: 中空の円、四角: 実線の四角 -->
      <!--ol type 属性値:
        <ul type="I"/"a"/"A"/"1">
          -->
      <ul type="circle">
          <li>バナナ</li>
          <li>アップル</li>
          <li>オレンジ</li>
      </ul>
      <ul type="square">
          <li>バナナ</li>
          <li>アップル</li>
          <li>オレンジ</li>
      </ul>
     3. 強調のための属性値の混合使用:<br />
      <ul type="circle">
          <li>バナナ</li>
          <li type="disc">アップル</li>
          <li>オレンジ</li>
      </ul>
      <!--2 番目の順序付きリスト (ol、順序付きリスト)-->
    II. 順序付きリスト:
      .デフォルト:<br />
      <オル>
          <li>バスケットボール</li>
          <li>バレーボール</li>
          <li>サッカー</li>
      </ol>
     2. type属性を使用します。
      <ol type="i">
          <li>バスケットボール</li>
          <li>バレーボール</li>
          <li>サッカー</li>
      </ol>
      <ol type="A">
          <li>バスケットボール</li>
          <li>バレーボール</li>
          <li>サッカー</li>
      </ol>
     3. 順序付きリスト項目の先頭の数を変更します。<br />
      <引用>
          a.<font color="#FFFF">start</font> 属性を単独で使用する場合:<br />
         <ol 開始="3">
              <li>バスケットボール</li>
              <li>バレーボール</li>
              <li>サッカー</li>
          </ol>
          b.<font color="#FFFF">vlaue</font> 属性を単独で使用する場合:<br />
          <オル>
              <li>バスケットボール</li>
            <li value="5">バレーボール</li>
              <li>サッカー</li>
          </ol>
          c. <font color="#FFFF">start、value</font> 属性の一般的な使用法:<br />
        <ol 開始="8">
              <li>バスケットボール</li>
            <li value="15">バレーボール</li>
              <li>サッカー</li>
          </ol>
      </blockquote>
     <font size="+1" color="#00FF00" face="花纹楷体">III. ネストされたリスト:</font><br />
     1. 順序なしリスト内のネストされた順序なしリスト:<br />
      <ul>
          <li>ドリンク</li>
          <li>果物<ul>
                  <li>バナナ</li>
                  <li>アップル</li>
                  <li>オレンジ</li>
              </ul>
          </li>
          <li>野菜</li>
          <li>お茶</li>
      </ul>
    2. 順序なしリスト内のネストされた順序付きリスト:<br />
      <ul>
          <li>ドリンク</li>
          <li>果物<ol>
                  <li>バナナ</li>
                 <li>アップル</li>
                 <li>オレンジ</li>
             </ol>
         </li>
         <li>野菜</li>
         <li>お茶</li>
     </ul>
     3. 順序付きリスト内のネストされた順序付きリスト:<br />
     <オル>
         <li>ドリンク</li>
         <li>果物<ol>
                 <li>バナナ</li>
                 <li>アップル</li>
                 <li>オレンジ</li>
             </ol>
         </li>
         <li>野菜</li>
         <li>お茶</li>
     </ol>
     4. 順序なしリストを順序付きリストにネストする:<br />
     <オル>
         <li>ドリンク</li>
         <li>果物<ul>
                 <li>バナナ</li>
                 <li>アップル</li>
                 <li>オレンジ</li>
             </ul>
         </li>
         <li>野菜</li>
         <li>お茶</li>
     </ol>
     5. リストの複数レベルのネスト:<br />
     <オル>
         <li>ドリンク</li>
         <li>果物<ul>
                 <li>バナナ</li>
                 <li>アップル<ul>
                         <li>ブラジル製</li>
                         <li>中国製</li>
                     </ul>
                 </li>
                 <li>オレンジ</li>
             </ul>
         </li>
         <li>野菜</li>
         <li>お茶</li>
     </ol>
     <!--3番目、定義リスト（dl、定義リスト）-->
     <font size="+1" color="#00FF00">IV. 定義リスト:</font><br />
     1. 定義リスト:<br />
     <!--
         <ダウンロード>
           <dt>最初のヘッダー項目</dt> 
           <dd>最初のヘッダー項目の説明テキスト</dd>
           <dt>2 番目のタイトル項目</dt>
           <dd>2 番目のヘッダー項目の説明テキスト</dd>
         </dl>
         その中には、<dl> は定義リストの先頭を示すために使用されます。
               <dt> は定義リストのリスト項目を識別するために使用されます。
               <dd> は、定義リスト内のリスト項目の説明テキストを識別するために使用されます。
         -->
     <ダウンロード>
         <!--dt:definition term (定義用語) はタイトル項目「北京」を定義します -->
         <dt>北京</dt>
         <!--dd:definition definition (用語の定義の説明) タイトル項目「北京」の説明 -->
         <dd>
             中国の政治の中心
         <dt>上海</dt>
         <dd>
             中国の経済の中心
         <dt>深セン</dt>
         <dd>
             中国の改革開放の先端都市
     </dl>
 </本文>
 </html>

多くのタグを使用して、テキストの外観を変更し、テキストに隠された意味を関連付けることができます。一般に、これらのタグは、コンテンツベースのスタイルと物理スタイルの 2 つのカテゴリに分類できます。

1. コンテンツベースのスタイル

コンテンツベースのスタイルタグは、タグに含まれるテキストに特定の意味、コンテキスト、または使用法があることをブラウザに伝えます。ブラウザは、その意味、コンテキスト、または使用法と一致する書式をテキストに適用します。コンテンツベースのタグはフォーマットではなく意味を伝えることに注意してください。したがって、それらは自動処理にとって重要であり、コンピューターはドキュメントの外観を気にしません。

フォントスタイルは意味的な手がかりを使用して指定されるため、ブラウザーはユーザーに適した表示スタイルを選択できます。スタイルは場所によって異なるため、コンテンツベースのスタイルを使用すると、ドキュメントが幅広い読者にとって理解しやすいものになることを保証できます。これは、視覚障害者や身体障害者向けに設計されたブラウザでは特に重要です。これらのブラウザの表示オプションは、従来のテキストとは根本的に異なる場合や、何らかの形で非常に制限されている場合があるためです。

現在の HTML および XHTML 標準では、すべてのコンテンツベースのタグの形式は定義されておらず、コンテンツベースのスタイルはドキュメント内の通常のテキストとは異なる方法で表示する必要があると指定しているだけです。この標準では、これらのコンテンツベースのスタイルを互いに異なる方法で表示する必要さえありません。実際のアプリケーションでは、これらのタグの多くが従来の印刷と非常に明白な関係があることに気付くでしょう。それらは意味と表示スタイルが似ており、ほとんどのブラウザで同じスタイルとフォントで表示されます。

HTML/XHTML コンテンツベースのスタイルタグを使用する場合は、従うべきルールがいくつかあります。テキストの意味を必ずしも知らなくても、テキストをどのように表示するかだけを考えるのは非常に簡単だからです。コンテンツベースのスタイルを使い始めると、ドキュメントの一貫性が高まり、自動検索やコンテンツ編集をより適切にサポートできるようになります。タグは次のとおりです:

<略>
 <頭字語>
 <引用>
 <コード>
 <dfn>
 <em>
 <kbd>
 <サンプル>
 <strong>
 <var>

2. 身体的なスタイル

コンテンツベースのスタイルタグについて説明するときに、「意図」という言葉をよく使用します。これは、ブラウザがテキストを表示する方法よりも、タグによって伝えられる意味の方が重要だからです。ただし、場合によっては、法律上または著作権上の理由により、テキストを特定の方法 (斜体や太字など) で表示したいことがあります。この場合、テキストに物理的なスタイルを使用できます。

他のテキスト処理システムでは、スタイルと外観を正確に制御する傾向がありますが、HTML または XHTML を使用する場合は、まれな状況を除いて物理タグの使用を避ける必要があります。可能な限り、ブラウザにコンテキスト情報を提供し、コンテンツベースのスタイルを使用します。現在のブラウザではこのテキストが単に斜体または太字で表示されますが、将来のブラウザやさまざまなドキュメント生成ツールでは、これらのコンテンツベースのスタイルが非常に創造的な方法で活用される可能性があります。

現在の HTML/XHTML 標準では、太字、斜体、等幅、下線、取り消し線、拡大、縮小、上付き、下付きのテキストを含む合計 9 つの物理スタイルが提供されています。タグは次のとおりです:

 <b>
 <大きい>
 <i>
 <s>
 <小>
 <ストライク>
 <サブ>
 <sup>
 <tt>

上記はエディターが紹介するよく使われる HTML 形式のタグです。皆様のお役に立てれば幸いです。ご質問がございましたら、メッセージを残していただければ、エディターがすぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。

<<: SpringBoot と Vue の相互作用におけるクロスドメイン問題の解決策

>>: CenOS6.7 mysql 8.0.22 のインストールと設定方法のグラフィックチュートリアル

よく使われる HTML 形式のタグ_Powernode Java Academy

js 加算、減算、乗算、除算の正確な計算方法のサンプルコード

Bootstrap FileInputは画像アップロード機能を実装します

MySQL パフォーマンスチューニングについて知っておくべき 15 個の重要な変数 (要約)

一般的なDockerコマンドの概要

泡の小さな鋭角効果を実現するCSS

Node.js管理ツールnvmの詳細なインストール手順

SQL で行の最大値または最小値を取得する方法

ウェブページを作成する際に注意すべき点

MySQL 8.0.11 圧縮バージョンを Windows 10 にインストールするための詳細なチュートリアル

ボタンのタイプが送信として指定されていません。ボタンをクリックしても、指定された URL にジャンプしません。

推薦する

MacOS で Docker を使用して MySQL マスタースレーブデータベースを作成する方法

Vue.js ディレクティブのカスタム命令の詳細な説明

MySQL スケジュールされたデータベースバックアップ操作の例

VMware15.5 インストール Ubuntu20.04 グラフィックチュートリアル

JavaScriptのスタックとコピーの詳細な説明

MySQLの連結関数CONCATの使い方の詳しい説明

ReactでuseStateを使用する詳細な例

Vue+js はビデオのフェードインとフェードアウト効果を実現します

npm グローバルモジュールのデフォルトのインストールパスを変更するためにノードのインストールをカスタマイズする手順

MYSQLテーブルの包括的な概要

yum から docker インストールパッケージをダウンロードし、オフラインマシンにインストールする例の詳細なコード

MySQL パーティション関数の詳細な説明と例の分析

MySQL8のパスワードを忘れた場合の簡単な解決策

SWFObjectを使用すると、HTMLにFlashを挿入する際のブラウザ互換性の問題を完全に解決できます。

Linux でのルーティングと仮想マシンネットワークの設定に関する詳細なグラフィック説明