4、网页是怎么运作的?

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

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

推荐阅读更多精彩内容