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

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

html5 menu標籤的定義和用法:

<menu> 標籤定義命令的列表或菜單。

<menu> 標籤用於操作功能表、工具列以及用於列出表單控制項和命令。

HTML5 <menu> 標籤執行個體

帶有兩個功能表按鈕 （"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('您單擊了我一下')" icon="">    </menuitem></menu>

html5 menu標籤的代碼解析：

<menu>標籤用於操作功能表、工具列以及用於列出表單控制項和命令；

上例<span>標籤的contextmenu屬性值即為<menu>屬性id的值；

label屬性設定的是功能表項目的名字;

onclick屬性設定點擊功能表項目的事件;

icon屬性設定功能表項目左側小表徵圖；

<menu>標籤下可以有多個<menuitem>；

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

運行結果如下：

html5 menu標籤的提示和注釋：

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

HTML 4.01 與 HTML5 之間的差異

在 HTML 4.01 中已棄用 <menu> 元素。

在 HTML5 中重新定義了 <menu> 元素。

HTML 與 XHTML 之間的差異

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

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

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

【小編的相關文章】

html sup和sub標籤怎麼用？html sup標籤和sub標籤的定義和用法執行個體

html5 details標籤的作用是什嗎？<details>標籤的使用方法介紹(附使用執行個體)