| 作者 |
| 新视角文化行 |
| 丛书名 |
| 出版社 |
| 人民邮电出版社 |
| ISBN |
| 9787115485007 |
| 简要 |
| 简介 |
| 内容简介书籍计算机书籍 本书全面、系统地讲解了HTML5、CSS3和jQuery Mobile相关知识,并涵盖从Web界面设计到移动应用开发的各种技术和知识点,内容由浅入深,讲解通俗易懂,并在知识点介绍过程中配合大量案例进行讲解,以帮助读者提高实战技能。 本书共19章,分为3个部分。第一部分是第1~7章,介绍了HTML5各方面的知识点,重点介绍了文本、图像、canvas元素、音频、视频和新型表单等内容;第二部分是第8~14章,主要介绍了CSS3样式各属性的设置和使用方法,重点介绍了CSS3中新增的弹性盒模型、多列布局、动画效果和渐变填充等内容;第三部分是第15~19章,主要介绍了jQuery Mobile的相关知识,重点介绍了jQuery Mobile的页面、主题、组件、事件和插件等内容,并通过实际案例讲解了综合运用HTML5、CSS3和jQuery Mobile开发移动应用的方法和技巧。 本书配套下载资源中提供了所有实例的源文件和素材,以及相关的教学视频,适合Web设计与开发的初学者和爱好者自学使用,也适合有一定Web前端开发基础的网页开发人员阅读,同时还可作为计算机培训班和各院校相关专业的教辅用书。 |
| 目录 |
| 第 1章 从HTML到HTML5 15 1.1 HTML基础 15 1.1.1 HTML概述 15 1.1.2 HTML特性 16 1.1.3 HTML文档结构 16 1.1.4 HTML的基本语法 17 1.1.5 HTML编写注意事项 17 1.2 HTML5基础 18 1.2.1 HTML5概述 18 1.2.2 HTML5文档结构 18 1.2.3 HTML5的优势 19 1.2.4 HTML5精简的头部 20 1.3 HTML文件的编写方式 20 1.3.1 使用记事本编写 20 实战 使用记事本制作HTML页面 20 1.3.2 使用Dreamweaver编写 22 实战 使用Dreamweaver制作HTML页面 23 1.4 HTML5中的标签 25 1.5 关于移动Web应用 28 1.5.1 移动Web应用的发展 28 1.5.2 基于Web的应用开发 28 1.5.3 基于HTML5的移动应用 29 1.5.4 移动应用开发框架 29 1.6 本章小结 30 第 2章 HTML5文字与段落标签 31 2.1 设置文字效果 31 2.1.1 文字样式<font>标签 31 实战 使用<font>标签设置网页文字效果 33 2.1.2 文字加粗<b>和<strong>标签 34 2.1.3 文字倾斜<i>和<em>标签 34 2.1.4 文字下划线#<u>标签 34 实战 为文字添加加粗、倾斜和下划线修饰 35 2.1.5 其他文字修饰标签 36 实战 为文字添加上标和删除线 36 2.2 设置段落效果 37 2.2.1 文本分段<p>标签 37 2.2.2 文本分行 标签 37 实战 为网页中的文本进行分段和分行处理 38 2.2.3 标签<h1>至<h6>标签 39 实战 设置网页文本标题 39 2.2.4 水平线<hr>标签 40 实战 在网页中插入水平线 40 2.2.5 文本对齐设置 41 实战 设置网页文本的对齐 41 2.3 创建列表 42 2.3.1 使用<ul>标签创建项目列表 42 实战 制作新闻列表 43 2.3.2 使用<ol>标签创建编号列表 43 实战 制作编号有序列表 44 2.3.3 使用<dl>标签创建定义列表 44 实战 制作复杂的新闻列表 45 2.4 本章小结 46 第3章 HTML5文档结构标签 47 3.1 认识HTML5文档结构 47 3.2 HTML5页面主体内容标签 49 3.2.1 标识文章<article>标签 49 3.2.2 标识章节<section>标签 51 3.2.3 标识导航<nav>标签 53 3.2.4 标识辅助内容<aside>标签 54 3.2.5 标识文章发布日期<time>标签 55 3.3 页面语义模块标签 55 3.3.1 页眉<header>标签 55 3.3.2 标题分组<hgroup>标签 56 3.3.3 页脚<footer>标签 57 3.3.4 联系信息<address>标签 58 3.4 制作文章页面 58 实战 制作设计网站首页面 59 3.5 本章小结 64 第4章 HTML5图像与超链接标签 65 4.1 了解网页中的图像格式 65 4.1.1 网页常用图像格式 65 4.1.2 选择合适的图像格式 66 4.2 插入图像并设置图像属性 67 4.2.1 图像<img>标签 67 实战 在网页中插入图像 67 4.2.2 图像属性设置 68 实战 制作图文混排页面 69 4.3 创建超链接 70 4.3.1 使用<a>标签创建超链接 70 4.3.2 超链接打开方式target属性 70 4.3.3 相对链接和绝对链接 70 实战 为文字和图像设置超链接 71 4.4 创建特殊链接 72 4.4.1 空链接 72 4.4.2 文件下载链接 72 4.4.3 锚点链接 72 4.4.4 脚本链接 73 4.4.5 E-mail链接 73 实战 在网页中创建特殊超链接 73 4.5 本章小结 75 第5章 使用HTML5中的表单元素 76 5.1 关于表单 76 5.1.1 表单域<form>标签 76 5.1.2 <form>标签属性设置 77 5.2 传统表单元素 78 5.2.1 文本域 78 5.2.2 密码域 79 5.2.3 文本区域 79 5.2.4 隐藏域 79 5.2.5 复选框 79 5.2.6 单选按钮 80 5.2.7 选择域 80 5.2.8 文件域 80 5.2.9 按钮 80 5.2.10 图像域 81 实战 制作网站登录表单 81 5.3 关于HTML5新增表单元素 84 5.3.1 HTML5表单的优势 85 5.3.2 浏览器对HTML5表单的支持情况 85 5.3.3 新增表单输入类型 85 实战 制作留言表单页面 88 5.3.4 新增其他表单元素 90 5.4 HTML5新增表单属性 91 5.4.1 form属性 91 5.4.2 formaction属性 91 5.4.3 formmethod、formenctype、formnovalidate、formtarget属性 91 5.4.4 placeholder属性 91 实战 为表单元素设置默认提示内容 92 5.4.5 autofocus属性 93 5.4.6 autocomplete属性 93 5.5 HTML5提供的表单验证属性 93 5.5.1 required属性 93 5.5.2 pattern属性 93 5.5.3 min、max和step属性 94 5.5.4 novalidate属性 94 实战 验证网页中的表单元素 94 5.6 本章小结 95 第6章 使用HTML5画布元素 96 6.1 HTML5新增canvas元素 96 6.1.1 了解canvas元素 96 6.1.2 在网页中插入canvas元素 97 6.1.3 如何使用canvas元素实现绘图 97 6.2 绘制基本图形 98 6.2.1 绘制直线 98 实战 在网页中绘制直线 99 6.2.2 绘制矩形 100 实战 在网页中绘制矩形 101 6.2.3 绘制圆形 102 实战 在网页中绘制圆形 103 6.2.4 绘制三角形 104 实战 在网页中绘制三角形 104 6.2.5 绘制曲线 105 实战 在网页中绘制曲线 107 6.2.6 清除图形 108 实战 清除使用canvas元素所绘制的部分图形 108 6.3 绘制文本 109 6.3.1 使用文本 109 6.3.2 获取文字宽度 110 实战 在网页中绘制文字并获取文字宽度 110 6.4 图形的组合与裁切 112 6.4.1 图形组合 112 6.4.2 使用图像 113 实战 使用canvas元素在网页中绘制图像 114 6.4.3 使用图像模式 115 实战 设置图像平铺效果 115 6.4.4 裁切路径 116 实战 在网页中实现圆形裁切图像效果 117 6.5 图形颜色与样式设置 118 6.5.1 绘制线性渐变 118 实战 在网页中绘制矩形并填充线性渐变 119 6.5.2 绘制径向渐变 120 实战 在网页中绘制圆形并填充径向渐变 120 6.5.3 创建对象阴影 121 实战 为图形和文字添加阴影效果 122 6.6 本章小结 123 第7章 HTML5音频与视频标签 124 7.1 HTML5多媒体基础 124 7.1.1 在线多媒体的发展 124 7.1.2 HTML5音频和视频优势 125 7.1.3 HTML5音频和视频的不足 125 7.1.4 检查浏览器是否支持HTML5音频和视频 126 7.2 使用HTML5音频 126 7.2.1 <audio>标签所支持的音频格式 126 7.2.2 使用<audio>标签 126 实战 在网页中嵌入音频播放 127 7.3 使用HTML5视频 127 7.3.1 <video>标签所支持的视频格式 128 7.3.2 使用<video>标签 128 实战 在网页中嵌入视频播放 128 7.3.3 使用<source>标签 129 7.4 <audio>与<video>标签的属性 130 7.4.1 标签属性 130 7.4.2 元素的接口属性 131 实战 实现网页中视频的快进 133 7.5 <audio>与<video>标签的方法和事件 134 7.5.1 接口方法 134 实战 控制视频的播放与暂停 134 7.5.2 接口事件 135 7.5.3 接口事件的使用方法 137 7.5.4 自定义视频播放控制组件 137 实战 自定义视频播放控制组件 137 7.6 本章小结 141 第8章 CSS样式的发展与选择器 142 8.1 CSS样式的发展 142 8.1.1 使用CSS样式的优势 142 8.1.2 CSS1与CSS2概述 143 8.1.3 全新的CSS3 143 8.1.4 浏览器对CSS3的支持情况 143 8.2 CSS样式语法 144 8.2.1 CSS样式基本语法 144 8.2.2 CSS样式规则构成 145 8.2.3 应用CSS样式的4种方式 145 实战 创建并链接外部CSS样式表文件 147 8.3 CSS选择器 149 8.3.1 通配选择器 149 8.3.2 标签选择器 150 实战 创建通配选择器和标签选择器 150 8.3.3 ID选择器 151 8.3.4 类选择器 152 实战 创建ID选择器和类选择器 152 8.3.5 伪类和伪对象选择器 154 实战 创建超链接伪类选择器 155 8.3.6 群组选择器 156 8.3.7 派生选择器 156 实战 创建派生选择器 157 8.4 CSS3新增选择器 158 8.4.1 属性选择器 158 实战 在网页中使用属性选择器 159 8.4.2 结构伪类选择器 160 8.4.3 UI元素状态伪类选择器 160 8.4.4 伪元素选择器 161 实战 在网页中使用伪元素选择器 161 8.5 本章小结 162 第9章 设置文字与段落样式 163 9.1 文字样式 163 9.1.1 字体—font-family属性 163 9.1.2 字体大小—font-size属性 164 9.1.3 字体颜色—color属性 164 实战 设置网页文字基本效果 164 9.1.4 字体粗细—font-weight属性 166 9.1.5 字体样式—font-style属性 166 实战 设置网页文字的加粗和倾斜效果 166 9.1.6 英文字体大小写—text-transform属性 167 实战 设置网页中英文字体大小写 168 9.1.7 文字修饰效果—text-decoration属性 169 实战 为网页文字添加修饰 169 9.1.8 字符间距—letter-spacing属性 170 实战 设置中文字符间距 170 9.2 CSS3新增文本样式属性 171 9.2.1 文本溢出处理—text-overflow属性 171 实战 控制文本溢出效果 171 9.2.2 文本换行—word-wrap和word-break属性 172 实战 控制英文内容强制换行 173 9.2.3 文字阴影—text-shadow属性 174 实战 为网页文字添加阴影效果 174 9.2.4 服务器端字体—@font-face规则 175 实战 在网页中实现特殊字体效果 175 9.3 段落样式 177 9.3.1 行间距—line-height属性 177 9.3.2 段落首行缩进—text-indent属性 177 实战 美化网页中的段落文字 177 9.3.3 水平对齐方式—text-align属性 178 实战 设置文本水平对齐 179 9.3.4 垂直对齐方式—vertical-align属性 179 实战 设置文本垂直对齐 180 9.4 列表样式 181 9.4.1 列表符号—list-style-type属性 181 实战 设置新闻列表效果 182 9.4.2 自定义列表符号—list-style-image属性 183 实战 自定义新闻列表符号 183 9.4.3 定义列表样式 184 实战 设置复杂新闻列表效果 184 9.5 本章小结 185 第 10章 设置背景样式 186 10.1 背景颜色—background-color属性 186 实战 为网页元素设置背景颜色 187 10.2 CSS3新增颜色设置 187 10.2.1 RGBA颜色值 187 实战 使用RGBA方式设置背景颜色 188 10.2.2 HSL颜色值 188 10.2.3 HSLA颜色值 189 实战 使用HSLA方式设置背景颜色 189 10.2.4 元素不透明度—opacity 属性 190 实战 实现网页元素的半透明效果 190 10.2.5 transparent颜色值 191 10.3 CSS3新增渐变背景 191 10.3.1 线性渐变背景 191 实战 为网页设置线性渐变背景颜色 192 10.3.2 径向渐变背景 194 实战 为网页设置径向渐变背景颜色 195 10.4 背景图像样式 195 10.4.1 背景图像—background-image属性 196 10.4.2 背景图像平铺方式—background-repeat属性 196 实战 为网页设置背景图像 196 10.4.3 背景图像位置—background- position属性 198 实战 定位网页中的背景图像 199 10.4.4 背景图像固定—background-attachment属性 200 实战 固定网页中的背景图像 200 10.5 CSS3新增背景属性 201 10.5.1 多背景图像—background属性 201 实战 为网页设置多个背景图像 201 10.5.2 背景图像大小—background-size属性 202 实战 控制背景图像的大小 202 10.5.3 背景图像原点—background-origin属性 204 实战 控制背景图像开始显示的原点位置 204 10.5.4 背景图像显示区域—background-clip属性 205 实战 控制背景图像的显示区域 205 10.6 本章小结 206 第 11章 设置超链接和边框样式 207 11.1 超链接样式伪类 207 11.1.1 :link伪类 207 11.1.2 :hover伪类 208 11.1.3 :active伪类 208 11.1.4 :visited伪类 209 实战 设置网页中超链接文字效果 209 11.1.5 按钮式超链接 212 实战 制作网站导航菜单 212 11.2 鼠标指针样式 213 11.2.1 鼠标指针效果—cursor属性 214 11.2.2 设置网页中鼠标效果 214 实战 在网页中实现多种鼠标指针效果 214 11.3 边框样式 215 11.3.1 边框宽度—border-width属性 215 11.3.2 边框样式—border-style属性 216 11.3.3 边框颜色—border-color属性 216 实战 为网页元素添加边框效果 216 11.4 CSS3新增边框属性 218 11.4.1 多边框颜色—border-color属性 218 实战 实现网页元素多色彩边框效果 218 11.4.2 图像边框—border-image属性 219 实战 为网页元素添加图像边框效果 219 11.4.3 圆角边框—border-radius属性 220 实战 在网页中实现圆角边框效果 220 11.5 本章小结 221 第 12章 设置元素的定位与布局属性 222 12.1 元素定位样式 222 12.1.1 position属性 222 12.1.2 相对定位 223 实战 实现网页元素的叠加显示 223 12.1.3 绝对定位 224 实战 网页元素固定在右侧显示 224 12.1.4 固定定位 225 实战 实现网页元素显示在固定的位置 225 12.1.5 浮动定位—float属性 226 实战 制作顺序排列的图像列表 227 12.2 CSS3新增界面设计属性 229 12.2.1 改变元素尺寸—resize属性 229 实战 实现网页元素尺寸可任意缩放 229 12.2.2 轮廓外边框—outline属性 230 实战 为网页元素添加轮廓外边框 231 12.2.3 伪装元素—appearance属性 232 实战 将超链接文字伪装成按钮 233 12.2.4 赋予内容—content属性 233 实战 为网页元素赋予内容 234 12.3 CSS3新增多列布局属性 235 12.3.1 多列布局—columns属性 235 实战 快速将网页内容分为多列 235 12.3.2 列宽度—column-width属性 236 12.3.3 列数—column-count属性 236 12.3.4 列间距—column-gap属性 236 12.3.5 列分栏线—column-rule属性 237 12.3.6 横跨所有列—column-span属性 237 实战 实现网页内容的分栏显示效果 237 12.4 本章小结 239 第 13章 CSS3盒模型 240 13.1 传统CSS盒模型 240 13.1.1 什么是CSS盒模型 240 13.1.2 CSS盒模型要点 241 13.1.3 边距—margin属性 241 13.1.4 边框—border属性 242 13.1.5 填充—padding属性 242 实战 设置网页元素盒模型 242 13.2 CSS3弹性盒模型 244 13.2.1 开启弹性盒模型 245 13.2.2 布局方向—box-orient属性 246 13.2.3 布局顺序—box-direction属性 247 13.2.4 元素位置—box-ordinal-group属性 248 13.2.5 空间分配—box-flex属性 250 13.2.6 对齐方式—box-pack和box-align属性 251 13.2.7 实现网页元素水平和垂直居中对齐 251 实战 实现网页元素水平和垂直居中对齐 251 13.2.8 实现网页元素底部对齐 253 实战 实现网页元素底部对齐 253 13.3 增强的CSS3盒模型 254 13.3.1 元素阴影—box-shadow属性 254 实战 为网页元素添加阴影效果 254 13.3.2 元素尺寸大小—box-sizing属性 255 13.3.3 元素溢出处理—overflow-x和overflow-y属性 256 实战 设置内容溢出处理方式 256 13.4 本章小结 257 第 14章 CSS3动画效果 258 14.1 CSS3变换效果 258 14.1.1 transform属性 258 14.1.2 旋转 259 实战 实现网页元素的旋转 259 14.1.3 缩放 260 实战 实现网页元素的缩放和翻转 260 14.1.4 移动 261 实战 实现网页元素的移动 262 14.1.5 倾斜 263 实战 实现网页元素的倾斜效果 263 14.1.6 矩阵变形 264 14.1.7 定义变形中心点 264 实战 设置网页元素的变形中心点 265 14.1.8 同时使用多个变形函数 266 实战 为网页元素同时应用多个变形效果 266 14.2 CSS3变换过渡效果 267 14.2.1 transition属性 267 14.2.2 过渡效果—transition-property属性 268 14.2.3 过渡时间—transition-duration属性 268 14.2.4 过渡延迟时间—transition-delay属性 268 14.2.5 过渡方式—transition-timing-function属性 268 实战 设置网页元素的变换过渡动画效果 269 14.2.6 制作网页图片交互特效 271 实战 制作网页图片交互特效 271 14.3 CSS3动画效果 273 14.3.1 关键帧动画—@keyframes规则 274 14.3.2 animation属性—实现元素动画效果 274 实战 制作图片移动并旋转的关键帧动画 276 14.4 本章小结 277 第 15章 jQuery和jQuery Mobile基础 278 15.1 了解jQuery 278 15.1.1 jQuery概述 278 15.1.2 引用jQuery函数库的两种方法 279 15.1.3 jQuery基本语法 280 15.1.4 认识jQuery选择器 280 15.1.5 使用jQuery设置CSS样式属性 281 实战 使用jQuery改变列表第 一行效果 281 15.2 了解jQuery Mobile 282 15.2.1 jQuery Mobile概述 282 15.2.2 jQuery Mobile功能特点 283 15.2.3 jQuery Mobile的工作原理 283 15.3 jQuery Mobile操作流程 284 15.3.1 下载移动设备模拟器 284 15.3.2 加载jQuery Mobile函数库 285 15.3.3 创建jQuery Mobile页面 286 实战 制作第 一个jQuery Mobile页面 286 15.3.4 jQuery Mobile页面的基本架构 288 15.4 本章小结 289 第 16章 认识并创建jQuery Mobile页面 290 16.1 认识jQuery Mobile页面 290 16.1.1 多容器jQuery Mobile页面 290 16.1.2 jQuery Mobile页面链接 291 实战 创建jQuery Mobile页面多容器之间链接 291 16.1.3 链接外部jQuery Mobile页面 293 实战 链接外部jQuery Mobile页面 293 16.1.4 实现弹出对话框 294 实战 在jQuery Mobile页面中实现弹出对话框 295 16.2 jQuery Mobile页面头部栏 296 16.2.1 头部栏基本结构 296 16.2.2 在头部栏中添加后退按钮 296 16.2.3 在头部栏中添加其他功能按钮 298 实战 在头部栏中添加按钮实现页面跳转 298 16.2.4 设置按钮位置 300 16.3 jQuery Mobile页面导航栏 302 16.3.1 导航栏基本结构 302 实战 制作jQuery Mobile页面导航栏 302 16.3.2 为导航栏添加图标 304 16.3.3 设置导航栏图标位置 305 16.4 jQuery Mobile页面尾部栏 307 16.4.1 在尾部栏添加按钮 307 实战 制作jQuery Mobile页面尾部栏 307 16.4.2 添加表单元素 308 16.4.3 固定页面头部栏与尾部栏 309 实战 固定jQuery Mobile页面中头部栏和尾部栏的位置 309 16.5 jQuery Mobile页面内容区域 310 16.5.1 布局网格 310 实战 在jQuery Mobile页面中创建布局网格 310 16.5.2 可折叠区块 312 实战 在jQuery Mobile页面中创建可折叠内容 313 16.5.3 可折叠区块的嵌套 314 16.5.4 可折叠区块组 314 16.6 预加载和缓存jQuery Mobile页面 316 16.6.1 预加载jQuery Mobile页面 316 16.6.2 页面缓存 316 16.7 本章小结 316 第 17章 使用jQuery Mobile主题与组件 317 17.1 了解jQuery Mobile主题 317 17.1.1 了解主题 317 17.1.2 默认主题 318 实战 为页面应用默认主题效果 318 17.1.3 修改默认主题 319 17.2 自定义jQuery Mobile页面和工具栏主题 320 17.2.1 自定义页面主题 320 实战 制作APP欢迎页面背景 320 17.2.2 自定义工具栏主题 323 实战 设置APP欢迎页面工具栏 323 17.2.3 自定义内容主题 324 实战 为可折叠区块应用主题 324 17.3 按钮组件 325 17.3.1 内联按钮 325 实战 在jQuery Mobile页面中添加按钮 326 17.3.2 按钮组 327 实战 在jQuery Mobile页面中使用按钮组 327 17.4 列表组件 328 17.4.1 基本列表 328 17.4.2 有序列表 329 17.4.3 开启或禁用列表图标 329 17.4.4 对列表项进行分组 330 实战 制作餐厅列表页面 330 17.4.5 分割列表选项 334 17.4.6 图标与计数器 336 实战 为列表项添加图标和计数器 336 17.4.7 列表项内容格式化处理 337 实战 对列表项内容进行格式化处理 337 17.5 表单组件 339 17.5.1 文本输入组件 339 实战 制作移动APP登录界面 340 17.5.2 滑块 343 17.5.3 翻转切换开关 343 17.5.4 单选按钮 344 17.5.5 复选框 345 17.5.6 选择菜单 346 17.5.7 多项选择菜单 347 17.6 本章小结 348 第 18章 使用jQuery Mobile事件与插件 349 18.1 设置jQuery Mobile 349 18.2 使用jQuery Mobileg事件 351 18.2.1 加载外部页面事件 351 18.2.2 页面切换事件 351 实战 实现页面跳转的动画过渡效果 352 18.2.3 页面显示或隐藏事件 354 18.2.4 触摸事件 354 实战 通过滑动屏幕浏览图片 355 18.2.5 屏幕滚动事件 358 实战 滚动屏幕改变背景颜色 358 18.2.6 翻转事件 361 实战 判断移动设备手持方向 362 18.2.7 随机显示页面背景 363 实战 随机显示页面背景 363 18.3 使用jQuery Mobile插件 366 18.3.1 mmenu插件 366 实战 制作交互式侧边菜单 367 18.3.2 Mobiscroll插件 370 实战 实现滚动选择日期和时间 371 18.3.3 Camera插件 372 实战 在jQuery Mobile页面中实现焦点轮换图效果 373 18.3.4 Swipebox插件 375 实战 实现查看大图效果 375 18.4 本章小结 377 第 19章 移动应用制作实战 378 19.1 APP引导页面 378 19.1.1 功能分析 378 19.1.2 制作步骤 378 实战 制作APP引导页面 379 19.2 移动应用首页面 383 19.2.1 功能分析 383 19.2.2 制作可滑动的页面背景 383 实战 制作可滑动的页面背景 383 19.2.3 制作可滑动导航栏 386 实战 制作可滑动导航栏 386 19.3 电商APP界面 390 19.3.1 功能分析 390 19.3.2 制作启动页面 390 实战 制作电商APP启动页面 391 19.3.3 制作电商APP首页面 393 实战 制作电商APP首页面 393 19.4 本章小结 400 |