fore-end/HTML/example.html

<!DOCTYPE html>            <!--DOCTYPE 声明了文档类型-->
<html lang="zh">           <!--文本描述-->
<head>                     <!--头部-->
   <!-- 网页编码及类型-->
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  <!-- 定义缩放Web页面及针对移动设备优化 -->
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">  
  <!-- 标题-->
  <title>此处是网站标题</title>  
  <!-- 网站SEO常用的keywords与description元数据,非常注意关键字与描述长度 -->
  <meta name="keywords" content="WeiyiGeek、唯一极客、IT知识、网络技术、网络安全、安全测试、安全运维、系统运维、Web程序开发、手机/移动开发、IOT物联网开发、数据库学习、系统管理和监控、插件和扩展、开源软件、企业实践、分享学习知识">
  <meta name="description" content="WeiyiGeek-唯一极客博客站点,关注于网络安全运维,Web安全开发,IOT物联网安全开发,应用开发,分享技术学习知识与入坑解决,提升网络安全技术与自身技术能力,立志维护大众网络安全为己任,做一个对国家有用的人,为实现中华民族伟大复兴的中国梦不懈奋斗">
  <!-- 自定义元数据 -->
  <meta name="author" content="WeiyiGeek" /> 
  
  <!-- 设置网站icon小图标-->
  <link rel="icon" href="https://blog.weiyigeek.top/img/favicon.ico" type="image/gif" sizes="16x16" /> 
  
  <!-- 设置网页图片的相对地址 -->
  <base href="https://blog.weiyigeek.top/img/" target="_blank">

  <!-- 外部样式，设置当前网页外联样式表css文件 -->
  <link href="mobile.css" rel="stylesheet" media="all">
  <link href="mobile.css" type="text/css"  rel="stylesheet"  media="screen and (max-width: 600px)">
  <!-- 内部样式，直接将css写入到style标签中 -->
  <style type="text/css">
    body {background-color:antiquewhite}
    p {color:bisque ; background-color:darkseagreen;padding: 5px; border: 1px solid black;}
    /* 使用 css 样式来修饰分割线 */
    hr {
      border: none;
      border-top: 3px double #333;
      color: #333;
      overflow: visible;
      text-align: center;
      height: 5px;
    }
    hr:after {
      background: chocolate;
      content: '§';
      padding: 0 4px;
      position: relative;
      top: -13px;
    }
  </style>
  <!-- 包含媒体 (media) 选择，视图宽度小于 500px 时生效 -->
  <style media="all and (max-width: 500px)">
    p {
      color: white;
      background-color: black;
    }
  </style>

  <!-- 外部js，引用外部js  -->
  <script src="/demo/test.js"></script>
  <!-- 内部js，直接将js写入到script标签内部 -->
  <script type="text/javascript">
    confirm("你好,Hello World!");
  </script>
</head>

