本文简单介绍Web开发中的三剑客：HTML/CSS/Javascript，阐述其关系。然后用示例demo讲解三者的分分合合。相关资源的百度云盘链接为：链接：http://pan.baidu.com/s/1jIab1I2 密码：vue1
《JAVA后台的小白之路》是以掌握SSM框架进行实战后台开发为核心目的，那么为什们要讨论Web前端（HTML/CSS/JavaScript）的东西呢？在小Ｏ看来，后台必须要懂点前台的东西，才能更好的进行后台开发。不需要太精通，但是需要了解一些。这样一方面可以理解整个前后台的交互，另一方面，自己写后台程序的时候，可以简单方便地把结果显示在前端进行测试。最后，下一阶段的JSP必须要有HTML的基础才可以进一步进行。来，让我们放出炫酷的Web三剑客图镇楼。
这一节从遵循纯html，html+css，html+css+javascript的顺序，逐步介绍完整的网页前端三剑客。
HTML，更确切的说是HTML5，小O在《JAVA后台的小白之路（一）_1 ——奔跑吧进击的Sublime》中已经阐明。这里小O在sublime里写个demo，只用一点点之前没有提到的知识，就是表格。表格的相关标签，小O在这里列出来了。想了解标签的具体属性值，就戳到菜鸟网里面去看吧：http://www.runoob.com/tags/ref-byfunc.html。
nameage<table>定义一个表格<caption>定义表格标题<th>定义表格中的表头单元格<tr>定义表格中的行<td>定义表格中的单元<thead>定义表格中的表头内容<tbody>定义表格中的主体内容<tfoot>定义表格中的表注内容（脚注）<tfoot>定义表格中一个或多个列的属性值<tfoot>定义表格中供格式化的列组下面这段代码实现了非常简单的表格html，表格被放在一个div标签中方便之后的处理。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <table border=1> <div> <tr > <td>姓名</td> <td>年龄</td> <td>性别</td> <td>喜欢的颜色</td> <td>不喜欢的颜色</td> <td>身高</td> </tr> <tr> <td>小O</td> <td>20+</td> <td>男</td> <td>柠檬黄</td> <td>shit黄</td> <td>177+</td> </tr> <tr> <td>老王</td> <td>30+</td> <td>男</td> <td>黑色</td> <td>彩色</td> <td>160+</td> </tr> </div> </table> </body> </html>这样的代码已经把网页骨架搭建出来了，但是讲真，小O认为它实在是太丑了。别和小O说这是极简风，明明就是简陋啊。小O想要这个表格占满整个页面，想让它变得漂亮一点。那么这个时候，小O就需要CSS了。
层叠样式表（英语：Cascading Style Sheets，简写 CSS）,目前的版本是CSS3，CSS 最主要的目的是将文件的内容与显示分隔开来。简单来说，html是骨架是血肉之躯，css是衣服是化妆师，让html内容变的漂亮起来。万千解释，顶不上一张效果图。来，让我们瞅瞅给上述的html里加入CSS会有什么效果。 有没有，有没有，加入样式后，瞬间高大上起来了。让我们贴上完整的代码（初看跳过代码）：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> html,body{ width:100%; height:100%; margin: 0px; padding: 0px; background-color: #1e2b3a; } #divtest{ width:100%; height:30%; text-align: center; background-color: yellow; margin: 0px; padding: 0px; } table,th,td { border:2px solid #1e2b3a; vertical-align: center; margin:0 auto; } #tabletest{ border-collapse:collapse; width:80%; height:50px; color: #1e2b3a; position: relative; } .trclass1{ background-color: orange; font-weight: bold; } .trclass2{ background-color: #158e71; color:white; } </style> </head> <body> <div id="divtest"> <h2>小O的测试表</h1> <table id="tabletest" border=1> <tr class="trclass1" > <td>姓名</td> <td>年龄</td> <td>性别</td> <td>喜欢的颜色</td> <td>不喜欢的颜色</td> <td>身高</td> </tr> <tr class="trclass2"> <td>小O</td> <td>20+</td> <td>男</td> <td>柠檬黄</td> <td>shit黄</td> <td>177+</td> </tr> <tr class="trclass2"> <td>老王</td> <td>30+</td> <td>男</td> <td>黑色</td> <td>彩色</td> <td>160+</td> </tr> </table> </div> </body> </html>小O这一长串代码看不懂啊，啊，啊，啊！！！！！！！！Smilecrying，那咱拆开看吧。
使用CSS，要做的事情就两件，第一，说明这一段代码是给哪个或哪些元素用的>指定对象。形象地说，就是衣服或者裤子的问题。这一段CSS代码是内裤，修饰名为test的div标签，那一段CSS代码是外套，修饰类型为testclass的的table标签。第二，说明和指定元素的各种属性>编辑属性。形象的说，就是给具体衣物选择不同的花纹，比如这件外套是黑白条纹状L码，那条内裤是个花裤衩。
STEP1 : 指定对象。首先在body中，给各个标签加上id或者class属性，然后在head部分加入style标签，在里面用名称加花括号的形式指定要给谁加上样式。其中”#”对应的是id属性，”.”对应的是class属性。
<head> <style> #divtest{ ............. } </head> <body> <div id="testdiv"> ...... <div> <div class="testclass"> ...... <div> <div class="testclass"> ...... <div> </body>STEP2 : 编辑属性。 无非就是在花括号中填补各种属性罢了。形式是“属性名：属性值;”。
border-collapse:collapse; width:80%; height:50px; color: #1e2b3a; position: relative;分开讲了，我们再合起来看看完整的CSS代码到底是什么。喏，就是下面这段小东西：
.trclass1{ background-color: orange; font-weight: bold; }到这里，恭喜你已经双剑合璧了。CSS可以实现你想要的几乎所有效果，也可以做出动画来。想要进一步学习，可以去菜鸟网又或者w3cschool的CSS专栏学习。基础知识在这些地方真的已经很详尽了。 其实，另一种更好的学习方式是哪里不懂问哪里，有什么语法或者想实现的效果不会的可以直接在度娘或者谷歌上查。 另外，可以在网上找html/css模版，只要能看懂，你就能改能用。方便快捷，而且能迅速提高你的实战能力。
之前说，HTML是躯体，CSS是衣物。那么在这种类比下，JavaScript又是什么？JavaScript是大脑！！只有HTML的话，这个人是个浑身赤裸的植物人。不堪入目不说，戳他他还没反应。加上CSS，她就变成了睡美人。你想吻醒她，就需要给她注入JavaScript，让她有意识，能对外界刺激做出反应。 感性认知后，我们再来看看稍微正式点的说明：下面的说明分别来自W3school，菜鸟网和廖雪峰的官方网站。
简而言之，统而言之，JS，JavaScript是可以直接被浏览器直接解析，用在Web里面的轻量级脚本语言。简单易学，应用广泛。接下来我们在上面CSS的代码里面稍做修改，加入一点点JS代码，实现点击按钮后表上标题变换和表格颜色变换。 按照惯例，先上效果图： 然后贴上完整版的代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> html,body{ width:100%; height:100%; margin: 0px; padding: 0px; background-color: #1e2b3a; } #divtest{ width:100%; height:30%; text-align: center; background-color: yellow; margin: 0px; padding: 0px; } table,th,td { border:2px solid #1e2b3a; vertical-align: center; margin:0 auto; } #tabletest{ border-collapse:collapse; width:80%; height:50px; color: #1e2b3a; position: relative; } #trclass1{ background-color: orange; font-weight: bold; } .trclass2{ background-color: #158e71; color:white; } </style> <script> i=0; function changeTitle(){ i=i+1; document.getElementById('htest').innerHTML="小O的测试表 No/."+i; } function changeStyle() { if(i%2==1) document.getElementById('trclass1').style.background="blue"; else document.getElementById('trclass1').style.background="white"; } </script> </div> </head> <body> <div id="divtest"> <h id="htest">小O的测试表</h> <table id="tabletest" border=1> <tr id="trclass1" > <td>姓名</td> <td>年龄</td> <td>性别</td> <td>喜欢的颜色</td> <td>不喜欢的颜色</td> <td>身高</td> </tr> <tr class="trclass2"> <td>小O</td> <td>20+</td> <td>男</td> <td>柠檬黄</td> <td>shit黄</td> <td>177+</td> </tr> <tr class="trclass2"> <td>老王</td> <td>30+</td> <td>男</td> <td>黑色</td> <td>彩色</td> <td>160+</td> </tr> </table> <br> <div id="buttonbox"> <input type="button" value="换标题" onClick="changeTitle()"> <input type="button" value="换颜色" onClick="changeStyle()"> </div> </body> </html>根据惯例，我们拆开来一点点看。重要的点有两个，第一，js长什么样，第二，如何用js。
<script> XXX xxxxx; //脚本，直接执行 ....... function XXX(){ //函数，需要调用 ........ } </script>当JavaScript直接写在Html文档里的时候，JavaScript程序应该位于script标签之中。作为一种脚本语言，js用起来当然是既有直接执行的脚本，又有间接执行的函数了。如果看官对Matlab这样的东西比较熟悉，那么JavaScript也就毫无问题了。 在HTML中用js，要么是写脚本它自己跑，要么就是在html里面设置响应事件。比如在html里给按钮注册一个onClick事件，该事件的响应是change()函数。 STEP 1: 注册事件
<input type="button" value="测试" onClick="change()">STEP 2: 完成响应函数
function change() { alert("小O你好，我是js测试函数"); }JavaScript 能够实现的东西实在是多，在这种篇幅有限的情况下，小Ｏ就不需要仔仔细细讲细节了。细节上的问题请去菜鸟网看吧。
对了，为了看懂JavaScript中的如下代码，看官还需要去简单的了解一下DOM对象，其实也很简单。
document.getElementById('trclass1').style.background="white";恭喜你，小伙子，你达成了三剑合璧的成就。 补充： 看客们可能存在一个疑问，就是在HTML页面中，CSS样式代码和js脚本代码应该放在哪里？答案是你爱放在哪里放在哪里。你要你把对应代码放在<style></style>之间，放在<script></script>之间就好。这些片段在HTML中的具体哪个地方并没有什么影响。 不过，小O的个人习惯是如果要把CSS还有JavaScript写在HTML文档里，那就把他们放在<head>部分因为这样相对容易管理、理解。`
这一节阐述对HTML、CSS、Javascript的进一步理解，并将一个.html拆分成.html+.css+.js的形式。
小Ｏ曾经傻傻地学着html，css，还有js。但是一直没有一个整体的把握，因此学习起来的感觉就是书上有什么示例代码就敲一敲，敲完就忘记了。不知道自己想要的是什么。那么在这里，就让小O来形象地理一理三剑客间的关系，三剑客与后台大佬又是个什么样的联系。
牧云流同学的博客里面向新手简单总结了HTML,CSS,JavaScript之间的关联，小O也从中得到了一定的帮助。这里同样推荐大家阅读：《新手理解HTML、CSS、javascript之间的关系》。 STEP 1: 小O说要有人，结果法力过差，只出现了个白白的骷髅架子。——小O现在只写了HTML标签。
小O没办法，开始玩泥巴，把骷髅架子的缝隙都用泥巴填好，于是小O有了一个有骨骼奇特的泥巴人。——小O现在在HTML标签内部加上了内容，让HTML丰满起来了。 小Ｘ说这泥巴人太丑了，于是小Ｏ下深海上九天，采来各种珍奇装饰。淡妆浓抹总相宜，于是小Ｏ有了个五彩泥塑，看上去微妙微翘。——小O这个时候给HTML加上了CSS代码，来控制显示效果。 小X不要小O了，小Ｏ很孤单，天天和泥塑说话。可那泥塑不理小O，小O想让它活过来陪伴小O，于是分出一缕精魂，注入泥塑。泥塑有了心，也有了脑，从它变成了她。从此和小O过上了没羞没躁的快乐生活。——小O有加入了javascript代码，使得html页面能够良好交互。至此，前端完成。 这个社会发展的太快，小O需要一个智囊在身边，帮助小O分析局势把握机会。人脑毕竟有限，她已经无法仅仅依靠自己的力量就满足小O的需求了。幸好已经进入了超算时代，小O给她买了最新的人工智能辅助设施，那是一台有智慧的超级计算机，能够帮助她实现很多她凭借人脑完全无法胜任的计算与分析。——小O给前端程序配上了对应的后台程序，完成了整个项目。 总而言之，前台是人，后台是辅助人工智能。人有三层，其一曰骨肉，其二曰衣冠，其三曰思想。
我们的后台语言是ＪＡＶＡ,那么JAVA与JavaScript又有什么区别呢？ 一句话总结，印度与印度尼西亚的关系。二者名称相似有点历史因素，但并不相同、也不类似。想进一步理清这个问题，推荐阅读下面阮一峰的《JavaScript诞生记》。
JavaScript和CSS代码除了可以写在HTML文档里，还可以单独成文件，然后在HTML文档中进行调用。 调用语句写在head标签内，关键语句形式如下。前者是引入外部css文件，后退着是引入外部js文件：
<link href="Tinycircle_seperate.css" rel="stylesheet" type="text/css" /> <script src="Tinycircle_seperate.js" type="text/javascript"></script>把三剑客分开，是为了代码的条理性更加清晰和方便维护，是一种良好的编码习惯。也有利于后期向后台开发转型。那么分开后的三个文件如下所示：
Tineycircle_seperate.html文件内容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link href="Tinycircle_seperate.css" rel="stylesheet" type="text/css" /> <script src="Tinycircle_seperate.js" type="text/javascript"></script> </head> <body> <div id="divtest"> <h id="htest">小O的测试表</h> <table id="tabletest" border=1> <tr id="trclass1" > <td>姓名</td> <td>年龄</td> <td>性别</td> <td>喜欢的颜色</td> <td>不喜欢的颜色</td> <td>身高</td> </tr> <tr class="trclass2"> <td>小O</td> <td>20+</td> <td>男</td> <td>柠檬黄</td> <td>shit黄</td> <td>177+</td> </tr> <tr class="trclass2"> <td>老王</td> <td>30+</td> <td>男</td> <td>黑色</td> <td>彩色</td> <td>160+</td> </tr> </table> <br> <div id="buttonbox"> <input type="button" value="换标题" onClick="changeTitle()"> <input type="button" value="换颜色" onClick="changeStyle()"> </div> </body> </html>Tineycircle_seperate.css文件内容
html,body{ width:100%; height:100%; margin: 0px; padding: 0px; background-color: #1e2b3a; } #divtest{ width:100%; height:30%; text-align: center; background-color: yellow; margin: 0px; padding: 0px; } table,th,td { border:2px solid #1e2b3a; vertical-align: center; margin:0 auto; } #tabletest{ border-collapse:collapse; width:80%; height:50px; color: #1e2b3a; position: relative; } #trclass1{ background-color: orange; font-weight: bold; } .trclass2{ background-color: #158e71; color:white; }Tineycircle_seperate.js文件内容
i=0; function changeTitle(){ i=i+1; document.getElementById('htest').innerHTML="小O的测试表 No/."+i; } function changeStyle() { if(i%2==1) document.getElementById('trclass1').style.background="blue"; else document.getElementById('trclass1').style.background="white"; }如果想要仔细研究CSS和JavaScript引入到HTML里，可以参考如下两个链接： ①CSS引入：http://www.lvyestudy.com/les_cj/cj_1.3.aspx ②JavaScript引入：http://www.lvyestudy.com/les_js/js_1.3.aspx
有了从三剑合璧到三剑分离的过程和理解，之后再理解掌握诸如openlayers、D3、echarts这样的js库就会方便许多，也更容易上手。 最后放上一张相关图片作为本文的结束：
