浅谈h5增强了哪些页面元素

时间2024-01-23 02:24:21发布访客分类HTML浏览261

导读：收集整理的这篇文章主要介绍了浅谈h5增强了哪些页面元素，觉得挺不错的，现在分享给大家，也给大家做个参考。今天给大家带来浅谈h5增强了哪些页面元素，需要的朋友可以保存笔记了。<!DOCTYPE htML> <html>...

收集整理的这篇文章主要介绍了浅谈h5增强了哪些页面元素，觉得挺不错的，现在分享给大家，也给大家做个参考。今天给大家带来浅谈h5增强了哪些页面元素，需要的朋友可以保存笔记了。

!DOCTYPE htML>
      html>
          head>
              meta charset="UTF-8">
              tITle>
    浅谈html5增强的页面元素/title>
          /head>
          body>
              !--figure与figcaption:带有可选标题的元素组合-->
              figure>
                  img src="img/QQ截图20160103144626.png"  alt="图片"/>
                  img src="img/webp.jpg" alt="图片" width="211" height="191"/>
                  figcaption>
    我的图片组合/figcaption>
              /figure>
    br />
              !--detail与summary元素：用于标示该元素内部的子元素可以展开收缩显示-->
              details id="details" ontoggle="detailfn(this)" style=" cursor: pointer;
    " >
                  summary>
    精武风云/summary>
                  p id="p" style="visibility: hidden;
    ">
    陈真（甄子丹 饰）当年为报杀师之仇，独闯虹口道场。。。/p>
              /details>
    br />
              !--mark:突出显示或高亮显示-->
              mark>
    html5/mark>
    的高亮显示br />
              !--PRogress:进度条-->
              section>
                  h2>
    progress元素的使用实例/h2>
                  p>
    完成的百分比progress id="p" max="100">
    span>
    0/span>
    %/progress>
     /p>
              /section>
    br />
              !--meter:规定范围内的数量值--->
              p>
    磁盘使用量：meter value="40" min="0" max="160">
    40/160/meter>
    GB/p>
    br />
              !--diaLOG:对话框，默认隐藏，js控制-->
              input type="button" value="打开对话框"  onclick="document.getElementById('dg').show();
    "/>
              input type="button" value="打开对话框showModal" onclick="document.getElementById('dg').showModal();
    " />
              dialog id="dg" style="width:15%;
    text-align: center;
    ">
                    form>
                       label for="txtName" value="用户名：">
    /label>
                       input type="text"  id="txtName"/>
    br />
                       label for="pwd" value="密码：">
    /label>
                       input type="text"  id="pwd"/>
    br />
                       input type="button" value="登录" />
                       input type="button" value="关闭" onclick="document.getElementById('dg').close();
    " />
                    /form>
              /dialog>
    br />
    hr />
              !--改良的a元素：download属性直接下载-->
              a href="img/QQ截图20160103144626.png" download="文件名">
    img src="img/QQ截图20160103144626.png" />
     /a>
    br />
              !--ol:改良的 start与reversed属性：自定义开始编号与反编号-->
              h3>
    start与reversed实例/h3>
              ol start="5" reversed="">
                  li>
    内容1/li>
                  li>
    内容2/li>
                  li>
    内容3/li>
                  li>
    内容4/li>
                  li>
    内容5/li>
              /ol>
    br />
              !--dl:定义术语列表： dt表示术语，dd表示定义-->
              术语解释：           dl>
                  dt>
    rss/dt>
                  dt>
    rss也叫聚合rss是在线共享内容的一种简易方式（也叫聚合内容）/dt>
              /dl>
    br />
              !--cite:表示作品-->
              p>
    最近上映的cite>
    美国队长3/cite>
     这个电影不错！/p>
    br />
              !--iframe:sandbox属性添加限制增强安全性-->
              !--script:async与defer属性加快加载速度-->
          /body>
      /html>

相信看了这些案例你已经掌握了方法，更多精彩请关注其它相关文章！