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

各位小伙伴

上一个页面写的如何

是不是觉得自己棒棒哒~

接下来我们继续吧！

HTML5 的特殊标签

直接进入正题

注释标签

ruby:  

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

直接上代码：

-

css样式：

页面效果：

重点标记

mark:  

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

页面代码：

类似于进度条的标签

meter： 

meter标签有以下的属性：

min：类进度条的最小值

max：最大值

value：实际的值

页面代码：

设置meter的长与宽：

评判标准：

low: 低于 low 是另一种颜色显示（残血了，快跑）

optimum：状态良好（状态良好，可以开团）

high: 状态完美（我将带头冲锋）

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

正宗的进度条

progress: 

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

details: 

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

IE浏览器的兼容问题

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

浏览器的兼容测试

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

解决办法

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

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

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

我偷个懒就不写了

最后一步，关门放码

Title

*{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:40pxauto;

box-shadow:0010px0#000;

background: skyblue;

}

.mainsection{

width:400px;

margin:20pxauto;

box-shadow:0010px0#000;

text-align: center;

background: blueviolet;

}

section.rubyruby{

color:mediumblue;

font:bold20px/30px"";

}

section.metermeter,section.progressprogress{

height:30px;

width:400px;

}

section.details{

text-align:left;

}

那么今天就先到这了

小伙伴们再见

学习Java的同学注意了！！！学习过程中遇到什么问题或者想获取学习资源的话，欢迎加入Java学习交流群：253772578，我们一起学Java！