HTML テキストフォーマットの簡単な例 (詳細な説明)

HTML テキストフォーマットの簡単な例 (詳細な説明)

1. テキストの書式設定: この例では、HTML ファイル内のテキストを書式設定する方法を示します。

XML/HTML コードコンテンツをクリップボードにコピー
  1. <html>​​   
  2.   
  3. <本文>   
  4.   
  5. < b >このテキストは太字です</ b >   
  6.   
  7. < br   />   
  8.   
  9. < strong >このテキストは強いです</ strong >   
  10.   
  11. < br   />   
  12.   
  13. <大きい>このテキストは大きいです</大きい>   
  14.   
  15. < br   />   
  16.   
  17. < em >このテキストは強調されています</ em >   
  18.   
  19. < br   />   
  20.   
  21. < i >このテキストは斜体です</ i >   
  22.   
  23. < br   />   
  24.   
  25. <小>このテキストは小さいです</小>   
  26.   
  27. < br   />   
  28.   
  29. このテキストには
  30. < sub >下付き文字</ sub >   
  31.   
  32. < br   />   
  33.   
  34. このテキストには
  35. < sup >上付き文字</ sup >   
  36.   
  37. </本文>   
  38. </html>​​   

効果は以下のとおりです。

2. フォーマット済みテキスト: この例では、pre タグを使用して空白行とスペースを制御する方法を示します。

XML/HTML コードコンテンツをクリップボードにコピー
  1. <html>​​   
  2.   
  3. <本文>   
  4.   
  5. <前>   
  6. これは
  7. フォーマット済みのテキスト。
  8. スペースを節約する
  9. および改行。
  10. </前へ>   
  11.   
  12. < p > pre タグはコンピュータコードを表示するのに最適です: </ p >   
  13.   
  14. <前>   
  15. i = 1から10 まで
  16. 印刷する
  17. 次に私
  18. </前へ>   
  19.   
  20. </本文>   
  21. </html>​​   

効果は以下のとおりです。

3. 「コンピュータ出力」ラベル: この例では、さまざまな「コンピュータ出力」ラベルの表示効果を示します。

XML/HTML コードコンテンツをクリップボードにコピー
  1. <html>​​   
  2.   
  3. <本文>   
  4.   
  5. < code >コンピュータコード</ code >   
  6. < br   />   
  7. < kbd >キーボード入力</ kbd >   
  8. < br   />   
  9. < tt >テレタイプテキスト</ tt >   
  10. < br   />   
  11. < samp >サンプルテキスト</ samp >   
  12. < br   />   
  13. < var >コンピュータ変数</ var >   
  14. < br   />   
  15.   
  16. < p >   
  17. < b >コメント: </ b >これらのタグは、コンピューター/プログラミング コードを表示するためによく使用されます。
  18. </p>​​   
  19.   
  20. </本文>   
  21. </html>​​   

効果は以下のとおりです。

4. アドレス: この例では、HTML ファイルにアドレスを書き込む方法を示します。

XML/HTML コードコンテンツをクリップボードにコピー
  1. <!DOCTYPE html >   
  2. <html>​​   
  3. <本文>   
  4.   
  5. <住所>   
  6. 著者: < a   href = "mailto:[email protected]" >ドナルドダック</ a > . < br >     
  7. 次のサイトをご覧ください: < br >   
  8. Example.com < br >   
  9. ボックス564、ディズニーランド< br >   
  10. アメリカ合衆国
  11. </アドレス>   
  12.   
  13. </本文>   
  14. </html>​​   

効果は以下のとおりです。

5. 略語と頭字語: この例では、略語または頭字語を実装する方法を示します。

XML/HTML コードコンテンツをクリップボードにコピー
  1. <html>​​   
  2.   
  3. <本文>   
  4.   
  5. <略語  title = "etcetera" >など</ abbr >   
  6. < br   />   
  7. <頭字語 タイトル= "ワールド ワイド ウェブ" > WWW </頭字語>   
  8.   
  9. < p >一部のブラウザでは、タイトルを使用して、略語の上にマウスを移動したときに式の完全版を表示できます。 </p>​​   
  10.   
  11. <p> IE 5の頭字語要素でのみ機能します。 </p>​​   
  12.   
  13. < p > Netscape 6.2 の abbr 要素と acronym 要素の両方に有効です。 </p>​​   
  14.   
  15. </本文>   
  16. </html>​​   

効果は以下のとおりです。

6. テキストの方向: この例では、テキストの方向を変更する方法を示します。

XML/HTML コードコンテンツをクリップボードにコピー
  1. <html>​​   
  2.   
  3. <本文>   
  4.   
  5. < p >   
  6. ブラウザが双方向オーバーライド (bdo) をサポートしている場合、次の行は右から左 (rtl) に出力されます。
  7. </p>​​   
  8.   
  9. <ビード  dir = "rtl" >   
  10. ここにヘブライ語のテキストがあります
  11. </bdo>​​   
  12.   
  13. </本文>   
  14. </html>​​   

