<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Gallery</title>
<link rel="stylesheet" href="style/layout.css" media="screen"/>
</head>
<body>
<h1>Snapshots</h1>
<ul>
<li>
<a href="images/1.jpg" title="a fire work" onclick="showPic(this); return false;">fireworks</a>
</li>
<li>
<a href="images/2.jpg" title="a coffee" onclick="showPic(this); return false;">coffee</a>
</li>
<li>
<a href="images/3.jpg" title="a red ,red rose" onclick="showPic(this); return false;">Rose</a>
</li>
<li>
<a href="images/4.jpg" title="The famous clock" onclick="showPic(this); return false;">Big Ben</a>
</li>
</ul>
<img id="placeholder" src="images/5.jpg" alt="my image gallery"/>
<p id="description">Choose an image.</p>
<a href="http://www.baidu.com" class="warning" >A Test Code</a>
<p class="abc" >Be Careful</p>
<script type="text/javascript" src="scripts/showPic.js">
window.onload = ergodic();
</script>
</body>
</html>
1.js文件
js文件的语法是放在<body> or <head>里面。
1.1内部js
js写的就是函数，或者说，js里面存放的是执行的方法。
<script> alert("My First JavaScript"); </script>
如上就是最简单的js语句。
既然<script>的存放的是逻辑处理，我们是不是可以把它独立出来呢，是的，外部js。
1.2外部js
<script type="text/javascript" src="scripts/showPic.js"> </script>
把js的内容独立方法一个文件里面，这个html页面里面只有view的内容，如果再把颜色配置等放在单独的文件里面，这样不就是MVP吗，或者更彻底一点。
2.css
如同上面的说法，如果把颜色等配置，通过独立的文件处理，这样html里面只有最基本的布局文件。
<link rel="stylesheet" href="style/layout.css" media="screen"/>
body{ font-family: "Helvetica", "Arial", serif; color:#333; background-color: #ccc; margin: 1em 10%; } h1{ color: #333; background-color: transparent; }
可以通过标签匹配，也可以通过class，或者id匹配。
html，js，css，这样就形成了最基本的html文件的展示。
3.Dom
如果匹配html里面的元素呢，这个可以使用Dom语法。
var body_element = document.getElementsByTagName("body")[0]; console.log(body_element.childNodes.length); alert(body_element.childNodes.length);
这段代码就是dom属性读写的部分，现在浏览器应该都支持这种写法。