新書推薦:
![情史(全2册)](http://103.6.6.66/upload/mall/productImages/24/28/9787101165241.jpg)
《
情史(全2册)
》
售價:HK$
147.2
![思想会·富人身上的目光:美国、亚洲与欧洲民众眼中的收入与财富](http://103.6.6.66/upload/mall/productImages/24/27/9787522823775.jpg)
《
思想会·富人身上的目光:美国、亚洲与欧洲民众眼中的收入与财富
》
售價:HK$
102.1
![纯粹·四手联弹](http://103.6.6.66/upload/mall/productImages/24/26/9787559869128.jpg)
《
纯粹·四手联弹
》
售價:HK$
59.8
![论目的(西塞罗哲学文集;崔延强 主编)](http://103.6.6.66/upload/mall/productImages/24/28/9787300328737.jpg)
《
论目的(西塞罗哲学文集;崔延强 主编)
》
售價:HK$
89.7
![障碍是道路 生活充满了障碍,毅力与韧性直面痛苦和逆境](http://103.6.6.66/upload/mall/productImages/24/27/9787516927700.jpg)
《
障碍是道路 生活充满了障碍,毅力与韧性直面痛苦和逆境
》
售價:HK$
90.9
![工业数字化本质:数字化平台下的业务实践](http://103.6.6.66/upload/mall/productImages/24/28/9787111754152.jpg)
《
工业数字化本质:数字化平台下的业务实践
》
售價:HK$
102.4
![OKR实战宝典:顶尖企业的成功秘籍(目标与关键成果法实战宝典)(组织变革与创新管理系列丛书)](http://103.6.6.66/upload/mall/productImages/24/27/9787521642568.jpg)
《
OKR实战宝典:顶尖企业的成功秘籍(目标与关键成果法实战宝典)(组织变革与创新管理系列丛书)
》
售價:HK$
98.9
![历史的棋局](http://103.6.6.69/upload/mall/productImages/y24/7/9787564244026.jpg)
《
历史的棋局
》
售價:HK$
66.7
|
內容簡介: |
本书以帮助零基础读者学习并掌握计算机编程HTML CSS语言为宗旨,循序渐进引导读者学习网页制作HTML CSS语言的基础内容和高阶核心知识,并采用大量实际网页场景的代码实例和图例,结合当下热门企业工作中的编程技巧的方式,增加读者设计网页的实战操作经验和分析解决问题的能力。本书的每一章特别编写了知识扩展章节,全面分析与归纳实际工作中HTML CSS编程技巧和互联网网页高级知识,引导读者深入挖掘计算机编程领域,进而能够多维度思考和理解计算机网络的应用。同时,本书还配有教学视频,对书中的示例和高阶编程内容加以详细解释和操作演示,便于初学者理解,提高学习效率,有助于读者全面、系统地运用所学编程知识技巧。
|
關於作者: |
零基础,一起学!
零壹快学是一个集教育、培训、交流于一体的计算机学习融媒体平台,覆盖Web、APP和微信小程序等场景,为广大IT学习者提供计算机各学科的教学资源、培训课程、测评系统等。通过人工智能手段,模拟真实课堂环境,力求打造成为一个全面、权威、高效的一流计算机在线教育平台。目前,平台已开发了包括计算机编程、云计算、区块链等在内的多门课程,提供计算机等级考试在线题库系统,将陆续开发计算机技术与软件专业技术资格(水平)考试、CCIE等在线题库系统,同时拥有一支由一线互联网公司工程师、知名高校教师组成的专家团队,精心为广大IT学习者提供优质的学习资源、课程和服务。
|
內容試閱:
|
第1章 走进互联网前端 1.1 浅谈互联网前端 1.1.1 互联网的前世与今生
1.互联网的诞生与发展
互联网(Internet),是网络与网络之间所串联成的庞大网络。这些网络以一组标准的网络TCP/IP协议族相连,并连接全世界几十亿个设备,形成逻辑上的单一巨大网络。而诸多个人、政府和组织机构的网络,通过无线和光纤网络连接在一起。网络中存在种类繁多的服务器、终端和个人计算机,信息经由大量交换机、路由器等网络设备进行传输。
互联网的雏形诞生于冷战时期的美国。在20世纪60年代,美国国防部高级研究计划局(时称ARPA)出于军事通讯的需要,创建了“阿帕网”(ARPANET)。早的时候,网络中只包括一些美国研究机构的计算机,在20世纪70年代之后,越来越多国家和机构的计算机开始联入“阿帕网”。
1974年,ARPA的罗伯特·卡恩和斯坦福大学的文顿·瑟夫提出了划时代的TCP/IP协议(传输控制协议/网际协议),该协议在1984年被美国国防部作为所有计算机网络的标准。
1989年,英国科学家蒂姆·伯纳斯·李发明了万维网(World Wide Web),即我们熟悉的WWW,WWW也成了几乎所有网址的开头,而蒂姆·伯纳斯·李也成了“万维网之父”。
1991年,蒂姆·伯纳斯·李在新闻媒体上发布了万维网项目简介的文章,万维网正式向公众亮相。
1993年,欧洲核子研究组织宣布万维网对所有人开放,并且不收取任何费用,标志着互联网正式进入商业化时代。
2.互联网在中国
1994年,中国正式接入万维网,这一年可以说是中国的互联网元年。
1997—1998年,网易、搜狐、腾讯和新浪相继成立。其中,网易、搜狐、新浪三家组成了中国早的三大门户网站。以即时通讯起家的腾讯随后积极拓展门户业务,逐渐形成了如今的四大门户网站。
1999年,阿里巴巴集团成立,初以B2B起家,后来逐渐转为主营电子商务,也就是我们熟知的淘宝。
2000年,百度成立,也是早建立的中文搜索引擎之一。随着2010年谷歌退出中国,百度成为了中国搜索引擎的霸主。
2010年左右,依托搜索引擎的百度(Baidu)、依托电子商务的阿里巴巴(Alibaba)、依托即时社交的腾讯(Tencent)分别对业务拓展升级、高歌猛进,在互联网行业形成了BAT三分天下的局面。
2010年,3G移动网络开始在国内普及,移动设备之间的数据传输速度获得大幅度提升。与此同时,更现代的手机设备和平板电脑进入大众市场,以iPhone为代表的智能手机的出现,重新定义了手机的概念。新一代智能手机在硬件上采用更大的触摸屏,安装了iOS或Android操作系统,这使手机在功能上有了极大的拓展空间,不再局限于只作为一个打电话和发短信的工具。大量的手机APP诞生,资讯、社交、娱乐、购物以及各式各样的辅助工具都在向手机上移植。随后,功能越发强大、价格更加低廉的智能手机扎堆上市,移动网络也不断更新换代,移动互联网的用户遍布各个年龄层和全国各地。
截至2018年6月,我国网民规模达到8.02亿人,互联网普及率为57.7%。其中,手机网民规模达7.88亿,网民使用手机上网的比例为98.3%。
相比于传统行业,互联网对硬件依赖较小,难以形成技术垄断,因此创意、资金和人力就显得更加重要。中国具有人口基数大、市场需求量高、人才数量多和人力成本低等诸多优势,因此互联网产业在中国得以疯狂生长。
过去,中国很多的互联网公司在模式和创意上都一定程度地借鉴了国外的同类公司,给人一种山寨的感觉。但在2010年之后,中国移动互联网爆发式发展,逐渐形成了全新的应用形态与生态。无论是用户体量,还是移动互联网应用的多样化、多场景渗透上,中国互联网已经达到了世界的水平。在很多细分领域,即便是传统IT霸主的美国都望尘莫及。中美两国正在成为全球移动互联网的两极,而中国在移动互联网方面也会有越来越多的技术创新与资金投入。
1.1.2 什么是Web前端工程师
现代社会,上网已经成为人们每天工作与娱乐中必不可少的项目。大家平时浏览的网页以及使用的各种网络应用都需要人去开发维护,负责这一工作的人被称作“Web工程师”,“Web”是“website”的简称,也就是“网站”的意思。一个网站呈现给用户的部分被称为前端,而对这一部分功能进行开发和维护时所使用的技术就是Web前端技术。早期的网站大部分都是文字和图片的简单堆砌,Web前端也只是Web技术中一个较小的部分;但随着技术的发展以及人们对用户交互的需求提高,Web前端技术变得越来越复杂而重要。
Web前端工程师是IT工程师的一个细分领域,主要职责是使用Web技术进行客户端产品的开发,使用的技术包括但不局限于HTML、CSS、JavaScript、Flash等。传统的Web前端可以分为前端设计和前端开发:前端设计人员主要参与网站的视觉设计,需要具备基本的美术功底,一般被称为UI工程师;前端开发更多的是通过代码来实现设计效果,人们常说的前端工程师一般指负责这部分工作的人。
HTML、CSS和JavaScript是Web前端工程师必学的三门编程语言。早期的网站经常用Flash来实现复杂的动态效果,但随着HTML5和CSS3的发展和现代浏览器的推广,Flash已经使用得越来越少了,在移动端更是被Android和iOS两大操作系统抛弃。因此,Flash不再是前端工程师的技能。
近年来出现了一个新词汇——大前端。大前端工程师除了学习传统前端工程师的开发语言之外,还要求具备一定的服务器开发能力和移动端开发能力。因此,大前端工程师还要学习服务器开发语言(例如Node.js)和移动端开发框架(例如Hybrid APP和React Native)。
本书作为前端工程师的入门和进阶教材,将主要讲解HTML和CSS两门语言,并会顺带介绍一些关于JavaScript的知识。
1.1.3 Web前端的发展现状
诞生于年轻的互联网的Web前端技术起步比较晚,但是发展势头迅猛。在各种新技术、新标准的推动下,各大互联网公司也开始重视Web产品的前端重构与开发,现在开发的Web新产品的页面交互越来越丰富,视觉效果也越来越绚丽。
传统观念里的Web前端负责网页(主要是电脑客户端的网页)的开发,实现各种样式和特效。随着移动互联网的发展,移动网页的开发也十分重要,一些手机端网页的功能甚至比电脑端更加复杂。
近年来,Web前端和移动APP开发已经联系得越来越紧密。大量移动APP都在使用原生组件与WebView相结合的开发模式。WebView是一种在移动APP内部嵌入网页的技术,它的使用避免了APP因功能大量改动而频繁上线的麻烦,也让APP能脱离平台限制,更灵活地展现内容。电商网站的商品详情页和微信内的公众号文章页,大部分都使用了这种开发模式。这种开发模式的出现,也让前端工程师得以大施拳脚、倍显重要。
1.2 为什么要学习HTML5和CSS3 1.2.1 “前端三剑客”——HTML、CSS、JavaScript
HTML的全称是HyperText Markup Language,即超文本标记语言。这个名字看起来既炫酷又晦涩难懂,然而HTML实际上就是一种脚本语言。
我们拿电影来打个比方。一种脚本语言,就像电影里的剧本一样。它有一定的规则,但会比较抽象,直接拿给观众看会让他们觉得看不懂。前端工程师就相当于编剧兼导演,用HTML语言编写整部电影的剧情,然后制定演出规则。浏览器就相当于电影里的演员,可以把以文字为主的内容通过图片、音频、视频等丰富多彩的方式动态地展现给观众。这里所说的观众,也就是网页的浏览者了。
“CSS”的全称是Cascading Style Sheets,即层叠样式表,它相当于电影里的化妆师。演员的表演都很到位,但是多数观众都喜欢在电影里看到漂亮的女神和帅气的男神。CSS的作用就是使电影的演员“浏览器”以更漂亮的面貌展现给观众。
电影拍摄完成了,要想更加卖座,光靠表演可不行,还需要后期制作,加上精彩纷呈的特效,这时就需要JavaScript来帮忙了。JavaScript可以实现一些动态的特效,让浏览器的表演更加生动。
HTML、CSS和JavaScript三门脚本语言是前端工程师的三大利器,拥有“前端三剑客”之称。如果你是一位出色的前端工程师,你可以用它们制作网页、绘画、播放多媒体,甚至制作一部剧情复杂的电影。
作为一门艺术,电影具有规范的流程,剧本定下来,不同的演员演出来,故事都还是那个故事。HTML和CSS的展现方式也是有既定标准的,同一套网页代码,在不同浏览器上运行,表现出的内容大同小异。
正常来说,演员怎么表演都是导演说了算,但是也会有些演员仗着自己粉丝多,喜欢在导演面前耍大牌。在前端界,这个大牌演员就是IE浏览器。因为IE浏览器是Windows操作系统的默认浏览器,而Windows操作系统又占有极大的PC市场,所以互联网在发展之初,绝大部分网民都是使用IE浏览器上网。随着技术的进步,前端界的“电影协会”W3C组织逐渐定义了一套统一且更先进的HTML和CSS标准,但是IE浏览器总是独树一帜,让前端工程师们苦不堪言。
演员们会年老色衰,即便化妆也不能保证变得像“小鲜肉”一样,这时不得不使用一些“黑科技”化妆手法。浏览器也有类似的情况,比如曾红极一时的IE6浏览器,如今还有很多使用者,但一些CSS代码用在IE6上会失效,于是为了兼容就需要额外为其写一套样式。
总而言之,通过合理使用HTML、CSS和JavaScript,我们能够完整地构建一系列网页,为用户提供一套功能强大、交互友好的网络应用。
1.2.2 学习HTML5和CSS3的优势
介绍完HTML、CSS和JavaScript的用途,下面来讲讲为什么要学习这些前端语言。HTML5和CSS3是目前前端领域广泛使用的开发语言,是本书重点讲授的内容。这两门语言因具有如下特点而被强烈推荐。
1.应用广泛
HTML5和CSS3广泛地应用到网页制作中,也被用于开发移动端的APP和游戏、微信和支付宝的小程序等,甚至一些电脑上运行的传统软件和插件脚本也可以使用HTML5和CSS3来实现。不管是立志于从事技术开发的学生,还是涉足互联网的产品经理、运营、设计师、销售等从业人员,这两门语言都值得他们加以学习。
2.技术炫酷
与旧版本相比,HTML5和CSS3增加了很多跨平台兼容的新特性,可以制作出更符合现代人审美观的炫酷页面,也可以用于开发动画和游戏。红极一时的微信小程序“跳一跳”以及前述示例中的卡通老虎,都是用这两项技术实现的。因此,我们大力推荐对技术感兴趣并且审美感强的读者来学习这两门语言。学习PHP和Java的读者,可能很难向不是做IT技术类工作的朋友介绍自己的工作内容,但是学习过HTML5和CSS3的读者,完全可以很轻松地把自己制作的某某微信小游戏或者某个电商网站作为示例推荐给大家。
3.入门简单
HTML和CSS虽然属于计算机编程语言,但是入门简单、易学易用。初学者不需要像学习其他编程语言那样必须懂得计算机原理、操作系统、算法等基础知识,不需要搭建运行环境和服务器,也不需要编译。每台家用电脑的浏览器都能运行你所编写的程序,记事本程序也能打开HTML文件,即写即用,十分方便。
4.内容丰富
HTML5和CSS3包罗万象,本身就作为制作网页的语言为人们所熟知。除此之外,它们还有适合多媒体播放的Audio、Video组件;有适合进行游戏、动画等特效制作的SVG、Canvas、WebGL及CSS3的3D功能;有适合进行地图导航的Geolocation API;有适合进行本地存储的localStorage和IndexedDB。种种有趣的知识和技术不一而足,每一项都可以深入研究并运用到实际场景中。
|
|