html5 menu標籤的具體定義和html5menu標籤的用法詳細解析-H5教程-PHP中文網

html5 menu標籤的具體定義和html5menu標籤的用法詳細解析

寻∝梦

發布： 2018-08-23 17:40:41

原創

7086 人瀏覽過

這邊文章主要的講述了html5 menu標籤的定義和用法實例，有實例和實例結果在，這讓我們學習的時候更加簡單了，所以，請認真的閱讀本篇關於html5 menu標籤的文章吧

html5 menu標籤的定義與用法:

標籤定義指令的清單或選單。

標籤用於上下文功能表、工具列以及用於列出表單控制項和命令。

HTML5

標籤實例

#帶有兩個選單按鈕（"File" 和"Edit"）的工具列，每個按鈕都包含帶有一系列選項的下拉清單：

<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>

登入後複製

HTML5中的menu標籤的兩種使用方法：

1.menu標籤定義選單列表

menu元素在HTML4.01中已不被贊成使用，在現在的HTML5中，menu元素已被重新定義，該元素中的列表項目同樣可使用li 標籤來標記。

menu標籤定義選單列表，選單列表通常用於文字選單，工具列和命令列表選項，當希望列出表單控制項時可使用該標籤。 menu選單清單在瀏覽器中顯示效果和無序列表是相同的，在這一點上的功能也可以透過無序列表來實現。

html5 menu標籤的具體定義和html5menu標籤的用法詳細解析

執行結果:

html5 menu標籤的具體定義和html5menu標籤的用法詳細解析

#html5 menu標籤的新屬性:

label屬性（定義選單項目的可見標記，常用於標記選單內的巢狀選單，語法：menu label="File"）
##type屬性（定義選單顯示的類型，預設值為"list"，語法：menu type="value"）
list：預設值。規定一個列表菜單。一個使用者可執行或啟動的命令清單（li元素）。
toolbar：規定一個工具列選單。主動式命令，允許使用者立即與命令進行互動。
contextmenu：規定一個上下文選單，當使用者右鍵點選元素時將顯示上下文選單。

2.HTML5的menu選單標籤

#程式碼範例

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

登入後複製

html5 menu標籤的程式碼解析：

標籤用於上下文選單、工具列以及用於列出表單控制項和指令；

上例標籤的contextmenu屬性值即為屬性id的值；

label屬性設定的是選單項目的名稱;

onclick屬性設定點選選單項目的事件;

icon屬性設定選單項左側小圖示；

標籤下可以有多個；

#當然，menu屬性不只這麼多，這篇文章只是列舉出了一些常用的屬性。

運行結果如下：

html5 menu標籤的具體定義和html5menu標籤的用法詳細解析