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

這邊文章主要的講述了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標籤的新屬性:

• 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標籤的提示和註解：

提示：請使用CSS來設定選單列表的樣式！

HTML 4.01 與 HTML5 之間的差異

#在 HTML 4.01 中已棄用 元素。

在 HTML5 中重新定義了 元素。

HTML 與 XHTML 之間的差異

在 HTML 4.01 中，menu 元素不被贊成使用。

在 XHTML 1.0 Strict DTD 中，menu 元素不被支援。

這篇文章到這裡就結束了，如果有什麼問題，可以在下方提問

【小編的相關文章】

html sup和sub標籤怎麼用？ html sup標籤和sub標籤的定義和用法實例

html5 details標籤的作用是什麼？

標籤的使用方法介紹(附使用實例)

以上是html5 menu標籤的具體定義和html5menu標籤的用法詳細解析的詳細內容。更多資訊請關注PHP中文網其他相關文章！