<body>  
  <!--主体-->
  <h1>我是主标题标签</h1>
  <h2>This is heading 2</h2>
  <h3>This is heading 3</h3>
  <h4>This is heading 4</h4>
  <h5>This is heading 5</h5>
  <h6>This is heading 6</h6>
  <br/>我是换行br标签<br/> 
  <p>我的段落p标签，会自动换行</p>
  <span>我是行内标签，不自动换行</span>
  <hr/>我是分割线hr标签
  文档的内容: Author is WeiyiGeek <br/>
  My Blog is https://blog.weiyigeek.top <br/>
  
  <hr/>

  <p>这是一个普通的文本【WeiyiGeek】-<small>small标签: 呈现小号字体效果.</small></p> 
  <p>这是一个普通的文本【WeiyiGeek】-<i>标签i: 呈现斜体文本效果.</i></p> 
  <p>这是一个普通的文本【WeiyiGeek】-<b>标签b: 呈现加粗文本.</b></p> 
  <p>这是一个普通的文本【WeiyiGeek】-<em style="color:black">em 标签: 定义语气为强调的内容，被强调的文本使用</em></p> 
  <p>这是一个普通的文本【WeiyiGeek】- <strong>strong 标签: 定义语气更为强烈的强调文本，重要的文本应使用 </strong></p> 
  <p>我说一段文字，我是一个关键点<mark>mark 标记: 被标记的或者高亮显示的文本应该使用</mark></p>
  <p>这是一个普通的文本【WeiyiGeek】-这段文本包含上标:x<sup>2</sup>+y<sup>2</sup>=8</p> 
  <p>这是一个普通的文本【WeiyiGeek】-这段文本包含下标:H<sub>2</sub>O</p> 
  <p><u>u标签: 定义下划线文本!</u></p>
  <p><ins>ins标签: 定义下划线文本!</ins></p>
  <p><s>s标签: 定义删除文本!</s></p>
  <p><del>del标签: 定义删除文本!</del></p>
  <ul>
    <li>bdi 标签: <bdi style="color: red;"  dir="ltr"> WeiyiGeek</bdi>: 1st place</li>
    <li>bdi 标签: <span style="color: blue;" dir="rtl"> Geeker</span>: 2nd place</li>
    <li><bdo dir="ltr">正序：WeiyiGeek.TOP</bdo></li>
    <li>
      <bdo dir="rtl">倒序：WeiyiGeek.TOP  
      <bdi style="color: red;" dir="ltr"> 正序 ltr：WeiyiGeek </bdi></bdo>
    </li>
  </ul>
  <!-- 示例 1: 字 -->
  <ruby>
    汉 <rp>(</rp><rt>han</rt><rp>)</rp>
    字 <rp>(</rp><rt>zi</rt><rp>)</rp>
  </ruby>
  <!-- 示例 2: 词 -->
  <ruby> 明 日 <rp>(</rp><rt>ming ri</rt><rp>)</rp></ruby>

  <hr>

  <p> q 标签: 这是一个短引用：WeiyiGeek 的
    <q cite="https://weiyigeek.top">个人主页域名地址</q>.
  </p>
  <blockquote cite="https://blog.weiyigeek.top">blockquote 标签：这是长的引用, WeiyiGeek Blog 为者常成，行者常至, 为者常成，行者常至, 为者常成，行者常至</blockquote>

  <a href="http://www.baidu.com">cite 标签: 定义引用、引证于<cite title="百度百科">百度百科 </cite></a>

  <p>The<dfn><abbr title="World Health Organization">WHO</abbr></dfn>was founded in 1948.</p>
  <p>dfn 标签与abbr 标签: 对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。</p>

  <p>此处正在测试wbr标签: <wbr> 一段很长的文字，文章!<wbr> 以便避免将标点符号留在行尾.</p>

  <hr>
  <p>weiyigeek.top 个人网站创建于<time pubdate>2018-10-01<time>。

  <p>当前默认选择值为 91 : <meter low="60" optimum="90" high="80" max="100" value="91">A</meter></p>

  <p>当前进度 70% : <progress value="70" max="100">70%</progress> </p>

  <div class="dialog">
    <dialog open>
      <p>你会支持WeiyiGeek作者吗?</p>
      <form method="dialog">
        <button value="Yes">Yes</button>
        <button value="No">No</button>
      </form>
    </dialog>
  </div>
  <hr>

  <div id="content">我是此文章章节片段div元素，我可以定义 HTML 文档中的一个分隔区块或者一个区域部分(`division/section`)</div>
  
  <!-- 文档头部 -->
  <header class="header">
    <!-- logo  -->
    <div class="logo">
      <img src="./logo.svg" alt="logo" srcset="">
    </div>
    <!-- 导航 -->
    <nav>
      <h2 class="hidden">文章HTML5文档分区布局元素演示文档标题</h2>
      <ul>
        <li><a href="/services/">Services</a></li>
        <li class="current"><a href="/articles/">Articles</a></li>
        <li><a href="/resources/">Resources</a></li>
      </ul>
    </nav>
    <!-- 搜索 -->
    <div id="search">
      <form method="get" role="search" action="/search/" id="sitesearch">
        <p class="search"><span><label for="q">Search:</label> <input type="text" name="q" id="q"><input type="image" src="/media/template/search.svg" alt="Submit Search"></span></p>
      </form>
    </div>
  </header>

  <!-- 文档内容区域 -->
  <section class="content">
    <!-- 文章内容 -->
    <article>
      <div class="boxcont">
        <h3>重要提醒：</h3>
        <div class="zoom">
          <h4>欢迎提示</h4>
          <p style="text-indent: 2em;">欢迎访问 【WeiyiGeek】 个人博客 <span style="color: red;">地址：https://blog.weiyigeek.top</span>，请各位看官务必三连!</p>
        </div>
      </div>

      <!-- 独立关联说明 -->
      <figure>
        <img src="https://blog.weiyigeek.top/img/avatar.jpg" alt="Elephant at sunset">
        <figcaption>The beautiful WEIYIGEEK logo.</figcaption>
      </figure>   
    </article>

    <!-- 文档主体 -->
    <style>
      details {
        border: 1px solid #aaa;
        border-radius: 4px;
        padding: 0.5em 0.5em 0;
      }
      
      summary {
        font-weight: bold;
        margin: -0.5em -0.5em 0;
        padding: 0.5em;
      }
      
      details[open] {
        padding: 0.5em;
      }
      details[open] summary {
        border-bottom: 1px solid #aaa;
        margin-bottom: 0.5em;
      }
    </style>
    <main>
      <div class="boxcont">
        <h4>公告：</h4>
        <p> WeiyiGeeker 博主欢迎大家进行访问，如下是我站点地址，更多信息尽在此处! </p>
        <!-- 片段详细 -->
        <details>
          <summary>前端如何学习?</summary>
          <p> 多看，多敲，多实践! </p>
        </details>
        <ul class="link-block">
          <li><a href="https://blog.weiyigeek.top">唯一极客博客站点</a></li>
        </ul>
      </div>
    </main>

    <!-- 文档之外的内容 -->
    <aside>
      <div class="boxcont">
        <h4>相关链接：</h4>
        <ul class="link-list">
          <li><a href="https://www.weiyigeek.top">个人主页域名地址</a></li>
          <li><a href="https://blog.weiyigeek.top">个人站点</a></li>
        </ul>
        <!-- 独立片段，通常与文章无关 -->
        <figure>
          <figcaption><b>WeiyiGeek 个人激励</b></figcaption>
          <blockquote>
            为者常成，行者常至。
            https://blog.weiyigeek.top
          </blockquote>
        </figure>
      </div>
    </aside>
  </section>

  <!-- 文档末尾 -->
  <footer class="footer">© 2018-2023 weiyigeek.top 唯一极客博客站点</footer>

  <hr>
  <!-- 列表示例 -->
  <!-- 有序 -->
  <ol type="A">
    <li>WeiyiGeek.top</li>
    <li>blog.WeiyiGeek.top</li>
    <li>demo.WeiyiGeek.top</li>
  </ol>
  <!-- 无序 -->
  <ul type="circle">
    <li>WeiyiGeek.top</li>
    <li>blog.WeiyiGeek.top</li>
    <li>demo.WeiyiGeek.top</li>
  </ul>
  <!-- 项目定义 -->
  <dl>
    <dt>WeiyiGeek</dt>
    <dt>blog.weiyigeek.top</dt>
    <dd>
      全栈工程师必备学习网站,欢迎各位朋友来访!
    </dd>
  </dl>

  <hr>

  <!-- 表格示例 -->
  <style>
    table { 
      margin-left: auto; 
      margin-right: auto;
      border: 1px solid black; 
      line-height: 1.25;
      width: 100%;
      text-align: center; 
      border-spacing: 0px 1px; 
      border-collapse: collapse;
      table-layout:fixed;
    }
    
    table th { 
      border: 1px solid black;
      line-height: 1;
      padding: 7px;
      background-color: #dddddd;
      text-align:center;
    }
    
    table td { 
      border: 1px solid black; 
      padding: 5px;
      text-align:left;
    }

    .build {
      background-color: #d7d9f2;
    }
  </style>
  <table>
    <caption style="font-weight: bolder;">常规表格示例</caption>
    <!-- 表格列的组 -->
    <colgroup>
        <col span="2" class="build">  
        <col>
    </colgroup>

    <!-- 头部 -->
    <thead>
      <tr>
        <th scope="col">列1</th>
        <th scope="col">列2</th>
        <th scope="col">列3</th>
      </tr>
    </thead>

    <!-- 主体 -->
    <tbody>
      <tr><th>姓名</th><th>年龄</th><th>地址</th></tr>
      <tr>
        <td>WeiyiGeek</td> <td>87</td> <td>重庆市</td>
      </tr>
      <tr>
        <td>Geeker</td> <td>68</td> <td>重庆市</td>
      </tr>
    </tbody>

    <!-- 尾部 -->
    <tfoot>
      <tr>
        <td scope="row">博客地址</td>
        <td>blog.weiyigeek.top</td>
        <td>© 2018-2023 </td>
      </tr>
      <tr>
        <td scope="row">主页地址</td>
        <td>weiyigeek.top</td>
        <td>© 2018-2023 </td>
      </tr>
    </tfoot>
  </table>
  <p>每个表格由 table 标签开始。</p>
  <p>每个表格行由 tr 标签开始。</p>
  <p>每个表格头由 th 标签指定。</p>
  <p>每个表格数据由 td 标签开始。</p>

  <hr>

  <!-- 表单示例 -->
  <form action="demo.jsp" method="post" autocomplete="on" autofocus="autofocus">
    <fieldset>
      <legend>表单相关元素示例:</legend>
      <label for="username">登录名称:<input type="text" name="username"/> </label><br/>
      <label>登录密码:<input type="password" name="password" placeholder="请输入用户密码" /></label> <br/>
      <label for="email">邮件地址: <input type="email" name="email" autocomplete="off" placeholder="邮箱地址,关闭了自动填充"/> </label>   <br/>

      <!-- 单选框 -->
      <label for="sex">性别:</label>
      <input type="radio" name="sex" value="male">Male|男<br/>
      <input type="radio" name="sex" value="female">Female|女<br/>

      <!-- 多选框 -->
      <label for="hobby">爱好:</label>
      <input type="checkbox" name="hobby" value="HTML" checked="checked">HTML<br/>
      <input type="checkbox" name="hobby" value="CSS">CSS<br/>
      
      <!-- 搜索 -->
      <label for="search">搜索：</label><input type="search" name="search"> <br/>

      <!-- 数值 -->
      <label for="points">进度:</label>
      <input type="number" name="points" min="0" max="100" step="10" value="30"> <br/>

      <!-- 地址 -->
      <label for="blog">博客地址:</label>
      <input type="url" name="blog"> <br/>

      <!-- 演示 -->
      <label for="favcolor">颜色:</label>
      <input type="color" name="favcolor" value="#ff0000"> <br/>

      <!-- 滑块 -->
      <label for="slider">滑块:</label>
      0<input type="range" name="slider" min="0" max="10">10 <br/>

      <!-- 图片 -->
      <label for="input-image">图片:</label>
      <input type="image" name="input-image" src="http://weiyigeek.top/img/login.jpg" width="99" height="99" /> <br/>

      <!-- 时间日期选择 -->
      生日日期：<input type="date" name="bday"> <br/>
      时间：<input type="time" name="usr_time"><br />
      本地时间: <input type="datetime-local" name="bday_time"><br/>
      生日（月和年）：<input type="month" name="bday_month"><br />
      周：<input type="week" name="year_week"><br />
      日期时间: <input type="datetime" name="bday_time"><br />

      <!-- 图片文件 -->
      <label for="avatar">Choose a profile picture:</label>
      <input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg"> <br/>

      <label for="picture">拍张照片你的脸:</label>  
      <input type="file" name="picture" accept="image/*" capture="user"> <br/>
      
      <label for="voice">记录你的声音:</label>
      <input type="file" name="voice" accept="audio/*"  capture> <br/>

      <!-- 多文件选择: multiple (en-US) 文件 input 允许用户选择多个文件。 -->
      <input type="file" id="file" name="file" multiple /> <br/>

      <!-- 文本框 -->
      <label for="introduction">个人介绍:</label>
      <textarea name="introduction" placeholder="请输入你的个人简介,而且是必须填写得" cols="20" rows="2" required></textarea><br />

      <!-- 下拉列表 -->
      <select name="cars" size="4" required>
        <!-- 简单列表 -->
        <option value="">--Please choose an option--</option>
        <option value="领克" selected="selected">领克</option>
        <option value="吉利">吉利</option>
        <option value="长安">长安</option>

        <!-- 列表组 -->
        <optgroup label="国产">
          <option value="长安">长安</option>
          <option value="吉利">吉利</option>
        </optgroup>
        <optgroup label="合资">
          <option value="大众">大众</option>
          <option value="丰田">丰田</option>
        </optgroup>
    </select> <br/>
    
    <!-- 为选项列表"自动完成"的特性，注意此处，id引用list的属性值. -->
    <input list="browsers" name="weiyigeek">
    <datalist id="browsers">
      <option value="Internet Explorer">
      <option value="Firefox">
      <option value="Chrome">
      <option value="Opera">
      <option value="Safari">
    </datalist> <br/>

    <input type="submit" value="确定" name="submit" />    <!-- 提交按钮 -->
    <button type="reset">重置</button><br>                <!-- 重置按钮 -->
    </fieldset>
  </form>

  <!-- output 标签:是使用来定义不同类型的输出 -->
  <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
    0<input type="range" id="a" value="50">100 + <input type="number" id="b" value="50">
    =
    <output name="x" for="a b"></output>
  </form>

  <hr>

  <!-- a 标签使用示例 -->
  <!-- 1.HTML 链接是通过 <a> 标签进行定义的 -->
  <a href="https://blog.weiyigeek.top">This is a link jump WeiyiGeek.top</a> <br>

  <!-- 2.演示如何使用图像作为链接href属性 -->
  <a href="/example/weiyigeek.html"> 
    <!--可以塞相对路径与绝对路径-->
    <img border="0" src="https://blog.weiyigeek.top/img/avatar.jpg" />
  </a>

  <!-- 3.演示如何使用链接跳转至文档的另一个部分-name属性 -->
  <p><a href="#show">查看 章节8 (section)</a></p> 
  <!--跳转到指定的name名称中用#假name值(注意区分大小写)，进行跳转-->
  <p>锚（显示在页面上的文本）</p>
  <h2><a name="show">章节8</a></h2>  <!--name属性-->
  <p>欢迎访问唯一极客个人学习博客</p>
  备注: 后续也可通过 https://blog.weiyigeek.top/index.html#show 进行调转访问。

  <!-- 4.定义如何打开中展示一个页面 -->
  <p>target 属性设置为 "_blank"，该链接会在新窗口中打开</p>
  <p>target 属性设置为 "_self"，默认。在相同的框架中打开被链接文档</p>
  <p>target 属性设置为 "_parent"，在父框架集中打开被链接文档</p>
  <p>target 属性设置为 "_top"，在整个窗口中打开被链接文档</p>
  <a href="https://blog.weiyigeek.top/index.html#show" target="_blank">Visit blog.weiyigeek.top!</a>

  <!-- 5.使用a标签创建电子邮件链接: -->
  <a href="mailto:master@weiyigeek.top?subject=Hello%20WeiyiGeek！">发送邮件</a></p>
  <a href="mailto:master@weiyigeek.top?cc=one@weiyigeek.top&bcc=two@weiyigeek.top&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!">发送邮件！有抄送，有标题，有内容</a></p>
  <p>注意：应该使用 %20 来替换单词之间的空格，这样浏览器就可以正确地显示文本了, 首个邮箱后是?拼接</p>

  <!-- 6.使用rel属性指定了noreferrer后，浏览器在请求该标签指定的地址时就不再发送Referer。 -->
  <a herf="https://blog.weiyigeek.top" rel="noreferrer nofollow"> 因为通过Referer可能会泄露一些铭感信息，已搜索引擎不跟踪 </a>

  <!-- 7.使用down属性设置一个值来规定下载文件的名称，浏览器将自动检测正确的文件扩展名并添加到文件(.img, .pdf, .txt, .html等等) -->
  <a href="/img/weiyigeek.jpg" download="logo">Logo</a>

  <!-- 8.当用户点击 weiyigeek.top/html 链接时，通知 weiyigeek.top/trackpings -->
  <a href="https://weiyigeek.top/html" ping="https://weiyigeek.top/trackpings">唯一极客个人主页</a>
  
  <!-- iframe 标签示例 -->
  <ul>
    <li><a href="https://weiyigeek.top" target="iframe_a">点击访问首页</a></li>
    <li><a href="https://blog.weiyigeek.top" target="iframe_a">点击访问博客</a></li>
  </ul>
  <iframe name="iframe_a" src="#"  width="500" height="300" frameborder="0"> <p>您的浏览器不支持  iframe 标签</p>
  </iframe>

