html5学习（1）

1.aside标签用于展示文章相关的附加内容，它是放置有关链接，术语表或者引文的最佳场所。

2.使用<meter>元素实现进度条。

<meter id="pledge_goal" value="2000" min="0" max="4000" title="usd"></meter>

并不是所有浏览器都能兼容<meter>标签；

第一步：检测浏览器是否支持<meter>标签，创建一个<meter>标签并检测其max属性，判断是否能检测该属性，如果检测不出，则说明浏览器不支持<meter>标签。

var noMeterSupport = function(){
　　return(document.creatElement('meter').max === undefined);
}

第二步，jquery创建元素；

if(noMeterSupport){
var fakeMeter,fill,label,labelText,max,meter,value;
meter = $("#pledge_goal");
value = meter.attr("value");
max = meter.attr("max");
labelText = "$"+meter.val();
fakeMeter = $("<div></div>");
fakeMeter.addClass("meter");
lable = $("<span>"+labelText+"</span>");
label.addClass("label");

fill = $("<div></div>");
fill.addClass("fill");
fill.css("width",(value/max*100)+"%");
fill.append("<div style='clear:both;'><br></div>");
fakeMeter.append(fill);
fakeMeter.append(label);
meter.replacewith(fakeMeter);
}

.meter{border:1px solid #000;display:block;position:relative;width:500px;}
.fill{background-color:#693;}
.label{position:absolute;right:0;top:0;z-index:1111;}

　　

3.<progress>标签类似于<meter>标签，但它用来呈现动态进度。