HTML5 the specific definition of the menu tag and the usage of the Html5menu tag are analyzed in detail

This article mainly describes the HTML5 menu label definition and usage examples, there are instances and examples of results in, which makes us more simple to learn, so please read this article about HTML5 menu tags

HTML5 the definition and usage of the menu tag:

<menu> tags define a list or menu of commands.

<menu> tags are used for context menus, toolbars, and for listing form controls and commands.

HTML5 <menu> Tag Examples

A toolbar with two menu buttons ("File" and "Edit"), each containing 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 Label Definition Menu list

The menu element is deprecated in HTML4.01, and in the present HTML5, the menu element has been redefined, and list items in that element can also be tagged with the li tag.

The menu tab defines a list of menus, which are typically used for text menus, toolbars, and command list options that you can use when you want to list the form controls. The menu list in the browser shows the same effect as the unordered list, and the functionality at this point can also be achieved through unordered lists.

Operation Result:

HTML5 new properties of the menu tag:

• The Label property, which defines the visible markup for the menu item, is commonly used for nested menus within the markup menus, Syntax: Menu label= "File")

• Type property (defines the kind of menu display, the default value is "list", Syntax: Menu type= "value")

• List: Default value. Specify a list menu. A list of commands that a user can execute or activate (LI Element).

• Toolbar: Specifies a toolbar menu. An active command that allows 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 Tab

code example

<span contextmenu= "MyMenu" > Right click </span><menu type= "Context" id= "MyMenu" >    <menuitem label= " Click "onclick=" alert (' You clicked Me ') ' icon= ' >    </menuitem></menu>

HTML5 the code parsing of the menu tag:

<menu> tags are used for context menus, toolbars, and for listing form controls and commands;

The ContextMenu property value of the above example <span> tag is the value of the <menu> attribute ID;

The Label property is set to the name of the menu item;

The OnClick property sets the event to click on the menu item;

The Icon property sets the small icons to the left of the menu item;

<menu> tags can have multiple <menuitem>;

Of course, the menu attribute is more than that, this article just lists some common properties.

The results of the operation are as follows:

HTML5 tips and comments for the menu tag:

Tip: Use CSS to set the menu list style!

The difference between HTML 4.01 and HTML5

Deprecated <menu> elements in HTML 4.01.

The <menu> element was redefined in HTML5.

The difference between HTML and XHTML

In HTML 4.01, the menu element is not approved for use.

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

This article is finished here, if there is any problem, you can ask below

"Small series of related articles"

How do I use HTML sup and sub tags? Examples of definitions and usages of HTML SUP tags and sub tags

What is the purpose of the HTML5 details tag? Introduction to the use of <details> tags (with examples)