HTML5+CSS3+jQuery Mobile APP与移动网站设计从入门到精通

HTML5+CSS3+jQuery Mobile APP与移动网站设计从入门到精通

1 从HTML到HTML5

1.1 HTML基础

1.1.1 HTML概述
1.1.2 HTML特性
1.1.3 HTML文档结构
1.1.4 HTML的基本语法
1.1.5 HTML编写注意事项

1.2 HTML5基础

1.2.1 HTML5概述
1.2.2 HTML5文档结构
1.2.3 HTML5的优势
1.2.4 HTML5精简的头部

1.3 HTML文件的编写方式

1.3.1 使用记事本编写
1.3.2 使用Dreamweaver编写

1.4 HTML5中的标签

1.5 关于移动Web应用

1.5.1 移动Web应用的发展
1.5.2 基于Web的应用开发
1.5.3 基于HTML5的移动应用
1.5.4 移动应用开发框架

1.6 本章小结

2 HTML5文字与段落标签

2.1 设置文字效果

2.1.1 文字样式标签
2.1.2 文字加粗标签
2.1.3 文字倾斜标签
2.1.4 文字下划线标签
2.1.5 其他文字修饰标签

2.2 设置段落效果

2.2.1 文本分段

标签

2.2.2 文本分行
标签
2.2.3 标签

标签
2.2.4 水平线
标签
2.2.5 文本对齐设置

2.3 创建列表

2.3.1 使用
    标签创建项目列表
2.3.2 使用
    标签创建编号列表
2.3.3 使用
标签创建定义列表

2.4 本章小结

3 HTML5文档结构标签

3.1 认识HTML5文档结构

3.2 HTML5页面主体内容标签

3.2.1 标识文章
标签
3.2.2 标识章节
标签
3.2.3 标识导航
3.2.4 标识辅助内容
3.2.5 标识文章发布日期

3.3 页面语义模块标签

3.3.1 页眉
标签
3.3.2 标题分组
标签
3.3.3 页脚
标签
3.3.4 联系信息
标签

3.4 制作文章页面

3.5 本章小结

4 HTML5图像与超链接标签

4.1 了解网页中的图像格式

4.1.1 网页常用图像格式
4.1.2 选择合适的图像格式

4.2 插入图像并设置图像属性

4.2.1 图像标签
4.2.2 图像属性设置

4.3 创建超链接

4.3.1 使用标签创建超链接
4.3.2 超链接打开方式target属性
4.3.3 相对链接和绝对链接

4.4 创建特殊链接

4.4.1 空链接
4.4.2 文件下载链接
4.4.3 锚点链接
4.4.4 脚本链接
4.4.5 E-mail链接

4.5 本章小结

5 使用HTML5中的表单元素

5.1 关于表单

5.1.1 表单域
标签
5.1.2 标签属性设置

5.2 传统表单元素

5.2.1 文本域
5.2.2 密码域
5.2.3 文本区域
5.2.4 隐藏域
5.2.5 复选框
5.2.6 单选按钮
5.2.7 选择域
5.2.8 文件域
5.2.9 按钮
5.2.10 图像域

5.3 关于HTML5新增表单元素

5.3.1 HTML5表单的优势
5.3.2 浏览器对HTML5表单的支持情况
5.3.3 新增表单输入类型
5.3.4 新增其他表单元素

5.4 HTML5新增表单属性

5.4.1 form属性
5.4.2 formaction属性
5.4.3 formmethod、formenctype、formnovalidate、formtarget属性
5.4.4 placeholder属性
5.4.5 autofocus属性
5.4.6 autocomplete属性

5.5 HTML5提供的表单验证属性

5.5.1 required属性
5.5.2 pattern属性
5.5.3 min、max和step属性
5.5.4 novalidate属性

5.6 本章小结

6 使用HTML5画布元素

6.1 HTML5新增canvas元素

6.1.1 了解canvas元素
6.1.2 在网页中插入canvas元素
6.1.3 如何使用canvas元素实现绘图

6.2 绘制基本图形

6.2.1 绘制直线
6.2.2 绘制矩形
6.2.3 绘制圆形
6.2.4 绘制三角形
6.2.5 绘制曲线
6.2.6 清除图形

6.3 绘制文本

6.3.1 使用文本
6.3.2 获取文字宽度

6.4 图形的组合与裁切

6.4.1 图形组合
6.4.2 使用图像
6.4.3 使用图像模式
6.4.4 裁切路径

6.5 图形颜色与样式设置

6.5.1 绘制线性渐变
6.5.2 绘制径向渐变
6.5.3 创建对象阴影

6.6 本章小结

7 HTML5音频与视频标签

7.1 HTML5多媒体基础

7.1.1 在线多媒体的发展
7.1.2 HTML5音频和视频优势
7.1.3 HTML5音频和视频的不足
7.1.4 检查浏览器是否支持HTML5音频和视频

7.2 使用HTML5音频

7.2.1
7.2.2 使用

7.3 使用HTML5视频

7.3.1
7.3.2 使用
7.3.3 使用标签

7.4

7.4.1 标签属性
7.4.2 元素的接口属性

7.5

