HTML/CSS/Javascript我爱编程

多幸运在最美的年纪跟着李南江学习HTML5—HTML学习

2017-01-11  本文已影响0人  草了粪的翔就是香

1.成长期

朝阳

这里没有华丽的语言和天花乱坠的开场白,有的只是辛勤的劳作和刻苦铭心的回忆。

“你现在打算怎么样?是继续这样吊儿郎当无所事事的活着,做啃老一族,还是背负着责任扛起重担,养活年迈的父母?”“你这是嘲讽还是打气?我有我自己的打算,我肯定是想扛起整个家”“呵,就你还有自己的打算?几个月了?工作,工作没有;交友,交友不行;学东西一个都没入脑。你这样的人活着就是个累赘。”“原来在你眼里我永远是个长不大的弟弟,凭什么这样说我?就因为你在小码哥学了Java,每天拿着上万的工资?那好我也学,出来后肯定比你混的好。”

人们常说上阵父子兵,打虎亲兄弟。可我哥是个地地道道的“地主老财”,每天除了打压欺负我就无所事事了,为了争口气,我来到了小码哥培训机构,学习……

了解一个人,你得先从他(她)的过去,现在乃至将来开始入手。这个跟了解HTML5也是异曲同工之效。

在Flash被疑即将淡出历史舞台的同时,HTML5最近却在业内火得一塌糊涂。雷锋网作者钟铄是起源天泽的游戏制作人,在这篇文章中,他将从历史的角度来铺展HTML5的崛起之路——不只是励志剧,还是宫斗剧。

HTML5火了。近两年,浏览器厂商们纷纷宣布支持HTML5,开发商们纷纷宣布转用HTML5开发产品,HTML5游戏厂商、HTML5游戏引擎提供商们也纷纷获得了至少千万级别的融资。

HTML5真的火了。那么HTML5究竟是什么呢?

众所周知,我们的整个互联网是由无数网页组合而成的,而网页的本质就是超文本标记语言HTML。可以说,HTML正是互联网的基石。

随着时代的发展,我们对互联网的需求越来越多,可作为基石的HTML标准却还停留在上世纪90年代的HTML4上。落后的技术无法满足我们的需求,于是我们转而借助第三方多媒体框架例如Flash,来让我们的网站更加炫酷;我们又开发了各种APP,来让我们可以在移动终端上享受互联网服务。这时候,就像电影《大圣归来》中的孙悟空一样,HTML的第五次重大修改——

HTML5,带着众多的优点归来了:

1、 它使页面可直接播放多媒体元素,你可以忘掉第三方插件了;

2、 它的Web属性带来跨平台能力,一次开发,各系统各终端普遍适用;

3、 它更加语义化、标准化,更加易用;

4、 本地存储;

5、 它还具备实时更新能力,用户只需刷新便可获得最新内容;

6、 它使内容可被搜索引擎检索,利于SEO;

7、 相对原生APP而言,它使你的产品无需安装,易于分发;

……

拥有这么多令人垂涎的优势,HTML5自然会火。那么是谁造就了HTML5?它又是怎么崛起的呢?

故事的开始是个悲剧。1997年,W3C(万维网联盟)发布HTML4后,宣布停止HTML的版本迭代演进并解散了HTML工作组,转向开发更为严谨的XHTML标准。原因是HTML标准太过“宽容”,即使你的HTML网页里有几处错误,浏览器依然会通过自动纠错的方式保证页面可以正确显示。因此,错误也就永远无人改正。而XHTML是严格的,不容许页面存在错误。W3C试图用严格的标准来使互联网发展更加规范。出发点虽好,但效果不佳,因为改用XHTML标准将导致互联网99%的HTML网页需要重写。而Opera、Mozilla基金会、苹果这些浏览器厂商则在2004年组建了民间组织WHATWG,开始尝试在更加“宽容”的传统HTML框架下,开发具备向后兼容性的下一代HTML。

就在W3C还在争论是XHTML2还是HTML5的时候,互联网格局已经发生了变化。

2005年前后,随着宽带的普及和电脑性能的提升,人们不再满足于仅用互联网来看新闻和发邮件。

于是,消耗更高带宽的娱乐形式,流视频和网页游戏诞生了。此时的HTML错过了这次机会,这块新需求被浏览器插件满足了,那就是Flash。

