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のテクニック

推薦する

MySQLはフィールドからカンマ区切りの値を取り出して新しいフィールドを形成します

1例: 図1のフィールドを図2に分割するには アカウントIDを選択、 サブストリングインデックス(サ...

チャットバブル効果を実現するCSS

1. レンダリングJD効果シミュレーション効果 2. 原則高さと幅が0のボックスを用意しますこのボ...

MySQLデータベースで列を追加、削除、変更する方法

この記事では、例を使用して、MySQL データベースの列を追加、削除、および変更する方法について説明...

MySQL がデータの削除と挿入に非常に時間がかかる問題の解決策

会社の開発者がテスト環境で挿入ステートメントを実行すると、正常に実行されるまでに 10 秒以上かかり...

Mysqlサーバーのインストール、構成、起動、シャットダウン方法の詳細な説明

1. 公式サイトからダウンロード: https://dev.mysql.com/downloads/...

JavaScript でエラーが発生しやすい演算子操作の概要

目次算術演算子異常状況1: 特殊値リテラルを含む操作異常な状況 2: 他の種類のデータが数学演算に関...

jsはreduceメソッドを使用してコードをよりエレガントにします

序文実際のプロジェクトでは、最も一般的な処理は計算とループロジックである可能性があります。配列でre...

iframe を通じて DOM 要素のサイズ変更を監視する

開発プロセス中によく発生する問題は、div のサイズ変更をどのように監視するかということです。たとえ...

docker を使用して influxdb と mongo をデプロイするための一般的なコマンド

Docker ベースのデータベースをデプロイするsudo docker pull influxdb ...

JSを使用して画像を効果的に圧縮する方法

目次序文変換関係具体的な実装file2DataUrl(ファイル、コールバック) file2Image...

MySQL が uuid または snowflake id を主キーとして使用することを推奨しない理由の詳細な分析

前書き: MySQL でテーブルを設計する場合、MySQL では UUID や非連続かつ非繰り返しの...

HTML入力で値が変更されたときにリスナーイベントを追加することの簡単な分析

達成される効果多くの場合、入力ボックスの値の変化をリアルタイムで監視し、ブラウザを誘導してウェブサイ...

マージンの重複問題を解決する方法

1. まず、2つ以上の隣接する通常フローブロック要素の垂直マージンの崩壊を引き起こす原因を知る必要が...

webpack -v エラー解決

背景webpackのバージョンを確認したいのですが、webpack -vを実行するとエラーが報告され...

Linux システムでの virtuoso データベースの詳細なインストールと使用

最近、リンク データについていくつか調査していて、rdf データベースを使用する必要があったため、v...