XHTML の珍しいが便利なタグ

XHTML の珍しいが便利なタグ
Xhtml には、あまり使用されないが非常に便利なタグが多数あります。半分の労力で 2 倍の結果を達成できるものもあれば、セマンティクスを改善できるもの、使いやすさを改善できるものもあります。そのいくつかをまとめてみました。まとめの原則は、便利で使えるものであることです。つまり、ほとんどのブラウザがサポートしている必要があります。そうでなければ、「お得」とはみなされません。ただ「看板」を見てため息をつくだけでは何の意味があるのでしょうか?
<base> タグ
効果:タグは、ページ上のすべてのリンクのデフォルトのリンク アドレスまたはリンク ターゲットを指定します。ホームページ上のすべてのリンクを新しいウィンドウで開く必要がある場合があります。通常、リンクはこのように記述しますが、このタグを使用すると、1 回で実行できます。
財産:
Href: リンクアドレス
target: ターゲット。値は _blank、_parent、_self、_top のいずれかで、Strict モードを除くすべてのモードで使用できます。この使用法を最初に発見したのは 163.com でした。
使用法:
 <head > <!—寫在head標簽之間-- >
<base href = "http://www.qq.com/" /> <!—將默認鏈接定義為http://www.qq.com/-- >
<base target = "_blank" /> <!—將默認鏈接目標定義為新窗口中打開-- >
</head>


<caption> タグ
機能:キャプション タグは、表のタイトルを定義するために使用されます。表の目的を説明するために表にタイトルを付けることは、非常に「意味的」です。キャプションは表の後に記述する必要があります。デフォルトのスタイルでは、表の上部の中央に表示されます。 CSS を通じてスタイルを変更できます。
使用法:

 <table width = "200" border = "1" >
<caption > <!--caption應該寫在table之后-->
其實我是caption
</caption>
<tr >
<td > &nbsp; </td>
<td > &nbsp; </td>
</tr>
<tr >
<td > &nbsp; </td>
<td > &nbsp; </td>
</tr>
</table>


<thead> タグ、<tbody> タグ、<tfoot> タグ
機能: thead、tfoot tbody タグは、その名前の通り、表のヘッダー (多くの人は単に th を使用します)、件名、およびフッターです。これらにより、表をより意味的に表現し、表のパフォーマンスをより便利に制御できるようになります。海外では、これらの 3 つの表を非常に異常な方法で使用して、タイトルを表に沿わせたり、表本体の高さを固定して、余分な行にスクロール バーを表示したりしている人もいます。ご興味がありましたら、こちらから検索したり試したりしてみてください。
注意: thead、tfoot、tbodyを使用する場合 要素がある場合は、すべてを使用する必要があります。これらは thead、tfoot、tbody の順序で表示されるため、ブラウザはすべてのデータを受信する前にフッターをレンダリングできます。
使用法:

 <table border = "1" >
<thead >
<tr >
<th >科目</th>
<th >分數</th>
</tr>
</thead>
<tfoot >
<tr >
<td >總分</td>
<td > 159 </td>
</tr>
</tfoot>

<tbody >
<tr >
<td >語文</td>
<td > 99 </td>
</tr>
<tr >
<td >數學</td>
<td > 60 </td>
</tr>
</tbody>
</table>


<fieldset> タグと <legend> タグ
機能: <fieldset> 要素はフォーム内の要素を分類するために使用され、<legend> はこのグループのタイトルを定義できます。以下のようなレイアウトを見たことがあるはずです: ドモ! CSS を使用してスタイルを設定することもできます。
使用法:

 <form >
<fieldset >
<legend >基本信息</legend>
姓名: <input type = "text" />
性別: <input type = "text" />
</fieldset>
</form>


<sub> タグと <sup> タグ
関数: タグと <sub> タグはそれぞれ上付き文字と下付き文字です。ブラウザによって動作は異なりますが、CSS を使用してスタイルを定義することもできます。
使用法:

 2 <sup >我是上標</sup>
2 <sub >我是下標</sub>


