HTML タグ: サブタグと sup タグ

HTML タグ: サブタグと sup タグ

今日はあまり使わない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 のフローティング サンプル コードをクリアする方法

推薦する

Docker コンテナのタイムゾーン エラーの問題

目次背景質問問題分析と解決策新たな問題問題分析と解決策背景node-schedule スケジュール ...

React 並行関数エクスペリエンス (フロントエンド並行モード)

React は、開発者が Web およびモバイルベースのアプリケーションを作成するために使用するオ...

HTML で相対パスを使用してディレクトリのすべてのレベルのファイルを取得する方法の詳細な説明

相対パスの概念現在のファイルの場所を参照ポイントとして使用して、ターゲット ファイルへのパスを確立し...

Win7 の VMware 仮想マシンに Linux7.2 をインストールするインターネット アクセス構成チュートリアル

参考までに、win7システム上のVMware仮想マシンにlinux7.2インターネットアクセス構成を...

VMware14 に CentOS 7 をインストールするグラフィック チュートリアル

CentOS の紹介CentOS は、Red Hat Linux が提供する無料で利用できるソースコ...

VueはExcelデータをエクスポートするパブリック関数メソッドをカプセル化します

vue+element UI は Excel データをエクスポートするためのパブリック関数をカプセル...

HTML フォーム送信アクションと URL ジャンプアクションの違い

フォームのアクションは URL ジャンプとは異なります。フォームはバックグラウンドにデータを渡すこと...

この記事では、VUE の複数の DIV とボタン バインディングの Enter イベントを実装する方法を説明します。

現在、OK ボタンをクリックしたときやキーボードの Enter キーを押したときに操作を実行するとい...

2列のデータをSQLの新しい列として操作する

以下のように表示されます。 bb_sbからa1、a2、a1+a2 a、a1*a2 b、a1*1.0/...

Linux でパスワードの有効期限を表示および設定する方法

適切な設定を行うことで、Linux ユーザーにパスワードを定期的に変更させることができます。パスワー...

mysql8.0.11データディレクトリ移行の実装

mysql のデフォルトのストレージ ディレクトリは/var/lib/mysql/です。以下は、デフ...

Linux でシステム ディスクを初期化した後にデータ ディスクを再マウントする方法

Linuxインスタンスでシステムディスクを初期化した後、データディスクを再マウントするLinux イ...

JSはreduce()メソッドを使用してツリー構造データを処理します

目次意味文法例1. 初期値initが渡されない2. 初期値を渡す場合3. アレイの重複排除4. Re...

HTML テーブルタグチュートリアル (26): セルタグ

<TD> タグの属性は、テーブル内のセルのプロパティを設定するために使用されます。表 &...

Vue+canvas は、ウォーターフォール チャートを上から下までリアルタイムに更新する効果を実現します (QT と同様)

早速ですが、デモ画像をご紹介します。実装されている機能は、左側に凡例、右側にウォーターフォール チャ...