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つの方法

推薦する

XHTML 入門チュートリアル: シンプルな Web ページの作成

1 分で最初の Web ページを作成します。簡単な Web ページを作ってみましょう。ぜひフォローし...

MySQLのユーザー権限の確認と管理方法の詳細な説明

この記事では、例を使用して、MySQL ユーザー権限を確認および管理する方法を説明します。ご参考まで...

Vue3カプセル化メッセージメッセージプロンプトインスタンス関数の詳細な説明

目次Vue3 カプセル化メッセージプロンプトインスタンス関数スタイルレイアウトカプセル化メッセージ....

JavaでTomcatサーバーを起動/停止する方法

1. プロジェクト構造 2.Tomcat.javaを呼び出す パッケージ com.calltomca...

CSS はこのように使用できますか?気まぐれなグラデーションの芸術

前回の記事「1行のCSSコードの魅力」では、たった1行のCSSコードで生成できる美しい（奇妙な感じと...

MySQL DEFINER の使用方法の詳細な説明

目次序文： 1.DEFINERの簡単な紹介2. いくつかの注意点要約:序文： MySQL データベー...

モバイル適応型ウェブページ効果は、小さな表示ページの問題を解決します

仕事上、携帯電話に適応した Web ページ効果を作成する必要があります。ようやく完成しました。まずは...

Mysql のいくつかの複雑な SQL ステートメント (重複行のクエリと削除)

1. 重複行を見つける blog_user_relation a から * を選択 WHERE (...

Linuxでディスクをマウントする方法

仮想マシンを使用しているときに、ディスク容量が不足し、継続使用するためにディスクをマウントする必要が...

CSSはcalc()を使用して現在の表示画面の高さを取得します

まず、CSS3 の相対的な長さの単位を見てみましょう (詳細なチュートリアルを参照してください)。相...

image/x-png の ContentType について

これにより、png ファイルのアップロードも不可能になりました (後で情報を調べたところ、レジストリ...

CSS3 クリックボタン円形進行ティック効果実装コード

目次8. CSS3 クリックボタンの円形進捗チェック効果8.1 画像プレビュー8.2 index.h...

MySQL の結合テーブルにインデックスを作成する方法

この記事では、MySQL で 2 つのテーブルを関連付ける結合テーブルにインデックスを作成する方法を...

Vue データの応答性の概要

データの応答性について話す前に、Vue はデータに対して具体的に何を行うのかという非常に重要な問題を...

js のプロトタイプ、プロトタイプ オブジェクト、プロトタイプ チェーンの包括的な分析

目次プロトタイプを理解するプロトタイプオブジェクトを理解するインスタンスプロパティとプロトタイププロ...