html页面数据通信,4、网页是怎么运作的？

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

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

4.1.1 什么是网页三剑客？

小奈：我想学习写代码。有时提出的需求技术说做不了，但其它平台已经实现了这个功能。开发是不是忽悠我？

大仁：那我建议你学下html，上次和你说的输入url后，货品其实就是网页，现在教你写网页。

大仁：和你说说网页三剑客，三剑客各司其职，相辅相成。

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

4.1.2 剑客一：html

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

image.png

html非常单纯，比如说

表示大标题，

表示段落，表示段落。

html还有个非常有趣的标签，某个链接, 链接标签，我们可以在一张网页里写上很多链接，这样子就很方便了。就像一张网一样，所有的网页跳转都变得很方便。

在互联网早期，网页都十分简陋。

禁用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()

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.οnlοad=function(){ //加载入口

word=document.getElementById("w").innerHTML;

setInterval(type, 200); //每隔0.2秒调用一下打字方法

}

大仁： 小明，听说你大学的专业是计算机科学与技术？

小明： 是的，大仁哥。

大仁： “那好，去帮我抢个荣耀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既可以让网页动起来，也可以和后端进行数据通讯，发送登录账号密码给