您当前的位置： 首页 > 学无止境 > CSS3|Html5 网站首页CSS3|Html5

html5中标签的改变（2）

发布时间：2015-05-16 06:55:25编辑：雪饮阅读（）

 html5中meter标签的应用：

如下所示：

<meter min="0" max="10" value="1" low="3" high="7" ></meter>

该meter标签中我们使用了4个属性min、max、value、low、high分别代表着最小值、最大值、当前值、最小临界点、最大临界点

那么都是什么意思呢，最小值和最大值规定了该标签中值的一个范围，当前值就是就是在这个可变范围内当前的值，而最小临界点的作用就是当前值低于最小临界点的时候就是类似警告、危险一类的区域，同理最大临界点也是一样，看看该标签在页面中的显示效果并尝试改变value的值，改为小于3或者大于7试试你就会明白许多。该标签在网页中的效果如下：



当然因浏览器而异，我这里的效果是以chrome浏览器为例的。

html5中progress标签的应用：

如下所示：

<progress max="100" value="0" id="pro"></progress>

<script type="text/javascript">

var pro=document.getElementById("pro");

setInterval(function(){pro.value+=1;},100);

</script>

progress标签我们这里使用了两个属性max，value即最大值和当前值。该标签可以作为类似安装软件的进度条的作用，我们这里用javascript来控制其当前值的变化进而动态的显示了进度条的效果。



谷歌浏览器中的动态效果。

html5中details标签的使用：

<details>

<dt>我的个人博客是什么名字？</dt>

<dd>是雪饮个人博客</dd>

<dt>雪饮的个人博客是什么名字？</dt>

<dd>还是雪饮个人博客</dd>

 

</details>

该标签类似于之前我们用javascript写的下拉菜单效果，只不过这里是调用的系统控件，其效果是默认的，目前还不能够更改。其预览效果如下：



html5中ruby与rp标签的使用：

<ruby>雪饮个人博客<rp>(</rp><rt>xueyingerenboke</rt><rp>)</rp></ruby>

ruby标签可以为你的内容注释，比如这里我假如客户不认识“雪饮个人博客”于是给这个内容添加拼音，而其预览效果会是在当前内容的头上显示，但若是浏览器不支持该标签就会显示在右边，这样一来就不太好了，于是又用括号将拼音包含，但这样一来支持该标签的浏览器中，“雪饮个人博客”的头上又会出现括号，于是我们这里又用了rp标签将括号注释，这样就可以在支持ruby的浏览器中不显示，不支持的中显示。

html5中mark标签的使用：

<p>女孩儿最喜欢做的事情就是逛街、吃零食、逛街、吃零食、逛街、吃零食。。。偶尔还会呜呜呜的哭。<br/>于是雪饮个人博客总结了下女孩儿：逛吃逛吃逛吃逛吃逛吃。。。呜呜呜呜呜。。<mark>（火车终于开动啦）</mark></p>

该标签只是将被包含内容以选中状态的颜色显示出来如下效果：