<hr>
<!-- 图像插入 -->
<img src="/img/weiyigeek.jpg" alt="图像的文本描述,图像失败的时候显示" width="100%" height="20%" />  

<br>
<!-- map 区域映射 -->
<p>请点击图像上的星球,把它们放大</p>
<p><b>注释：</b>img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性（根据浏览器）,所以我们同时向 map 元素添加了 "id" 和 "name" 属性。</p>
<img src="http://www.w3school.com.cn/i/eg_planets.jpg"  usemap="#planetmap" alt="Planets" />
<map name="planetmap" id="planetmap">
<!--下面这个是区域 rect 矩形, 圆形 circle-->
<area
shape="rect"
coords="0,0,100,260"
href ="http://www.w3school.com.cn/example/html/sun.html"
target ="_blank"
alt="Sun-太阳" />

<area    
shape="circle"
coords="133,161,140,180"
href ="http://www.w3school.com.cn//example/html/venus.html"
target ="_blank"
alt="Venus-金星" />

<area
shape="circle"
coords="150,130,161,170"
href ="http://www.w3school.com.cn/example/html/mercur.html"
target ="_blank"
alt="Mercury-水星" />

<br>
<!-- 使用svg标签画一个五角星 -->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
  <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:red;stroke:blue;stroke-width:3;fill-rule:evenodd;"/>
