对于不懂技术的新人，如果说要学习开发技术。我通常建议他从网页开始。

网页由Html、Css和Javascript三部分构成。我们称它为网页三剑客。

4.1.1 什么是网页三剑客？

小奈：我想学习写代码。有时提出的需求技术说做不了，但其它平台已经实现了这个功能。开发是不是忽悠我？
大仁：那我建议你学下html，上次和你说的输入url后，货品其实就是网页，现在教你写网页。
大仁：和你说说网页三剑客，三剑客各司其职，相辅相成。

网页三剑客各司其职，html负责页面布局，css负责装饰页面，Javascript则负责网页的动态效果和后台数据交互。

4.1.2 剑客一：html

如果把网页当作人，html则是人的身体，她有基本的骨架和血肉。至于它的结构，我们可以把它想像成盒子，盒子套着盒子。

image.png

html非常单纯，比如说<h1>表示大标题，<p>表示段落，<img>表示段落。
html还有个非常有趣的标签，<a href='url'>某个链接</a>, 链接标签，我们可以在一张网页里写上很多链接，这样子就很方便了。就像一张网一样，所有的网页跳转都变得很方便。
在互联网早期，网页都十分简陋。

禁用css后

在早期，大家就是这样子忍受的。后来大家都抱怨了，但是HTML只负责展示内容和结构。
好吧，后来浏览器大叔劝福它稍微打扮下，大家伙给她申请了手镯之类的装饰品，之后就有了size（尺寸）、color（颜色）、align（对齐）等，哎呦，稍微好看点。

化妆后

网页早期就是html负责布局和装饰的，剑客一工作繁忙，后来就有了剑客二。

4.1.3.剑客二：css

css真的是很神奇，把html打扮的美轮美奂的。剑客二有很多法宝，其中选择器和盒子是最常用的；

法宝1:选择器

面对着一个村姑，化妆师开始想办法了，首先是把整个html的结构定位出来。例如要找标题，html>head>title这样子才找到，化妆师直接规定 html head title 以后就是定位title了，类似的其它部件的定位也是如此。

image.png

部件都可以定位到了，定位到了之后就开始化妆了，例如把这个变成红色，字体20。
h1 {color:red;size:20}

法宝2:盒子

上面我们看到，盒子都是倒在这边去了，盒子和盒子间的距离不行，这样子排版很丑耶，所以给这些盒子添加了支架，固定它们的位置。

• 边框（border）： 可以设定宽窄，样式，颜色
• 内边距(padding)： 内容到边框的间距
• 外边距(margin)： 边框到相邻元素的间距

image.png

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.效果图

运行的效果图，就是模拟不断点击换一换的效果

image

2.图解

怎么做的呢？让我们一步步分解

image image

document.getElementsByClassName("hot-refresh")[0]

已经获取该元素

image

模拟点击

image

定时器每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既可以让网页动起来，也可以和后端进行数据通讯，发送登录账号密码给