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

推薦する

MySQLで判定文を書く方法のまとめ

MySQL で判断文を書く方法:方法1. CASE関数case関数の構文: CASE条件 値1の場合...

MySQL 8.0 パスワード有効期限ポリシーの詳細な説明

MySQL 8.0.16 以降では、パスワードの有効期限ポリシーを設定できます。今日は、この小さな知...

HTMLの基本概念の詳細な説明

HTMLとは何ですか? HTML は Web ページを記述するために使用される言語です。 •HTML...

Centos7 システムでの MySQL マスター スレーブ同期構成スキーム

序文最近、高可用性プロジェクトに取り組む際には、データの同期が必要になっています。ノードが 2 つし...

ラムダ式の原則と例

ラムダ式ラムダ式 (クロージャとも呼ばれる) は、Java 8 のリリースを推進した最も重要な新機能...

Docker+Nginx を使ってシングルページアプリケーションをデプロイする

開発から導入まで自分で行うシングルページアプリケーションを開発する場合、ビルドを実行した後 npm ...

WeChatアプレットはビデオプレーヤーのビデオコンポーネントを使用します

この記事の例では、WeChatアプレットのビデオプレーヤーコンポーネントの具体的なコードを参考までに...

MySQL の挿入およびバッチ ステートメントのいくつかの例の詳細な説明

目次序文1.無視を挿入2. 重複キーの更新時3. を置き換える4.存在しない場合は挿入する5. デー...

データベース接続のURLの詳細な説明と概要

データベース接続のURLの詳細な説明と概要JDBC URL = プロトコル名 + サブプロトコル名 ...

jQueryはシンプルなポップアップウィンドウ効果を実装します

この記事では、簡単なポップアップウィンドウ効果を実現するためのjQueryの具体的なコードを参考まで...

JSでHTML本文のスタイルを変更する

目次1. 本来の定義2. JS操作、幅の変更を例に3. 効果: 幅が変更されました 1. 本来の定義...

Nginx の負荷分散方法の概要

負荷分散を理解するには、まずフォワード プロキシとリバース プロキシを理解する必要があります。注記:...

JavaScript におけるイベント バブリング メカニズムの詳細な分析

バブリングとは何ですか? DOM イベント フローには、イベント キャプチャ ステージ、ターゲット ...

MySQL ストアドプロシージャの長所と短所の分析

MySQL バージョン 5.0 ではストアド プロシージャのサポートが開始されました。ストアド プロ...

検索エンジンのウェブサイトの入り口の無料コレクション

1: Baiduウェブサイトログイン入口ウェブサイト: http://www.baidu.com/s...