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 > </td> <td > </td> </tr> <tr > <td > </td> <td > </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 決定版ガイド」という書籍を参照してください。この本は電子版もオンラインで入手できます。英語のコピー版を読みました。英語ですが、理解するのはそれほど難しくありません。 他にも便利なタグをご存知でしたら、ぜひ教えてください! |