</svg>

<br>
<!-- 使用并验证浏览器是否支持canvas -->
<canvas id="canvas" width="300" height="300">
  抱歉，您的浏览器不支持 canvas 元素
 （这些内容将会在不支持canvas元素的浏览器或是禁用了 JavaScript 的浏览器内渲染并展现）
</canvas>
<!-- 使用HTMLCanvasElement.getContext()获得一个绘图上下文并开始绘制 -->
<script>
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  ctx.fillStyle = 'red';
  ctx.fillRect(10, 10, 100, 100); // (顶部距离，左部距离，宽度，高度)
</script>

<hr>

<!-- 插入音频 -->
<audio controls>
  <source src="myAudio.mp3" type="audio/mpeg">
  <source src="foo.ogg" type="audio/ogg; codecs=vorbis"/>
  <source src="myAudio.ogg" type="audio/ogg">
  <p>Your browser doesn't support HTML5 audio. Here is
     a <a href="myAudio.mp4">link to the audio</a> instead.</p>
</audio>

<br>

<!-- 插入视频 -->
<video controls autoplay>
  <source src="foo.webm" type="video/webm">
  <source src="foo.ogg" type="video/ogg">
  <source src="foo.mov" type="video/quicktime">
  I'm sorry; your browser doesn't support HTML5 video.
