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コンポーネント間のデータ共有の詳細な説明

目次1. プロジェクト開発において、コンポーネント間の最も一般的な関係は次の 2 つのタイプに分けら...

XHTML+CSS Web ページ作成における美しいスタイルシートの適用

これはかなり前に書かれた記事です。今となっては、その中の考え方は学ぶ価値があるように思えます。jb5...

Linux ファイアウォール設定の詳細な手順 (yum ウェアハウス設定に基づく)

序文この実験では、デバッグ用に2つの仮想マシン(CentOs6とRed Hat 6)を準備します。 ...

Ubuntu 19.04 インストール チュートリアル (画像とテキストの手順)

1. 準備1.1 VMware 15 をダウンロードしてインストールするダウンロード リンク: h...

iframe が HTML 内のページにジャンプするのを防ぎ、iframe を使用して WeChat Web バージョンをページに埋め込む方法

私は、WinForm と HTML5 を組み合わせた小さなものを作りたいだけなのですが、突然、そこに...

React Hooksコンポーネント間で値を渡す方法の詳細な説明(tsを使用)

目次父から息子へ息子から父へクロスレベルコンポーネント(親から子孫)父から息子へpropsを通じて値...

MySQLデータベースインデックスの欠点と適切な使用

目次インデックスの適切な使用1. 通常のインデックスのデメリット2. 主キーインデックスの落とし穴3...

Dockerコンテナ内の設定ファイルの変更の実装

1. コンテナに入るdocker run [オプション] イメージ名 [起動コンテナに渡されるコマン...

overflow:hidden の役割の詳細な説明 (オーバーフローの非表示、フロートのクリア、マージンの崩壊の解決)

1. オーバーフロー:非表示 オーバーフロー非表示要素に overflow:hidden が設定さ...

TypeScript をインストール、使用、自動コンパイルする方法に関するチュートリアル

1. TypeScriptの紹介前回の記事ではTypeScriptのインストール、使い方、自動コンパ...

HTMLハイパーリンクタグAのTARGET属性の詳細な説明

ハイパーリンク <a> タグはリンク ポイントを表します。これは英語の単語「anchor...

インスピレーションを得るための7つのクールなダイナミックウェブサイトデザイン

デザインの分野では、毎年さまざまなデザインのトレンドや流行があります。たとえば、近年のレスポンシブデ...

MySQL SQL ステートメントが遅い場合の一般的な原因と解決策

1. インデックス不足または無効なインデックスによるクエリの遅延数千万件のデータを含むテーブルで、イ...

Azure Container Registry を使用してイメージを保存する際の問題

Azure Container Registry は、Docker Registry 2.0 仕様に...

Vue要素と多言語切り替えの詳細な説明

目次序文複数の言語を切り替えるにはどうすればいいですか? 1. vue-i18nパッケージをインスト...