HTML サブタグと sup タグ

HTML サブタグと sup タグ

今日はあまり使わない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>
x1+y23=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タグでも同様です。理解し、思考と想像力を駆使すれば、上手に使いこなして独自の魅力を発揮することができます。

<<:  MySQLデスクトップツールSQLyogのリソースとアクティベーション方法は、白黒のコマンドラインに別れを告げます

>>:  純粋なCSSで立体的な画像配置効果を実現するサンプルコード

推薦する

XHTMLにおけるH1タグの位置について

最近、H1 については多くの議論が行われていますが (記事のコンテンツ ページ内)、おおよそ 2 つ...

Vueは、センシティブな単語フィルタリングコンポーネントを検出するためのさまざまなアイデアを実装しています。

目次前面に書かれた要件分析 v1アイデア1: インターセプションメソッドを使用して入力ボックスの入力...

JavaScriptで配列かどうかを判断するためのさまざまな方法のまとめ

目次序文配列.isArrayコンストラクタインスタンスプロトタイプオブジェクト.プロトタイプ.toS...

MySQL における SQL ページングクエリのいくつかの実装方法と利点と欠点

【SQL】SQLページングクエリの概要開発プロセスではページングが必要になることがよくあります。今日...

JavaScript のシングルトン デザイン パターン

目次1. デザインパターンとは何ですか? 2. デザインパターンの5つの設計原則（SOLID） 3....

Vue の双方向イベントバインディング v-model の原理についての簡単な説明

目次説明する：要約する補充するDOM を直接変更して操作する js や jQuery とは異なり、V...

Typescriptを使用してWeChatミニプログラムを開発するための詳細な手順

Typescript の利点については詳しく説明する必要はありません。ご興味があれば、(https:...

v-html レンダリング コンポーネントの問題

以前 HTML を解析したことがあるので、今日は Vue ドラッグ アンド ドロップを使用して、Ku...

純粋なCSSを使用してスクロールシャドウ効果を実現します

端的に言うと、スクロール可能な要素には非常によくある状況があります。通常、スクロールすると、要素が現...

Vueでミックスインを使用する方法

目次序文使い方要約する序文Vue にはコードの再利用に使われる mixins という設定項目がありま...

HTMLにおけるbackground-image属性の設定の詳細な説明

写真といえば、まず背景画像が思い浮かびます。私たちの装飾の多くは背景画像を使用して実現されているから...

React のクラスからフックへの移行

目次リアクトフック序文なぜフックなのか？クラス関数クラスとフックの比較フックはコンポーネントの状態を...

JS デコレータ パターンと TypeScript デコレータ

目次デコレータパターンの紹介TypeScript のデコレータデコレータの使用デコレーターファクトリ...

新しいカーネルをLinuxシステムに移植する手順

1. ubuntu16.04 イメージと対応する ubuntu16.04 カーネル バージョンのソー...

Vue の詳細な入門ノート

目次1. はじめに2. 初期ビュー(I) Vueの概念を理解する(II) MVVMアーキテクチャ(I...