实现高质量的代码需要我们在结构和样式，行为的分离的基础上做到：精简，重用，有序。
精简：尽量减小文件的大小，提高页面加载速度。
重用：提高代码的重用性，减少冗余代码，提高开发速度。
有序：提高代码的结构性，组织好代码结构更利于维护和应变特殊情况。
在我们的工作中你可能会遇到这样的代码，或者说你可能写出这样的代码
<td width="100%" height="20" class="f9pt" align="center">
<font color="#346f0e">下载</font>
<input type="text" name="wd" size="40" onmouseover="this.focus()" onfocus="this.select()"
style="margin-bottom:-5px;font-size:16px;height:1.78em;font-family:arial,sans-serif,宋体;
padding-top:2px;padding-left:1px" maxlength="100">
</td>
多么美丽的代码。。。。
首先，不说代码的合理性，我们只讨论代码的标准，这里的代码没有遵从最基础的web标准-结构样式和行为的分离。上面的代码是一段html，css，js驳杂在一起的代码。为了提高网页性能和方便团队开发，我们应该将结构、样式和行为分别用单独文件分离开，如下。
test.html 文件：
<link rel=”stylesheet” type=”text/css” href=”test.css” />
<td class="f9pt mytd">
<span class=”myfont”>下载</span>
<input type=”text” name=”wd” size=”40” id=”myinput” maxlength=”100” />
</td>
<script type=”text/javascript” src=”test.js”></script>
test.css 文件：
.mytd{width:100%;height:20px;text-align:center;}
.myfont{color:#346f0e;}#myinput{margin-bottom:-5px;font-size:16px;height:1.78em;font-family:arial,
sansserif,宋体;padding-top:2px;padding-left:1px}
test.js 文件
var myinput = document.getelementbyid(“myinput”);
myinput.onmouseover = function(){
this.focus();
}
myinput.onfocus = function(){
this.select();
}
或者你如果实在必须写在html页面内才舒服，那么最好也要用如下用上style和script标签。
<style type=”text/css”>
.mytd{width:100%;height:20px;text-align:center;}
.myfont{color:#346f0e;}
#myinput{margin-bottom:-5px;font-size:16px;height:1.78em;font-family:arial,sansserif,宋体;
padding-top:2px;padding-left:1px}
</style>
<td class="f9pt mytd">
<span class=”myfont”>下载</span>
<input type=”text” name=”wd” size=”40” id=”myinput” maxlength=”100” />
</td>
<script type=”text/javascript”>
var myinput = document.getelementbyid(“myinput”);
myinput.onmouseover = function(){
this.focus();
}
myinput.onfocus = function(){
this.select();
}
</script>
以上就是编写高质量的代码--基础：结构和样式，行为的分离的内容。