html5 menu 태그의 구체적인 정의와 html5menu 태그의 사용법에 대한 상세한 분석

寻∝梦
풀어 주다: 2018-08-23 17:40:41
원래의
7081명이 탐색했습니다.

이 글에서는 주로 html5 메뉴 태그의 정의와 사용 예에 ​​대해 설명합니다. 예제와 예제 결과가 있어 학습이 더 쉽습니다. 따라서 html5 메뉴 태그에 대한 이 글을 주의 깊게 읽어보세요.

html5 메뉴 태그 정의 및 사용법 :

태그는 명령 목록 또는 메뉴를 정의합니다.

태그는 상황에 맞는 메뉴, 도구 모음, 양식 컨트롤 및 명령 나열에 사용됩니다.

HTML5

태그 예

두 개의 메뉴 버튼("파일" 및 "편집")이 있는 도구 모음. 각 버튼에는 일련의 옵션이 포함된 드롭다운 목록이 있습니다.

<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에서 메뉴 태그 사용:

1. 메뉴 태그는 메뉴 목록을 정의합니다.

메뉴 요소는 HTML4.01에서 더 이상 사용되지 않습니다. 이 요소의 목록 항목은 li 태그를 사용하여 표시할 수도 있습니다.

menu 태그는 메뉴 목록을 정의합니다. 메뉴 목록은 일반적으로 양식 컨트롤을 나열하려는 경우 텍스트 메뉴, 도구 모음 및 명령 목록 옵션에 사용됩니다. 브라우저에서 메뉴 목록의 표시 효과는 정렬되지 않은 목록의 표시 효과와 동일합니다. 이 시점의 기능은 정렬되지 않은 목록을 통해서도 구현될 수 있습니다.

html5 menu 태그의 구체적인 정의와 html5menu 태그의 사용법에 대한 상세한 분석

실행 결과:

html5 menu 태그의 구체적인 정의와 html5menu 태그의 사용법에 대한 상세한 분석

html5 메뉴 레이블의 새 속성:

  • label 속성(메뉴 항목의 표시 표시를 정의하며 메뉴 내에 중첩된 메뉴를 표시하는 데 자주 사용됨, 구문) : 메뉴 레이블 "파일")

  • type 속성(메뉴 표시 유형을 정의하며 기본값은 "list", 구문: 메뉴 유형="value")

  • list: 기본값입니다. 목록 메뉴를 지정합니다. 사용자가 실행하거나 활성화할 수 있는 명령 목록(li 요소)입니다.

  • toolbar: 도구 모음 메뉴를 지정합니다. 사전 명령을 사용하면 사용자가 명령과 즉시 상호 작용할 수 있습니다.

  • contextmenu: 사용자가 요소를 마우스 오른쪽 버튼으로 클릭할 때 표시될 컨텍스트 메뉴를 지정합니다.

2. HTML5 메뉴 태그

코드 예제

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

html5 메뉴 태그 코드 분석:

태그는 컨텍스트 메뉴, 도구 모음 및 양식 컨트롤 및 명령 나열에 사용됩니다. 위 예에서 라벨의 contextmenu 속성 값은 속성 id의 값입니다.

label 속성은 메뉴 클릭 이벤트를 설정합니다. item;

Icon 속성은 메뉴 항목의 왼쪽에 작은 아이콘을 설정합니다.

태그는 여러 개의

물론, 더 많은 메뉴 속성이 있습니다. 일반적으로 사용되는 속성.

실행 결과는 다음과 같습니다.

html5 메뉴 태그에 대한 팁과 참고 사항: html5 menu 태그의 구체적인 정의와 html5menu 태그의 사용법에 대한 상세한 분석

팁: CSS를 사용하여 메뉴 목록의 스타일을 지정하세요!

HTML 4.01과 HTML5의 차이점

요소는 HTML 4.01에서 더 이상 사용되지 않습니다. 요소가 HTML5에서 재정의되었습니다.

HTML과 XHTML의 차이점

HTML 4.01에서는 메뉴 요소가 더 이상 사용되지 않습니다. XHTML 1.0 Strict DTD에서는 메뉴 요소가 지원되지 않습니다.

이 기사는 여기서 끝납니다. 궁금한 사항이 있으면 아래에 질문하세요

[에디터 관련 기사]

html sup 및 sub 태그를 사용하는 방법은 무엇입니까? html sup 태그와 sub 태그 정의 및 사용 예

html5 세부 태그의 역할은 무엇인가요? 태그 사용 방법 소개(사용 예시 포함)

위 내용은 html5 menu 태그의 구체적인 정의와 html5menu 태그의 사용법에 대한 상세한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