HTML5+CSS3+jQuery Mobile移动网站与App开发实战(视频讲解版)

作者
李晓斌
丛书名
出版社
人民邮电出版社
ISBN
9787115479532
简要
简介
内容简介书籍计算机书籍 本书分为三个部分。第 一部分介绍HTML5各方面的知识点,重点介绍绘图、音频和视频、新型表单等;第 二部分介绍CSS样式各属性的设置和使用方法,重点介绍CSS 3.0中新增的相关属性以及CSS动画的制作方法;第三部分介绍了jQuery Mobile的相关知识,并通过实用案例讲解了综合运用HTML5、CSS 3和jQuery Mobile开发移动应用的方法和技巧。
目录
第一篇 HTML5基础


第1章 HTML和HTML5基础 2


1.1 HTML基础 2


1.1.1 什么是HTML 2


1.1.2 HTML的主要功能 3


1.1.3 HTML的编辑环境 3


1.1.4 认识Dreamweaver中的代码工具 4


1.2 HTML5基础 6


1.2.1 HTML5概述 6


1.2.2 HTML5的优势 6


1.3 认识HTML5 7


1.3.1 HTML5的文档结构 7


1.3.2 HTML5的基本语法 8


1.3.3 HTML5精简的头部 8


1.4 HTML5中新增的标签 9


1.4.1 结构标签 9


1.4.2 文本标签 9


1.4.3 应用和辅助标签 10


1.4.4 进度标签 10


1.4.5 交互性标签 10


1.4.6 在文档和应用中使用的标签 10


1.4.7 标签 11


1.4.8 其他标签 11


1.5 HTML5中废弃的标签 11


1.6 本章小结 12


1.7 课后习题 12


第2章 HTML中的主体标签 13


2.1 HTML头部标签设置 13


2.1.1 标签 13


练习——为网页设置标题 13


2.1.2 <base>标签 14


2.1.3 标签 14


练习——设置网页关键字、说明以及页面的定时跳转 16


2.2 HTML主体<body>标签设置 17


2.2.1 边距属性margin 17


练习——设置网页整体边距 17


2.2.2 背景颜色属性bgcolor 18


练习——设置网页背景颜色 18


2.2.3 背景图像属性background 19


练习——设置网页背景图像 19


2.2.4 文字属性text 20


练习——设置网页文字默认颜色 20


2.2.5 默认链接属性link 21


练习——设置网页中超链接文字的默认颜色 21


2.3 在HTML代码中添加注释 22


2.4 本章小结 23


2.5 课后习题 23


第3章 HTML中基础标签的应用 24


3.1 文字设置标签 24


3.1.1 标签 24


练习——使用标签设置网页文字效果 25


3.1.2 和标签实现文字加粗 26


3.1.3 和标签实现文字倾斜 26


3.1.4 标签实现文字下画线 26


练习——为文字添加加粗、倾斜和下画线修饰 27


3.1.5 其他文字修饰标签 28


练习——为文字添加上标和删除线 28


3.2 分行与分段标签 29


3.2.1 使用
标签为文本分行 29


练习——为网页中的文本进行分行处理 29


3.2.2 使用标签为文本分段 31


练习——为网页中的文本进行分段处理 31


3.2.3 至标签 31


练习——设置文本标题 32


3.2.4 标签 32


练习——在网页中插入水平线 33


3.2.5 文本对齐设置 33


练习——设置网页文本对齐 34


3.2.6 在HTML中插入空格和特殊字符 35


练习——在网页中输入空格和特殊字符 35


3.3 图片标签设置 36


3.3.1 标签 36


练习——在网页中插入图片 37


3.3.2 图文混排 38


练习——制作图文介绍页面 38


3.4 列表标签设置 39


3.4.1 使用标签创建项目列表 40


练习——制作新闻列表 40


3.4.2 使用标签创建编号列表 41


练习——制作编号有序列表 41


3.4.3 使用标签创建定义列表 43


练习——制作复杂的新闻列表 43


3.5 超链接标签设置 44


3.5.1 超链接标签 44


3.5.2 相对链接和绝对链接 45


练习——在网页中创建超链接 45


3.5.3 网页中的特殊超链接 46


练习——在网页中创建特殊超链接 46


3.5.4 超链接标签中的其他属性设置 48