Adobe收购Macromedia后通过Flash攫取了大量的财富,这让Google、苹果等作为W3C主席单位的各浏览器厂商很是不甘。2006年10月,WHATWG在HTML上取得突破性进展。于是为了尽快夺回Adobe抢占的市场,W3C决定停止XHTML的工作,转而与WHATWG合作,共同推进开发不需插件就能在移动端播放多媒体的下一代HTML。2008年,第一个HTML5草案诞生。同年,IE、Chrome、FireFox、Safari几大浏览器巨头开始相继支持HTML5。

到了2010年,乔布斯乔帮主公开封杀Flash,力挺HTML5,彻底遏制了Flash的发展。

移动互联网时代的到来,使得HTML5的优势更加凸显。2011年,由于移动浏览器对HTML5的普遍支持,和iOS对Flash的强势拒绝,使得Adobe不得不宣布停止为移动设备开发Flash播放器。这一年的HTML5风头正劲,据统计全球前100的网站已有34%在使用HTML5。迪士尼也在这一年斥巨资收购了一家HTML5游戏引擎开发商,意图打造HTML5游戏来避开苹果App Store的控制和30%的分成。前途已经一片光明HTML5,没想到竟要经历一场巨大的风暴。很多大公司都在推动着HTML5的发展,其中以Facebook的扎克伯格最为疯狂。作为技术极客的他誓要利用HTML5的Web APP来打破iOS和Android的垄断。

Facebook加入W3C后,牵头成立了MobileWeb工作组。这个小组的目标是让由HTML5开发的Web APP能够达到原生APP的体验。

与此同时Facebook用HTML5开发了自己的Web APP,希望这样可以让自己不会受到苹果和Android的控制。但其结果却是该Web APP的用户体验极差,与Twitter等竞争对手的原生APP相比差距巨大。

2012年,扎克伯格宣布Facebook应用放弃HTML5部分,改为纯原生方式开发。一句“押注HTML5是Facebook最大失误”彻底将HTML5打入了冷宫。笔者认为,在2012年HTML5确实还不具备开发优秀移动APP的能力。一方面是外部条件不具备,比如硬件性能以及浏览器内核对HTML5的支持程度不足;一方面是HTML5技术本身还有不完善之处;还有一方面是工程师的能力不足。同年,HTML5的标准制定者W3C和WHATWG也表示无法继续合作了。前者希望制定一个死的标准,颁布之后再不修改;后者希望标准能够跟随市场及技术的发展而动态调整。前者拉到了微软撑腰,后者则有苹果和Google支持。另外,原本一直是HTML5坚定后盾的苹果也不再允许纯Web APP套壳登录App Store。

在灭掉Flash时HTML5为冲锋枪,但移动端干掉Flash后,苹果却是要维护自身封闭生态系统的巨大利益的。因此细看之下HTML5的崛起之路其实不只是励志剧,还是宫斗剧。

在经历了上述两次巨震之后,HTML5着实沉默了一段时间。奚落者有之,嘲笑者有之,仿佛HTML5已死。但在此期间,HTML5依然显现了强大的生命力。它所带来的诸多优势始终吸引着开发者们继续探索。

终于,在2014年10月底,W3C宣布HTML5历时8年终于定稿。

这个时机,笔者认为不早不晚,刚刚好:首先,从2011年iPhone4S的A5处理器,到现在iPhone6的A8处理器,按苹果官方的说法,速度提升了约7.5倍。这7.5倍的速度提升,抹平了太多了性能问题;其次,苹果、Android两大系统及各个浏览器经过时间的沉淀对HTML5的支持也越来越好;最后,经过时间的积累,有大量的HTML5开发引擎和工具在2014年涌现出来,为HTML5的爆发铺平了道路。如今,随着《围住神经猫》刷爆朋友圈,人们又开始了对HTML5的关注。而且随着各方条件的相继备齐,HTML5显露出了燎原之势,彻底火了。纵观目前为止HTML5标准的发展历程,可以说就是商业利益不断博弈的过程。它的诞生,既是为了满足人们的需求,也是为了达到洗牌利益重新分配的目的。它的强大,既是为了造福全球,也是为了击败竞争对手。就结果而言,巨头们出于各自的目的造出了强大的HTML5。它的崛起,意味着变革将至。谁能在这场变革中更好的利用它,谁便可以占得先机。

那么在这场变革中,我们又该如何看待呢?

HTML5作为一套新的标准,代表着移动互联网的趋势和未来。几乎所有人都能预见到它巨大的潜力。但它在各个领域具体是以怎样的形态落地,如何改变人们的生活或是改变行业的业态,人们很难预测。这需要我们不断地探索和思考。

HTML5的天花板有多高,正是由我们每一个从业者决定的。

