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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。