html5 menu 태그의 구체적인 정의와 html5menu 태그의 사용법에 대한 상세한 분석-H5 튜토리얼-php.cn

집

웹 프론트엔드

H5 튜토리얼

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

寻∝梦

Aug 23, 2018 pm 05:40 PM

html5 menu

이 글에서는 주로 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 태그의 사용법에 대한 상세한 분석