7.5.1 接口方法
7.5.2 接口事件
7.5.3 接口事件的使用方法
7.5.4 自定义视频播放控制组件

7.6 本章小结

8 CSS样式的发展与选择器

8.1 CSS样式的发展

8.1.1 使用CSS样式的优势
8.1.2 CSS1与CSS2概述
8.1.3 全新的CSS3
8.1.4 浏览器对CSS3的支持情况

8.2 CSS样式语法

8.2.1 CSS样式基本语法
8.2.2 CSS样式规则构成
8.2.3 应用CSS样式的4种方式

8.3 CSS选择器

8.3.1 通配选择器
8.3.2 标签选择器
8.3.3 ID选择器
8.3.4 类选择器
8.3.5 伪类和伪对象选择器
8.3.6 群组选择器
8.3.7 派生选择器

8.4 CSS3新增选择器

8.4.1 属性选择器
8.4.2 结构伪类选择器
8.4.3 UI元素状态伪类选择器
8.4.4 伪元素选择器

8.5 本章小结

9 设置文字与段落样式

9.1 文字样式

9.1.1 字体—font-family属性
9.1.2 字体大小—font-size属性
9.1.3 字体颜色—color属性
9.1.4 字体粗细—font-weight属性
9.1.5 字体样式—font-style属性
9.1.6 英文字体大小写—text-transform属性
9.1.7 文字修饰效果—text-decoration属性
9.1.8 字符间距—letter-spacing属性

9.2 CSS3新增文本样式属性

9.2.1 文本溢出处理—text-overflow属性
9.2.2 文本换行—word-wrap和word-break属性
9.2.3 文字阴影—text-shadow属性
9.2.4 服务器端字体—@font-face规则

9.3 段落样式

9.3.1 行间距—line-height属性
9.3.2 段落首行缩进—text-indent属性
9.3.3 水平对齐方式—text-align属性
9.3.4 垂直对齐方式—vertical-align属性

9.4 列表样式

9.4.1 列表符号—list-style-type属性
9.4.2 自定义列表符号—list-style-image属性
9.4.3 定义列表样式

9.5 本章小结

10 设置背景样式

10.1 背景颜色—background-color属性

10.2 CSS3新增颜色设置

10.2.1 RGBA颜色值
10.2.2 HSL颜色值
10.2.3 HSLA颜色值
10.2.4 元素不透明度—opacity属性
10.2.5 transparent颜色值

10.3 CSS3新增渐变背景

10.3.1 线性渐变背景
10.3.2 径向渐变背景

10.4 背景图像样式

10.4.1 背景图像—background-image属性
10.4.2 背景图像平铺方式—background-repeat属性
10.4.3 背景图像位置—background-position属性
10.4.4 背景图像固定—background-attachment属性

10.5 CSS3新增背景属性

10.5.1 多背景图像—background属性
10.5.2 背景图像大小—background-size属性
10.5.3 背景图像原点—background-origin属性
10.5.4 背景图像显示区域—background-clip属性

10.6 本章小结

11 设置超链接和边框样式

11.1 超链接样式伪类

11.1.1 :link伪类
11.1.2 :hover伪类
11.1.3 :active伪类
11.1.4 :visited伪类
11.1.5 按钮式超链接

11.2 鼠标指针样式

11.2.1 鼠标指针效果—cursor属性
11.2.2 设置网页中鼠标效果

11.3 边框样式

11.3.1 边框宽度—border-width属性
11.3.2 边框样式—border-style属性
11.3.3 边框颜色—border-color属性

11.4 CSS3新增边框属性

11.4.1 多边框颜色—border-color属性
11.4.2 图像边框—border-image属性
11.4.3 圆角边框—border-radius属性

11.5 本章小结

12 设置元素的定位与布局属性

12.1 元素定位样式

12.1.1 position属性
12.1.2 相对定位
12.1.3 绝对定位
12.1.4 固定定位
12.1.5 浮动定位—float属性

12.2 CSS3新增界面设计属性

12.2.1 改变元素尺寸—resize属性
12.2.2 轮廓外边框—outline属性
12.2.3 伪装元素—appearance属性
12.2.4 赋予内容—content属性

12.3 CSS3新增多列布局属性

12.3.1 多列布局—columns属性
12.3.2 列宽度—column-width属性
12.3.3 列数—column-count属性
12.3.4 列间距—column-gap属性
12.3.5 列分栏线—column-rule属性
12.3.6 横跨所有列—column-span属性

12.4 本章小结

13 CSS3盒模型

13.1 传统CSS盒模型

13.1.1 什么是CSS盒模型
13.1.2 CSS盒模型要点
13.1.3 边距—margin属性
13.1.4 边框—border属性
13.1.5 填充—padding属性

13.2 CSS3弹性盒模型

13.2.1 开启弹性盒模型
13.2.2 布局方向—box-orient属性
13.2.3 布局顺序—box-direction属性
13.2.4 元素位置—box-ordinal-group属性
13.2.5 空间分配—box-flex属性
13.2.6 对齐方式—box-pack和box-align属性
13.2.7 实现网页元素水平和垂直居中对齐
13.2.8 实现网页元素底部对齐

