HTML5+CSS3+JavaScript前端开发基础

作品简介

本书面向Web前端开发初学者，全面系统地讲解了HTML5、CSS3、JavaScript基础知识和编程技巧，为使用各种流行的前端框架打下牢固的基础。本书分为25章，脚本内容包括JavaScript与ECMAScript基础；HTML5内容包括HTML基础、视频与音频、canvas、SVG、From、File、拖放与桌面通知、本地存储、Communication、Web Workers与Web SQL、WebSocket、地理位置、History等；CSS3内容包括CSS基础、选择器、插入内容、设置文本、设置图片与背景、设置表格与表单、超链接与鼠标样式、滤镜；*后一章为读者提供了两个实战案例。本书适合Web前端开发初学者及HTML5、CSS3、JavaScript初学者，也适合高等院校和培训学校相关专业的师生参考使用。

王刚，毕业于西安理工大学，精通Web前端开发和服务器脚本语言技术，善于研究新技术，并在实际工作中灵活应用。熟悉各种设计模式和开发框架，具有计算机工程师职称，具有高级物流师、APTCH软件工程师、网络安全工程师等职业资格认证，撰写此书，希望对初学者有所帮助。

作品目录

• 内容简介
• 前言
• 本书示例下载
• 本书读者对象
• 第1章 HTML5 + CSS3学习准备
• 1.1　学习准备
• 1.1.1　选择合适的浏览器
• 1.1.2　选择合适的开发工具
• 1.2　认识HTML5
• 1.2.1　HTML5语法
• 1.2.2　新增与废除的元素和属性
• 1.2.3　全局属性
• 1.2.4　HTML5中新增的API
• 1.3　本章小结
• 第2章 HTML元素、属性与结构
• 2.1　HTML元素
• 2.1.1　HTML元素概述
• 2.1.2　HTML元素的语法
• 2.1.3　HTML元素的嵌套
• 2.2　HTML5属性
• 2.2.1　属性的基本使用方法
• 2.2.2　HTML5全局属性
• 2.3　新增的主体结构元素
• 2.3.1　article元素
• 2.3.2　section元素
• 2.3.3　nav元素
• 2.3.4　aside元素
• 2.3.5　time元素
• 2.4　新增的非主体结构元素
• 2.4.1　header元素
• 2.4.2　hgroup元素
• 2.4.3　footer元素
• 2.4.4　address元素
• 2.5　HTML5结构
• 2.5.1　文档结构大纲
• 2.5.2　内容区块的编排方式
• 2.5.3　标题分级
• 2.6　本章小结
• 第3章 JavaScript基础知识
• 3.1　JavaScript简介
• 3.1.1　什么是JavaScript
• 3.1.2　JavaScript的特点
• 3.1.3　JavaScript的组成
• 3.1.4　JavaScript基本结构
• 3.1.5　JavaScript执行原理
• 3.2　在网页中引入JavaScript的方式
• 3.2.1　使用<script>标签
• 3.2.2　使用外部JavaScript文件
• 3.2.3　直接在HTML标签中使用
• 3.3　数据类型和变量
• 3.3.1　变量
• 3.3.2　Number
• 3.3.3　字符串
• 3.3.4　布尔值
• 3.3.5　比较运算符
• 3.3.6　数组
• 3.3.7　对象
• 3.4　条件判断
• 3.4.1　if语句
• 3.4.2　if...else语句
• 3.4.3　if...else if....else语句
• 3.4.4　switch语句
• 3.5　循环语句
• 3.5.1　for循环
• 3.5.2　for...in循环
• 3.5.3　while循环
• 3.5.4　do...while循环
• 3.6　函数定义和调用
• 3.6.1　定义函数
• 3.6.2　调用函数
• 3.7　本章小结
• 第4章 ES6基础知识
• 4.1　准备测试环境
• 4.2　声明变量let和const
• 4.2.1　let命令
• 4.2.2　块级作用域
• 4.2.3　先声明后使用
• 4.2.4　重复变量名
• 4.2.5　实例：面试题
• 4.3　模板字符串
• 4.3.1　字符串格式化
• 4.3.2　多行字符串
• 4.3.3　运算与函数调用
• 4.3.4　includes()、startsWith()和endsWith()
• 4.3.5　repeat()
• 4.4　箭头函数
• 4.5　解构赋值
• 4.5.1　对象解构赋值
• 4.5.2　数组解构赋值
• 4.5.3　字符串解构赋值
• 4.6　Set和Map数据结构
• 4.6.1　Set数据结构
• 4.6.2　Set的基本操作
• 4.6.3　扩展运算符
• 4.6.4　Map数据结构
• 4.6.5　Map遍历方法
• 4.7　Promise对象
• 4.7.1　Promise简介
• 4.7.2　创建Promise对象
• 4.7.3　then()
• 4.7.4　catch()
• 4.7.5　Promise.all()
• 4.7.6　Promise.race()
• 4.7.7　Promise.resolve()
• 4.7.8　Promise.reject()
• 4.8　for...of循环
• 4.9　Generator函数
• 4.10　async函数
• 4.11　class
• 4.12　实例：下馆子吃饭
• 4.13　本章小结
• 第5章 HTML5音频和视频
• 5.1　Web视频的标准与格式
• 5.2　video/audio元素概述
• 5.3　检测浏览器是否支持HTML5视频
• 5.4　实例：在HTML5中显示视频/音频
• 5.5　video元素与audio元素详解
• 5.5.1　video/audio属性
• 5.5.2　video/audio方法
• 5.5.3　video/audio事件
• 5.6　本章小结
• 第6章 HTML5 canvas
• 6.1　canvas基础入门
• 6.1.1　什么是canvas
• 6.1.2　实例：在HTML5页面中添加canvas元素
• 6.1.3　实例：绘制一个蓝色矩形
• 6.2　绘制基本线条
• 6.2.1　实例：绘制直线
• 6.2.2　实例：绘制二次曲线
• 6.2.3　实例：绘制贝塞尔曲线
• 6.2.4　实例：绘制圆弧
• 6.3　绘制简单形状
• 6.3.1　实例：绘制圆形
• 6.3.2　实例：绘制三角形
• 6.3.3　实例：绘制圆角矩形
• 6.3.4　实例：绘制自定义图形
• 6.4　绘制渐变
• 6.4.1　实例：绘制线性渐变
• 6.4.2　实例：绘制径向渐变
• 6.5　图形组合
• 6.5.1　实例：绘制阴影
• 6.5.2　实例：透明效果
• 6.6　使用图像
• 6.6.1　实例：插入图像
• 6.6.2　实例：平铺图像
• 6.6.3　实例：裁剪图像
• 6.6.4　实例：像素级操作
• 6.7　绘制文字
• 6.7.1　实例：控制文本的字体、大小和样式
• 6.7.2　实例：控制文本的颜色
• 6.7.3　实例：描绘文本的边缘
• 6.7.4　实例：设置文本对齐方式
• 6.8　图像数据与URL
• 6.8.1　存储图像数据
• 6.8.2　将彩色转为灰度
• 6.8.3　图像数据URL
• 6.8.4　将绘制的图形保存为图像文件
• 6.9　用canvas实现动画效果
• 6.9.1　实例：清除canvas的内容
• 6.9.2　实例：创建动画
• 6.9.3　动画的开始与停止
• 6.10　实战演练
• 6.11　本章小结
• 第7章 HTML5 SVG
• 7.1　SVG简介
• 7.1.1　什么是SVG
• 7.1.2　SVG有哪些优势
• 7.2　HTML5中的SVG
• 7.2.1　实例：将SVG直接嵌入HTML5页面
• 7.2.2　实例：绘制简单的形状
• 7.2.3　实例：复用内容
• 7.2.4　实例：图形阴影
• 7.2.5　实例：图形渐变
• 7.2.6　实例：绘制自由路径
• 7.3　画布与SVG的比较
• 7.4　本章小结
• 第8章 Forms API
• 8.1　新增的Input输入类型
• 8.1.1　email类型
• 8.1.2　url类型
• 8.1.3　number类型
• 8.1.4　range类型
• 8.1.5　date pickers类型
• 8.1.6　search类型
• 8.1.7　color类型
• 8.2　新增的表单元素
• 8.2.1　datalist元素
• 8.2.2　keygen元素
• 8.2.3　output元素
• 8.3　新增的form属性
• 8.3.1　autocomplete属性
• 8.3.2　novalidate属性
• 8.4　新增的input属性
• 8.4.1　autocomplete属性
• 8.4.2　autofocus属性
• 8.4.3　form属性
• 8.4.4　form overrides属性
• 8.4.5　height和width属性
• 8.4.6　list属性
• 8.4.7　min、max和step属性
• 8.4.8　multiple属性
• 8.4.9　pattern属性
• 8.4.10　placeholder属性
• 8.4.11　required属性
• 8.5　本章小结
• 第9章 File API
• 9.1　Blob对象
• 9.2　File对象与Filelist对象
• 9.3　FileReader对象
• 9.3.1　FileReader对象的方法
• 9.3.2　FileReader对象的事件
• 9.3.3　实例：以二进制方式读取文件
• 9.3.4　实例：以文本方式读取文件
• 9.3.5　实例：以DataURL方式读取文件
• 9.4　FileSystem对象
• 9.4.1　FileSystem对象简介
• 9.4.2　请求文件系统
• 9.4.3　创建文件
• 9.4.4　写入文件
• 9.4.5　向文件中附加数据
• 9.4.6　复制选中的文件
• 9.4.7　删除文件
• 9.4.8　创建目录
• 9.4.9　读取目录内容
• 9.4.10　删除目录
• 9.4.11　复制文件或目录
• 9.4.12　移动文件或目录
• 9.4.13　filesystem:网址
• 9.5　本章小结
• 第10章 拖放API与桌面通知API
• 10.1　拖放API（Drag and Drop API）
• 10.1.1　实现拖放的步骤
• 10.1.2　使用DataTransfer对象
• 10.1.3　设置拖放时的视觉效果
• 10.1.4　自定义拖放图标
• 10.1.5　实例：选择图形
• 10.2　桌面通知API（Notification API）
• 10.2.1　桌面通知API的必要性
• 10.2.2　桌面通知生成流程
• 10.2.3　实例：桌面通知的两种实现方法
• 10.3　本章小结
• 第11章 本地存储与离线应用
• 11.1　认识Web Storage
• 11.1.1　客户端数据存储的历史与现状
• 11.1.2　Web Storage概述
• 11.1.3　实例：一个Web Storage的简单应用
• 11.2　使用Web Storage
• 11.2.1　检测浏览器的支持
• 11.2.2　存入与读取数据
• 11.2.3　清除数据
• 11.2.4　遍历操作
• 11.2.5　storage事件
• 11.3　离线应用
• 11.3.1　离线应用概述
• 11.3.2　离线资源缓存
• 11.3.3　Cache Mainfest基本用法
• 11.3.4　分析Cache Mainfest文件
• 11.3.5　在线状态监测
• 11.3.6　实例：创建离线应用
• 11.4　本章小结
• 第12章 Communication API
• 12.1　认识Communication API
• 12.1.1　Communication API简介
• 12.1.2　Communication API运行流程
• 12.1.3　Communication API的基本用法
• 12.2　跨文档消息通信详解
• 12.2.1　源安全简介
• 12.2.2　postMessage API基本用法
• 12.2.3　实例：使用postMessage API创建应用
• 12.3　XMLHttpRequest Level 2
• 12.3.1　跨源XMLHttpRequest
• 12.3.2　HTTP请求时限
• 12.3.3　 FormData对象
• 12.3.4　上传文件
• 12.3.5　接收二进制数据
• 12.3.6　进度信息
• 12.3.7　实例：创建XMLHttpRequest应用
• 12.4　本章小结
• 第13章 Web Workers API与Web SQL API
• 13.1　Web Workers
• 13.1.1　Web Workers简介
• 13.1.2　实例：Web Workers简单应用
• 13.1.3　Web Workers嵌套
• 13.2　Web SQL
• 13.2.1　Web SQL基本使用
• 13.2.2　数据库的基本应用
• 13.2.3　实例：创建数据库并创建数据表
• 13.2.4　实例：插入数据与获取数据
• 13.3　本章小结
• 第14章 WebSocket API
• 14.1　WebSocket概述
• 14.2　WebSocket服务器
• 14.3　使用WebSocket API
• 14.3.1　浏览器支持情况检测
• 14.3.2　WebSocket API客户端的基本用法
• 14.4　实例：创建HTML5 WebSocket应用程序
• 14.4.1　编写客户端HTML文件
• 14.4.2　添加服务端WebSocket代码
• 14.4.3　添加WebSocket客户端代码
• 14.4.4　最终效果
• 14.5　本章小结
• 第15章 地理位置API
• 15.1　地理位置的定位原理
• 15.1.1　地理位置定位的方式及流程
• 15.1.2　HTML5中如何实现地理位置定位
• 15.2　Geolocation API
• 15.2.1　检测浏览器的支持
• 15.2.2　getCurrentPosition()方法
• 15.2.3　watchPosition()方法
• 15.2.4　clearPosition()方法
• 15.3　实例：在地图中显示地理位置
• 15.4　本章小结
• 第16章 History API
• 16.1　History API概述
• 16.2　为什么要用History API
• 16.3　如何使用History API
• 16.4　实例：浏览历史记录
• 16.5　实例：添加与修改历史记录
• 16.6　本章小结
• 第17章 CSS基础知识
• 17.1　CSS概述
• 17.1.1　CSS简介
• 17.1.2　CSS历史
• 17.1.3　CSS特点
• 17.1.4　CSS与浏览器的关系
• 17.1.5　CSS站点欣赏
• 17.2　基本CSS选择器
• 17.2.1　标记选择器
• 17.2.2　类别选择器
• 17.2.3　ID选择器
• 17.2.4　实例：应用基本选择器
• 17.3　复合选择器
• 17.3.1　“交集”选择器
• 17.3.2　“并集”选择器
• 17.3.3　后代选择器
• 17.3.4　实例：应用复合选择器
• 17.4　CSS继承特性
• 17.4.1　什么是继承
• 17.4.2　CSS属性继承
• 17.4.3　实例：正确使用CSS继承特性
• 17.5　CSS的层叠特性
• 17.6　CSS样式
• 17.6.1　行内样式
• 17.6.2　内部样式
• 17.6.3　外部样式
• 17.6.4　实例：CSS样式的实现方式
• 17.7　CSS优先级
• 17.7.1　id优先级高于class
• 17.7.2　后面的样式覆盖前面的样式
• 17.7.3　使用！important
• 17.7.4　指定的高于继承
• 17.7.5　行内样式高于内部或外部样式
• 17.7.6　实例：灵活运用CSS优先级
• 17.8　CSS盒子模型
• 17.8.1　盒子模型结构
• 17.8.2　边框（border）
• 17.8.3　内边距（padding）
• 17.8.4　外边距（margin）
• 17.8.5　盒子的浮动
• 17.8.6　盒子的定位
• 17.8.7　z-index空间位置
• 17.8.8　盒子的display属性
• 17.8.9　实例：用盒子模型创建网页布局
• 17.9　本章小结
• 第18章 CSS3选择器
• 18.1　属性选择器
• 18.1.1　E[att=“val”]
• 18.1.2　E[att^=“val”]
• 18.1.3　E[att$=“val”]
• 18.1.4　E[att*=“val”]
• 18.1.5　实例：文本效果
• 18.2　结构性伪类选择器
• 18.2.1　伪类选择器
• 18.2.2　伪元素选择器
• 18.2.3　root选择器
• 18.2.4　not选择器
• 18.2.5　empty选择器
• 18.2.6　target选择器
• 18.2.7　first-child选择器和last-child选择器
• 18.2.8　first-of-type选择器和last-of-type选择器
• 18.2.9　nth-child选择器和nth-last-child选择器
• 18.2.10　nth-of-type选择器和nth-last-of-type选择器
• 18.2.11　循环使用样式
• 18.2.12　only-child选择器和only-of-type选择器
• 18.2.13　实例：定位指定元素
• 18.3　UI元素状态伪类选择器
• 18.3.1　E:hover、E:active和E:focus选择器
• 18.3.2　E:enabled和E:disabled伪类选择器
• 18.3.3　E:read-only和E:read-write伪类选择器
• 18.3.4　E:checked、E:default和E:indeterminate伪类选择器
• 18.3.5　E::selection伪类选择器
• 18.3.6　实例：用户界面新体验
• 18.4　通用兄弟元素选择器E ~ F
• 18.5　本章小结
• 第19章 使用CSS选择器插入内容
• 19.1　插入文字
• 19.1.1　使用选择器插入文本
• 19.1.2　插入筛选内容
• 19.1.3　实例：CSS制作目录
• 19.2　插入图像
• 19.2.1　插入图像文件的方法
• 19.2.2　插入图像文件的好处
• 19.2.3　实例：列表图标与推荐标题
• 19.3　插入项目编号
• 19.3.1　插入连续项目编号
• 19.3.2　在项目编号中追加文字
• 19.3.3　设置编号种类
• 19.3.4　插入嵌套编号
• 19.3.5　在字符串两边添加嵌套文字编号
• 19.3.6　实例：导航菜单
• 19.4　本章小结
• 第20章 使用CSS设置文本样式
• 20.1　控制文本样式
• 20.1.1　文本字体和大小
• 20.1.2　文本颜色和粗细
• 20.1.3　斜体文本
• 20.1.4　文本装饰
• 20.1.5　英文字母大小写转换
• 20.1.6　实例：综合应用文本样式
• 20.2　控制段落样式
• 20.2.1　段落水平对齐
• 20.2.2　段落垂直对齐
• 20.2.3　行间距和字间距
• 20.2.4　段落首字下沉
• 20.2.5　实例：段落排版
• 20.3　CSS3中为文本添加阴影——text-shadow属性
• 20.3.1　text-shadow属性的使用方法
• 20.3.2　位移距离
• 20.3.3　阴影的模糊半径
• 20.3.4　阴影的颜色
• 20.3.5　指定多个阴影
• 20.4　CSS3中让文本自动换行——text-break属性
• 20.4.1　依靠浏览器让文本自动换行
• 20.4.2　指定自动换行的处理方法
• 20.5　本章小结
• 第21章 使用CSS设置图片与背景样式
• 21.1　图片样式
• 21.1.1　图片边框设置
• 21.1.2　设置图片位置
• 21.1.3　设置图片缩放
• 21.1.4　实例：图片边框按钮
• 21.2　图片对齐
• 21.2.1　水平对齐设置
• 21.2.2　垂直对齐设置
• 21.2.3　实例：排列的相册
• 21.3　图文混排
• 21.3.1　设置图文混排
• 21.3.2　设置混排间距
• 21.3.3　实例：看图说话
• 21.4　背景颜色
• 21.4.1　设置页面背景颜色
• 21.4.2　设置块背景颜色
• 21.5　背景图片
• 21.5.1　设置页面背景图片
• 21.5.2　重复的背景图片
• 21.5.3　设置背景图片的位置
• 21.5.4　设置背景滚动
• 21.5.5　背景样式的缩写方式
• 21.5.6　实例：创建背景皮肤
• 21.6　本章小结
• 第22章 使用CSS设置列表与表单样式
• 22.1　列表控制
• 22.1.1　列表的类型及使用
• 22.1.2　创建垂直导航条
• 22.1.3　创建水平导航条
• 22.2　使用列表制作实用菜单
• 22.2.1　实例：多级列表菜单
• 22.2.2　实例：会伸缩的列表菜单
• 22.3　表单设计概述
• 22.3.1　表单的设计原则
• 22.3.2　表单应用分类
• 22.3.3　实例：经典表单效果
• 22.4　表单的设计
• 22.4.1　form标签
• 22.4.2　表单元素
• 22.4.3　对表单文本应用样式
• 22.4.4　实例：滑块复选框
• 22.4.5　实例：会员注册页面
• 22.5　本章小结
• 第23章 对超链接和鼠标应用样式
• 23.1　使用CSS设置超链接
• 23.1.1　什么是超链接
• 23.1.2　关于超链接路径
• 23.1.3　超链接属性控制
• 23.1.4　图像映射
• 23.1.5　实例：实现多页面跳转
• 23.2　超链接特效
• 23.2.1　实例：按钮式超链接
• 23.2.2　实例：浮雕式超链接
• 23.3　鼠标特效
• 23.3.1　CSS控制鼠标箭头
• 23.3.2　实例：鼠标变化的超链接
• 23.4　本章小结
• 第24章 CSS中的滤镜
• 24.1　了解CSS滤镜
• 24.1.1　Alpha滤镜
• 24.1.2　Blur滤镜
• 24.1.3　Grayscale滤镜
• 24.1.4　Sepia滤镜
• 24.1.5　Brightness滤镜
• 24.1.6　Hue-rotate滤镜
• 24.1.7　Invert滤镜
• 24.1.8　Saturate滤镜
• 24.1.9　Contrast滤镜
• 24.1.10　Drop-shadow滤镜
• 24.2　本章小结
• 第25章 项目实战案例
• 25.1　项目实战案例一：企业门户网站
• 25.1.1　header元素中的内容
• 25.1.2　aside元素中的内容
• 25.1.3　section元素中的内容
• 25.1.4　footer元素中的内容
• 25.2　项目实战案例二：用户管理