HTML <menu>用法及代碼示例

HTML <菜單> 標簽定義一個U有序的L項目列表。為了創建無序列表，我們可以使用<menu>帶有 HTML 標簽<li>標簽。 HTML <menu> 標簽是一個語義標簽，也是<ul>.

用法

<menu> 
      <li>Content... </li>
      <li>Content... </li>
</menu>

支持的屬性

HTML <menu> 標簽支持全局屬性和事件屬性.

注意：HTML <menu> 標簽在 HTML 4.01 中被刪除，但在 HTML5 中已被重新定義。以前，列表項是在已棄用的<menuitem>元素。現在<li>元素作為合適的替代品。

示例 1：使用瀏覽器的默認 CSS 實現 <menu> 標簽。

HTML


<!DOCTYPE html> 
<html> 
  
<head> 
    <title>HTML menu Tag</title> 
    <style> 
        menu { 
            display: block; 
            list-style-type: disc; 
            margin-block-start: 1em; 
            margin-block-end: 1em; 
            margin-inline-start: 0px; 
            margin-inline-end: 0px; 
            padding-inline-start: 40px; 
        } 
    </style> 
</head> 
  
<body> 
    <p>HTML <menu> tag</p> 
    <menu> 
        <li>menu list</li> 
        <li>unordered list</li> 
        <li>ordered list</li> 
    </menu> 
</body> 
  
</html>

輸出：

Screenshot-2024-01-12-122446

示例 2：使用自定義 CSS 實現菜單標簽。

HTML


<!DOCTYPE html> 
<html> 
  
<head> 
    <title>HTML menu Tag</title> 
    <style> 
        menu { 
            color: rgb(45, 139, 45); 
            font-weight: 700; 
        } 
    </style> 
</head> 
  
<body> 
    <p>HTML menu tag</p> 
    <menu> 
        <li>menu list</li> 
        <li>unordered list</li> 
        <li>ordered list</li> 
    </menu> 
</body> 
  
</html>

輸出：

Screenshot-2024-01-12-122111

HTML DOM 屬性

Menu可以與 <menu> 標簽一起使用。

瀏覽器支持

chrome 1
邊 12
火狐1
Opera 12.1
狩獵3

相關用法

注：本文由純淨天空篩選整理自shivanigupta18rk大神的英文原創作品 HTML <menu> Tag。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。