存档一月 2019

小白H5成长之路4:还需要学习什么备用知识?

“小白,HTML标签看完了么?文档对象模型看了么?”

“看了,我终于知道你昨天问我的那个关于网页结构的问题了,原来根据文档对象模型,网页就是一个对象嵌套的结构,最外层是html标签,里面是head和body标签,head和body里面又有各自的子标签,可以一直嵌套。”

“嗯,大概就是这个意思,好了现在你打开WebStorm软件,新建一个项目,项目的位置你看着设定就可以了,创建好项目以后我告你第一步怎么做。”

image.png

“我创建了一个mylearn项目,现在我该怎么做呢?”

“在mylearn上面点右键,新建一个html页面”

image.png

“创建好以后,看一下HTML文档的结构,是不是跟你之前看的DOM模型一致?”

image.png

“这里面的几个标签你应该都认识吧?”,老朱说到。

“认识,head是网页的头部对象,body是网页的主体部分。title是网页的标题。”

“好了,给title设定一个标题吧!比如‘我的H5第一课’,设定好标题以后在当前页面里面放一个div层上去,并且给他一个id号main”。

“好嘞,马上去办~”,小白兴奋的开始了他的第一次动手学习。

image.png

小白做完以后找到老朱,“朱哥,做好了!”

老朱看完以后对小白说:“我说的要求你已经实现了,可是你有没有注意在你创建的页面中,默认的meta和title标签都跟他们的父标签有一定的缩进?在我们写标签的时候一定要注意这个问题,每个级别的标签缩进距离都要有区分。你把光标移到div前面,点一下Tab键就可以了。”

image.png

“好了,在你的html页面上点右键,选择浏览器中查看,然后选择chrome浏览器,看看效果吧!”

image.png

“网页打开了,除了网页标题是我的H5第一课,整个网页都是空的!”

“好的,今天就这样吧!”

小白很惊讶,“怎么今天就让我做了一个空的页面啊,我感觉什么都没干啊~”

“小白,你今天已经学不少东西了,你用WebStorm创建了项目、在项目中创建了Html页面、了解了HTML标签的缩进、还在浏览器中查看了这个页面,看上去没有什么技术含量,可这些都是你以后会经常碰到的事情,我希望你能把今天学的这点东西好好练习一下,另外下午有时间把CSS看一下,不用记住CSS每个属性怎么写,你了解一下CSS能控制什么样式,可以用在页面中什么地方就可以了。”

小白H5成长之路3:做H5之前我该准备什么工具?

早晨上班时候,小白来的很早,他已经迫不及待的开始学习HTML5了,老朱刚来他就凑了过来,“朱哥,我应该从哪儿开始学?”,“你不用着急,先把做HTML5的工具准备好吧!”

“你先下载一个webStrom,这是用来写web前端代码的软件,功能非常强大,用这个软件可以省去你记忆css属性名、html标签名的时间,js的代码提示功能也非常强大。”

image.png

“然后安装谷歌chrome浏览器”

小白:“为何要安装chrome浏览器呢?IE不能用么?”

“小白,chrome浏览器对h5的支持非常好,开发者工具还能做代码调试,听我的去下载吧!”

过了一会小白过来告诉老朱,软件都下载好,也安装好了。

老朱跟小白说:“知道一个网页的结构吧?”

“不太清楚,我只知道一般网页分为顶部、主体区域、底部区域。”

“你说的那是一个网页排版的结构,这样!你先把文档对象模型(DOM)了解一下,网上这方面的介绍很多你可以去看看这方面的介绍。另外你把HTML标签用一下午的时间看一遍。”

“哥,HTML标签都看一遍?我看不完啊!你让我一下午学完html语言?”

老朱对小白说:“还是那句老话,你不用记住每个标签怎么用,先知道HTML标签能干嘛!比如button是按钮标签、p是段落标签、div是块容器、input是表单、ul-li是列表。”,“你最起码得先了解我们可以通过HTML标签做什么事情!我以后跟你讲的时候可能会提到很多标签,当我提到的时候你最起码得知道这个标签是干嘛的!”

小白:“好嘞!我现在就去看~~~”

小白H5成长之路2:小白你知道什么是HTML5么?

