【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をインストールするための詳細な手順

推薦する

HTML フォーム_PowerNode Java アカデミー

1. フォーム1. フォームの役割HTML フォームは、さまざまな種類のユーザー入力を受け取り、ユー...

v-html レンダリング コンポーネントの問題

以前 HTML を解析したことがあるので、今日は Vue ドラッグ アンド ドロップを使用して、Ku...

forループ内のvarの問題の解決

序文var は ES5 における変数宣言方法です。var で変数を宣言するとループ変数がグローバル変...

Reactでのイベントバインディングの実装は3つの方法を指しています

1. 矢印関数1. 矢印関数自体はこれをバインドしないという事実を利用します。 2. render(...

ウェブページ経由で jar パッケージを Nexus にアップロードする方法

Maven を使用してプロジェクトを管理する場合、jar パッケージをプライベート ウェアハウスにア...

純粋な CSS 実装 (スクリプトなし) HTML コマンド スタイルのツールチップ テキスト プロンプト効果

実行プロセスを分析します。マウスをノードに移動して、ノードにツールチップ実装を開くための識別子 (...

Vue要素と多言語切り替えの詳細な説明

目次序文複数の言語を切り替えるにはどうすればいいですか? 1. vue-i18nパッケージをインスト...

パーティクルダイナミックボタン効果を実現するCSS

オリジナルリンクhttps://github.com/XboxYan/no…ボタンは、おそらく We...

MySQL方言の簡単な紹介

データベースはさておき、人生における方言とは何でしょうか?方言とは、ある場所特有の言語です。他の場所...

Vue の基本的な手順の例のグラフィック説明

目次1. v-on指令1. 基本的な使い方2. 糖衣構文3. イベントパラメータ4. イベント修飾子...

mysql 3つのテーブルを接続してビューを作成する

3 つのテーブルが接続されています。テーブル A のフィールド a はテーブル B のフィールド b...

MySQL で union all を使用してユニオンソートを取得する方法

プロジェクトでは、何らかの不可逆的な理由により、テーブルに保存されたデータがページの表示要件を満たす...

HTML テーブルタグチュートリアル (32): セルの水平方向の配置属性 ALIGN

水平方向では、セルの配置を左、中央、右に設定できます。基本的な構文<TD ALIGN=&quo...

MySQLテーブル内の重複データをクエリする方法

hk_test(ユーザー名、パスワード) に値を挿入 ('qmf1', '...

JSにおける合同と不等式、等式と不等式の問題について

目次一致と不一致一致するすべてが平等ではない平等と不平等等しい等しくない一致と不一致シンボルの両側の...