3.6 表格标签设置 49


3.6.1 表格的基本构成、和标签 49


3.6.2 表格标题标签 49


练习——创建数据表格 50


3.6.3 表头、表主体和表尾标签 51


练习——设置表格中的表头、表主体和表尾 51


3.7 本章小结 52


3.8 课后习题 53


第4章 HTML中表单标签的应用 54


4.1 了解HTML中的表单 54


4.1.1 表单的作用 54


4.1.2 标签 54


4.1.3 表单的数据传递方式 55


4.2 普通的HTML表单元素 55


4.2.1 文本域 55


4.2.2 密码域 55


4.2.3 文本区域 56


4.2.4 隐藏域 56


4.2.5 复选框 56


4.2.6 单选按钮 56


4.2.7 选择域 56


4.2.8 文件域 57


4.2.9 按钮 57


4.2.10 图像域 57


练习——制作登录表单 58


4.3 HTML5新增表单输入类型 61


4.3.1 url类型 61


4.3.2 email类型 61


4.3.3 range类型 61


4.3.4 number类型 61


4.3.5 tel类型 62


4.3.6 search类型 62


4.3.7 color类型 62


4.3.8 date类型 62


4.3.9 month、week、time、datetime、datetime-local类型 63


练习——制作留言表单页面 63


4.3.10 浏览器对HTML5表单的支持情况 65


4.4 HTML5新增表单属性 65


4.4.1 form属性 66


4.4.2 formaction属性 66


4.4.3 formmethod、formenctype、formnovalidate、formtarget属性 66


4.4.4 placeholder属性 66


4.4.5 autofocus属性 67


练习——为表单元素设置默认提示内容 67


4.4.6 autocomplete属性 68


4.5 使用HTML5表单验证 68


4.5.1 与验证有关的表单元素属性 68


练习——验证网页表单元素 69


4.5.2 表单验证方法 70


4.5.3 表单验证事件 72


4.6 本章小结 73


4.7 课后习题 73


第5章 HTML中多媒体标签的应用 74


5.1 使用标签 74


5.1.1 使用标签嵌入音频 74


练习——在网页中嵌入音频 75


5.1.2 使用标签嵌入视频 75


练习——在网页中嵌入视频 76


5.2 了解HTML5中多媒体的应用 76


5.2.1 在线多媒体的发展 77


5.2.2 检查浏览器是否支持和标签 77


5.3 HTML5新增标签的应用 77


5.3.1 标签所支持的音频格式 77


5.3.2 使用标签 77


练习——在网页中嵌入音频播放 78


5.4 HTML5新增标签的应用 79


5.4.1 标签所支持的视频格式 79


5.4.2 使用标签 79


练习——在网页中嵌入视频播放 79


5.4.3 使用标签 80


5.5 与标签的属性 81


5.5.1 元素的标签属性 81


5.5.2 元素的接口属性 82


练习——实现网页中视频的快进控制 83


5.6 与标签的接口方法 84


练习——控制网页中视频的播放和暂停 85


5.7 与标签的事件 86


练习——自定义视频播放控制组件 87


5.8 本章小结 91


5.9 课后习题 91


第6章 HTML5中标签的应用 93


6.1 标签 93


6.1.1 了解标签 93


6.1.2 在网页中使用标签 93


6.1.3 使用标签实现绘图的流程 94


6.2 绘制基本图形 95


6.2.1 绘制直线 95


练习——在网页中绘制直线 95


6.2.2 绘制矩形 96


练习——在网页中绘制矩形 97


6.2.3 绘制圆形 98


练习——在网页中绘制圆形 99


6.2.4 绘制三角形 100


练习——在网页中绘制三角形 100


6.2.5 图形组合 102


6.3 绘制文本 103


6.3.1 使用文本 103


练习——在网页中绘制文字 104


6.3.2 创建对象阴影 105


练习——为网页中所绘制文字添加阴影 105


6.4 在网页中实现特殊形状图像 106


6.4.1 绘制图像 106


练习——在网页中绘制图像 107


6.4.2 裁切区域 108


练习——在网页中实现圆形图像效果 108


6.5 本章小结 110


6.6 课后习题 110


第7章 HTML5中文档结构标签的应用 111


7.1 构建HTML5页面主体内容 111


7.1.1 文章标签 111


