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

推薦する

ハイパーリンクのWebデザイン原則

<br />関連記事: Web コンテンツ ページ作成のための 9 つの実用的なヒント、...

node.jsミドルウェアの種類についての簡単な説明

目次概要1. アプリケーションレベルのミドルウェア2. 組み込みミドルウェア3. サードパーティミド...

Ubuntu 18.04 Linux システムに JDK と Mysql をインストールする方法

プラットフォームの展開1. JDKをインストールするステップ1. OracleJDKをダウンロードす...

jsを使って簡単な計算機を作る

この記事では、jsで簡単な計算機を作成する具体的なコードを参考までに共有します。具体的な内容は次のと...

Win2008 R2 mysql 5.5 zip 形式 mysql のインストールと設定

Win2008 R2 zip形式のMySQLのインストールと設定1. Baidu MySQL 5.6...

Reactにおける不変値の説明

目次不変の値とは何ですか?不変の値を使用するのはなぜですか? Reactのパフォーマンス最適化は不変...

MySQL シリーズ: redo ログ、undo ログ、binlog の詳細な説明

取引の実施REDO ログはトランザクションの永続性を保証し、UNDO ログはトランザクションのロール...

JS の 3 つの主要な問題、非同期性とシングルスレッドについて簡単に説明します。

目次シングルスレッド非同期シングルスレッドしかし、開発中にネットワーク リクエストやスケジュールされ...

Javascript のスコープとクロージャの詳細

目次1. 範囲2. スコープチェーン3. 語彙の範囲5. 閉鎖の適用6. クロージャの欠陥7. 閉会...

LinuxでのDockerのインストールチュートリアル

Docker パッケージは、デフォルトの CentOS-Extras リポジトリにすでに含まれていま...

HTML 選択タグにおける単一選択と複数選択の詳細な説明

select 要素は、単一選択または複数選択のメニューを作成します。フォームが送信されると、ブラウザ...

Ubuntu での MySQL へのリモート ログインのインストールと設定に関するチュートリアル

この記事では、MySQLのインストールと設定のリモートログインチュートリアルを参考までに紹介します。...

Mysqlの日付と時刻関数を扱う記事

目次序文1. 現在の時刻を取得する1.1 現在の日付と時刻を返す1.2 現在の日付を取得する1.3 ...

JavaScript におけるさまざまなバイナリオブジェクトの関係の詳細な説明

目次序文さまざまなオブジェクト間の関係配列バッファ型付き配列Uint8ClampedArray文字間...

HTMLはBaidu百科事典のナビゲーションドロップダウンメニュー機能を模倣します

HTML は、Baidu 百科事典のナビゲーション ドロップダウン メニュー機能を模倣します。具体的...