对于不懂技术的新人,如果说要学习开发技术。我通常建议他从网页开始。
网页由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既可以让网页动起来,也可以和后端进行数据通讯,发送登录账号密码给