本书详细讲解了 HTML5 移动 Web 开发的相关技术。全书共 8 章,第 1 章是初识移动Web开发;第 2 章是 HTML5 新特性 ;第 3 章是移动端页面布局和常用事件 ;第 4 章是跨平台移动 Web 技术;第 5~7 章是 Bootstrap 相关内容,主要包括栅格系统、常用组件和常用样式;第 8 章是综合项目——黑马财富。
本书适合作为高等院校计算机相关专业程序设计类课程或者 Web 开发的专用教材,也可作为广大计算机编程爱好者的参考用书。
本书讲解了 HTML5 移动 Web 开发相关的技术,包括 HTML5 新特性、移动端页面布局和常用事件、跨平台移动 Web 技术,以及一款市面上流行的前端框架Bootstrap的使用。
本书对第一版内容进行了整体优化和调整。从技术上,本书将 Bootstrap 版本从 3.x 升级到 4.x。在内容结构上,本书增加了 Bootstrap 框架技术在全书中的比重。在章节构思上,本书对案例和知识点的连接进行了优化,使二者之间的联系更加紧密。在案例的讲解上,本书对案例实现步骤进行了拆分,以更加细致、更加适合读者的思维方式来呈现案例实现过程。
第1章 初识移动Web开发 1.1 移动互联网的发展 1.2 移动端开发的常见方式 1.3 移动Web开发概述 1.4 移动端的Web浏览器 1.5 Visual Studio Code编辑器 1.5.1 Visual Studio Code概述 1.5.2 下载和安装Visual Studio Code 1.5.3 安装常用扩展 1.5.4 使用Visual Studio Code 本章小结 课后练习 第2章 HTML5新特性 2.1 Web Storage 2.1.1 什么是Web Storage 2.1.2 localStorage 2.1.3 sessionStorage 2.1.4 Web Storage事件监听 2.2 视频与音频 2.2.1 <video>标签 2.2.2 <audio>标签 2.2.3 video和audio对象 2.3 地理定位 2.3.1 Geolocation地理定位 2.3.2 百度地图地理定位 2.4 拖曳操作 2.4.1 什么是拖曳 2.4.1 拖曳事件 2.5 文件操作 2.5.1 选择文件 2.5.2 FileReader对象 2.5.3 读取文件内容 2.6 Canvas 2.6.1 <canvas>标签 2.6.2 绘制线条 2.6.3 设置线条的样式 2.6.4 设置线条的路径 本章小结 课后习题 第3章 移动端页面布局和常用事件 3.1 流式布局 3.2 视口 3.2.1 什么是视口 3.2.2 使用<meta>标签设置视口 3.3 移动端touch事件 3.3.1 touch事件简介 3.3.2 解决移动端click事件的延时问题 3.4 阶段项目——移动商城 3.4.1 项目分析 3.4.2 搭建首页整体布局 3.4.3 搜索栏布局 3.4.4 轮播图布局 3.4.5 导航栏布局 3.4.6 商品区-整体布局 3.4.7 商品区-秒杀区块布局 3.4.8 商品区-产品区块1布局 3.4.9 商品区-产品区块2布局 3.4.10 实现首页搜索栏模块效果 3.4.11 实现首页倒计时效果 3.4.12 实现首页轮播图自动轮播效果 3.4.13 实现首页轮播图手动轮播效果 本章小结 课后练习 第4章 跨平台移动Web技术 4.1 响应式Web设计 4.1.1 响应式Web设计简介 4.1.2 响应式Web设计相关技术 4.2 媒体查询 4.2.1 什么是媒体查询 4.5.1 使用媒体查询实现响应式布局容器 4.3 栅格系统 4.3.1 什么是栅格系统 4.3.2 动手实现简单版栅格系统 4.4 弹性盒布局 4.4.1 什么是弹性盒布局 4.4.2 弹性盒常用属性 4.5 阶段项目——旅游网 4.5.1 旅游网项目分析 4.5.2 旅游网首页整体布局 4.5.3 搜索栏布局 4.5.4 焦点图布局 4.5.5 快捷导航栏布局 4.5.6 主导航栏布局 本章小结 课后习题 第5章 Bootstrap响应式移动Web开发 5.1 Bootstrap简介 5.1.1 什么是Bootstrap 5.1.2 Bootstrap的特点 5.2 Bootstrap下载和使用 5.2.1 下载Bootstrap预编译文件 5.2.2 引入Bootstrap预编译文件 5.2.3 创建Bootstrap初始模板 5.3 Bootstrap布局容器 5.3.1 初识布局容器 5.3.2 响应式布局容器 5.4 Bootstrap栅格系统 5.4.1 Bootstrap栅格系统概述 5.4.2 Bootstrap栅格系统的基本使用 5.4.3 利用Bootstrap栅格系统实现导航栏效果 5.5 Bootstrap响应式工具类 本章小结 课后练习 第6章 Bootstrap常用组件 6.1 导航组件 6.1.1 普通导航组件 6.1.2 标签式导航组件 6.1.3 胶囊式导航组件 6.1.4 面包屑导航组件 6.2 导航栏组件 6.2.1 基础导航栏组件 6.2.2 在导航栏中添加品牌标志 6.2.3 实现可折叠的导航栏 6.3 表单组件 6.3.1 表单控件 6.3.2 表单布局 6.3.3 表单验证 6.4 按钮组件 6.4.1 按钮样式 6.4.2 按钮组 6.4.3 按钮工具条 6.5 轮播图组件 6.5.1 轮播图页面结构 6.5.2 实现轮播图切换效果 6.5.3 轮播图指示器功能 6.5.4 实现轮播图左右手动切换效果 本章小结 课后习题 第7章 Bootstrap常用样式 7.1 标题样式 7.1.1 使用<h1>~<h6>标签设置标题 7.1.2 使用.h1~.h6标题类设置标题 7.1.3 使用.display标题类设置标题 7.1.4 使用<small>标签设置副标题 7.2 文本样式 7.2.1 使用内联标签强调文本 7.2.2 使用文本类强调文本 7.2.3 使用.text-*类设置文本颜色 7.2.4 使用.text-*类设置文本格式 7.3 列表样式 7.3.1 使用.list-unstyled类设置列表初始化 7.3.2 使用.list-inline类设置内联列表 7.3.3 设置水平定义列表 7.4 代码样式 7.5 图文样式 7.5.1 使用.img-fluid类设置响应式图像 7.5.2 设置图文布局模式 7.5.3 图文组合 7.6 表格样式 7.7 辅助样式 7.7.1 使用.bg-*类设置背景颜色 7.7.2 设置边框样式 7.7.3 设置元素间距 本章小结 课后练习 第8章 综合项目——黑马财富 8.1 项目展示 8.2 项目分析 8.3 项目开发说明 本章小结