作者：曾建华
出版社：人民邮电出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
HTML5移动前端开发基础与实战(微课版)试读：
前言
本书以实际动手演练为主，力求目标明确地指导读者学习相关知识。全书由8章构成，结构脉络清晰。从内容安排上，因为很多演练会用到JavaScript，所以将JavaScript安排到第1章。本书并不大篇幅介绍JavaScript，只安排了一节介绍最常用的JavaScript语法，为后续学习做必要的准备。相信学完本书，读者的JavaScript水平也将大幅提高。
HTML元素非常容易掌握，本书介绍的都是最实用、最常用的HTML元素。其中，CSS是最为重要的内容，因为布局的要点就是熟练、灵活地使用CSS。很多初学者不敢开始自己的前端设计，就是因为CSS看似简单，但实际应用不熟练。
本书演练完整实用，涉及实际开发中的各个环节。在讲解方面，文字力求简练，达到深入浅出的效果。如果读者认为本书演练简单，但又有很大收获，那就达到了编写本书的目的。
针对重点、难点，本书在相应位置加入了相关的微课，读者可以扫码观看视频，书网结合的讲解方式，可以更好地帮助读者理解晦涩难懂的知识。
本书由深圳职业技术学院的曾建华担任主编。曾建华负责各章节内容的编写和项目开发，郭玲、王梅进一步反复测试了演练代码。本书在编写过程中得到了李粤平老师的指导和支持。此外，李斌、刘小华、李云程、杨淑萍、裴沛、袁梅冷、梁雪平和庄亚俊等参与了本书部分章节内容的编写和校对工作，在此一并表示感谢。
本书是编者在总结多年教学和项目开发经验的基础上编写而成的。编者在探索教材建设方面做了许多努力，也对书稿进行了多次审校，但由于编写时间有限，难免存在一些疏漏和不足，希望专家和读者能给予批评和指正。编者2018年6月 第1章 开发环境及JavaScript准备
本章从整体上介绍了HTML5相关的技术，指导如何安装、配置和使用Sublime Text及相关插件，并初步讲解如何使用Chrome浏览器进行调试观察。另外，还重点讲解了学习本书所需的JavaScript知识，为后续章节做准备。
学习目标
●了解HTML5前端开发相关技术。
●掌握Sublime Text的安装、配置、使用。
●学会安装和使用Sublime Text插件。
●掌握使用Sublime Text创建一个包含HTML、CSS、JavaScript架构的HTML文件。
●初步学习使用Chrome浏览器调试观察HTML页面。
●掌握前端开发必备的JavaScript知识。1.1 HTML5相关技术简介
HTML5是最新的HTML标准。HTML负责描述网页的框架，简单来说就是把网页分割成一个个矩形，然后把这些矩形嵌套起来，形成层级关系。2007年，互联网组织便着手设计最新的HTML标准，经过将近8年的修订，终于在2014年定稿，推出最新标准的HTML5，主要是加入了一些新标签，推广语义化的描述。
CSS负责描述HTML里面“矩形”的大小、位置、边框、背景等外观。现在，CSS标准通常使用CSS3，CSS3加入或统一了一些新的属性，如阴影、圆角、透明度等。
JavaScript负责定义网页的行为。最新的JavaScript加入了本地存储、绘图、WebSocket等一系列功能。
HTML5还有另一层含义，泛指HTML5（后面简称HTML）、CSS3和JavaScript的技术组合，这也是本书HTML5的含义。
一个完整的项目除了前端外，还包括后台开发，这里的后台指服务端和数据库。前端由浏览器解释执行，需通过请求后台接口访问数据库。市场上的各类软件，如购物系统、ERP系统、财务软件、游戏软件等都和数据库有关，所以真正的项目是离不开后台支持的。现在的企业分工较为明细，有兴趣的读者可以专注于前端开发。
常用的服务端编程语言包括PHP、C#、Python、Node.js等，需要部署在Web服务器上。常用的数据库包括MySQL、SQL Server、Oracle、MongoDB等。为简化部署和方便教学，本书使用JSON数据模拟后台进行介绍。1.1.1 HTML
HTML（HyperText Markup Language，超文本标记语言）是一种用于创建网页的标准标记语言。HTML运行在浏览器上，由浏览器解释执行。
HTML5的主要新特性如下。
●具有用于绘画的canvas元素。
●具有用于媒介回放的video和audio元素。
●对本地离线存储有更好的支持。
●具有新的表单控件，如calendar、date、time、email、url及search。1.1.2 CSS
CSS（Cascading Style Sheets）即层叠样式表，主要用途如下。
●定义如何显示HTML元素。
●把样式添加到HTML中，解决内容与表现分离的问题。
●外部样式表通常存储在CSS文件中。
●重用较多时，外部样式表可以极大地提高工作效率。1.1.3 JavaScript
JavaScript是互联网上最流行的脚本语言，可广泛用于服务器、PC、便携式计算机、平板电脑和智能手机等设备程序设计。
●JavaScript是一种轻量级的编程语言。
●JavaScript是可插入HTML页面的编程代码。
●JavaScript由浏览器解释执行。1.2 Sublime Text 3及常用插件的安装、使用
本书主要讲解使用HTML5相关技术做前端开发，常用的开发工具有Sublime Text、WebStorm、Dreamweaver、Visual Studio等，读者可以选择一款适合自己的开发工具。本书使用Sublime Text 3作为编辑工具，如无特别说明，使用Chrome浏览器作为测试、调试工具，涉及JSON的个别演练使用Windows 10下的Edge浏览器。
Chrome浏览器的安装不再赘述。本节介绍Sublime Text软件的安装及使用。
Sublime Text是一个代码编辑器，非常适合用于HTML5开发时的编辑工作，不注册也可以无限期试用，读者可选择付费注册以支持软件开发者。Sublime Text具有友好的用户界面和强大的功能，它的主要功能包括拼写检查、书签管理、多点选择、多窗口布局等。此外还可以显示代码缩略图、支持各种插件等。Sublime Text是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。1.2.1 安装Sublime Text
对于Sublime Text中文版的安装，请读者自行在网上搜索“Sublime Text中文版”并下载，安装过程简单，不再赘述。市面上Sublime Text中文版的优点是包含了常用插件，可以说是一键安装，但某些版本自行安装其他插件时可能会出现一些问题。
Sublime Text官方版的安装演练可参照如下步骤。【演练1.1】下载并安装Sublime Text。（1）如图1-1所示，在相应网站选择所需版本下载软件。编者这里选择“DOWNLOAD FOR WINDOWS”选项，下载Windows版本。图1-1 选择程序版本（2）下载完毕后运行安装程序，显示欢迎向导，单击“Next”按钮，如图1-2所示。图1-2 欢迎向导（3）选择安装文件夹，保持默认设置，单击“Next”按钮，如图1-3所示。（4）勾选“Add to explorer context menu”复选框，单击“Next”按钮，如图1-4所示。（5）单击“Install”按钮开始安装，如图1-5所示。图1-3 选择安装文件夹图1-4 勾选“Add to explorer context menu”复选框图1-5 单击“Install”按钮开始安装（6）单击“Finish”按钮完成安装，如图1-6所示。图1-6 单击“Finish”按钮完成安装（7）安装完成后，运行Sublime Text，主界面如图1-7所示。这是未注册版本，但不影响功能使用。图1-7 Sublime Text主界面1.2.2 安装Package Control组件
Sublime Text本身已经非常强大，但是更棒的是有大量的插件支持它，给它带来更强大的功能。在安装插件之前，首先需要安装Package Control组件。【注意】安装Package Control和插件时须保持网络畅通。【演练1.2】安装Package Control组件。（1）启动Sublime Text，选择“Tools”→“Install Package Control”命令，如图1-8所示。图1-8 安装Package Control组件（2）稍等片刻。如果在主菜单“Preferences”中看到了“Package Control”命令，则表示安装成功，如图1-9所示。图1-9 验证安装成功1.2.3 安装Emmet插件
Emmet是一款快速编写HTML代码的插件。Emmet的缩写语法极大地提高了编写HTML、CSS、JavaScript代码的速度。【演练1.3】安装Emmet插件。（1）选择“Preferences”→“Package Control”命令，输入“install”，选择“Install Package”选项，如图1-10所示。图1-10 选择“Install Package”选项（2）输入“emmet”，按“Enter”键，等待安装结束，如图1-11所示。图1-11 输入“emmet”【注意】安装Emmet的同时，也会自动安装其依赖的PyV8库，安装PyV8库会用较长时间，可以在Sublime Text主界面左下角看到安装进程，预计几分钟时间，需要耐心等待。1.2.4 使用Sublime Text
本小节带领读者熟悉Sublime Text的常用编辑技巧，并通过第一个程序熟悉HTML+CSS+JavaScript的基本架构。【演练1.4】使用Sublime Text编辑一个带HTML+CSS+JavaScript基本架构的HTML文件。（1）启动Sublime Text。（2）按“Ctrl+S”组合键保存空白文件，选择路径并输入文件名，编者这里输入的是“1.04.html”，单击“保存”按钮如图1-12所示。图1-12 保存文件【注意】文件名扩展名是“.html”。（3）输入“!”（注意，不要输入全角状态的感叹号）后按“Tab”键，自动生成HTML文件基本框架，如图1-13所示。图1-13 自动生成HTML文件基本框架（4）在body块内输入“div#div1.c1”后按“Tab”键，生成图1-14所示的代码。【说明】“#”后至“。”前为id名称，“.”后为class名称。图1-14 body块内代码编辑技巧
以下操作读者可自行测试后删除。
在“body”块内如输入“div>div>div*4”后按“Tab”键，则会生成如下代码。【说明】上述代码为三层div嵌套，最里面一层有4个div。【乱数假文】如输入“lorem”后按“Tab”键，则会生成如下代码。
乱数假文适合需要大段文本时使用。读者还可以控制单词的数量，如输入“lorem200”后按“Tab”键，则会生成200个单词的文本段。（5）编写样式。如图1-15所示，在图示选中位置输入“style”后按“Tab”键，生成如下代码。图1-15 style代码编辑技巧（6）编写样式。输入图示选中的代码，如图1-16所示。【说明】指定所有div元素样式为1px的红色实线边框，宽度为100px，高度为20px。其中的“width:100px;”可通过输入“w100”后按“Tab”键生成。类似的，“height:20px;”可通过输入“h20”后按“Tab”键生成。图1-16 样式属性编辑（7）编写JavaScript。如图1-17所示，在图示选中位置输入“script”后按“Tab”键，生成如下代码。【说明】通常将JavaScript写在“
”之前。为方便阅读，本书将JavaScript写在“”之后，这对运行没有任何影响。图1-17 script代码编辑（8）编写JavaScript，如图1-18所示，输入图示选中的代码并保存文件。运行该代码将在浏览器的控制台输出“Hello World!”。图1-18 编写JavaScript（9）测试运行方法一。如图1-19所示，在编辑器中的空白位置右击，选择“Open in Browser”命令，系统默认浏览器将会打开该文件。本书建议将系统默认浏览器设置为Chrome浏览器。（10）测试运行方法二。如图1-20所示，在编辑器中右击，选择“Open Containing Folder”命令，打开该文件所在文件夹。（11）右击相应的文件，选择“打开方式”→“Google Chrome”命令，如图1-21所示。图1-19 选择“Open in Browser”命令图1-20 选择“Open Containing Folder”命令图1-21 用Google Chrome打开文件【注意】确保使用Chrome浏览器打开运行。除非特别说明，本书示例均使用Chrome浏览器进行调试讲解。1.2.5 Chrome浏览器调试入门【演练1.5】熟悉Chrome浏览器调试界面。（1）接上例，在Chrome浏览器中按“F12”键，调出调试界面。（2）观察结果。将鼠标指针移到或单击图1-22所示的位置，可显示对应元素的详细信息。V1-1 Chrome浏览器调试入门图1-22 显示对应元素的详细信息（3）单击“Console”标签观察控制台输出，可以看到“Hello World!”，如图1-23所示。图1-23 观察控制台输出【注意】使用Console是经常用来观察调试结果的方法之一，请牢记。1.2.6 Sublime Text常用技巧【演练1.6】改变主题颜色。如图1-24所示，选择“Preferences”→“Color Scheme”→“Mac Classic”命令可改变主题颜色。读者可以选择自己喜欢的主题。默认主题是黑色背景的“Monokai”。
试读结束[说明：试读内容隐藏了图片]