【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でキーワードを強調表示するのに最適なソリューション

最近、プロジェクトに取り組んでいるときに、Web ページ上のキーワードを強調表示する機能に遭遇しまし...

MySQLはインデックスプッシュダウンを数秒で理解するのに役立ちます

目次1. インデックスプッシュダウン最適化の原理2. インデックスプッシュダウンの具体的な実践1. ...

Vue バッチ更新 DOM 実装手順

目次シーン紹介深い応答性トリガーゲッターDep.targetを探すゲッターセッター要約するシーン紹介...

カルーセルカルーセルケースのJS実装

この記事の例では、カルーセルカルーセルを実装するためのJSの具体的なコードを参考までに共有しています...

Oracle の開閉の 4 つのモード

>1 データベースを起動するcmd コマンド ウィンドウで、「sqlplus」を直接入力して ...

CSS における px、em、rem、pt の特徴、違い、変換について詳しく説明します。

コンセプト紹介： 1. px (ピクセル):仮想的な長さの単位で、コンピュータ システムのデジタル画...

docker mysqlの起動時に初期化SQLを実行する

1.Mysqlイメージを取得するdocker pull mysql:5.7 2. MySQLイメージ...

通知メッセージカルーセルを実装するための CSS3 トランジション

Vueバージョンをファイルにコピーして使用します <テンプレート> <!-- カル...

Docker に Kong ゲートウェイをインストールする方法の例

1. Dockerネットワークを作成する docker ネットワーク作成 kong-net 2. デ...

html2canvas で破線境界線を実装する例

html2canvas は、HTML 要素からキャンバスを生成するライブラリです。描画されるキャンバ...

シンプルなドラッグ効果を実現するJavaScript

この記事では、簡単なドラッグ効果を実現するためのJavaScriptの具体的なコードを参考までに紹介...

MYSQL データベース GTID はマスタースレーブレプリケーションを実現します (超便利)

1. Mariaソースを追加する vi /etc/yum.repos.d/MariaDB.repo...

Linuxでmysqlの定期的なコールドバックアップを実装するためにmysqldump+expect+crontabを使用するアイデアの詳細な説明

目次1. 遭遇した問題2. アイデア3. コード1. 遭遇した問題私たちは皆、mysqldump を...

この記事はVueのライフサイクルを理解するのに役立ちます

目次1. beforeCreate & created 2. マウント前とマウント済み3. ...

史上最も簡単な MySQL データのバックアップと復元のチュートリアル (パート 2) (パート 37)

データのバックアップと復元パート3の詳細は次のとおりです基本的な概念:バックアップ、現在のデータまた...