</video>

<br>

<!-- 视频字幕 -->
<video src="foo.ogg">
  <track kind="subtitles" src="foo.en.vtt" srclang="en" label="English">
  <track kind="subtitles" src="foo.sv.vtt" srclang="sv" label="Svenska">
</video>

<br>

<!-- 使用 embed 标签，将将外部内容嵌入文档中的指定位置 -->
<embed type="video/quicktime" src="movie.mov" width="640" height="480">

<!-- 使用 object 标签嵌入 pdf文档或者其他对象 -->
<object type="application/pdf"
data="/media/examples/In-CC0.pdf"
width="250"
height="200">
Sorry,you browser not support object Tag
</object>


<style>
.menudemo {
  width: 300px;
  height: 80px;
  background-color: lightgreen;
}
</style>

<!-- 右键点击 -->
<div contextmenu="popup-menu" class="menudemo">
Right-click to see the adjusted context menu
</div>

<!-- 按钮点击 -->
<button type="menu" menu="popup-menu">
  Dropdown
</button>
<menu type="context" id="popup-menu">
  <menuitem type="checkbox" checked>Checkbox</menuitem>
  <hr>
  <menuitem type="command" label="This command does nothing" icon="https://developer.mozilla.org/static/img/favicon144.png">
    Commands don't render their contents.
  </menuitem>
  <menuitem type="command" label="This command has javascript" onclick="alert('command clicked')">
    Commands don't render their contents.
  </menuitem>
  <hr>
  <menuitem type="radio" radiogroup="group1">Radio Button 1</menuitem>
  <menuitem type="radio" radiogroup="group1">Radio Button 2</menuitem>
</menu>


</body>
</html>