对于不懂技术的新人，如果说要学习开发技术。我通常建议他从网页开始。
网页由Html、Css和Javascript三部分构成。我们称它为网页三剑客。
4.1.1 什么是网页三剑客？
小奈：我想学习写代码。有时提出的需求技术说做不了，但其它平台已经实现了这个功能。开发是不是忽悠我？
大仁：那我建议你学下html，上次和你说的输入url后，货品其实就是网页，现在教你写网页。
大仁：和你说说网页三剑客，三剑客各司其职，相辅相成。
网页三剑客各司其职，html负责页面布局，css负责装饰页面，Javascript则负责网页的动态效果和后台数据交互。
4.1.2 剑客一：html
如果把网页当作人，html则是人的身体，她有基本的骨架和血肉。至于它的结构，我们可以把它想像成盒子，盒子套着盒子。
html非常单纯，比如说<h1>表示大标题，<p>表示段落，<img>表示段落。
html还有个非常有趣的标签，<a href='url'>某个链接</a>, 链接标签，我们可以在一张网页里写上很多链接，这样子就很方便了。就像一张网一样，所有的网页跳转都变得很方便。
在互联网早期，网页都十分简陋。
在早期，大家就是这样子忍受的。后来大家都抱怨了，但是HTML只负责展示内容和结构。
好吧，后来浏览器大叔劝福它稍微打扮下，大家伙给她申请了手镯之类的装饰品，之后就有了size（尺寸）、color（颜色）、align（对齐）等，哎呦，稍微好看点。
网页早期就是html负责布局和装饰的，剑客一工作繁忙，后来就有了剑客二。
4.1.3.剑客二：css
css真的是很神奇，把html打扮的美轮美奂的。剑客二有很多法宝，其中选择器和盒子是最常用的；
法宝1:选择器
面对着一个村姑，化妆师开始想办法了，首先是把整个html的结构定位出来。例如要找标题，html>head>title这样子才找到，化妆师直接规定 html head title 以后就是定位title了，类似的其它部件的定位也是如此。
部件都可以定位到了，定位到了之后就开始化妆了，例如把这个变成红色，字体20。
h1 {color:red;size:20}
法宝2:盒子
上面我们看到，盒子都是倒在这边去了，盒子和盒子间的距离不行，这样子排版很丑耶，所以给这些盒子添加了支架，固定它们的位置。
- 边框（border）： 可以设定宽窄，样式，颜色
- 内边距(padding)： 内容到边框的间距
- 外边距(margin)： 边框到相邻元素的间距
4.1.4 剑客三：Javascript
剑客三负责两大块工作，一是负责网页动作，而是外部数据通讯。
一、网页动作
html只是个静态页面语言。如果用html显示文字的话，它是展示全部文字，而剑客三，它可以让文字打字机一样，一个一个字显示出来。
除了类似文字打印机动效，基本上你看到的动态效果，剑客三都可以实现。
有兴趣就看，下面是上次的js代码，就是有个打字方法type()
<script language="javascript"> //<script>代表脚本
var index=0;
var word;
function type(){ //打字方法的逻辑，一次打一个字
var typePanel = document.getElementById("jack");
typePanel.innerText = word.substring(0,index++);
if(index % 3 == 0){
typePanel.className = "";
}else if(index % 3 == 1){
typePanel.className = "saying";
}
}
window.onload=function(){ //加载入口
word=document.getElementById("w").innerHTML;
setInterval(type, 200); //每隔0.2秒调用一下打字方法
}
</script>
大仁： 小明，听说你大学的专业是计算机科学与技术？
小明： 是的，大仁哥。
大仁： “那好，去帮我抢个荣耀v9。”
小明：领导，请你尊重这门专业，计算机科学是……
大仁： 请你谈谈NAS设备卷管理模块中失效数据恢复问题的应用。
小明：大仁哥，脚本写好了”
1.效果图
运行的效果图，就是模拟不断点击换一换的效果
2.图解
怎么做的呢？让我们一步步分解
document.getElementsByClassName("hot-refresh")[0]
已经获取该元素
模拟点击
定时器每100毫秒点击一次
setInterval(function () {
if (Date.now() > new Date("2017-3-21 10:08:00")) {
document.getElementsByClassName("hot-refresh")[0].click()
}
}, 100);
1.大于某个时间点
2.模拟点击
二、外部数据通讯
账号登录
账号好比旅游景点的门票，在登录网页上，你需要把你的账号+密码，也就是门票给检票员。
小奈：这个门票是不是和账户密码一样？
大仁：是的
小奈：账号登陆是怎么实现的？
账号密码
大仁：这里的账号登陆和门票进场一样，但是稍微不同的是，它是永久性的，只要你不改密码/不被禁用。
数据库是什么？
数据：举个例子，班级里面的每个人，例如小周，他的各个字段：年级，性别、语数英等等，周杰伦的所有信息算是一条数据。
数据表：数据表就像一个excel表格，里面存了3年1班所有学生的数据。
数据库：数据库可以理解成一个文件夹，里面有很多excel表格，例如3年级所有班级（1、2、3班）的excel表格。
这就是账号登录的过程。如果没有剑客三，网页就只能作为本地网页，自己和自己玩。
Javascript既可以让网页动起来，也可以和后端进行数据通讯，发送登录账号密码给