7.1.2 章节标签 113


7.1.3 导航标签 115


7.1.4 辅助内容标签 116


7.1.5 日期时间标签 117


7.2 HTML5文档中的语义模块标签 117


7.2.1 标题标签 117


7.2.2 标题分组标签 118


7.2.3 页脚标签 119


7.2.4 联系信息标签 120


7.3 制作HTML5文章页面 121


练习——制作HTML5文章页面 121


7.4 本章小结 125


7.5 课后习题 125


第二篇 CSS样式


第8章 CSS样式基础 127


8.1 了解CSS样式 127


8.1.1 什么是CSS样式 127


8.1.2 CSS样式的发展 127


8.2 CSS样式语法 128


8.2.1 CSS样式的基本语法 128


8.2.2 CSS规则构成 129


8.3 CSS样式选择器 130


8.3.1 通配选择器 130


8.3.2 标签选择器 130


练习——创建通配选择器和标签选择器 130


8.3.3 ID选择器 132


8.3.4 类选择器 132


练习——创建ID选择器和类选择器 132


8.3.5 伪类和伪对象选择器 135


练习——创建并应用超链接伪类样式 136


8.3.6 群组选择器 137


8.3.7 派生选择器 137


练习——在网页中创建并应用群组和派生CSS样式 138


8.4 在网页中应用CSS样式的4种方式 139


8.4.1 内联CSS样式 139


8.4.2 内部CSS样式 140


8.4.3 外部CSS样式 140


练习——创建并链接外部CSS样式表文件 141


8.4.4 导入外部CSS样式 143


8.5 CSS样式的特性 144


8.5.1 CSS样式的继承性 144


8.5.2 CSS样式的特殊性 144


8.5.3 CSS样式的层叠性 145


8.5.4 CSS样式的重要性 145


8.6 本章小结 145


8.7 课后习题 145


第9章 CSS布局 147


9.1 创建Div 147


9.1.1 了解Div 147


9.1.2 如何插入Div 148


9.1.3 块元素与行内元素 149


9.2 CSS盒模型 150


9.2.1 什么是CSS盒模型 150


9.2.2 CSS盒模型的特性 151


9.2.3 margin属性——边距 151


9.2.4 border属性——边框 151


9.2.5 padding属性——填充 151


练习——设置网页元素盒模型 152


9.3 网页元素定位属性 154


9.3.1 position属性——元素定位 154


9.3.2 网页元素相对定位 155


练习——实现网页元素的叠加显示 155


9.3.3 网页元素绝对定位 156


练习——网页元素固定在右侧显示 156


9.3.4 网页元素固定定位 157


练习——实现固定位置的导航菜单 157


9.3.5 网页元素浮动定位 159


练习——制作顺序排列的图像列表 159


9.4 网页常用布局方式 161


9.4.1 居中的布局 162


9.4.2 浮动的布局 163


9.4.3 自适应高度的解决方法 168


9.5 本章小结 169


9.6 课后习题 169


第10章 CSS样式属性详解 170


10.1 使用CSS设置文字样式 170


10.1.1 font-family属性——字体 170


10.1.2 font-size属性——字体大小 170


10.1.3 color属性——字体颜色 171


练习——设置网页文字基本效果 171


10.1.4 font-weight属性——字体粗细 173


10.1.5 font-style属性——字体样式 173


练习——设置网页文字的加粗和倾斜效果 174


10.1.6 text-transform属性——英文字体大小写 175


练习——设置网页中英文字体大小写 175


10.1.7 text-decoration属性——文字修饰 177


练习——为网页文字添加修饰 177


10.1.8 letter-spacing属性——字符间距 178


练习——设置中文字符间距 179


10.2 使用CSS设置段落样式 179


10.2.1 line-height属性——行间距 179


10.2.2 text-indent属性——段落首行缩进 180


练习——美化网页中的段落文本 180


10.2.3 text-align属性——文本水平对齐 181


练习——设置文本水平对齐 181


10.2.4 vertical-align属性——文本垂直对齐 183


练习——设置文本垂直对齐 183


10.3 使用CSS设置背景颜色和背景图像 185


10.3.1 background-color属性——背景颜色 185


10.3.2 background-image属性——背景图像 185


10.3.3 background-repeat属性——背景图像平铺方式 185


