ホームページ >ウェブフロントエンド >H5 チュートリアル >html5 メニュー タグの具体的な定義と html5menu タグの使用法の詳細な分析

html5 メニュー タグの具体的な定義と html5menu タグの使用法の詳細な分析

寻∝梦
寻∝梦オリジナル
2018-08-23 17:40:417084ブラウズ

この記事では主に html5 メニュー タグの定義と使用例について説明します。サンプルと結果が含まれているため、html5 メニュー タグについてはこの記事をよく読んでください。

html5 メニュー タグの定義と使用法:

タグはコマンドのリストまたはメニューを定義します。

タグは、コンテキスト メニュー、ツールバー、およびフォーム コントロールとコマンドのリストに使用されます。

HTML5

タグの例 2 つのメニュー ボタン (「ファイル」と「編集」) を備えたツールバー。それぞれに一連のオプションを含むドロップダウン リストが含まれています:

<menu type="toolbar">
 <li>
 <menu label="File">
 <button type="button" onclick="file_new()">New...</button>
 <button type="button" onclick="file_open()">Open...</button>
 <button type="button" onclick="file_save()">Save</button>
 </menu>
 </li>
 <li>
 <menu label="Edit">
 <button type="button" onclick="edit_cut()">Cut</button>
 <button type="button" onclick="edit_copy()">Copy</button>
 <button type="button" onclick="edit_paste()">Paste</button>
 </menu>
 </li>
</menu>

2 つの方法HTML5 で menu タグを使用します:

1. menu タグはメニュー リストを定義します

現在の HTML5 では、menu 要素は再定義されています。この要素内のリスト項目は、li タグを使用してマークすることもできます。

menu タグはメニュー リストを定義します。メニュー リストは通常​​、テキスト メニュー、ツールバー、コマンド リスト オプションに使用されます。このタグはフォーム コントロールをリストする場合に使用できます。ブラウザにおけるメニューリストの表示効果は、順序なしリストと同様である。この機能は、順序なしリストでも実現できる。

html5 メニュー タグの具体的な定義と html5menu タグの使用法の詳細な分析

実行結果:

html5 メニュー タグの具体的な定義と html5menu タグの使用法の詳細な分析

htmlメニュー ラベルの 5 つの新しい属性:

  • label 属性 (メニュー項目の表示マークを定義します。メニュー内でネストされたメニューをマークするためによく使用されます)。 : メニュー ラベル "ファイル")

  • type 属性 (メニュー表示のタイプを定義します。デフォルト値は "list"、構文: menu type="value")

  • list: デフォルト値。リストメニューを指定します。ユーザーが実行またはアクティブ化できるコマンドのリスト (li 要素)。

  • toolbar: ツールバーメニューを指定します。プロアクティブ コマンドを使用すると、ユーザーはコマンドをすぐに操作できるようになります。

  • contextmenu: ユーザーが要素を右クリックしたときに表示されるコンテキスト メニューを指定します。

2. HTML5 メニュー タグ

コードの例

<span contextmenu="myMenu">右击一下</span>
<menu type="context" id="myMenu">
    <menuitem label="单击一下" onclick="alert(&#39;您单击了我一下&#39;)" icon="">
    </menuitem>
</menu>

html5 メニュー タグ コード分析:

は、コンテキスト メニュー、ツールバー、およびフォーム コントロールとコマンドのリストに使用されます。上の例の ラベルの contextmenu 属性の値は、 属性の値です。

属性はメニュー項目の名前を設定します。 item;

Icon 属性はメニュー項目の左側にある小さなアイコンを設定します

タグには複数の を含めることができます

もちろん、この記事では一部のみをリストします。よく使用される属性。

実行結果は次のとおりです:

HTML5 メニュー タグのヒントとメモ:

html5 メニュー タグの具体的な定義と html5menu タグの使用法の詳細な分析

ヒント: メニュー リストのスタイルを設定するには CSS を使用してください。

HTML 4.01 と HTML5 の違い

要素は HTML 4.01 で非推奨になりました。

要素は HTML5 で再定義されました。

HTML と XHTML の違い

HTML 4.01 では、menu 要素は非推奨になりました。

XHTML 1.0 Strict DTD では、メニュー要素はサポートされていません。

この記事はここで終わります。ご不明な点がございましたら、以下よりお問い合わせください

【編集者の関連記事】

HTMLのsupタグとsubタグの使い方は? HTMLのsupタグとsubタグの定義と使用例

html5の詳細タグの役割とは? タグの使い方を紹介(使用例付き)

以上がhtml5 メニュー タグの具体的な定義と html5menu タグの使用法の詳細な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。