<html>
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312">
<title>无标题文档</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function menus(str,picId){
var obj, pic
// 返回 str 对象和 picId 对象是否存在
if (document.getElementById(str) &&document.getElementById(picId)){
obj=document.getElementById(str)//obj 为 DIV 对象
pic=document.getElementById(picId)//pic 为 图片对象
if (obj.style.display == "none"){ //如果DIV对象的 display 样式值为 none 的话
obj.style.display = ""//就将 display 的样式清空
pic.src = "0001.jpg"//更改图片对象的路径
}else{
obj.style.display = "none"
pic.src = "0000.jpg"
}
}
}
//-->
</script>
<style type="text/css">
<!--
.div1 {
cursor: hand
width: 100px
}
.div1_1{
cursor: hand
width: 100px
color: #666666
font-size: 14px
}
.div2 {
color: #666666
font-size: 12px
}
-->
</style>
</head>
<body>
<!--第一列的树-->
<div onClick="menus('menu1', 'pic1')" class="div1"><img src="0000.jpg" align="absmiddle" id="pic1">语文</div>
<div id="menu1" style="display:none" class="div2">
<div onClick="menus('menu1_1', 'pic1')" class="div1_1"><img src="0000.jpg" align="absmiddle" id="pic1">文言文</div><br/>
<div id="menu1_1" style="display:none" class="div2">
文言文1
</div>
<div onClick="menus('menu1_2', 'pic1')" class="div1_1"><img src="0000.jpg" align="absmiddle" id="pic1">作文</div>
<div id="menu1_2" style="display:none" class="div2">
作文1
</div>
<div onClick="menus('menu1_3', 'pic1')" class="div1_1"><img src="0000.jpg" align="absmiddle" id="pic1">语法</div>
<div id="menu1_3" style="display:none" class="div2">
语法1
</div>
</div>
<!--第二列的树-->
<div onClick="menus('menu2', 'pic2')" class="div1"><img src="0000.jpg" align="absmiddle" id="pic2">数学</div>
<div id="menu2" style="display:none" class="div2">
代数<br/>
几何<br/>
</div>
<!--第三列的树-->
<div onClick="menus('menu3', 'pic3')" class="div1"><img src="0000.jpg" align="absmiddle" id="pic3">副科</div>
<div id="menu3" style="display:none" class="div2">
地理<br/>
生物<br/>
历史<br/>
</div>
<div onClick="menus('menu4', 'pic4')" class="div1"><img src="0000.jpg" align="absmiddle" id="pic4">副科</div>
<div id="menu4" style="display:none" class="div2">
地理<br/>
生物<br/>
历史<br/>
</div>
</body>
</html>
学习HTML5是需要先去学习html的，这里我给一个目录树，html >>css >>js >>html5 css3
学js的时候建议和书配套，主入门，书主细节、深入。
至于html和css可以看看学习，初期学习不一定要求那么高，要精通，有大概的映像就行，在后面学习用的机会很多，在使用中自然就熟悉了，当然代码是一定要多写的。
为了安全性，现在的浏览器厂商已经禁用了对本地磁盘文件操作的API。
最多可以写点cookie到客户端，而且限制还很多
所以只要是浏览器里面的类似js这样的脚本语言都是不能对客户端的本地文件进行操控的
