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

推薦する

組み込み Linux 開発環境で ping と nfs を構築するためのソリューション

1. 組み込みソフトウェアレベル 1) ブートローダ -> ブートローダ組み込みシステム全体の...

CSS スティッキー配置位置の詳細な説明: スティッキー問題の落とし穴

前書き: position:sticky は CSS ポジショニングの新しい属性です。相対ポジショニ...

HTMLはマウスをホバーしたときにテキストを表示するためにtitle属性を使用します。

コードをコピーコードは次のとおりです。 <a href=# title="ここに表示...

サブメニューをクリックする効果を実現するJavaScript

この記事では、クリック時にサブメニューを表示するためのJavaScriptの具体的なコードを参考まで...

WINDOWS での MYSQL のインストールに関する詳細なチュートリアル

1. インストールパッケージをダウンロードする- お使いのコンピュータシステムに応じて適切なバージョ...

フローティング要素が親要素の高さを崩す原因と解決策の詳細な説明

フローティング要素は、親要素の高さを縮小します。要素を float float:left/right...

mysqlはコンマに基づいてデータ行を複数の行に分割します

目次分離効果コマンドラインの説明関与する機能分離効果-- 別居前1,2,3,4 -- 別居後1 2 ...

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

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

Hbase 入門

1. HBaseの概要1.1 HBaseとはHBase は、高い信頼性、高いパフォーマンス、列ストレ...

ubuntu20.04 LTS システムのデフォルト ソース ソース リスト ファイルの変更

誤って source.list の内容を変更し、一連のエラーが発生した場合は、デフォルトのソース フ...

浮遊する雲のアニメーションを実現するCSS3

操作効果 html <ヘッド> <メタ文字セット='UTF-8'&...

DockerコンテナのライフサイクルアーキテクチャとVMとの違いについて詳しく説明します。

コンテナのライフサイクルコンテナランタイムのライフサイクルコンテナは、分離特性を持つプロセスのセット...

IE5.0以降のHTCコンポーネントの定義の概要

Microsoft IE 5.0 がリリースされる前は、Web プログラミングにおける最大の課題は、...

mysql5.7 のエンコーディングを utf8mb4 に設定する方法

最近、問題に遭遇しました。モバイル端末の絵文字や一部の絵文字は 4 バイトですが、UTF-8 は 3...

シンプルな計算機を実装するためのネイティブ js

この記事の例では、参考までに簡単な計算機を実装するためのjsの具体的なコードを共有しています。具体的...