HTML5崛起之路的后半程,就靠我们来完成了。

2.青春期

 红日

俗话说没有耕坏的田,只有累死的牛。有个好的学习环境(小码哥)当然少不了好的先生(李南江丶胡炜波)和好的学习方法。

也许细心的人就会问:不就是学习环境吗?在哪里不都一样学,只要自己定力好,什么都是浮云。首先提出这种想法的,从某个角度来说并没有错。可往往就会因为这个,而被人们忽略一个最重要的因素,那就是“心”——近朱者赤,近墨者黑。是金子总会发光,可你有没有想过,如果你这个金子埋在一个永远不会被发现的地方,那么此前所说都变成了微不足道。

下面我就为我所说的话做个证实吧。

小码哥顾名思义:小——谦辞。码——在这我们可以理解为代码(因为我们都是IT教育)。哥——兄,同父母(或只同父,只同母)或同族同辈而年龄比自己大的男子。这三个字组合在一起,我们会发现,小和哥好像有点冲突,因为在现代,哥还可以理解为一种蔑视,大多出现在古惑仔中,不过,细细品读你会发现其中的奥妙:谦虚敬慎,又不失大体。

小码哥专注于IT教育领域,集合了国内众多优秀名师,依靠自身的课程研发体系及教学能力,通过免费基础班的形式,省去众多学员的后顾之忧,让学员们可以在毫无压力情况下尝试课程,始终以“帮助学员们步入IT行业,找到满意的工作”为目标持续不断的为国内IT行业人才技能的提升与技术的普及做着不断的努力。(这就是为什么我会如此喜爱小码哥的理由,因为他造就人才,成就人才,难道这不是你们选择他最有力的凭证吗?)

小码哥把一生都放在了IT 这个伟大的行业中,当然其中的心酸只有从事过小码哥的人才能体会。那么战马绒绒的小码哥又得到了什么?

2016年1月17日,小码哥受邀赴北京政协礼堂出席由人民日报社等机构举办的“中国经济新模式创新与发展峰会”。荣获“中国IT教育培训行业最具影响力领军品牌”,同时小码哥CEO荣获“2015年度中国IT教育培训行业最具创新人物”两项大奖。2016年1月21日,小码哥受邀出席第五届中国公益节,并荣获“2015年度责任品牌奖”和“2015年度互联网责任品牌”两项殊荣。2016年2月1日,成立仅短短10个月不到的小码哥摒弃行业惯例做法,在没有做任何大范围付费广告推广单纯靠纯口碑介绍的情况下预报名学习人数突破3000人,横向开设四大学科,发展速度引起业内瞩目。2016年6月29日,小码哥已经从单一的iOS培训发展到Java培训,网页UI培训,Android培训,C/C++培训,HTML5前端培训这六大学科。

2016年10月12日,小码哥正式宣布开北京分校!

我相信读者们看了这么多关于小码哥大快人心的事迹后,分分都会冥想小码哥幕后到底会是一个怎么样的氛围呢?

当然这么好的教育机构永远离不开在他身后默默付出的老师们,这里我着重强调一个人,那就是我们H5大神班院长李南江——人称江哥。

李南江

小码哥教育科技有限公司iOS/HTML5院长:李南江

李南江(NJ),摩羯男,网名极客江南,祖籍贵州金沙县,是小码哥教育科技有限公司iOS/HTML5院长。李南江不仅仅是名师,更是一个对开发技术特别执着的程序员,对移动开发有着独到的见解和深入的研究,有着多年的iOS、Android、HTML5开发及教学经验, 对NativeApp、HybridApp、WebApp开发有着独到的见解和深入的研究, 除此之外李老师还精通JavaScript、AngularJS、 NodeJS 、Ajax、jQuery、Cordova、React Native等多种Web前端技术及Java、PHP等服务端技术,受到众多学员的追捧。

李南江毕业于计算机科学与技术专业,在大学期间,李南江就潜心研究各种开发技术,在大学还没毕业的时候就创办了德亿3G工作室,尽管是大学生创业,有想法有实力的李南江让德亿3G工作室成功与日本的知名企业达成战略联盟,开发了多款海内外的热门应用,还主导了知名汽车APP的开发。本来想继续自己的创业,但是在李南江大四的时候,一家国内知名的软件开发公司向他抛出了橄榄枝,而且让还未毕业的他担任技术总监一职,在良好的平台以及有挑战性的职位的诱惑下,李南江解散了自己的工作室,开始了技术总监的职业生涯,在担任技术总监的期间,帮助公司获得了多家风投。在IT人才尤其是iOS开发人才匮乏的2013年,李南江过硬的技术很快就引起了国内知名IT培训机构传智播客的注意,于是传智播客也抛来了橄榄枝,希望李南江担任iOS学院总监一职,敢于接受挑战的李南江从此开始转行做教育,也因此认识了一生的挚友——李明杰。

