html5 メニュータグの具体的な定義と html5menu タグの使用法の詳細な分析-H5 チュートリアル-php.cn

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

寻∝梦

リリース： 2018-08-23 17:40:41

オリジナル

7087 人が閲覧しました

この記事では主に 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 タグの使用法の詳細な分析