1. Web标准

• Web标准由一系列标准组合而成，其核心理念就是将网页的结构、样式和行为分离开来，所以它可以分为三大部分：结构标准、样式标准和行为标准。结构标准包括XML标准、XHTML标准、HTML标准；样式标准主要是指CSS标准；行为标准主要包括DOM标准和ECMAScript标准。
• 一个符合标准的网页，标签中的标签名应该全部都是小写的，属性要加上引号，样式和行为不再夹杂在标签中，而应该分别单独存放在样式文件和脚本文件中。理想状态下，网页源代码由三部分组成：.html文件、.css文件和.js文件。标签中混有样式和行为的写法是不推荐的。

代码结构、样式和行为混杂的网页实现

    <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> 

这种段代码应该改成下面这样的形式

    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,sans-serif,宋体;padding-top:2px;padding-left:1px}  
     
    ========================================================
    test.js文件  
    var myInput = document.getElementById("myInput");  
    myInput.onmouseover = function(){  
       this.focus();  
    }  
    myInput.onfocus = function(){  
       this.select();  
    } 

• 如此一来，原来混乱不堪的HTML变得清爽多了。HTML标签只用负责承载内容，而样式交给了CSS，行为交给了JavaScript。
• 将结构、样式和行为分成三个文件，这是比较推荐的做法。但事实上，我们在工作中经常会因为各种原因而仍然把样式和行为放在.html文件中。即使是在这样的情况下，仍然可以将样式和行为从标签中分离出来。
• 如果不将CSS和JavaScript作为独立文件外链出去，而是在HTML页面里用<style>和<script>标签来承载样式和行为也是可以的，只要不在HTML标签上书写样式和行为，仍然实现了结构、样式和行为的分离。代码的职能已经非常非常清晰了，只是没有分开成三个文件而已。