下午外面起风了,北方的冬天说来就来,好在小白的办公室是阳面,还算暖和。处理完手头工作后,小白找到了老朱,正式开始学习。

老朱:“小白,你知道什么是HTML5么?”

小白:“大概了解一些,HTML5就是使用JavaScript+CSS+HTML来做网页,具体怎么做就不知道了!”

老朱:“恩,原理是这样!大道理我就不说了,说多了你也记不住,就算记住现在也理解不了。我大概给你说一下网页制作技术的变化历程吧。”

“以前我们做网站的时候,通常会说我的网站是asp、jsp、.net、php的。没有人会说我的网站是HTML的,你知道,网页最终的呈现肯定是html格式的,为何他们不说呢?”

小白:“因为他们网页的功能基本都是通过asp、jsp、.net、php实现的?”

“没错,那个时候做网站先是美工设计页面、切图。程序员按照美工设计的页面通过切图和表格布局展示出来,通过vb、java、c#、php等代码把数据库的数据提取出来放到对应位置。”

小白:“对,我还知道以前的网页要更改网页中某个位置的数据是需要重新加载网页的。”

“不错,确实是这样,当时风靡一时的Flash完美的解决了更改页面数据不用刷新页面的问题,Flash在网页中可以实现异步请求,可以通过Flash向服务器发送一个请求,当接收到返回数据后再对flash中的内容进行对应的更改。不过Flash太依赖插件,所以后来就有了ajax,ajax是通过JS来实现网页的异步请求处理。”

小白:“不好意思!朱哥,什么是异步请求?”。

“哦!简单说就是你发送一个post或者get请求,服务器不是立刻给你返回数据的,网速不一样服务器处理速度不一样都会影响数据返回的速度,因此你需要等到数据返回以后再对数据进行处理。这些你现在不用理解,以后慢慢就知道了。”

老朱接着说:“自从有了ajax,我们对网页的处理就灵活很多,因此js开始变得越来越重要,后来就有了著名的jQuery,通过jQuery可以对网页标签进行各种处理,对ajax也进行了很好的封装,非常方便!”

“因为有了jquery我们在做网页的时候可以很方便的在一个页面完成大量的功能,所以经常把前端页面功能实现与数据处理完全分开,这样前端通过js控制html标签实现页面功能,后台人员做数据处理,分工很明确,工作效率和网页功能都得到了很大的提高。”

小白接着问:“前端和后台数据处理完全分开,前端的数据是怎么拿到的呢?”

老朱:“这个你现在先不用理解,你只需要知道,前端需要数据的时候会使用ajax向服务器一个处理数据的页面发送一个请求,这个页面会通过你的请求参数返回给你不同类型的数据,拿到数据后把数据放到页面对应的标签中或者更改某些标签的状态。”

小白:“哦,我大概理解了,不过还得消化消化!”

“没关系,这些你只需要了解就可以,在我们真正做的时候你就慢慢理解了。明天我们继续~~~”

小白H5成长之路1:小白对人生的困惑

        小白大学毕业后去了一家公司做了运维工作,到现在已经工作两年了,因为他的工作比较清闲,上班时间基本都是在游戏和上网冲浪中度过的。

        最近小白结婚了,想着以后要靠他们小两口共同支撑新的家庭,他开始慢慢的对自己当前工作状况忧虑起来。每天这样虚度可不是回事啊,可是自从毕业以后在学校学的编程技术基本已经还给老师了,想换个好工作都没有技术资本。每每想到这里,小白都会叹气。

        自从小白结婚后,游戏也不玩,网也不想上了,每天唉声叹气,跟他一个办公室的老大哥老朱看不下去了,跟他说:“小白,你刚毕业两年还年轻,有的是提高自己的时间,如果你想学HTML5,哥哥我看在你每天帮我稍煎饼的份上,收你这个徒弟了”。

        小白说激动的说:“真的么?你要是肯教我,我一定好好学,可是我对自己没信心啊!”。

        老朱:“这可不行,咱干什么事必须得有必胜的信心,没有人天生什么都会,也没有什么问题是解决不了的,你就跟我学吧!”

        “行!我早就想学了,只要您肯带我,我一定不让您失望!”

        “OK,下午得空的时候我跟你先介绍一下H5吧!”