The specific definition of the html5 menu tag and the detailed analysis of the usage of the html5menu tag

This article mainly talks about the definition and usage examples of html5 menu tag. There are examples and example results, which makes our learning easier. Therefore, please read this article about html5 menu tag carefully. Bar

html5 The definition and usage of the menu tag:

The tag defines a list or menu of commands.

tags are used in context menus, toolbars, and for listing form controls and commands.

HTML5

tag example

A toolbar with two menu buttons ("File" and "Edit"), each button contains a There is a drop-down list with a series of options:

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

Two ways to use the menu tag in HTML5:

##1.menu tag Define menu list

The menu element has been deprecated in HTML4.01. In the current HTML5, the menu element has been redefined. The list items in this element can also use the li tag. mark.

The menu tag defines a menu list. Menu lists are usually used for text menus, toolbars, and command list options. This tag can be used when you want to list form controls. The display effect of the menu list in the browser is the same as that of the unordered list. The function at this point can also be realized through the unordered list.

Run result:

##New attributes of html5 menu tag:

label attribute (defines the visible mark of the menu item, often used to mark nested menus within the menu, syntax: menu label="File")
type Attribute (defines the type of menu display, the default value is "list", syntax: menu type="value")
list: Default value. Specifies a list menu. A list of commands (li element) that the user can execute or activate.
toolbar: Specifies a toolbar menu. Proactive commands allow the user to interact with the command immediately.
contextmenu: Specifies a context menu that will be displayed when the user right-clicks an element.

2.HTML5 menu menu tag

Code example

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

code analysis of html5 menu tag:

tag is used for context menus, toolbars, and for listing form controls and commands;

The value of the contextmenu attribute of the tag in the above example is

The value of the attribute id;

The label attribute sets the name of the menu item;

The onclick attribute sets the event of clicking the menu item;

The icon attribute sets the menu Small icon on the left side of the item;

There can be multiple under the label;

Of course, there are more than so many menu attributes. This article only lists some commonly used ones. Attributes.

The running results are as follows:

html5 menu tag tips and comments:

Tips: Please use CSS to style the menu list!

Differences between HTML 4.01 and HTML5

The

element has been deprecated in HTML 4.01.

The

element has been redefined in HTML5.

Differences between HTML and XHTML

In HTML 4.01, the menu element is deprecated.

In XHTML 1.0 Strict DTD, the menu element is not supported.

This article ends here. If you have any questions, you can ask below

[Editor’s related articles]

html sup and sub How to use labels? Definition and usage examples of html sup tag and sub tag

html5 What is the role of the details tag?

Introduction to the use of tags (with usage examples)

The above is the detailed content of The specific definition of the html5 menu tag and the detailed analysis of the usage of the html5menu tag. For more information, please follow other related articles on the PHP Chinese website!