<label> タグ
目的:ラベル ラベルを使用すると、フォームのクリック領域が拡大され、フォームの使いやすさが向上します。次の使用法を見てみましょう。テキストをクリックすると、ラジオ コントロールをクリックするのと同じになります。これにより、ユーザー エクスペリエンスが向上するのではないでしょうか。
使用法:

 <form >
<label for = "nan" >先生</label>
<input type = "radio" name = "sex" id = "nan" />
<br />
<label for = "nv" >女士</label>
<input type = "radio" name = "sex" id = "nv" />
</form>

<optgroup> タグ
効果: タグを使用すると、選択内のオプションをグループ化できます。これは、ドロップダウン項目が多数ある場合に非常に便利です。ラベル タグを使用して、各グループに名前を付けます。 Taobao のように CSS を使用してグループごとに異なる色を定義することもできます。
使用法:
 <select >
<optgroup label = "自駕游" > <!--配合label標簽給每組命名-->
<option >省內</option>
<option >省外</option>
</optgroup>
<optgroup label = "旅行社" >
<option >省內</option>
<option >省外</option>
<option >國外</option>
</optgroup>
</select>

さらに詳しい xhtml タグに興味がある場合は、「HTML および XHTML 決定版ガイド」という書籍を参照してください。この本は電子版もオンラインで入手できます。英語のコピー版を読みました。英語ですが、理解するのはそれほど難しくありません。
他にも便利なタグをご存知でしたら、ぜひ教えてください!

<<:  MySQL マスタースレーブレプリケーションと読み取り書き込み分離の詳細な説明

>>:  高性能なウェブサイトのための14のテクニック

推薦する

Vueは3階層メニューを再帰的に実装する

この記事の例では、3階層メニューを再帰的に実装するVueの具体的なコードを参考までに共有しています。...

Vue で v-for を更新する方法

ヒント:配列変更メソッドによりv-forが更新され、ページが更新されます。配列を変更しないメソッド:...

JavaScript で Baidu Maps API にアクセスする方法と手順

目次1. Baidu Map API アクセス2. HTML で Baidu Map API を使用...

Linux での sshd サービスとサービス管理コマンドの詳細な説明

sshd SSH は Secure Shell の略で、アプリケーション層のセキュリティ プロトコル...

MySQLクエリツリー構造方式

目次MySQL クエリツリー構造1. ツリー構造について2. MySQLでカスタム関数を定義する方法...

Navicat 接続 MySQL エラーの説明分析

目次環境仮想マシンバージョンMySQL バージョン事前準備MySQLの実行ステータスを確認するルート...

Quickjs は JavaScript サンドボックスの詳細をカプセル化します

目次1. シナリオ2. 基盤となるAPIを簡素化する2.1 自動的に破棄を呼び出す2.2 VM値を作...

企業サイトとコラム辞典 中国語と英語の比較 中国語と英語のバイリンガル企業サイトを作る仲間は

名前キャラクター名前キャラクター情報ニューステクノロジー技術スキンケアスキンケア補う補う香水香水化粧...

WeChat アプレットのカスタム スクロール ビューのサンプル コード

ミニプログラムカスタムスクロールビュースクロールバーさっそくレンダリングを見てみましょうレンダリング...

データベースマルチテーブル接続クエリの実装方法の詳細説明

データベースマルチテーブル接続クエリの実装方法の詳細説明結合演算子を使用して複数のテーブルクエリを実...

React 高階コンポーネント HOC 使用方法の概要

HOCを紹介する一文高階コンポーネント (HOC) とは何ですか? 公式ドキュメントによると、「高階...

MySQLストアドプロシージャにおけるカーソル(DECLARE)の原理と使い方の詳細な説明

この記事では、例を使用して、MySQL ストアド プロシージャにおけるカーソル (DECLARE) ...

MySQL 5.7 でルートパスワードを変更する方法に関するチュートリアル

バージョンアップデートにより、元のユーザーのパスワードフィールドがauthentication_st...

画像を読み込むための JavaScript キャンバス

この記事では、画像を読み込むためのJavaScriptキャンバスの具体的なコードを参考までに紹介しま...

MySQL パーティション テーブルの基本入門チュートリアル

序文最近のプロジェクトでは、大量のデータを保存する必要があり、このデータには有効期限があります。クエ...