至于为什么CSS写在头部，是因为浏览器预先加载CSS后，可以不必等待HTML加载完毕就可以开始渲染页面了。
至于JavaScript写在尾部，这是因为JS主要扮演事件处理的功能。这样的话，页面渲染的时候和JS没有关系，放在后面慢慢加载，不要影响更重要的CSS和HTML的加载。
BUT！
但是，现在随着JS技术的发展，JS也开始承担起页面渲染的工作了，比如JQuery UI之类。如果这类JS加载需要很长时间，就会影响用户的体验，因为用户看到的是一个渲染不完全的界面。
所以，需要把JS区分看待，承担页面渲染工作的JS和承担事件处理的JS要区分看待。
我的建议是，缓存类似JQuery UI这样的静态文件，剥离渲染页面的JS和事务处理的JS。
渲染页面的JS放在前面，事务处理的JS放在后面，HTML代码可以放在两者中间，或者两者之前，只要保证DOM加载后能迅速进行JS渲染就可以了。
#footersite { /* #为CSS选择器，标示按ID来选择，此处为定义id=footersite的元素的样式 */clear:both /* 保证两边没有float浮动的元素，可以保证元素在float浮动元素的下方，而不是在旁边 */
display:block /* 以块形式渲染，可指定高度，宽度 */
overflow:hidden /* 对于超出指定宽度高度的内容，采用隐藏效果 */
text-align:center /* 定义文字的对齐方式，中间对齐 */
margin:0px 10px /* 相对于父元素的留白，上下0，左右10 */
padding-bottom:0 /* 元素内部的留白 */
z-index:11 /* 指定元素的层叠次序为11 */
border-top:1px #E0E0E0 solid /* 指定顶部边框样式，1像素宽，颜色，实线 */
color:#888/* 文本颜色 */
}
#footersite h5, #footersite h6{ /* 指定id=footersite的元素内部 h5 h6元素的样式 */
display:blockmargin:0padding:0
line-height:normal /* 指定文本的行高 */
font-size:12px /* 指定文字的字号 */
font-family:Arial,Helvetica,sans-serif /* 指定文字的字体名称 */
font-weight:normal /* 指定文字是否加粗，不加粗 */
background:transparent /* 指定背景为透明 */
}
#footersite a, #footersite a:hover{ /* 指定id=footersite的元素内部 a元素的样式以及当鼠标悬停在a元素上的样式 */
text-decoration:none /* 文本下划线，不使用下划线 */
color:#444
cursor:pointer /* 鼠标指针样式，链接小手 */
padding-left:2pxpadding-right:2px
}
#footersite a:hover{color:#F60}/* 指定id=footersite的元素内部 鼠标悬停在a元素上的样式，改变颜色 */
.footer{ /* 定义CSS伪类，可以被任何HTML元素使用，通过指定class=footer，即可使用该样式 */
display:blockoverflow:hiddenwidth:970pxmargin:0 autopadding-bottom:3pxpadding-top:3px
}
/* 指定class=footer元素内部 span元素的样式 */
.footer span{border-left:1px solid #E0E0E0padding-left:5px}
用CSS样式表，建立3个不同的class，每个分别针对头部、中间部分、尾部，然后在这3个class 里设置你想要得联接颜色。OK，来个具体案例：
假设页面是白色、字是黑色。
头部联接是蓝色、中间连接是红色、尾部连接是褐色。
把下面的CSS码放到<head></head>之间。当然可以外部条用，以后你慢慢学。
然后在头部地联结里加上：
<a class="header" href="http://zhidao.baidu.com/question/75153378.html">头部</a>
然后在中间地联结里加上：
<a class="body" href="http://zhidao.baidu.com/question/75153378.html">中间</a>
然后在尾部地联结里加上：
<a class="footer" href="http://zhidao.baidu.com/question/75153378.html">尾部</a>
<style type="text/css">
<!--
body {
background-color : #ffffff
color : #000000
}
a.header:link {color: #0000FFtext-decoration: none}
a.header:visited {color: #00FF00text-decoration: none}
a.header:active {color: #00FF00text-decoration: none}
a.header:hover {color: #00FF00text-decoration: none}
a.body:link {color: #FF0000text-decoration: none}
a.body:visited {color: #00FF00text-decoration: none}
a.body:active {color: #00FF00text-decoration: none}
a.body:hover {color: #00FF00text-decoration: none}
a.footer:link {color: #800000text-decoration: none}
a.footer:visited {color: #00FF00text-decoration: none}
a.footer:active {color: #00FF00text-decoration: none}
a.footer:hover {color: #00FF00text-decoration: none}
-->
</style>
