【HTML要素】タグテキストの詳細説明

【HTML要素】タグテキストの詳細説明

1. 基本的なテキスト要素を使用してコンテンツをマークアップする

まず表示効果を見てみましょう:

対応する HTML コード:

XML/HTML コードコンテンツをクリップボードにコピー
  1. <!DOCTYPE html >   
  2. < html   lang = "ja" >   
  3. <ヘッド>   
  4.      <メタ 文字セット= "UTF-8" >   
  5.      <タイトル> Learn4Font </タイトル>   
  6. </ヘッド>   
  7. <本文>   
  8. < p >要素 b — < b >私が例です。 </ b > </ p >   
  9. < p >要素 em — < em >私がその例です。 </ em > </ p >   
  10. < p >要素 i — < i >私が例です。 </ i > </ p >   
  11. < p >要素 s — < s >私が例です。 </ s > </ p >   
  12. < p >要素が強い -- < strong >私がその例です。 </ strong > </ p >   
  13. < p >要素 u — < u >私が例です。 </ u > </ p >   
  14. < p >要素小 — < small >私が例です。 </ small > </ p >   
  15. < p >要素 sub — < sub >私が例です。 </ sub > </ p >   
  16. < p >要素 sup —— < sup >私が例です。 </ sup > </ p >   
  17. </本文>   
  18. </html>​​   

対応する要素のカスタム スタイル:

XML/HTML コードコンテンツをクリップボードにコピー
  1. *一般的にはキーワードや商品名を指します*
  2. b{フォントの太さ: 太字;}
  3.   
  4. *一般的に強調を示します*
  5. em {フォントスタイル: イタリック体;}
  6.   
  7. *一般的に外国語や科学用語を指します*
  8. i {フォントスタイル: 斜体;}
  9.   
  10. *一般的に不正確さや訂正を示します*
  11. s {テキスト装飾: 取り消し線;}
  12.   
  13. *一般的に重要なテキストを示します*
  14. 強い {font-weight: bolder;}
  15.   
  16. *一般的にはテキストに下線を引くことを意味します*
  17. u {テキスト装飾: 下線;}
  18.   
  19. *一般的には小さいフォントのコンテンツを追加することを意味します*
  20. 小さい {フォントサイズ: 小さい;}
  21.   
  22. *一般的には上付き文字と下付き文字を追加することを意味します*
  23. sup {垂直位置: サブ; フォントサイズ: 小さい;}
  24. サブ {垂直位置: スーパー; フォントサイズ: 小さい;}

2. 言語要素を使用する

ruby、rt、rp 要素の効果をまず見てみましょう。

対応するコード:

XML/HTML コードコンテンツをクリップボードにコピー
  1. < 10 ...  スタイル= " フォントサイズ: 3em; " >   
  2.      < ruby​​ ​​>魑< rp > ( </ rp > < rt > chī </ rt > < rp > ) </ rp > </ ruby​​ ​​>   
  3.      < ruby​​ ​​>魅< rp > ( </ rp > < rt >メイ</ rt > < rp > ) </ rp > </ ruby​​ ​​>   
  4.      < ruby​​ ​​>魍< rp > ( </ rp > < rt > wǎng </ rt > < rp > ) </ rp > </ ruby​​ ​​>   
  5.      < ruby​​ ​​>魉< rp > ( </ rp > < rt > liǎng </ rt > < rp > ) </ rp > </ ruby​​ ​​>   
  6. </p>​​   

3. フォーマット済みのコンテンツを使用する

pre 要素はブラウザがコンテンツを処理する方法を変更し、空白が折りたたまれるのを防ぎ、ソース ドキュメントの書式設定を保持します。

XML/HTML コードコンテンツをクリップボードにコピー
  1. <前>   
  2.      <コード>   
  3. var fruit = ["リンゴ","オレンジ","マンゴー","チェリー"];
  4. for(var i = 0 ; i <  果物.長さ; i++){
  5. document.writeln("私は " + 果物[i] が好きです);
  6. }
  7.      </コード>   
  8. </前へ>   

上記の[HTML要素]テキストのマーキングの詳細な説明は、エディターがあなたと共有するすべての内容です。参考になれば幸いです。また、123WORDPRESS.COMを応援していただければ幸いです。

オリジナル URL: http://www.cnblogs.com/luka/archive/2016/07/23/5532134.html

<<:  面接では、select...for update がテーブルをロックするのか、それとも行をロックするのか尋ねられました。

>>:  dockerにros2をインストールするための詳細な手順

推薦する

MySQLにおけるSQLの実行順序についてのちょっとした質問

今日、仕事中に左結合に関するSQLの問題に遭遇しました。後で解決しましたが、この問題を通じてSQLの...

メッセージボードにメッセージを追加および削除するための JavaScript

この記事では、JavaScript メッセージ ボードでメッセージを追加および削除する小さな例を詳細...

Tomcat で JNDI データ ソースを構成する 3 つの方法

これまでの仕事では、開発サーバーは一般的にTomcatでした。データソースは、多くの場合、appli...

uniappの無痛トークンリフレッシュ方法の詳細な説明

フロントエンドがインターフェースを要求すると、バックエンドでインターフェースが定義されます。ステータ...

MIME エンコーディングの概要 (オンライン情報と実際の経験から統合)

1. MIME: 多目的インターネットメール拡張インペリアル カレッジ オブ コンピュータ オンラ...

最初のReactページを作成する方法

目次Rractとは何ですか?背景React スキャフォールディングJSXとは何かRractとは何です...

Tomcatの動作原理を分析する

SpringBoot は巨大な Python のようで、ゆっくりと私たちの周りを巻きつき、麻痺させま...

WeChatアプレットのオーディオコンポーネントがiOSで再生できない問題の解決策

解決策:クリック イベントをオーディオ コンポーネントにバインドし、再生メソッドと一時停止メソッドを...

テーブルはセルとimg画像を結合してtd HTML全体を埋めます

ソースコード（一部のクラスは削除されています）:コードをコピーコードは次のとおりです。 <テー...

MySQL の Docker インストールと設定手順

目次序文環境インストールMySQLコンテナを作成して起動する思い出させるMySQLコンテナコマンドを...

Linux で SSH 経由でリモート ファイルシステムをマウントする方法の詳細な説明

SSHFS の機能: FUSE（Linux向けの最高のユーザー空間ファイルシステムフレームワーク）を...

バッチモードでtopコマンドを実行する方法

top コマンドは、Linux システムのパフォーマンスを監視するために誰もが使用している最適なコマ...

MySql 8.0.11-Winxp64 (無料インストール版) ​​設定チュートリアル

1. インストールディレクトリにzipパッケージを解凍します。まず、mysql-8.0.11-win...

docker を使用して Redis マスター/スレーブを構築する方法

1. Docker環境を構築する1. Dockerfileを作成する Centos:latest か...

MySQLデータベースでゼロ値を含む日付の問題について簡単に説明します

デフォルトでは、MySQL は日付に 0 値を挿入することを受け入れますが、実際には日付の 0 値に...