13.3 增强的CSS3盒模型

13.3.1 元素阴影—box-shadow属性
13.3.2 元素尺寸大小—box-sizing属性
13.3.3 元素溢出处理—overflow-x和overflow-y属性

13.4 本章小结

14 CSS3动画效果

14.1 CSS3变换效果

14.1.1 transform属性
14.1.2 旋转
14.1.3 缩放
14.1.4 移动
14.1.5 倾斜
14.1.6 矩阵变形
14.1.7 定义变形中心点
14.1.8 同时使用多个变形函数

14.2 CSS3变换过渡效果

14.2.1 transition属性
14.2.2 过渡效果—transition-property属性
14.2.3 过渡时间—transition-duration属性
14.2.4 过渡延迟时间—transition-delay属性
14.2.5 过渡方式—transition-timing-function属性
14.2.6 制作网页图片交互特效

14.3 CSS3动画效果

14.3.1 关键帧动画—@keyframes规则
14.3.2 animation属性—实现元素动画效果

14.4 本章小结

15 jQuery和jQuery Mobile基础

15.1 了解jQuery

15.1.1 jQuery概述
15.1.2 引用jQuery函数库的两种方法
15.1.3 jQuery基本语法
15.1.4 认识jQuery选择器
15.1.5 使用jQuery设置CSS样式属性

15.2 了解jQuery Mobile

15.2.1 jQuery Mobile概述
15.2.2 jQuery Mobile功能特点
15.2.3 jQuery Mobile的工作原理

15.3 jQuery Mobile操作流程

15.3.1 下载移动设备模拟器
15.3.2 加载jQuery Mobile函数库
15.3.3 创建jQuery Mobile页面
15.3.4 jQuery Mobile页面的基本架构

15.4 本章小结

16 认识并创建jQuery Mobile页面

16.1 认识jQuery Mobile页面

16.1.1 多容器jQuery Mobile页面
16.1.2 jQuery Mobile页面链接
16.1.3 链接外部jQuery Mobile页面
16.1.4 实现弹出对话框

16.2 jQuery Mobile页面头部栏

16.2.1 头部栏基本结构
16.2.2 在头部栏中添加后退按钮
16.2.3 在头部栏中添加其他功能按钮
16.2.4 设置按钮位置

16.3 jQuery Mobile页面导航栏

16.3.1 导航栏基本结构
16.3.2 为导航栏添加图标
16.3.3 设置导航栏图标位置

16.4 jQuery Mobile页面尾部栏

16.4.1 在尾部栏添加按钮
16.4.2 添加表单元素
16.4.3 固定页面头部栏与尾部栏

16.5 jQuery Mobile页面内容区域

16.5.1 布局网格
16.5.2 可折叠区块
16.5.3 可折叠区块的嵌套
16.5.4 可折叠区块组

16.6 预加载和缓存jQuery Mobile页面

16.6.1 预加载jQuery Mobile页面
16.6.2 页面缓存

16.7 本章小结

17 使用jQuery Mobile主题与组件

17.1 了解jQuery Mobile主题

17.1.1 了解主题
17.1.2 默认主题
17.1.3 修改默认主题

17.2 自定义jQuery Mobile页面和工具栏主题

17.2.1 自定义页面主题
17.2.2 自定义工具栏主题
17.2.3 自定义内容主题

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 分割列表选项
17.4.6 图标与计数器
17.4.7 列表项内容格式化处理

17.5 表单组件

17.5.1 文本输入组件
17.5.2 滑块
17.5.3 翻转切换开关
17.5.4 单选按钮
17.5.5 复选框
17.5.6 选择菜单
17.5.7 多项选择菜单

17.6 本章小结

18 使用jQuery Mobile事件与插件

18.1 设置jQuery Mobile

18.2 使用jQuery Mobileg事件

18.2.1 加载外部页面事件
18.2.2 页面切换事件
18.2.3 页面显示或隐藏事件
18.2.4 触摸事件
18.2.5 屏幕滚动事件
18.2.6 翻转事件
18.2.7 随机显示页面背景

18.3 使用jQuery Mobile插件

18.3.1 mmenu插件
18.3.2 Mobiscroll插件
18.3.3 Camera插件
18.3.4 Swipebox插件

18.4 本章小结

19 移动应用制作实战

19.1 APP引导页面

19.1.1 功能分析
19.1.2 制作步骤

19.2 移动应用首页面

19.2.1 功能分析
19.2.2 制作可滑动的页面背景
19.2.3 制作可滑动导航栏

19.3 电商APP界面

19.3.1 功能分析
19.3.2 制作启动页面
19.3.3 制作电商APP首页面

19.4 本章小结

资源下载

思维导图

HTML5+CSS3+jQuery Mobile APP与移动网站设计从入门到精通

防止博客图床图片失效,防止图片源站外链:

http://www.processon.com/chart_image/5e5b2f76e4b0cc44b5b49e1a.png)

思维导图在线编辑链接:

https://www.processon.com/view/5e5b2f76e4b0cc44b5b49e17

原文地址:https://www.cnblogs.com/jingle1267/p/12826120.html