练习——设置网页背景效果 186


10.3.4 background-position属性——背景图像位置 188


练习——定位网页中的背景图像 188


10.3.5 background-attachment属性——背景图像固定 190


练习——固定网页中的背景图像 190


10.4 使用CSS设置列表样式 191


10.4.1 list-style-type属性——设置列表符号 191


练习——设置新闻列表效果 191


10.4.2 list-style-image属性——自定义列表符号 192


练习——自定义新闻列表符号 192


10.4.3 设置定义列表 194


练习——制作复杂新闻列表 194


10.5 使用CSS设置边框样式 195


10.5.1 border-width属性——边框宽度 195


10.5.2 border-style属性——边框样式 195


10.5.3 border-color属性——边框颜色 196


练习——为网页元素添加边框效果 196


10.6 超链接CSS样式伪类 197


10.6.1 :link伪类 197


10.6.2 :hover伪类 198


10.6.3 :active伪类 198


10.6.4 :visited伪类 199


练习——设置网页中超链接文字效果 199


10.6.5 按钮式超链接 202


练习——制作网站导航菜单 202


10.7 cursor属性——光标指针效果 204


练习——在网页中实现多种光标指针效果 204


10.8 本章小结 206


10.9 课后习题 206


第11章 CSS3.0新增属性详解 207


11.1 了解CSS3.0 207


11.1.1 CSS3.0的发展 207


11.1.2 浏览器对CSS3.0的支持情况 207


11.1.3 了解CSS3.0的全新功能 208


11.2 CSS3.0颜色设置方式 208


11.2.1 RGBA颜色值 208


练习——使用RGBA设置半透明背景颜色 209


11.2.2 HSL和HSLA颜色值 209


练习——使用HSLA设置半透明背景颜色 210


11.2.3 transparent颜色值 211


11.3 CSS3.0新增文字设置属性 211


11.3.1 text-overflow属性——文本溢出处理 211


练习——设置网页中溢出文本的处理方式 212


11.3.2 word-wrap和word-break属性——控制文本换行 213


练习——控制英文内容强制换行 213


11.3.3 text-shadow属性——文本阴影 214


练习——为网页文本添加阴影效果 215


11.3.4 @font-face规则——使用服务器端字体 215


练习——在网页中使用特殊字体 216


11.4 CSS3.0新增背景设置属性 217


11.4.1 线性渐变背景颜色 217


练习——为网页设置线性渐变背景颜色 218


11.4.2 径向渐变背景颜色 220


练习——为网页设置径向渐变背景颜色 221


11.4.3 background属性——设置多背景图像 222


练习——为网页设置多个背景图像 222


11.4.4 background-size属性——背景图像大小 223


练习——控制网页背景图像的大小 223


11.4.5 background-origin属性——背景图像原点 225


练习——控制背景图像开始显示的原点位置 226


11.4.6 background-clip属性——背景图像显示区域 226


练习——控制背景图像的显示区域 227


11.5 CSS3.0新增边框设置属性 228


11.5.1 border-colors属性——多重边框颜色 228


练习——实现网页元素多色彩边框效果 228


11.5.2 border-image属性——图像边框 229


练习——为网页元素添加图像边框效果 230


11.5.3 border-radius属性——圆角边框 231


练习——在网页中实现圆角边框效果 231


11.6 CSS3.0新增多列布局属性 233


11.6.1 columns属性——多列布局 233


练习——将网页内容分为多列 233


11.6.2 column-width属性——列宽度 234


11.6.3 column-count属性——列数 234


11.6.4 column-gap属性——列间距 234


11.6.5 column-rule属性——列分隔线 235


11.6.6 column-span属性——横跨所有列 235


练习——实现网页内容的分栏显示效果 235


11.7 CSS3.0新增其他属性 237


11.7.1 opaity属性——元素不透明度 237


练习——设置网页元素的半透明效果 238


11.7.2 box-shadow属性——元素阴影 239


练习——为网页元素添加阴影效果 239


11.7.3 resize属性——改变元素尺寸 240


练习——实现网页元素尺寸任意缩放 241


11.7.4 outline属性——轮廓外边框 242


练习——为网页元素添加轮廓外边框 243


11.7.5 appearance属性——伪装的元素 244


练习——将超链接文字伪装成按钮 245


