Heim  >  Artikel  >  Web-Frontend  >  Die spezifische Definition des HTML5-Menü-Tags und die detaillierte Analyse der Verwendung des HTML5-Menü-Tags

Die spezifische Definition des HTML5-Menü-Tags und die detaillierte Analyse der Verwendung des HTML5-Menü-Tags

寻∝梦
寻∝梦Original
2018-08-23 17:40:417020Durchsuche

In diesem Artikel geht es hauptsächlich um die Definition und Verwendung von HTML5-Menü-Tags. Es gibt Beispiele und Beispielergebnisse, die uns das Lernen erleichtern. Bitte lesen Sie diesen Artikel sorgfältig durch 🎜>
Definition und Verwendung des HTML5-Menü-Tags:

Das Tag

wird in Kontextmenüs, Symbolleisten und zum Auflisten von Formularsteuerelementen und -befehlen verwendet.

HTML5

-Tag-Beispiel

Eine Symbolleiste mit zwei Menüschaltflächen („Datei“ und „Bearbeiten“), die jeweils ein Dropdown-Menü enthalten Liste mit einer Reihe von Optionen:

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

Zwei Möglichkeiten, das Menü-Tag in HTML5 zu verwenden:

1.menu-Tag Definieren Menüliste

Das Menüelement ist in HTML4.01 veraltet. Das Menüelement wurde in diesem Element auch mit dem li-Tag definiert.

Menü-Tag definiert eine Menüliste. Menülisten werden normalerweise für Textmenüs, Symbolleisten und Befehlslistenoptionen verwendet. Dieses Tag kann verwendet werden, wenn Sie Formularsteuerelemente auflisten möchten. Der Anzeigeeffekt der Menüliste im Browser ist der gleiche wie der der ungeordneten Liste. Die Funktion kann an dieser Stelle auch über die ungeordnete Liste realisiert werden.

Laufende Ergebnisse:Die spezifische Definition des HTML5-Menü-Tags und die detaillierte Analyse der Verwendung des HTML5-Menü-Tags

Die spezifische Definition des HTML5-Menü-Tags und die detaillierte Analyse der Verwendung des HTML5-Menü-TagsNeue Attribute des HTML5-Menü-Tags:

Label-Attribut (definiert die sichtbare Markierung eines Menüelements, wird häufig zum Markieren verschachtelter Menüs innerhalb von Menüs verwendet, Syntax: Menübezeichnung="Datei")
  • Typattribute (definieren Sie die Art der Menüanzeige, der Standardwert ist „Liste“, Syntax: Menütyp = „Wert“)
  • Liste: Standardwert. Gibt ein Listenmenü an. Eine Liste von Befehlen (li-Element), die der Benutzer ausführen oder aktivieren kann.
  • Symbolleiste: Gibt ein Symbolleistenmenü an. Proaktive Befehle ermöglichen es dem Benutzer, sofort mit dem Befehl zu interagieren.
  • Kontextmenü: Gibt ein Kontextmenü an, das angezeigt wird, wenn der Benutzer mit der rechten Maustaste auf das Element klickt.
  • 2. HTML5-Menü-Tag

Codebeispiel

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

Code-Analyse des HTML5-Menü-Tags:

-Tag wird für Kontextmenüs, Symbolleisten und zum Auflisten von Formularsteuerelementen und -befehlen verwendet.

Der Wert des contextmenu-Attributs des Beispiel ist Der Wert der Attribut-ID;

label-Attribut legt den Namen des Menüelements fest;

onclick-Attribut legt das Ereignis fest, bei dem auf das Menüelement geklickt wird;

icon-Attribut legt das Menü fest.

Natürlich gibt es mehrere mehr als so viele Menüattribute. In diesem Artikel werden nur einige häufig verwendete Eigenschaften aufgeführt.

Die laufenden Ergebnisse sind wie folgt:

Tipps und Kommentare zum HTML5-Menü-Tag:

Die spezifische Definition des HTML5-Menü-Tags und die detaillierte Analyse der Verwendung des HTML5-Menü-Tags

Tipps : Bitte verwenden Sie CSS, um die Menüliste zu formatieren!

Unterschiede zwischen HTML 4.01 und HTML5

Das -Element ist in HTML 4.01 veraltet.

Das

-Element wurde in HTML5 neu definiert.

Unterschiede zwischen HTML und XHTML

In HTML 4.01 ist das Menüelement veraltet.

In XHTML 1.0 Strict DTD wird das Menüelement nicht unterstützt.

Dieser Artikel endet hier.

[Artikel zum Thema des Herausgebers]

html sup und sub Wie verwende ich Labels? Definition und Verwendungsbeispiele des HTML-Sup-Tags und des Sub-Tags

Welche Rolle spielt das HTML5-Detail-Tag?

Einführung in die Verwendung von Tags (mit Anwendungsbeispielen)

Das obige ist der detaillierte Inhalt vonDie spezifische Definition des HTML5-Menü-Tags und die detaillierte Analyse der Verwendung des HTML5-Menü-Tags. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn