HTML|CSS|JS初探-优快云博客

前言

应该说具体接触前端（HTML + CSS + JS）有一年，到现在没总结过，几个原因是：1.自己太懒，水平有限；2.怕解释错或者说错什么被人鄙视。这些天渴望分享的心情很强烈，想让自己的一些想法更加丰富，也可能向来总是喜欢跟别人讲点东西。之前在新浪上有写过一些，发现那边不适合写技术相关的东西，自己又总是懒得去租个服务器做个人博客，于是就跑到这边来了。这就是开这个博客的原因了。
鄙人水平有限，欢迎大家一起交流学习指正。

机器人小R

先不管这三个不知道什么东东的是做啥的，先看一个我自己瞎编的东东：

a.定需求：

科学家A在参与一项工作：开发机器人小R。我们都知道做这样的工程（姑且认为是软件工程吧）要明确需求，那好，对于这样的机器人，我们明确了需求：

当然咯，小R是个机器人，一定会长得很像人，有头有脸有手有脚；
小R不能像原始人那样裸着吧！于是我们要能够为小R装饰各种衣服或者帽子等；
有人就质疑了，如果满足前两点，那小R跟布娃娃有什么区别呢？于是我们立马加上一个新的需求：小R要能够跟其他事物进行交流，比如说能够听懂主人说的话，能够自己换衣服。

很多人做工程会把前期需求定得很广，一下子就想让小R飞向外太空变成superman。

OH，那只会让这个事情变得更加不可能实现，SO我们现在就只关心这三个需求了！

b.打造身体：

于是A拿着铁锤开始打造小R了，一下子做个机器人谈何容易，此时聪明的人都知道我们要"分解这个任务，使得每一步都是可量化的"。好，那就先做个头出来吧。叮叮当当，过了N久，终于拼成了一个机器人的样子了。

c.做点衣衫：

让我们想想前面的需求2吧，要做点衣衫给小R装扮一下，于是请了各种设计师，什么手套啊什么帽子裤子都要为小R定制好几套，好让它每天都能有不同的搭配。

d.动起来吧：

好了，差不多要完成了，最后一步是为了让小R有别于布娃娃，做更多有用的事！于是A制作了芯片控制小R身体的各个部件的工作。当然了，制作好之后，还得先测试一下看看小R的手是不是能够正常的举起来之类之类的吧。一个未经过测试的机器人出去之后往往在电影里边就是一个毁灭者的形象了。

小R在WEB世界

前面说了个不是故事的故事，我只是想表明很多伟大的工程都是来源于一些生活实际跟经验的（至少我的理解是这样的），越简单的东西往往是很伟大的发明了，更复杂不等于更有价值。

回到正题，标题写着“小R在WEB世界”，真不明白这个作者想表达什么，明明前面说了是机器人了，现在又变到WEB世界来了。

好吧，先看看WEB世界有什么，很多人的概念就是看网页呗，那就只看看WEB里边的网页部分了。

于是我们打开了万恶的IE（不要告诉我不知道这个东西），输入了网址http://rapheal.iteye.com/ ，敲下回车，你看到了我的博客。

我们把这个页面叫做小R吧。大家可以看看他有什么：

有标题有链接；
有各种颜色来装饰各种字体，跟好看的布局；
还可以登录来这篇文章里边评论。

这里写了3点！没错，就是3点！想想刚刚说过的三个需求吧。

构建这个活着WEB世界的小R时候，我们需要把整个页面的手手脚脚拼起来，给它加上颜色，并且可以跟来访问的朋友们互相交流。

或许我比较喜欢3这个数字，现在又想要说3个东西了，差点要偏离主题了，这篇是想要写点HTML|CSS|JS初探。只能说我太罗嗦了。那就开始说说HTML|CSS|JS吧。

HTML

我们想想前面制作小R的过程，我们一开始搭建了各种身体部件，在制作WEB应用时，我们也需要把这个网页的头头脚脚构建出来，例如网页上边有个菜单，下边有个版权说明。此时就用点HTML来开始构建吧：

<robot>
	<head>
		<eyes></eyes>
		<nose></nose>
		<ear></ear>
		<mouth></mouth>
	</head>
	<body>
		<hands></hands>
		<feet></feet>
	</body>
</robot>

在HTML的语法里边（就像你搭建一个机器人那样，必须要遵守一定的规范去制作吧，总不能用乱接乱凑。语法就是这里的制作规范规则），每个标签（就是这样的一个玩意：<head>，用<>括起来的东东）就是这个页面的结构了，可以认为是小R的手手脚脚，于是你构建一个头<head>，头里边有眼睛有鼻子等等，那你构建完头之后就要告诉别人说我头已经构建好了，我接下去要构建身体<body>了，于是我们要闭合标签（就是例子上边看到的</head>），用一个/来标识这个标签构造结束了。经过我们反反复复的敲打，小R就这样完成了。

这里还可以牵扯一下HTML语义化，啥是语义化？打个比喻吧，小R的眼睛总不能长在肚子上吧。也就是每个标签都应该有它的意义跟层次关系，手就是手，是应该在身体的两侧的，应该都赞成的吧？当然，在HTML里边也是允许你把眼睛接在肚子上的，这是你自己制作的独特机器人。你让这个机器人更加符合规范跟符合人的审美标准，它将是一个抢手货！对于HTML也一样的，语义化做得更好，对于搜索引擎就更友好，于是搜索机器人的时候，非常漂亮的机器人将会在结果的第一位了。语义化有利于搜索引擎优化 。

我们还得为残疾人士设计出更加友善的应用，例如一个盲人来到你的网站时，他是使用一些辅助设备来访问你的网站的。当他从设备中听到了这个页面的眼睛长在了肚子上时，一定会让他很困惑的。于是，我们需要让我们的页面方便残疾人士的阅读，语义化的作用不容小看。

CSS

按照我们的想法的话，我们这时候应该开始做衣衫了。我们为刚刚创建出来的小R戴个帽子跟眼镜。

head{
	帽子:大小适中的圣诞帽;
	围巾:红色的印花围巾;
}
eyes{
	眼镜:边框是方的墨镜;
}

可以看到上面的规则很容易理解，先是一个部件的名字，例如head然后利用{}括起来，表明在这里边是为了给head做点美化。在里边有"帽子：大小适中的圣诞帽;"，先是声明我们有个帽子，帽子有那么多，是什么样的帽子呢？于是在冒号后边定义了是一顶圣诞帽，大小还要适中。最后我们要告诉它，帽子已经带好了，我要接下去给它带个围巾，于是在末尾我们加上了分号以便标志帽子已经带好了。

想必这样的规则很容易明白吧，当然实际中的页面是肯定没有帽子这样的东西戴的，但是规则基本就是这样的。

也许你会很奇怪，有时候你给你的页面穿上好看的衣服之后，告诉你的朋友说可以去看一下你制作的漂亮的玩意，紧接着那边看完之后告诉你，页面的东西都歪的，一点都不好看。这个时候你会很困惑，当然了，每个浏览器拿到你写的这件衣服，它对这件衣服的理解是不一样的，前面说到的万恶的IE就是不按照国际标准来理解你这件衣服，导致了很多很多前端开发人员讨厌IE，这个现象在js的解释跟理解也是一样道理。

Javascript(JS)

小R这个时候只能像一个布娃娃一样挂着你的浏览器上，你捏捏它，它也不会搭理你。于是我告诉它，别人捏你的时候，你应该捏回去。

if (被人捏){
	捏回去;
}

当然咯，这里只是一种描述，真正的语法规则不是这样的，至于语法规则，在这里不想多写。

可以理解为，我们写下这段东西之后，只要放到浏览器执行它，就可以跟你进行一些交互了。Javascript的强大之处有很多很多，它可以让你制作出一个超级玛丽的WEB游戏，它可以让页面有更加绚丽的动画效果，它可以帮助你控制用户的一些行为。

在浏览器里边是可以禁用Javascript的，但是估计没人回去这么做，在这么丰富的互联网世界里边，禁用它相当于废了这个应用的手脚，只会更加惨不忍睹。

既然你用了js这个芯片去做页面的交互，那在用这个芯片的时候就不得不考虑这个芯片的性能所带来的问题了，你总不可能用它写一个需要执行10秒的举手动作吧。那大家看到你制作的机器人会说：OH，它竟然要用10秒去举个手。带来的后果就是大家都不会去买你制作的这个机器人了。在越来越丰富的WEB应用做，往往要处理很多逻辑，这就更加要求性能了。

各种历史

在很久以前，HTML的设计者想要在网上share一些信息，大家可以想想单纯用文本格式来描述的话，读起来多累啊，没有重点，没有指引，于是HTML出现了。再后来，为了更美观地来描述这些信息，增强用户体验，CSS出来了。当然了，人们不能满足现状，还得继续为可用性等等方面去挖掘新的东西，Javascript就诞生了。

这三者互相分工，虽然我们可以把CSS跟JS一起混在HTML里边，但这就好像一个部门里边，把所有的事情都丢给一个人，一会叫你去洗厕所，一会叫你回来打印文档，想想都累。对于软件工程来说，单一职责的概念是很重要的，永远都让对应的部件做其唯一的职责。

最后，它们三者使得页面的内容、表现形式与交互分离开了。

在WEB应用中，很多新的东西正在被挖掘，到了一定的时期，原先的那种方式是不会满足好奇的人类了。可能以后在WEB应用有很强的3D渲染技术。在互联网的世界里边，什么都有可能。

本篇结语

第一篇写的是“HTML|CSS|JS初探”，关于HTML,CSS,JS的历史，搜索引擎可以找到答案，这里不打算粘这些。其实可能很多不懂前端的人可能认为前端开发是一项很cheap的工作，可能因为他们只看到了大家都在处理一些很没价值的工作，例如整天在写表单验证，切图写CSS，而没有看到更加有价值的东西，例如JS脚本解释器，浏览器渲染等等。正因为如此，前端工程师就不应该把学习目标定死在写交互上，否则所有工作最后的贡献都是很cheap的。

我目前就有个目标是自己写一个JS的解释器，将来一定会有一天可以完成，然后拿出来分享的。