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 のフローティング サンプル コードをクリアする方法

推薦する

Linux サーバーは最大いくつのポートを開くことができますか?

目次ポート関連の概念:ポートとサービスの関係1: nmapツールが開いているポートを検出する2: n...

Nginxにモジュールを動的に追加する方法

前面に書かれた多くの場合、現在のプロジェクトの状況とビジネスニーズに基づいて Nginx をインスト...

Vue のループフォーム項目例の詳細な説明

場合によっては、ユーザーがボタンをクリックして同様のフォームを追加し、クリックごとに 1 回追加でき...

MySQL公式エクスポートツールmysqlpumpの使用

目次導入説明書実際の経験長所と短所総括する導入mysqlpump は mysqldump の派生です...

Vueプロジェクトでよく使われる実践的なスキルのまとめ

目次序文1. マルチレベルのデータとイベントの配信には$attrsと$listenersを使用する2...

IE のテキストモード! DOCTYPE の役割の紹介

前の記事で説明したフォームの自動入力の問題を解決した後、新しい問題が発生しました。ページの一部のスタ...

Dockerコンテナデータボリュームの原理と使用法の分析

コンテナデータボリュームとはデータがコンテナ内にある場合、コンテナを削除するとデータは失われます。例...

VMware Workstationはデバイス/資格情報ガードと互換性がありません

仮想マシンをインストールするときに、「VMware ワークステーションはデバイス/資格情報ガードと互...

高度な JavaScript フロントエンド開発でよく使用されるいくつかの API の例の詳細な説明

目次ミューテーションオブザーバーAPI特徴インターセクションオブザーバーAPI例えば画像の遅延読み込...

Docker 構成 Alibaba Cloud イメージアクセラレーション プル実装

今日はdockerを使ってイメージをpullしたのですが、速度が悪くて見れず最後まで待ち続けました。...

MySQL 8.0.21 の最新バージョンのダウンロード、インストール、設定に関する詳細なチュートリアル

1. ダウンロード1. インストールパッケージをダウンロードするMySQL ダウンロード パス: h...

ハイパーリンクを開くターゲットのテスト

リンクのターゲット属性は、リンクが開く場所を決定します。その値は通常、_blank、_self、_p...

Linux クラウド サーバーに JDK と Tomcat をインストールするための詳細な手順 (推奨)

JDKをダウンロードしてインストールするステップ 1: まず、公式 Web サイト http://...

wavesurfer.js によるオーディオ波形描画の実装

1. レンダリングを見る進むを選択: 後方を選択: コードは次のとおりです(例): <テンプレ...

nacos が mysql に接続できない場合の解決策

理由nacos の pom が依存する mysql バージョンが、mysql バージョンと一致してい...