HTML5 移动Web开发从入门到精通（微课精编版）

作品简介

本书结合HTML5 和CSS3 技术，为读者全面深入地讲解了针对各种屏幕大小设计和开发现代网站的技术。全书共19 章，包括HTML5 基础、CSS3 基础、设计移动页面结构、设计移动页面正文、美化页面文本、设计列表结构、应用多媒体、使用CSS3 定义版式、使用媒体查询、设计弹性布局、设计响应式图片、设计移动表单、设计响应式表格、使用CSS3 修饰背景、使用CSS3 美化界面样式、CSS3 动画、设计响应式网站、酒店预订微信wap 网站、发布网页等内容。

作者：前端科技

作品目录

• 内容简介
• 如何使用本书
• 前言Preface
• 第1章 HTML5基础 （视频讲解：27分钟）
• 1.1　HTML5概述
• 1.2　HTML5设计原则
• 1.2.1　避免不必要的复杂性
• 1.2.2　支持已有内容
• 1.2.3　解决实际问题
• 1.2.4　用户怎么使用就怎么设计规范
• 1.2.5　优雅地降级
• 1.2.6　支持的优先级
• 1.3　HTML5语法特性
• 1.3.1　文档和标记
• 1.3.2　宽松的约定
• 1.4　HTML5基本结构
• 1.4.1　新建HTML5文档
• 1.4.2　网页顶部和头部
• 1.4.3　网页主体
• 1.4.4　认识标签
• 1.4.5　网页文本内容
• 1.4.6　网页非文本内容
• 1.5　案例实战
• 1.5.1　编写第一个HTML5文档
• 1.5.2　比较HTML4与HTML5文档结构
• 1.6　在线练习
• 第2章 CSS3基础 （视频讲解：1小时1分钟）
• 2.1　CSS3概述
• 2.2　CSS3基本用法
• 2.2.1　CSS样式
• 2.2.2　引入CSS样式
• 2.2.3　CSS样式表
• 2.2.4　导入外部样式表
• 2.2.5　CSS格式化
• 2.2.6　CSS属性
• 2.2.7　CSS属性值
• 2.3　元素选择器
• 2.3.1　标签选择器
• 2.3.2　类选择器
• 2.3.3　ID选择器
• 2.3.4　通配选择器
• 2.4　关系选择器
• 2.4.1　包含选择器
• 2.4.2　子选择器
• 2.4.3　相邻选择器
• 2.4.4　兄弟选择器
• 2.4.5　分组选择器
• 2.5　属性选择器
• 2.6　伪选择器
• 2.6.1　结构伪类
• 2.6.2　否定伪类
• 2.6.3　状态伪类
• 2.6.4　目标伪类
• 2.7　CSS特性
• 2.7.1　CSS继承性
• 2.7.2　CSS层叠性
• 2.8　在线练习
• 第3章 设计移动页面结构 （视频讲解：36分钟）
• 3.1　头部信息
• 3.1.1　定义网页标题
• 3.1.2　定义网页元信息
• 3.1.3　定义文档视口
• 3.1.4　移动应用的head头信息说明
• 3.2　构建基本结构
• 3.2.1　定义文档结构
• 3.2.2　定义内容标题
• 3.2.3　使用div元素
• 3.2.4　使用id和class
• 3.2.5　使用title
• 3.2.6　HTML注释
• 3.3　构建语义结构
• 3.3.1　定义页眉
• 3.3.2　定义导航
• 3.3.3　定义主要区域
• 3.3.4　定义文章块
• 3.3.5　定义区块
• 3.3.6　定义附栏
• 3.3.7　定义页脚
• 3.3.8　使用role
• 3.4　案例实战
• 3.5　在线练习
• 第4章 设计移动页面正文 （视频讲解：1小时1分钟）
• 4.1　通用文本
• 4.1.1　标题文本
• 4.1.2　段落文本
• 4.2　描述文本
• 4.2.1　强调文本
• 4.2.2　标记细则
• 4.2.3　特殊格式
• 4.2.4　定义上标和下标
• 4.2.5　定义术语
• 4.2.6　标记代码
• 4.2.7　预定义格式
• 4.2.8　定义缩写词
• 4.2.9　标注编辑或不用文本
• 4.2.10　指明引用或参考
• 4.2.11　引述文本
• 4.2.12　换行显示
• 4.2.13　修饰文本
• 4.2.14　非文本注解
• 4.3　特殊文本
• 4.3.1　标记高亮显示
• 4.3.2　标记进度信息
• 4.3.3　标记刻度信息
• 4.3.4　标记时间信息
• 4.3.5　标记联系信息
• 4.3.6　标记显示方向
• 4.3.7　标记换行断点
• 4.3.8　标记旁注
• 4.4　HTML5全局属性
• 4.4.1　可编辑内容
• 4.4.2　快捷菜单
• 4.4.3　自定义属性
• 4.4.4　定义可拖动操作
• 4.4.5　拖动数据
• 4.4.6　隐藏元素
• 4.4.7　语法检查
• 4.4.8　翻译内容
• 4.5　在线练习
• 第5章 美化页面文本 （视频讲解：2小时6分钟）
• 5.1　设计字体样式
• 5.1.1　定义字体类型
• 5.1.2　定义字体大小
• 5.1.3　定义字体颜色
• 5.1.4　定义字体粗细
• 5.1.5　定义艺术字体
• 5.1.6　定义修饰线
• 5.1.7　定义字体的变体
• 5.1.8　定义大小字体
• 5.2　设计文本样式
• 5.2.1　定义文本对齐
• 5.2.2　定义垂直对齐
• 5.2.3　定义文本间距
• 5.2.4　定义行高
• 5.2.5　定义首行缩进
• 5.3　CSS3文本模块
• 5.3.1　文本溢出
• 5.3.2　文本换行
• 5.3.3　书写模式
• 5.3.4　initial值
• 5.3.5　inherit值
• 5.3.6　unset值
• 5.3.7　all属性
• 5.4　色彩模式
• 5.4.1　rgba()函数
• 5.4.2　hsl()函数
• 5.4.3　hsla()函数
• 5.4.4　opacity属性
• 5.4.5　transparent值
• 5.4.6　currentColor值
• 5.5　文本阴影
• 5.5.1　定义text-shadow
• 5.5.2　案例：设计特效字
• 5.6　动态内容
• 5.6.1　定义content
• 5.6.2　案例：应用content
• 5.7　网络字体
• 5.7.1　使用@font-face
• 5.7.2　案例：设计字体图标
• 5.8　案例实战
• 5.8.1　设计文本新闻页
• 5.8.2　设计正文内页
• 5.8.3　设计列表文本样式
• 5.8.4　设计黑科技首页
• 5.8.5　设计消息提示框
• 5.9　在线练习
• 第6章 设计列表结构 （视频讲解：52分钟）
• 6.1　定义列表
• 6.1.1　无序列表
• 6.1.2　有序列表
• 6.1.3　项目编号
• 6.1.4　设计CSS样式
• 6.1.5　嵌套列表
• 6.1.6　描述列表
• 6.1.7　菜单列表
• 6.1.8　快捷菜单
• 6.2　定义链接
• 6.2.1　普通链接
• 6.2.2　块链接
• 6.2.3　锚点链接
• 6.2.4　目标链接
• 6.2.5　下载链接
• 6.2.6　图像热点
• 6.2.7　框架链接
• 6.3　案例实战
• 6.3.1　设计导航页面
• 6.3.2　设计热销榜
• 6.3.3　设计品牌墙
• 6.3.4　设计品类引导列表
• 6.3.5　为快捷菜单添加命令
• 6.3.6　设计快捷分享命令
• 6.3.7　设计任务列表命令
• 6.3.8　设计排行榜列表结构
• 6.3.9　设计图文列表栏目
• 6.4　在线练习
• 第7章 应用多媒体 （视频讲解：40分钟）
• 7.1　认识网页图像
• 7.2　使用图像
• 7.2.1　使用img元素
• 7.2.2　定义流内容
• 7.2.3　插入图标
• 7.2.4　定义图像大小
• 7.2.5　案例：图文混排
• 7.3　使用多媒体插件
• 7.3.1　使用embed元素
• 7.3.2　使用object元素
• 7.4　使用HTML5多媒体
• 7.4.1　使用audio元素
• 7.4.2　使用video元素
• 7.5　案例实战
• 7.5.1　设计网页音乐播放器
• 7.5.2　设计MP3播放条
• 7.5.3　设计视频播放器
• 7.6　HTML5多媒体API
• 7.6.1　设置属性
• 7.6.2　设置方法
• 7.6.3　设置事件
• 7.6.4　综合案例
• 7.7　在线练习
• 第8章 使用CSS3定义版式 （视频讲解：40分钟）
• 8.1　CSS盒模型
• 8.1.1　认识display
• 8.1.2　认识CSS盒模型
• 8.1.3　定义边界
• 8.1.4　定义边框
• 8.1.5　定义补白
• 8.2　设计浮动显示
• 8.2.1　定义float
• 8.2.2　使用clear
• 8.3　设计定位显示
• 8.3.1　定义position
• 8.3.2　设置层叠顺序
• 8.4　案例实战
• 8.4.1　设计两栏页面
• 8.4.2　设计三栏页面
• 8.4.3　设计九宫格版式
• 8.4.4　设计用户管理界面
• 8.4.5　设计侧滑面板
• 8.4.6　设计网格化版式
• 8.4.7　设计音乐列表版式
• 8.5　在线练习
• 第9章 使用媒体查询 （视频讲解：21分钟）
• 9.1　认识媒体查询
• 9.2　使用媒体查询
• 9.2.1　媒体类型和媒体查询
• 9.2.2　使用@media
• 9.2.3　应用@media
• 9.2.4　案例：设计第一个响应式版式
• 9.3　案例实战
• 9.3.1　判断显示屏幕宽度
• 9.3.2　设计响应式版式
• 9.3.3　设计响应式菜单
• 9.3.4　设计自动隐藏布局
• 9.3.5　设计自适应手机页面
• 9.4　在线练习
• 第10章 设计弹性布局 （视频讲解：32分钟）
• 10.1　多列布局
• 10.1.1　设置列宽
• 10.1.2　设置列数
• 10.1.3　设置间距
• 10.1.4　设置列边框
• 10.1.5　设置跨列显示
• 10.1.6　设置列高度
• 10.2　旧版伸缩盒
• 10.2.1　启动伸缩盒
• 10.2.2　设置宽度
• 10.2.3　设置顺序
• 10.2.4　设置方向
• 10.2.5　设置对齐方式
• 10.3　新版伸缩盒
• 10.3.1　认识Flexbox系统
• 10.3.2　启动伸缩盒
• 10.3.3　设置主轴方向
• 10.3.4　设置行数
• 10.3.5　设置对齐方式
• 10.3.6　设置伸缩项目
• 10.4　浏览器支持和伸缩盒版本迭代
• 10.4.1　浏览器对Flexbox的支持
• 10.4.2　比较Flexbox新旧版本
• 10.5　案例实战
• 10.5.1　将固宽页转换为弹性页
• 10.5.2　设计弹性菜单
• 10.5.3　设计多断点弹性菜单
• 10.5.4　设计粘附页脚栏
• 10.5.5　设计3栏页面
• 10.5.6　设计3行3列应用
• 10.6　在线练习
• 第11章 设计响应式图片
• 11.1　认识响应式图片
• 11.2　使用picture
• 11.2.1　基本用法
• 11.2.2　浏览器支持
• 11.2.3　应用示例
• 11.3　案例实战
• 11.3.1　图片加载
• 11.3.2　针对不同设备调整显示焦点
• 11.3.3　使用媒体查询调整显示焦点
• 11.3.4　图片分辨率处理
• 11.3.5　设计图文版式
• 11.3.6　设计热点景点栏目
• 11.3.7　设计图片分享页面
• 11.3.8　设计图片列表页面
• 11.4　在线练习
• 第12章 设计移动表单 （视频讲解：1小时12分钟）
• 12.1　认识HTML5表单
• 12.2　定义表单
• 12.3　提交表单
• 12.4　组织表单
• 12.5　定义文本框
• 12.6　定义标签
• 12.7　使用常用控件
• 12.7.1　密码框
• 12.7.2　单选按钮
• 12.7.3　复选框
• 12.7.4　文本区域
• 12.7.5　选择框
• 12.7.6　上传文件
• 12.7.7　隐藏字段
• 12.7.8　提交按钮
• 12.8　HTML5新型输入框
• 12.8.1　定义E-mail框
• 12.8.2　定义URL框
• 12.8.3　定义数字框
• 12.8.4　定义范围框
• 12.8.5　定义日期选择器
• 12.8.6　定义搜索框
• 12.8.7　定义电话号码框
• 12.8.8　定义拾色器
• 12.9　HTML5输入属性
• 12.9.1　定义自动完成
• 12.9.2　定义自动获取焦点
• 12.9.3　定义所属表单
• 12.9.4　定义表单重写
• 12.9.5　定义高和宽
• 12.9.6　定义列表选项
• 12.9.7　定义最小值、最大值和步长
• 12.9.8　定义多选
• 12.9.9　定义匹配模式
• 12.9.10　定义替换文本
• 12.9.11　定义必填
• 12.10　HTML5新表单元素
• 12.10.1　定义数据列表
• 12.10.2　定义密钥对生成器
• 12.10.3　定义输出结果
• 12.11　HTML5表单属性
• 12.11.1　定义自动完成
• 12.11.2　定义禁止验证
• 12.12　案例实战
• 12.12.1　设计注册表单
• 12.12.2　设计登录表单
• 12.12.3　设计反馈表单
• 12.13　在线练习
• 第13章 设计响应式表格 （视频讲解：35分钟）
• 13.1　认识表格结构
• 13.2　新建表格
• 13.2.1　定义普通表格
• 13.2.2　定义列标题
• 13.2.3　定义表格标题
• 13.2.4　表格行分组
• 13.2.5　表格列分组
• 13.3　设置table属性
• 13.3.1　定义单线表格
• 13.3.2　定义分离单元格
• 13.3.3　定义细线边框
• 13.3.4　添加表格说明
• 13.4　设置td和th属性
• 13.4.1　定义跨单元格显示
• 13.4.2　定义表头单元格
• 13.4.3　为单元格指定表头
• 13.4.4　定义信息缩写
• 13.4.5　单元格分类
• 13.5　使用CSS定义表格样式
• 13.5.1　定义表格的基本方法
• 13.5.2　定义边框
• 13.5.3　定义间距
• 13.5.4　定义标题
• 13.5.5　定义空单元格
• 13.6　案例实战
• 13.6.1　设计产品信息列表
• 13.6.2　设计自适应布局表格
• 13.6.3　设计滚动显示表格
• 13.6.4　设计隐藏不重要的数据列
• 13.7　在线练习
• 第14章 使用CSS3修饰背景 （视频讲解：51分钟）
• 14.1　设计背景图像
• 14.1.1　设置定位原点
• 14.1.2　设置裁剪区域
• 14.1.3　设置背景图像大小
• 14.1.4　设置多重背景图像
• 14.2　设计渐变背景
• 14.2.1　定义线性渐变
• 14.2.2　设计线性渐变样式
• 14.2.3　案例：设计网页渐变色
• 14.2.4　案例：设计条纹背景
• 14.2.5　定义重复线性渐变
• 14.2.6　定义径向渐变
• 14.2.7　设计径向渐变样式
• 14.2.8　定义重复径向渐变
• 14.2.9　案例：设计网页背景色
• 14.2.10　案例：设计图标
• 14.3　案例实战
• 14.3.1　设计优惠券
• 14.3.2　设计桌面纹理背景
• 14.3.3　设计按钮
• 14.3.4　渐变特殊应用场景
• 14.3.5　设计栏目折角效果
• 14.4　在线练习
• 第15章 使用CSS3美化界面样式 （视频讲解：36分钟）
• 15.1　界面显示
• 15.1.1　显示方式
• 15.1.2　调整尺寸
• 15.1.3　缩放比例
• 15.2　轮廓样式
• 15.2.1　定义轮廓
• 15.2.2　设计轮廓线
• 15.3　边框样式
• 15.3.1　定义边框图像源
• 15.3.2　定义边框图像平铺方式
• 15.3.3　定义边框图像宽度
• 15.3.4　定义边框图像分割方式
• 15.3.5　定义边框图像扩展
• 15.3.6　案例：应用边框图像
• 15.3.7　定义圆角边框
• 15.3.8　案例：设计椭圆图形
• 15.4　盒子阴影
• 15.4.1　定义盒子阴影
• 15.4.2　案例：box-shadow的应用
• 15.4.3　案例：设计翘边阴影
• 15.5　案例实战
• 15.5.1　设计内容页
• 15.5.2　设计应用界面
• 15.6　在线练习
• 第16章 CSS3动画 （视频讲解：1小时1分钟）
• 16.1　CSS3变形
• 16.1.1　认识Transform
• 16.1.2　设置原点
• 16.1.3　2D旋转
• 16.1.4　2D缩放
• 16.1.5　2D平移
• 16.1.6　2D倾斜
• 16.1.7　2D矩阵
• 16.1.8　设置变形类型
• 16.1.9　设置透视距离和原点
• 16.1.10　3D平移
• 16.1.11　3D缩放
• 16.1.12　3D旋转
• 16.1.13　透视函数
• 16.1.14　变形原点
• 16.1.15　背景可见
• 16.2　过渡动画
• 16.2.1　设置过渡属性
• 16.2.2　设置过渡时间
• 16.2.3　设置延迟过渡时间
• 16.2.4　设置过渡动画类型
• 16.2.5　设置过渡触发动作
• 16.3　帧动画
• 16.3.1　设置关键帧
• 16.3.2　设置动画属性
• 16.4　案例实战
• 16.4.1　设计图形
• 16.4.2　设计冒泡背景按钮
• 16.4.3　设计动画效果菜单
• 16.4.4　设计照片特效
• 16.4.5　设计立体盒子
• 16.4.6　旋转盒子
• 16.4.7　设计翻转广告
• 16.4.8　设计跑步效果
• 16.4.9　设计折叠面板
• 16.5　在线练习
• 第17章 综合实战：设计响应式网站
• 17.1　认识响应式Web设计
• 17.2　构建页面
• 17.3　设计基本样式
• 17.3.1　兼容早期浏览器
• 17.3.2　重置默认样式
• 17.4　设计响应式样式
• 17.4.1　创建可伸缩图像
• 17.4.2　创建弹性布局网格
• 17.4.3　实现媒体查询
• 17.4.4　组合样式
• 17.4.5　兼容旧版IE
• 第18章 案例开发：酒店预订微信wap网站 （视频讲解：16分钟）
• 18.1　设计思路
• 18.1.1　内容
• 18.1.2　结构
• 18.1.3　效果
• 18.2　设计首页
• 18.3　设计登录页
• 18.4　选择城市
• 18.5　选择酒店
• 18.6　预订酒店
• 第19章 发布网页
• 19.1　Web应用发布基础
• 19.2　下载、安装Cordova
• 19.2.1　安装Java JDK
• 19.2.2　安装Android SDK
• 19.2.3　安装Apache Ant
• 19.2.4　设置用户变量
• 19.2.5　测试工具
• 19.2.6　通过npm安装Cordova
• 19.2.7　设置Android模拟器
• 19.3　将网页转换成Android APP