効果は以下のとおりです。

7. ブロック引用: この例では、さまざまな長さの引用を実装する方法を示します。

XML/HTML コードコンテンツをクリップボードにコピー
  1. <html>​​   
  2.   
  3. <本文>   
  4.   
  5. ここに長い引用文があります:
  6. <引用>   
  7. これは長い引用です。これは長い引用です。これは長い引用です。これは長い引用です。これは長い引用です。これは長い引用です。これは長い引用です。これは長い引用です。これは長い引用です。これは長い引用です。これは長い引用です。
  8. </引用>   
  9.   
  10. 以下は短い引用です:
  11. < q >   
  12. これは短い引用です。
  13. </q>​​   
  14.   
  15. < p >   
  16. blockquote 要素を使用すると、ブラウザは改行と余白を挿入しますが、 q 要素には特別なレンダリングはありません。
  17. </p>​​   
  18.   
  19. </本文>   
  20. </html>​​   

効果は以下のとおりです。

8. サブエフェクトを削除し、サブエフェクトを挿入します。

XML/HTML コードコンテンツをクリップボードにコピー
  1. <html>​​   
  2.   
  3. <本文>   
  4.   
  5. < p > 1ダースには< del > 20 </ del >あります  < ins > 12 個</ ins >個。 </p>​​   
  6.   
  7. < p >ほとんどのブラウザでは、これをテキストに取り消し線と下線を付ける形式に書き換えます。 </p>​​   
  8.   
  9. < p >一部の古いブラウザでは、取り消し線や下線が引かれたテキストが通常のテキストとして表示されます。 </p>​​   
  10.   
  11. </本文>   
  12. </html>​​   

効果は以下のとおりです。

上記の HTML テキスト フォーマットの簡単な例 (詳細な説明) は、エディターが皆さんと共有する内容のすべてです。参考になれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<:  暗号化における https の Apache 展開の概要

>>:  ウェブサイトの画像にグレー効果を加える3つの方法

推薦する

HTML で選択ドロップダウン ボックスのコンテンツが不完全に表示され、部分的にカバーされる問題の解決策

今日、問題が発生しました。クエリ バーのドロップダウン ボックスの内容が長すぎて、一部が隠れてしまっ...

JavaScript で実装された 7 つのソート アルゴリズムの概要 (推奨!)

目次序文バブルソート基本アルゴリズム2 番目の書き方は、基本的なアルゴリズムに基づいて改良されていま...

CSS3 を使用して中心点の周りに要素を配置する方法の例

この記事では、CSS3 を使用して中心点を中心に要素をレイアウトする方法の例を紹介します。詳細は次の...

CSS 読み込み効果の実装 パックマン

えーっと、名前はただの推測です 2333序文これは練習用の CSS デモです。何か間違っている点があ...

Vue+SSMは画像アップロードのプレビュー効果を実現します

現在の要件は、ファイルのアップロード ボタンがあることです。ボタンをクリックすると、アップロードする...

Vueを使用して天気コンポーネントをロードする方法の詳細な説明

この記事では、Vueを使用して天気コンポーネントをロードする方法を参考までに紹介します。具体的な内容...

Reactの状態の理解についての簡単な分析

複雑なコンポーネント (クラス コンポーネント) と単純なコンポーネント (関数コンポーネント) を...

JS が WeChat の「クソ爆弾」機能を実装

みなさんこんにちは、Qiufengです。最近、WeChatは新しい機能をリリースしました（WeCha...

CSS3は、大きな円のドット分布と回転効果を実現するためにtransform-originを使用します。

まず、transform-origin 属性を使用する必要があります。transform 属性は必ず...

TypeScript における型保護の詳細な説明

目次概要型アサーション構文ではインスタンスオブ構文typeof構文要約する概要TypeScript ...

Alibaba Cloud CentOS 7 に MySQL 8.0.13 をインストールする方法

1. MySQL インストール パッケージをダウンロードします(ここにはコツがあります。おそらく、こ...

MySQL トリガーの追加、削除、変更、クエリ操作の例

この記事では、例を使用して、MySQL トリガーの追加、削除、変更、およびクエリ操作について説明しま...

mysqlは指定された期間内の統計データを取得します

mysqlは指定された期間内の統計データを取得します年別統計 選択 カウント（*）、 DATE_FO...

docker-maven-plugin の詳細な使用方法

目次Docker-Maven-プラグインMavenプラグインの自動デプロイメント手順1. ホストマシ...

MySQLのUPDATE文の落とし穴を記録する

背景最近、オンライン操作中に DML ステートメントを実行しました。これは絶対確実だと思っていました...