这几天一直在学习html5表单新增的属性，写了如下的一个效果。
效果图： 
<!doctype html>
<html lang="en">
<head>
<!--网站编码格式，UTF-8 国际编码，GBK或 gb2312 中文编码-->
<meta charset="UTF-8">
<meta name="Keywords" content="关键词一，关键词二">
<meta name="Description" content="网站描述内容">
<meta name="Author" content="">
<title>range</title>
<!--css js 文件的引入-->
<style>
#content{
text-align:center;
border:2px solid green;
width:200px;
height:150px;
margin:20px auto;
padding:20px;
border-radius:20px;
-moz-user-select:none; /*火狐*/
-webkit-user-select:none; /*webkit浏览器*/
-ms-user-select:none; /*IE10*/
-khtml-user-select:none; /*早期浏览器*/
user-select:none;
}
input[type=range]{
outline:none;
}
input[type =range]::before{
content:attr(min);
padding-right:5px;
}
input[type =range]::after{
content:attr(max);
padding-left:5px;
}
output {
display: block;
font-size: 2em;
font-weight: bold;
color: #538923;
}
</style>
</head>
<body>
<div id = "content">
<h3>音量控制</h3>
<form>
<input type = "range" name = "range" id = "range" min = "0" max = "100"></input>
<output name = "volume"></output>
</form>
</div>
</body>
</html>
<script>
(function(){
var range = document.getElementById("range"),
volume = document.forms[0]["volume"];//第一次使用这种方式获取document.forms[index][formName];
//设置初值
cachedRangeValue = localStorage.rangeValue ? localStorage.rangeValue : 5;
range.value = volume.value = cachedRangeValue;
//判断浏览器是否支持range滑动条
if(range.type == "text"){
document.forms[0].innerHTML = "抱歉，您的浏览器不支持range滑动条，请使用高版本浏览器";
}
//默认"false"，事件句柄在冒泡阶段支持；若为"true"，则事件在句柄捕获阶段执行
range.addEventListener("mouseup",function(){
localStorage ? (localStorage.rangeValue = range.value) : (console.log("不支持本地存储"));
},"false");
if(range.addEventListener){
range.addEventListener("mouseup",function(){
localStorage ? (localStorage.rangeValue = range.value) : (console.log("不支持本地存储"));
},"false");
range.addEventListener("change",function(){
volume.value = range.value;
});
}else{
range.attachEvent("onmouseup",function(){
localStorage ? (localStorage.rangeValue = range.value) : (console.log("不支持本地存储"));
});
range.attachEvent("change",function(){
volume.value = range.value;
})
}
})();
</script>再附上很使用的一个属性menu，目前仅有火狐支持此属性，具体用法如下：
<body contextmenu = "context-menu">
</body>
//给要加上右键菜单的标签，加上contextmenu属性，属性值为menu的id
<menu type="context" id = "context-menu">
<menuitem label = '刷新'></menuitem>
<menu label = "新浪微博">
<menuitem label = "新浪"></menuitem>
<menuitem label = "微博"></menuitem>
</menu>
</menu>效果图： 