11.7.6 content属性——为元素赋予内容 246


练习——为网页元素赋予文字内容 246


11.8 本章小结 247


11.9 课后习题 247


第12章 使用CSS3.0实现动画效果 248


12.1 实现元素变形 248


12.1.1 transform属性 248


12.1.2 使用rotate()函数实现元素旋转 248


练习——实现网页元素的旋转变形效果 249


12.1.3 使用scale()函数实现元素缩放和翻转变形 250


练习——实现网页元素的缩放和翻转效果 250


12.1.4 使用translate()函数实现元素移动 251


练习——实现网页元素的移动效果 251


12.1.5 使用skew()函数实现元素倾斜 253


练习——实现网页元素的倾斜效果 253


12.1.6 使用matrix()函数实现元素矩阵变形 254


练习——实现网页元素的矩阵变形效果 254


12.1.7 定义变形中心点 255


练习——设置网页元素的变形中心点 256


12.1.8 同时使用多个变形函数 257


练习——为网页元素同时应用多个变形效果 257


12.2 CSS3.0实现过渡动画效果 258


12.2.1 transition属性 258


12.2.2 transition-property属性——实现过渡效果 259


练习——实现网页元素旋转并放大动画 259


12.2.3 transition-duration属性——设置过渡时间 260


练习——设置网页元素变形动画持续时间 260


12.2.4 transition-delay属性——实现过渡延迟效果 262


练习——设置网页元素变形动画延迟时间 262


12.2.5 transition-timing-function属性——设置过渡方式 263


练习——设置网页元素变形动画过渡方式 263


12.3 本章小结 264


12.4 课后习题 264


第三篇 jQuery Mobile页面


第13章 初识jQuery Mobile 266


13.1 jQuery入门 266


13.1.1 什么是jQuery 266


13.1.2 如何引用jQuery函数库 267


13.1.3 jQuery基本语法 267


13.1.4 jQuery选择器 268


13.1.5 使用jQuery设置CSS样式属性 269


练习——使用jQuery改变CSS样式效果 269


13.2 jQuery Mobile基础 270


13.2.1 什么是jQuery Mobile 270


13.2.2 jQuery Mobile的优势 271


13.3 jQuery Mobile页面开发前的准备工作 271


13.3.1 如何测试所制作的移动页面 271


13.3.2 加载jQuery Mobile函数库文件 273


13.4 认识jQuery Mobile页面结构 274


13.4.1 创建jQuery Mobile页面 274


练习——创建jQuery Mobile页面 274


13.4.2 jQuery Mobile页面的基本架构 276


13.4.3 多容器jQuery Mobile页面 277


13.5 jQuery Mobile页面的基本操作 277


13.5.1 jQuery Mobile页面中多容器之间的链接 277


练习——创建jQuery Mobile页面多容器之间链接 278


13.5.2 链接外部jQuery Mobile页面 280


练习——链接外部jQuery Mobile页面 280


13.5.3 预加载jQuery Mobile页面 282


13.5.4 页面缓存 282


练习——在jQuery Mobile页面中实现预加载和缓存 283


13.5.5 在jQuery Mobile页面中实现后退功能 283


练习——在jQuery Mobile页面中实现后退功能 284


13.5.6 弹出对话框 285


练习——以弹出窗口方式显示链接内容 285


13.6 本章小结 287


13.7 课后习题 287


第14章 jQuery Mobile页面详解 288


14.1 头部栏 288


14.1.1 头部栏的基本结构 288


14.1.2 设置后退按钮的文字 289


14.1.3 添加按钮 290


练习——在jQuery Mobile页面头部栏中添加按钮 290


14.1.4 设置按钮位置 293


14.2 导航栏 294


14.2.1 导航栏的基本结构 295


练习——在jQuery Mobile页面中创建导航栏 295


14.2.2 导航栏的图标 297


14.2.3 设置导航栏图标位置 299


14.3 尾部栏 300


14.3.1 添加按钮 300


练习——在jQuery Mobile页面尾部栏中添加按钮 300


14.3.2 添加表单元素 301


练习——在jQuery Mobile页面尾部栏中添加下拉列表 302


14.4 jQuery Mobile页面正文内容处理 303


14.4.1 jQuery Mobile布局网格 303


