WEB标准提倡结构、表现和行为相分离---HTML结构、CSS表现、JavaScript行为
结构和表现分离的重要性：
刚开始的时候理解结构和表现的不同之处可能很困难，特别是如果你不习惯于思考文档的语义结构时。
然而，理解这点是很重要的，因为，当结构和表现分离后，用 css 文档来控制表现就是很容易的一件事了。
结构 是由文档中的主体部分，再加上语义化、结构化的标记。
表现 是你赋予内容的一种样式。在大多数情况下，表现就是文档看起来的样子，但是它同样可以影响一个文档“听”起来的样子—-毕竟不是每个人使用的都是图像化的浏览器。
尽可能的把结构和表现相分离。
理论上讲，你应该用一个 html 文档来保存内容与结构，用一个 css 文档来控制整个文档的表现。
如今表现与结构的未分离的网站还是很普遍的。
所以我们刚开始学习要养成好的习惯，把它们分别放到分开的文件中，xhtml文件可以链接并共享外部的css和javascript文档的
————————————————————————————————————————————————————
HTML结构层是网页最重要的基础。HTML标签给予内容含义。CSS表现层则是定义您的HTML该如何显示。JavaScript行为层为页面增加交互。
不管如何，一个网页必需HTML结构层。没有HTML，没有网页。CSS和JavaScript都是可选项，旧的，无名的，罕见的浏览器可能不支持 CSS和/或JavaScript，在这种情形下，这两层或其中一层都不起作用。后果是显而易见的，任何网站应能在行为层（或者表现层，但这种情形相比较少）的缺席下还能“存活”。也就是说，网站不能完全依赖于JavaScript，但要保证无障碍即使JavaScript不起作用。
分离的关系
一般来说，最好单独管理好每一层。最基础的，确保：
HTML是结构性的，不要太复杂，没有CSS和JavaScript下保持语义。
CSS表现层和JavaScript表现层分别归属于独自的.css和.js文件。
分离更容易维护。您可以轻而易举地把分离的文件连接到整站的网页上，简单举个例子，您需要把字体从12px改成0.8em，您只需打开CSS文件编辑它，这样网页变化即刻生效。除此之外，分离让您可以不需修改HTML结构层或者JavaScript行为层，只需修改整个CSS表现层就可让网站换上新衣。
分离表现和结构
表现和结构分离的基本思想是确保HTML定义结构，只有结构，所有的表现都定义到分离的CSS文件中去。不再允许font标签或者表现性的表格！在一本JavaScript的书中似乎没有什么余地来探讨CSS和HTML的分离。那么我们就来说说这个分离对我们编写JavaScript代码方式的影响吧。
CSS更改
JavaScript可以让您修改CSS，比如，您可以在CSS定义一个连接为红色，然后用JavaScript控制CSS再定义为绿色。有时候这是很有用的，样式的变化会使用户能注意变化的HTML的元素，比如出错信息。如果没有正确地分离CSS表现层，CSS更改将会变得十分困难。改变元素的className通常是最佳的CSS更改方式。如下例子，假如表单验证程序发现用户输入错误，则改变该表单字段的class:
// obj is the form. fieldobj.className += ' errorMessage';// in CSSinput.errorMessage { border: 1px solid #cc0000;}
只有您正确分离了表现和结构，这样的方式才会起作用。classerrorMessage必须定义在CSS中为了实现样式的更改，反过来，也只有您一开始就从正确的CSS表现层开始才有可能（或者说，可行）。
修改结构还是表现
JavaScript实际上允许您改变网站的表现，也允许您改变HTML文档。用户并不关心我们改了什么。但还是有所不同的。改变一个应答用户行为的表单应该是修改结构而不是表现。相关表单元素不应该只是从视觉上隐藏而已，而应该从文档结构中移除。当一个表单提交时，浏览器为所有表单元素创建名称/ 值配对，并发送给服务器。如果仅仅是在CSS中隐藏，这些字段依然是表单的组成部分，尽管可能不是服务器所需要的。这只是理论上的东西，您可以不同意我。
分离行为和结构
分离行为与结构很容易理解：不要把任何JavaScript代码写入HTML页面中。采取这两步：
把所有的JavaScript函数定义在一个分离的.js文件中，让所需的HTML页面连接到它。
删除所有的事件处理句柄（注：即行内的那些诸如onmouseover）并归入同一.js文件中去。
分离文件中的函数
JavaScript代码属于.js文件，而非HTML文件。
所以这是错误的：
<script. type="text/javascript"> function doAllKindsOfNiftyThings() { // JavaScript. code } </script>
xml 代码
<script type=”text/javascript”>
function doAllKindsOfNiftyThings()
{
// JavaScript code
}
script>
head>
<body>
<h1>My HTML pageh1>
[etc.]
这才是正确的：
xml 代码
head>
<body>
<h1>My HTML pageh1>
[etc.]
// 定义在分离的nifty.js中
function doAllKindsOfNiftyThings()
{
// JavaScript code
}
删除事件处理句柄
第二步是把所有HTML内的JavaScript函数调用移到分离的.js中去。事实上，99%的HTML内的JavaScript代码是行内事件句柄。
以下，句柄在HTML内，但不应该属于HTML的：
xml 代码
<a href=”home.html” onMouseOver=”mOv(‘home’)” onMouseOut=”mOut(‘home’)”>Homea>
应该定义在分离的.js文件中去：
<a href=”home.html”>Homea>
// in separate .js file
var nav = document.getElementById(‘navigation’);
var navnavLinks = nav.getElementsByTagName(‘a’);
for (var i=0;i<navLinks.length;i++)
{
navLinks[i].onmouseover = [code];
navLinks[i].onmouseout = [code];
}
xml 代码
该脚本处理id="navigation"的元素并处理其内的所有连接，然后再赋予连接事件处理句柄。
javascript.:伪协议
有些情况下你会看到像以下的javascript.:伪协议：
<a href="javascript.:doAllKindsOfNiftyThings()">Do Nifty!a>
这个复杂肮脏代码隐藏的含义是一个onclick事件句柄：当用户点击该连接，我们需要的是呼叫doAllKindsOfNiftyThings()函数。所以您应该从该连接中删除javascript.:呼叫而用一个独立.js文件中的onclick事件句柄来取代之：
xml 代码
<a href="somepage.html" id="nifty">Do Nifty!a>
// in separate .js file
document.getElementById('nifty').onclick = doAllKindsOfNiftyThings;
因此，对于href，应该包含一个完整的url以备没script的用户能够访问，否则整条连接都由JavaScript产生，不具备无障碍性。