随着知名度越来越大,慕名跟随李南江学习的学生越来越多,特别是很多人放弃了自己的工作来学习,李南江感受到自己肩膀上的重任,但是由于种种约束,自己对于教育的很多想法都没有办法实现,正当他苦恼之时,李明杰提出了想要他加入自己新创立的IT培训机构——小码哥教育,并且承诺只要是对学生好的,他可以大胆去做大胆去实现,于是在2015年,李南江加入李明杰所创立的小码哥教育,并从此真正开始了自己的教育事业。

2009年~2011年李南江创办德亿3G工作室,潜心研究各种开发技术,李老师是”德亿3G”创始人, 担任”德亿3G”负责人期间, 带领团队与日本知名企业合作开发了物联网实时监控程序、<云浏览器>、<智能公交>、<話付宝>、<快选快选>、<移动办公>、<天气通>、<雷达篮球>等诸多海内外热门应用, 主导并参与了东风、东标、东本等众多汽车APP开发。2011年~2013年李南江在国内知名软件开发任技术总监一职,专业为客户解决各种开发难题,以架构师及技术总监的身份带领团队一起开发众多知名项目,帮客户成功获得多家风投。2013年~2015年李南江在国内知名IT培训机构传智播客担任iOS学院总监一职,李南江老师技术功底过硬、授课风格幽默有趣,深得学生们的喜爱。2015年李南江加入李明杰老师创办的广州小码哥教育科技有限公司,任职iOS学院院长和H5前端学院院长,并致力于把最好的技术教授于学员,立志打造一家全心全意为学员服务、只为成就学员梦想的IT教育公司。

江哥把时间都奉献给了小码哥,是当之无愧的小码哥灵魂人物。把大部分时间都花费在了学生的身上,只为帮你发现只属于你的目标,遇见一个更好的自己!

江哥为人幽默风趣,诙谐搞怪。几乎所有看过江哥视频的人都会不约而同的表示:看江哥视频,学江哥英语,做江哥为人。最有意思的是每个人在看江哥视频的时候都是聚精会神的,感觉没有一个会发呆,弄其他事或者打瞌睡的,也许是能学到江哥的口头禅——so easy,toohappy!学完这个,再做下一个是不是就跟切菜一样啊?

3.成熟期

 夕阳

夕阳无限好,代表着美好的一天就要逝去,迎接我们的即将是黑暗。

那么之前我讲到了学习环境和好的先生,接下来我们就讨论下学习方法。就以我个人来讲,中间又分为:在学习过程中的所思所想;在学习过程中碰到的问题以及老师对我们的要求进行下阐述。

学习过程中的所思所想

因为自己的偏见,总觉得自己是零基础,所以对自己的要求挺大,每天学习都是熬夜,导致上课精神就有点恍惚,再加上自己提前预习,就会产生一种so easy的幻想,蒙蔽与麻醉自己看不看都没关系啦。往往这就是你走向失败的原因,因为你不虚心丶因为你心不在焉。所以心态要摆正,这一直是我强调自己的初衷,一直是我走向成功的理念。

学习是个无间断的循环过程,理应学到老活到老。尤其是H5的学习,它的学习即刻苦,又艰辛。当你浸身在H5的学习过程中,会发现一切都是那么的熟悉,还是原来的“配方”。没错,这里的配方表示H5的框架,框架是固定不变的,但里面的“佐料”会推陈出新,我们一直学习的就是这些看似简单又不起眼的颗粒,一个好的厨师看重的就是这些不起眼的佐料,每个人的口味都大相径庭,有人喜欢甜丶有人喜欢咸丶有人喜欢辣……厨师根据每个人的口味,搭配不同的佐料烹饪出绝顶的美食。这跟H5不谋而合,标签的不同搭配形成的效果也就不同,展现的视觉也就不一样(H5当中的标签是用来添加语义的,但不能改变其中的样式)。

下面就由我来带领大家走向H5的海洋。

一.什么是浏览器

浏览器是指可以显示网页服务器或者文件系统的HTML文件(标准通用标记语言的一个应用)内容,并让用户与这些文件交互的一种软件。

二.制作网页所需要的格式


HTML5的基本格式

