第一课：Html5新增重要结构标签应用实例及兼容性检测

来源：互联网发布：java 日志实现编辑：程序博客网时间：2024/06/08 07:15

1、新增结构标签：
header
article 定义页面独立的文章内容（帖子／博客文章／评论／新闻）
nav
section
aside
figure 定义一块独立的内容（通常用来展示图片及描述）
figcaption 定义figure的标题
footer

2、特殊样式标签：
mark 突出显示文字，默认背景色黄色
meter 刻度百分占比
progress 进度条
ruby 内容+注释 rt注释内容 rp不支持时显示
wbr长单词换行位置

3、兼容性不是很好的标签：
dislog 定义一个对话框，用处不大，谷歌和火狐支持，表现形式就是一个带定位的div加了一个黑边框，奇特之处在于还能使用margin：0 auto；
bdi 单独设置文字摆放方式（dir="rtl" dir="ltr"）
details / summary 描述某部分的详情 summary为details的标题

4、最佳实践：

<!DOCTYPE HTML><html>  <head>    <title>your title name</title>    <meta charset="utf-8">    <meta name="Author" content="Wilson Xu">    <style type="text/css">      *{margin: 0;padding: 0;font-family: "Microsoft yahei";}      a{text-decoration: none;}      a img{display: block;border: none;}      li{list-style: none;}      header{        width: 600px;        margin: 10px auto;        background: rgba(255, 0, 0, 0.5);      }      header h1{        font-size: 16px;        text-align: center;      }      header p{        font-size: 14px;        text-align: right;        line-height: 18px;      }      nav{        display: block;        width: 600px;        background: pink;        margin: 0 auto;      }      nav ul{        overflow: hidden;/*必须加，不加浮动显示不了高度；*/      }      nav ul li{        width: 99px;        height: 40px;        float: left;        text-align: center;        line-height: 40px;        font-size: 12px;        color: #fff;        border-right: 1px solid #fff;      }      section{        width: 600px;        margin: 10px auto;        background: cyan;      }      section h2{        text-align: center;        font-size: 14px;      }      section p{        font-size: 10px;      }      section p span{        cursor: pointer;        display: inline-block;        padding: 5px 10px;        border-radius: 20px;        border: 1px solid #fff;        background: rgba(0, 0, 0, 0.5);        color: #fff;      }      section p input[list=mylist]{        outline: none;      }      section p progress{        /*默认不加其他修饰属性为高13px浅蓝色圆角的样式，加了其他属性，颜色就变成了绿色*/        vertical-align: middle;        width: 200px;        height: 13px;        border-radius: 20px;        overflow: hidden;      }      section figure figcaption{        font-size: 12px;      }      meter{        width: 100px;        border-radius: 3px;/*只有加超出隐藏才能显示*/        overflow: hidden;      }      aside{        width: 60px;        height: 300px;        position: absolute;        top: 50%;        margin-top: -150px;        left: 100px;        background: #0f0;        font-size: 14px;        font-weight: 100;      }      details summary{        font-size: 12px;        outline: none;        font-weight: bold;      }      details ul{        padding-top: 5px;      }      details ul li{        font-size: 12px;        text-indent: 12px;        line-height: 18px;      }      footer{        width: 600px;        height: 40px;        line-height: 40px;        margin: 10px auto;        background: #cc6600;        text-align: center;        font-size: 14px;      }    </style>    <script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>  </head>  <body>    <header>      <h1>我是wilson，这是我的第一个<mark>html5</mark>页面</h1>      <article>        <p>我是一个小前端，不要欺负我～</p>        <p>明明可以靠脸吃饭，我却偏偏要靠才华，这是我和明明的区别。</p>      </article>    </header>    <nav>      <ul>        <li>年轻</li>        <li>善良</li>        <li>帅气</li>        <li>谦虚</li>        <li>踏实</li>        <li>热心</li>      </ul>    </nav>    <section>      <h2>我的技能：</h2>      <p>DIV+CSS: <meter value="85" min="0" max="100" low="60" high="80">85%</meter></p>      <!-- meter不写min和max的时候value介于0-1,low和high可以变颜色 -->      <p>Javscript: <meter value="0.4" low="0.6">40%</meter></p>      <p>HTML5: <meter value="0.7" low="0.6">70%</meter></p>      <hr/>      <p><span id="btn">点击满血复活-> </span><progress id="progress" max="100" value="0"></progress></p>    </section>    <section>      <h2>我的简档：</h2>      <figure>        <img src="images/me.jpg" width="100px" alt="">          <figcaption>这是我的帅照～<ruby>囧<rt>jiong</rt></ruby></figcaption>      </figure>    </section>    <section>      <h2>个人简介：</h2>      <article>        <p>web fond-end engineer</p>        <p>salesforce consultant</p>      </article>      <p><label for="company">曾服务过的公司：</label><input type="text" list='mylist' id="company" /></p>      <datalist id='mylist'>        <option value="腾讯"></option>        <option value="网易"></option>        <option value="新浪"></option>        <option value="谷歌"></option>        <option value="阿里"></option>        <option value="360"></option>      </datalist>      <details open>        <summary>教育经历</summary>        <ul>          <li>重庆师范大学-电子商务</li>          <li>潭州学院-网页制作</li>          <li>极客学院-微信小程序</li>        </ul>      </details>    </section>    <footer>结尾～</footer>    <aside>      <p>我是娇羞的侧边栏～～</p>      longwords<wbr></wbr>inanewline    </aside>    <script type="text/javascript">      // 点击满血复活      var oBtn = document.getElementById('btn');      var oPro = document.getElementById('progress');      oBtn.onclick = function(){        var val = oPro.value;//取属性        var max = oPro.max;        var timer = setInterval(function(){          val++;          if(val >= max){            val = max;            clearInterval(timer);          }          oPro.value = val;//将操作后的结果赋值给该属性        },30);      };    </script>  </body></html><!--新增结构标签：headerarticle 定义页面独立的文章内容（帖子／博客文章／评论／新闻）navsectionasidefigure 定义一块独立的内容（通常用来展示图片及描述）figcaption 定义figure的标题footer特殊样式标签：mark 突出显示文字，默认背景色黄色meter 刻度百分占比progress 进度条ruby 内容+注释 rt注释内容 rp不支持时显示wbr长单词换行位置兼容性不是很好的标签：dislog 定义一个对话框，用处不大，谷歌和火狐支持，表现形式就是一个带定位的div加了一个黑边框，奇特之处在于还能使用margin：0 auto；bdi 单独设置文字摆放方式（dir="rtl" dir="ltr"）details / summary 描述某部分的详情 summary为details的标题 -->

5、效果预览

6、兼容性检测资源网站：https://caniuse.com/#search=header

1 0