今日はあまり使わないHTMLタグ「subタグ」と「supタグ」を紹介します。 関連記事: HTML タグ: optgroup、sub、sup、bdo 今日はあまり使わないHTMLタグ「subタグ」と「supタグ」を紹介します。 定義と使用法: <sub> タグは下付きテキストを定義します。 <sup> は上付き文字のテキストを定義します。これらはすべてインライン要素であり、デフォルトでは現在のフォントよりもわずかに小さくなります。 例: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <ヘッド> <meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=gb2312" /> <title>HTML の sub タグと sup タグ</title> <スタイル タイプ="text/css"> * { フォントサイズ:12px; フォントファミリー:Tahoma} </スタイル> </head> <本文> <div> このタグは<sub>sub</sub>です このタグは<sup>sup</sup>です </div> </本文> </html> ![]() 類推で学ぶ: この効果を数式で実現する方法を見てみましょう。 ![]() <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <ヘッド> <meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=gb2312" /> <title>HTML の sub タグと sup タグ</title> <スタイル タイプ="text/css"> * { フォントサイズ:12px; フォントファミリー:Tahoma} </スタイル> </head> <本文> <div> x1y23=15 </div> </本文> </html> その他の用途: 偶然にも、Taobao が以前価格を調整したことを発見しました (理由はわかりませんが、現在は元に戻っています)。これは、従来の価格表示とは異なります。 ![]() ![]() <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <ヘッド> <meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=gb2312" /> <title>HTML の sub タグと sup タグ</title>> </head> <スタイル タイプ="text/css"> <!-- 本文 { フォント:12px/1.8 タホマ } span.price { フォントファミリー:Arial、Helvetica、sans-serif; フォントサイズ:16px; フォントの太さ:700; 色:赤;} span.price サブ { vertical-align:baseline; font-size:12px;} span.price sup { vertical-align:text-bottom; color:#555} --> </スタイル> <本文> <span class="price"><sup>¥</sup>43.<sub>26</sub></span> </本文> </html> subタグとsupタグの応用はこれに限らないと思います。他のHTMLタグでも同様です。理解し、思考と想像力を駆使すれば、上手に使いこなして独自の魅力を発揮することができます。 |
<<: docker を使用した pxc クラスターのインストールに関する詳細なチュートリアル
>>: CSS のフローティング サンプル コードをクリアする方法
パノラマビュー効果を見てみましょう: 住所を表示スクリーンショット: 体験してみると、周囲の環境がぐ...
最近、CSS3 アニメーションのソース コードの実装をいくつか見ていたところ、CSS コード アニメ...
目次セマフォNginx ホットデプロイメント上記のブログ投稿に従ってください。ファイアウォールをオフ...
ラベル表示モード(重要) divタグとspanタグ1. スタイルはまったく同じですが、ラベルが異なり...
この記事は主に、MySQLを再インストールする際のクリーンでないアンインストールのさまざまな問題をま...
目次1. はじめに2. axiosインターセプターを使用してフロントエンドログを出力する1. はじめ...
MySQL では、LOAD_FILE() 関数はファイルを読み取り、その内容を文字列として返します。...
目次概要Vuex の 4 つの主要オブジェクト状態の使用突然変異の使用ゲッターの使用アクションの使用...
この記事では、主に、上下固定と中スライドレイアウトを実現するためのフレックスレイアウトのレイアウト方...
CN2ラインとは何ですか? CN2 は、China Telecom Next Carrier Ne...
IE6 は PNG の透明度をサポートしていないと多くの人が言っています。実際、IE は 100%...
概要: この記事では、Avro データをシリアル化して生成し、FlinkSQL を使用して解析する方...
目次1. ルータビュー2. ルータリンク3. リダイレクト4. ルーティングエイリアス5. ルーティ...
1. ネットワークの最適化YSlowには23のルールがあります。これら数十のルールは、主に、不要な...
最近、プロジェクトの過程で問題に遭遇しました。メニューバーを常に上部に表示し、後続の要素をその下に表...