三.H5的常用标签

H:表示标题。P:表示一段文本。Hr:分割线。<!---->:注释。img:显示图片。Br:换行。a:就是用于控制页面与页面之间跳转的。

四.列表标签

首先要了解列表就得先知晓其中标签的作用:给一堆数据添加列表语义, 也就是告诉搜索引擎告诉浏览器这一堆数据是一个整体

表格分为三种:无序列表;有序列表;定义列表。

其中的标签又有:1.<ul><li>需要显示的条目内容</li></ul>。2.<ol><li>需要显示的条目内容</li></ol>。3.<dl><dt>标题</dt><dd>对应标题的描述</dd></dl>

五.表格的制作

表格标签的元素:table代表整个表格, 也就是一堆table标签就是一个表格

基本格式为:<table><tr>需要显示的内容</tr></table>

六.表单标签

表单就是专门用来收集用户信息的

表单的格式:<form><表单元素></form>

七.datalist标签

作用: 给输入框绑定待选项

八.音视频标签

1.video标签的作用: 播放视频

格式:<video src=""></video>

2.udio标签的作用: 播放音频

格式:<audio src=""></audio>

九.其他标签简介

详情和概要标签的作用:利用summary标签来描述概要信息, 利用details标签来描述详情信息

格式:<details><summary></summary></details>

marquee标签的作用: 跑马灯

格式:<marquee>内容</marquee>

十.字符实体

在HTML中对空格/回车/tab不敏感, 会把多个空格/回车/tab当做一个空格来处理,那么此时就要用到字符实体了。

在HTML中有的字符是被HTML保留的, 有的HTML字符在HTML中是有特殊含义的, 是不能在浏览器中直接显示出来的, 那么这些东西要想显示出来就必须通过字符实体

&nbsp表示空格, 一个&nbsp就是一个空格, 有多少个&nbsp就有多少个空格。&lt< 小于符号 <(less than)。&gt> 大于符号 >(greater than)。&copy表示© 版权符号

在做表格的时候我突生一个想法,既然表格能根据自己的意愿进行更改,那么到社会上面试时,简历格式不就要多完美就有多完美吗?无形之中给自己提高了一个档次,赢人就要赢在起跑线上。

好了,经过一系列的布局讲解,我相信大家已经对H5有了个初步的认识,在此我就不再过多的解释了。

学习过程中碰到的问题

在H5学习中遇到的问题有:单词记不住——多写(在本子上抄写,一遍不行就十遍,十遍不行就一百遍,直至自己记住为止或者有个大概的念想也行,有时你会发现对自己太过放纵,到头来就是对自己的残忍),多记(早上起来大声的朗读,晚上看看,睡前想想)。打代码速度慢——多练(拼命的敲代码,把代码记在指尖上而不是脑子里)。有时会模棱两可地运用标签,出现乱套一气,最终效果根本就不是自己想要的(多练多掌握,多看题型,多反复验证举一反三,这样的同时不但记住了你想要的结果,或许还能意外收获)。

在此因为是基础班学的H5,所以觉得简单,更因江哥讲的通俗易懂,意简言赅,问题更是迎刃而解。相较之下CSS的问题就多了点,不过都是自身问题,简而言之问题也不大。(在江哥的带领下,我们的“bug”那都是手到擒来)

老师的严格要求

孟子曰:“天将降大任于是人也,必先苦其心志,劳其筋骨,饿其体肤,空乏其身,行拂乱其所为,所以动心忍性,曾益其所不能。”——严师出高徒。没有严谨的老师就没有将来的我们,为此老师当起了又苦又累的“牧羊犬”,而我们却是茁壮成长的“小羊羔”。在老师眼里我们就像一个装不满的水杯,不管你怎么往里面倒水,就是不见溢出。

老师说的每一句话,甚至是每一个举动都能影响着我们。不过,在我们这个形形色色的世界里,也存在着尺有所短,寸有所长的道理,不是每个老师都是这样待人。譬如最近新闻时而出现的体罚殴打学生……

从这些方面我们就看出了,选择一位好的老师是多么的至关重要。但据我所知小码哥的H5院长江哥,是一个平易近人没有架子的好老师。江哥?严谨中带着些许松懈,对学生细心教导,总是把重点提醒三遍,只要是对学生好的,江哥会大胆去实现。这样的老师难道不值得你花一生去追随吗?

“回去不要求你们什么,代码敲起来。”

学HTML5就选李南江,选培训机构我只选小码哥(www.520it.com)


上一篇下一篇

猜你喜欢

热点阅读