练习——创建布局网格 303


14.4.2 可折叠区块 305


练习——创建可折叠内容 306


14.4.3 嵌套可折叠区块 307


14.4.4 可折叠区块组 308


练习——创建可折叠区块组 308


14.5 本章小结 309


14.6 课后习题 309


第15章 使用jQuery Mobile页面组件和主题 311


15.1 列表组件 311


15.1.1 无序列表 311


练习——在jQuery Mobile页面中创建列表 311


15.1.2 有序列表 312


15.1.3 分割列表选项 313


练习——分割jQuery Mobile页面中的列表选项 313


15.1.4 列表选项分组 315


练习——实现列表选项的分组 315


15.1.5 开启或禁用列表项中的图标 317


练习——开启或禁用列表项中的图标 317


15.1.6 图标与计数器 319


练习——为列表项添加图标和计数器 319


15.1.7 列表项内容格式化处理 320


练习——列表项内容的格式化处理 321


15.2 按钮组件 323


15.2.1 使用按钮组件 323


练习——在jQuery Mobile页面中添加按钮 323


15.2.2 使用按钮组 325


练习——在jQuery Mobile页面中使用按钮组 325


15.3 表单组件 326


15.3.1 文本输入框 326


练习——在jQuery Mobile页面添加不同类型输入框 326


15.3.2 滑块 327


练习——使用滑块修改页面元素的背景颜色 327


15.3.3 翻转切换开关 328


15.3.4 单选按钮 328


练习——制作投票表单 329


15.3.5 复选框 330


练习——制作调查表单 330


15.3.6 选择菜单 331


15.3.7 多项选择菜单 333


15.4 关于jQuery Mobile页面主题 334


15.4.1 什么是jQuery Mobile页面主题 334


15.4.2 jQuery Mobile页面主题的特点 334


15.4.3 默认的jQuery Mobile页面主题 335


练习——应用jQuery Mobile页面的默认主题 335


15.4.4 如何修改默认的jQuery Mobile页面主题 336


练习——修改jQuery Mobile页面的默认效果 336


15.5 自定义jQuery Mobile页面主题 338


15.5.1 自定义jQuery Mobile页面背景 338


练习——自定义jQuery Mobile页面背景 338


15.5.2 自定义jQuery Mobile页面工具栏 341


练习——自定义jQuery Mobile页面工具栏 341


15.5.3 自定义jQuery Mobile页面内容区域 343


练习——自定义可折叠区块主题 344


15.6 本章小结 345


15.7 课后习题 345


第16章 使用jQuery Mobile页面事件 346


16.1 应用jQuery Mobile事件 346


16.1.1 页面显示/隐藏事件 346


16.1.2 加载外部页面事件 347


16.1.3 页面切换事件 347


练习——设置jQuery Mobile页面切换过渡动画效果 348


16.1.4 触摸事件 350


练习——使用触摸事件实现滑动屏幕浏览图片 351


16.1.5 滚动屏幕事件 354


练习——使用滚动屏幕事件改变元素的背景颜色 354


16.1.6 屏幕翻转事件 357


练习——通过屏幕翻转事件判断移动设备方向 357


16.2 jQuery Mobile页面的设置技巧 361


16.2.1 固定页面头部栏与尾部栏 361


练习——固定jQuery Mobile页面中头部栏和尾部栏的位置 361


16.2.2 随机显示页面背景 362


练习——随机显示jQuery Mobile页面的背景图片 362


16.3 本章小结 366


16.4 课后习题 366


第17章 移动端应用开发实战 367


17.1 移动APP引导页面 367


17.1.1 功能分析 367


17.1.2 制作步骤 368


练习——制作移动APP引导页面 368


17.2 电商APP页面 374


17.2.1 功能分析 374


17.2.2 制作电商APP页面 375


练习——制作电商APP页面 375


17.2.3 制作侧边导航菜单 381


练习——制作侧边导航菜单 381


17.3 可滑动操作的移动页面 386


17.3.1 功能分析 386


17.3.2 制作可滑动切换的背景 386


练习——制作可滑动切换的背景 386


17.3.3 制作可滑动底部导航栏 389


练习——制作可滑动底部导航栏 389


17.4 本章小结 393


17.5 课后习题 393
























推荐

车牌查询
桂ICP备20004708号-3