搜文章
推荐 原创 视频 Java开发 iOS开发 前端开发 JavaScript开发 Android开发 PHP开发 数据库 开发工具 Python开发 Kotlin开发 Ruby开发 .NET开发 服务器运维 开放平台 架构师 大数据 云计算 人工智能 开发语言 其它开发
Lambda在线 > Java联盟 > HTML5的特殊标签与IE浏览器的兼容

HTML5的特殊标签与IE浏览器的兼容

Java联盟 2018-02-28

温馨提示:文章底部,有福利链接哦!


各位小伙伴

上一个页面写的如何

是不是觉得自己棒棒哒~

接下来我们继续吧!


HTML5 的特殊标签



直接进入正题


注释标签

ruby:  

行级元素 横排显示   试图写多个汉字和注释,需要多个ruby。

直接上代码:

-

HTML5的特殊标签与IE浏览器的兼容


css样式:


HTML5的特殊标签与IE浏览器的兼容


页面效果:


HTML5的特殊标签与IE浏览器的兼容


重点标记

mark:  

以灰常黄的黄色来重点标记

页面代码:


HTML5的特殊标签与IE浏览器的兼容


HTML5的特殊标签与IE浏览器的兼容


类似于进度条的标签

meter: 

meter标签有以下的属性:


min:类进度条的最小值

max:最大值

value:实际的值


页面代码:


HTML5的特殊标签与IE浏览器的兼容


设置meter的长与宽:


HTML5的特殊标签与IE浏览器的兼容


评判标准:

low: 低于 low 是另一种颜色显示(残血了,快跑)

optimum:状态良好(状态良好,可以开团) 

high: 状态完美(我将带头冲锋)


HTML5的特殊标签与IE浏览器的兼容

HTML5的特殊标签与IE浏览器的兼容


也就是说,在 low 和 high 之间都是绿色的,在 low 以下或者 high 以上就黄了。


正宗的进度条

progress: 


HTML5的特殊标签与IE浏览器的兼容


如果我们不设置value属性,页面就是这样的效果:


HTML5的特殊标签与IE浏览器的兼容


HTML5的特殊标签与IE浏览器的兼容


HTML5的特殊标签与IE浏览器的兼容


HTML5的特殊标签与IE浏览器的兼容


details: 

和 dl 定义列表类似,也和我们的下拉列表类似,但是,显示的方式不一样用于描述细节  summary 标题(要描述的对象) 后面接上你要描述的内容


HTML5的特殊标签与IE浏览器的兼容


HTML5的特殊标签与IE浏览器的兼容

IE浏览器的兼容问题



除了上面提到的常用的标签,在使用 HTML5 标签的时候,还要注意浏览器的兼容问题。像 IE 浏览器有部分内容兼容到 IE9,IE8 及以下对 H5 完全不兼容。最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。 


浏览器的兼容测试


HTML5的特殊标签与IE浏览器的兼容


我们可以看到这个页面,当选择 IE8 的时候完全没有效果了。那么怎么解决0这个问题


解决办法


最简单的处理方法引入写好的 js 代码!这个代码大家搜一下,就可以搜到哦!这段代码的意思是:如果浏览器的版本小于 IE9 就引入这段 js。


HTML5的特殊标签与IE浏览器的兼容


看这下即使是 IE8 页面也是有效果的~


HTML5的特殊标签与IE浏览器的兼容


另一种方法,就厉害了,自己来写一段 js 代码,就可以了。


我偷个懒就不写了

最后一步,关门放码

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="Keywords" content="关键字,关键词">
   <meta name="Description" content="描述和简介">
   <title>Title</title>
   <style type="text/css">
       *{margin:0;padding:0;}
       body,ul,li,ol,dl,dd,p,h1,h2,h3,h4,h5,h6{ margin:0;}
       a{text-decoration:none;color: inherit;}
       img{display: block;border:none;}
       ol,ul{list-style:none;}
       .clearfix:after {
           content: "";
           display: block;
           clear: both;
       }
       .main{
           width: 1200px;
           margin: 40px auto;
           box-shadow: 0 0 10px 0 #000;
           background: skyblue;
       }
       .main section{
           width: 400px;
           margin: 20px auto;
           box-shadow: 0 0 10px 0 #000;
           text-align: center;
           background: blueviolet;

       }
       section.ruby ruby{
           color:mediumblue;
           font:bold 20px/30px "";
       }

       section.meter meter,section.progress progress{
           height: 30px;
           width: 400px;
       }

       section.details{
           text-align:left;
       }
 
</style>

   <!--[if lt IE 9]>
       <script ></script>
   <![endif]-->


</head>
<body>
   <section class="main">
       <section class="ruby">
           <ruby><rt>wo</rt></ruby>
           <ruby><rt>shi</rt></ruby>
           <ruby><rt>na</rt></ruby>
           <ruby><rt>na</rt></ruby>
       </section>

       <section class="mark">
           <p>娜娜<mark>好美~</mark>像个<mark>小仙女</mark>一样~</p>
       </section>

       <section class="meter">
           <meter min="0" max="100" value="50" low="20" optimum="50" high="80"></meter>
       </section>

       <section class="progress">
           <progress max="100" value="50"></progress>
       </section>

       <section class="details">
         <details>
             <summary>海贼王</summary>
             <p>路飞</p>
             <p>娜美</p>
             <p>索隆</p>
             <p>香吉士</p>
             <p>乔巴</p>
             <img class="img" src="imgs/1.jpg" alt="" width="200px" >
         </details>
       </section>
   </section>
</body>
</html>


那么今天就先到这了

小伙伴们再见


HTML5的特殊标签与IE浏览器的兼容


HTML5的特殊标签与IE浏览器的兼容



【福利合集】   spring    框架文章汇总

【福利合集】  mybatis   框架文章汇总

【福利合集】springMVC 框架文章汇总


有任何问题都可以在文章留言,娜姐都看着的呢!

合作,投稿,转载,版权问题请联系 李娜:Lina_Java

版权声明:本站内容全部来自于腾讯微信公众号,属第三方自助推荐收录。《HTML5的特殊标签与IE浏览器的兼容》的版权归原作者「Java联盟」所有,文章言论观点不代表Lambda在线的观点, Lambda在线不承担任何法律责任。如需删除可联系QQ:516101458

文章来源: 阅读原文

相关阅读

关注Java联盟微信公众号

Java联盟微信公众号:Java152919

Java联盟

手机扫描上方二维码即可关注Java联盟微信公众号

Java联盟最新文章

精品公众号随机推荐