从零开始学HTML5+CSS3

目 录　　前言　第1章 HTML 5 CSS 3学习准备1.1 学习准备 31.1.1 选择合适的浏览器 31.1.2 选择合适的开发工具 31.2 HTML 5——新一代HTML标准 31.2.1 HTML 5语法 41.2.2 新增与废除的元素和属性 51.2.3 全局属性 101.2.4 HTML 5中新增的API 13测试题 14本章小结 14第2章 HTML元素、属性与结构2.1 HTML 元素 172.1.1 HTML元素概述 172.1.2 HTML元素的语法 172.1.3 HTML元素的嵌套 182.2 HTML 5属性 192.2.1 属性的基本使用方法 192.2.2 HTML 5全局属性 192.3 新增的主体结构元素 262.3.1 article元素 262.3.2 section元素 272.3.3 nav元素 282.3.4 aside元素 282.3.5 time元素 302.4 新增的非主体结构元素 312.4.1 header元素 312.4.2 hgroup元素 322.4.3 footer元素 322.4.4 address元素 332.5 HTML 5结构 332.5.1 文档结构大纲 332.5.2 内容区块的编排方式 332.5.3 标题分级 34测试题 34本章小结 35第3章 HTML 5音频和视频3.1 Web视频的标准与格式 383.2 video/audio元素概述 383.3 检测浏览器是否支持HTML 5视频 393.4 实例：在HTML 5中显示视频/音频 403.5 video元素与audio元素详解 423.5.1 video/audio属性 423.5.2 video/audio方法 443.5.3 video/audio事件 45测试题 47本章小结 47第4章 HTML 5 Canvas4.1 Canvas基础入门 504.1.1 什么是Canvas 504.1.2 实例：在HTML 5页面中添加Canvas元素 504.1.3 实例：绘制一个蓝色的矩形 514.2 绘制基本线条 524.2.1 实例：绘制直线 524.2.2 实例：绘制二次曲线 534.2.3 实例：绘制贝塞尔曲线 544.2.4 实例：绘制圆弧 554.3 绘制简单形状 564.3.1 实例：绘制圆形 564.3.2 实例：绘制三角形 574.3.3 实例：绘制圆角矩形 584.3.4 实例：绘制自定义图形 604.4 绘制渐变 614.4.1 实例：绘制线性渐变 614.4.2 实例：绘制径向渐变 624.5 图形组合 644.5.1 实例：绘制阴影 644.5.2 实例：透明效果 654.6 使用图像 664.6.1 实例：插入图像 664.6.2 实例：平铺图像 674.6.3 实例：裁剪图像 684.6.4 实例：像素级操作 704.7 绘制文字 714.7.1 实例：控制文本的字体、大小和样式 714.7.2 实例：控制文本的颜色 734.7.3 实例：描绘文本的边缘 744.7.4 实例：设置文本对齐方式 754.8 图像数据与URL 764.8.1 存储图像数据 764.8.2 将彩色转为灰度 774.8.3 图像数据URL 784.8.4 将绘制的图形保存为图像文件 794.9 用Canvas实现动画效果 804.9.1 实例：清除Canvas的内容 804.9.2 实例：创建动画 814.9.3 动画的开始与停止 834.10 实战演练 83测试题 88本章小结 88第5章 HTML 5 SVG5.1 SVG简介 915.1.1 什么是SVG 915.1.2 SVG有哪些优势 915.2 HTML 5中的SVG 915.2.1 实例：将SVG直接嵌入HTML 5页面 925.2.2 实例：绘制简单的形状 935.2.3 实例：复用内容 945.2.4 实例：图形阴影 955.2.5 实例：图形渐变 965.2.6 实例：绘制自由路径 985.3 画布与SVG的比较 99测试题 100本章小结 100第6章 Form API6.1 新增的input输入类型 1036.1.1 email类型 1036.1.2 url类型 1046.1.3 number类型 1056.1.4 range类型 1056.1.5 date pickers类型 1066.1.6 search类型 1076.1.7 color类型 1086.2 新增的表单元素 1086.2.1 datalist元素 1096.2.2 keygen元素 1106.2.3 output元素 1106.3 新增的表单属性 1116.3.1 autocomplete属性 1116.3.2 novalidate属性 1126.4 新增的input属性 1126.4.1 autocomplete属性 1136.4.2 autofocus属性 1136.4.3 form属性 1136.4.4 表单重写属性 overrides 1136.4.5 height 和 width属性 1146.4.6 list属性 1146.4.7 min、max 和 step属性 1146.4.8 multiple属性 1156.4.9 pattern属性 1156.4.10 placeholder属性 1156.4.11 required属性 115测试题 116本章小结 116第7章 File API7.1 Blob对象 1197.2 File对象与FileList对象 1207.3 FileReader对象 1217.3.1 FileReader对象的方法 1217.3.2 FileReader对象的事件 1227.3.3 实例：以二进制方式读取文件 1227.3.4 实例：以文本方式读取文件 1237.3.5 实例：以DataURL方式读取文件 1247.4 FileSystem对象 1267.4.1 FileSystem对象简介 1267.4.2 请求文件系统 1267.4.3 创建文件 1297.4.4 写入文件 1307.4.5 向文件中附加数据 1317.4.6 复制选中的文件 1327.4.7 删除文件 1337.4.8 创建目录 1337.4.9 读取目录内容 1347.4.10 删除目录 1357.4.11 复制文件或目录 1367.4.12 移动文件或目录 1377.4.13 filesystem:网址 137测试题 138本章小结 138第8章 拖放API与桌面通知API8.1 拖放API 1418.1.1 实现拖放的步骤 1418.1.2 使用dataTransfer对象 1418.1.3 设定拖放时的视觉效果 1428.1.4 自定义拖放图标 1428.1.5 实例：选择图形 1438.2 桌面通知API（Notification API） 1468.2.1 桌面通知API的必要性 1468.2.2 桌面通知生成流程 1468.2.3 实例：桌面通知的两种实现方法 146测试题 149本章小结 149第9章 本地存储与离线应用9.1 认识Web Storage 1529.1.1 客户端数据存储的历史与现状 1529.1.2 Web Storage概述 1529.1.3 示例：一个Web Storage的简单应用 1539.2 使用Web Storage 1559.2.1 检测浏览器支持 1559.2.2 存入与读取数据 1569.2.3 清除数据 1579.2.4 遍历操作 1579.2.5 storage事件 1589.3 离线应用 1589.3.1 离线应用概述 1599.3.2 离线资源缓存 1599.3.3 Cache Manifest的基本用法 1599.3.4 分析Cache Manifest文件 1609.3.5 在线状态监测 1619.3.6 实例：创建离线应用 161测试题 164本章小结 164第10章 Communication API10.1 认识Communication API 16710.1.1 Communication API简介 16710.1.2 Communication API运行流程 16710.1.3 Communication API的基本用法 16710.2 跨文档消息通信 16810.2.1 源安全简介 16810.2.2 postMessage API的基本用法 16810.2.3 实例：使用postMessage API创建应用 16910.3 XMLHttpRequest Level 2 17110.3.1 跨源XMLHttpRequest 17110.3.2 HTTP请求时限 17210.3.3 FormData对象 17210.3.4 上传文件 17310.3.5 接收二进制数据 17410.3.6 进度信息 17410.3.7 创建XMLHttpRequest应用 175测试题 180本章小结 180第11章 Web Workers API与 Web SQL API11.1 Web Workers 18311.1.1 Web Workers简介 18311.1.2 Web Workers简单应用 18411.1.3 Web Workers嵌套 18611.2 Web SQL 18911.2.1 Web SQL基本使用 18911.2.2 数据库的基本应用 18911.2.3 实例：创建数据库并创建数据表 19311.2.4 实例：插入数据与获取数据 194测试题 196本章小结 196第12章 WebSocket API12.1 WebSocket概述 19912.2 WebSocket服务器 19912.3 使用WebSocket API 20012.3.1 浏览器支持情况检测 20012.3.2 WebSocket API客户端的基本用法 20112.4 实例：创建HTML 5 WebSocket应用程序 20212.4.1 编写客户端HTML文件 20212.4.2 添加服务端WebSocket代码 20312.4.3 添加WebSocket客户端代码 20312.4.4 最终效果 205测试题 205本章小结 206第13章 地理位置API13.1 地理位置定位原理 20913.1.1 地理位置定位的方式及流程 20913.1.2 HTML 5中如何实现地理位置定位 20913.2 Geolocation API介绍 21013.2.1 检测浏览器支持 21013.2.2 getCurrentPosition() 方法 21013.2.3 watchPosition()方法 21413.2.4 clearPosition()方法 21413.3 实例：在地图中显示地理位置 214测试题 217本章小结 217第14章 History API14.1 History API概述 22014.2 为什么要用History API 22014.3 如何使用History API 22014.4 实例：浏览历史记录 22114.5 实例：添加与修改历史记录 223测试题 226本章小结 226第15章 CSS基础知识15.1 CSS概述 22915.1.1 CSS简介 22915.1.2 CSS历史 22915.1.3 CSS特点 22915.1.4 CSS与浏览器的关系 23015.1.5 CSS站点欣赏 23015.2 基本CSS选择器 23215.2.1 标记选择器 23215.2.2 类别选择器 23215.2.3 ID选择器 23615.2.4 实例：应用基本选择器 23715.3 复合选择器 23915.3.1 “交集”选择器 23915.3.2 “并集”选择器 24015.3.3 后代选择器 24215.3.4 实例：应用复合选择器 24315.4 CSS继承特性 24415.4.1 什么是继承 24415.4.2 CSS属性继承 24415.4.3 实例：正确使用CSS继承特性 24515.5 CSS的层叠特性 24615.6 CSS样式 24715.6.1 行内样式 24715.6.2 内部样式 24815.6.3 外部样式 24815.6.4 实例：CSS样式的实现方式 24915.7 CSS优先级 25015.7.1 ID选择器优先级高于类别选择器 25015.7.2 后面的样式覆盖前面的 25115.7.3 使用!important 25215.7.4 指定的高于继承 25315.7.5 行内样式高于内部或外部样式 25415.7.6 实例：灵活运用CSS优先级 25515.8 CSS盒子模型 25715.8.1 盒子模型结构 25715.8.2 边框（border） 25815.8.3 内边距（padding） 26115.8.4 外边距（margin） 26215.8.5 盒子的浮动 26315.8.6 盒子的定位 26615.8.7 z-index空间位置 26815.8.8 盒子的display属性 27015.8.9 实例：用盒子模型创建网页布局 271测试题 274本章小结 274第16章 CSS 3选择器16.1 属性选择器 27716.1.1 E[att=“val”] 27716.1.2 E[att^=“val”] 27716.1.3 E[att$=“val”] 27716.1.4 E[att*=“val”] 27816.1.5 实例：文本效果 27816.2 结构性伪类选择器 27916.2.1 伪类选择器 27916.2.2 伪元素选择器 28016.2.3 root选择器 28316.2.4 not选择器 28416.2.5 empty选择器 28516.2.6 target选择器 28616.2.7 first-child选择器和last-child选择器 28716.2.8 first-of-type选择器和last-of-type选择器 28916.2.9 nth-child选择器和nth-last-child选择器 29116.2.10 nth-of-type选择器和nth-last-of-type选择器 29316.2.11 循环使用样式 29416.2.12 only-child选择器和only-of-type选择器 29616.2.13 实例：定位指定元素 29716.3 UI元素状态伪类选择器 29816.3.1 E:hover、E:active和E:focus选择器 29816.3.2 E:enabled和E:disabled伪类选择器 30016.3.3 E:read-only和E:read-write伪类选择器 30116.3.4 E:checked、E:default和E:indeterminate伪类选择器 30216.3.5 E::selection伪类选择器 30416.3.6 实例：用户界面新体验 30516.4 通用兄弟元素选择器 E ~ F 311测试题 312本章小结 312第17章 使用CSS选择器插入内容17.1 插入文字 31517.1.1 使用选择器插入文本 31517.1.2 插入筛选内容 31617.1.3 实例：CSS制作目录 31717.2 插入图像 32017.2.1 插入图像文件的方法 32017.2.2 插入图像文件的好处 32117.2.3 实例：列表图标与推荐标题 32117.3 插入项目编号 32217.3.1 插入连续项目编号 32217.3.2 在项目编号中追加文字 32317.3.3 设置编号种类 32417.3.4 插入嵌套编号 32517.3.5 在字符串两边添加嵌套文字编号 32717.3.6 实例：导航菜单 328测试题 333本章小结 333第18章 使用CSS设置文本样式18.1 控制文本样式 33618.1.1 字体和大小 33618.1.2 文本颜色和粗细 33618.1.3 斜体文本 33718.1.4 文本装饰 33818.1.5 英文字母大小写转换 33818.1.6 实例：综合应用文字样式 33918.2 控制段落样式 34018.2.1 段落水平对齐 34018.2.2 段落垂直对齐 34118.2.3 行间距和字间距 34418.2.4 首字下沉 34518.2.5 实例：段落排版 34618.3 CSS 3中给文本添加阴影——text-shadow属性 34718.3.1 text-shadow属性的使用方法 34718.3.2 位移距离 34818.3.3 阴影的模糊半径 34918.3.4 阴影的颜色 34918.3.5 指定多个阴影 34918.4 CSS 3中让文本自动换行——text-break属性 35018.4.1 依靠浏览器让文本自动换行 35018.4.2 指定自动换行的处理方法 351测试题 353本章小结 353第19章 使用CSS设置图片与背景样式19.1 图片样式 35619.1.1 图片边框设置 35619.1.2 图片位置设置 35819.1.3 图片缩放设置 35919.1.4 实例：图片边框按钮 36019.2 图片对齐 36219.2.1 水平对齐设置 36219.2.2 垂直对齐设置 36219.2.3 实例：排列的相册 36319.3 图文混排 36519.3.1 图文混排 36519.3.2 设置混排间距 36619.3.3 实例：看图说话 36719.4 背景颜色 36919.4.1 设置页面背景颜色 36919.4.2 设置块背景颜色 36919.5 背景图片 37019.5.1 设置页面背景图片 37019.5.2 重复的背景图片 37019.5.3 设置背景图片的位置 37119.5.4 设置背景滚动 37119.5.5 背景样式的缩写方式 37119.5.6 实例：创建背景皮肤 372测试题 373本章小结 374第20章 使用CSS设置列表与表单样式20.1 列表控制 37720.1.1 列表的类型及使用 37720.1.2 创建垂直导航条 37820.1.3 创建水平导航条 37920.2 使用列表制作实用菜单 38020.2.1 实例：多级列表菜单 38020.2.2 实例：会伸缩的列表菜单 38420.3 表单设计概述 38820.3.1 表单的设计原则 38820.3.2 表单应用分类 38920.3.3 实例：经典表单效果 39020.4 表单的设计 39120.4.1 form标签 39120.4.2 表单元素 39120.4.3 对表单文本应用样式 39520.4.4 实例：滑块复选框 39520.4.5 实例：会员注册页面 397测试题 404本章小结 404第21章 对超链接和鼠标应用样式21.1 使用CSS设置超链接 40721.1.1 什么是超链接 40721.1.2 关于超链接路径 40721.1.3 超链接属性控制 40821.1.4 图像映射 40821.1.5 实例：实现多页面跳转 40921.2 超链接特效 41121.2.1 实例：按钮式超链接 41121.2.2 实例：浮雕式超链接 41221.3 鼠标特效 41321.3.1 CSS控制鼠标箭头 41321.3.2 实例：鼠标变化的超链接 414测试题 416本章小结 416第22章 CSS中的滤镜22.1 Alpha滤镜 41922.2 Blur滤镜 42022.3 Grayscale滤镜 42122.4 Sepia滤镜 42322.5 Brightness滤镜 42422.6 Hue-rotate滤镜 42522.7 Invert滤镜 42622.8 Saturate滤镜 42722.9 Contrast滤镜 42922.10 Drop-shadow滤镜 430测试题 431本章小结 431第23章 项目实战案例23.1 项目实战案例一：企业门户网站 43423.1.1 header元素中的内容 43623.1.2 aside元素中的内容 43823.1.3 section元素中的内容 43923.1.4 footer元素中的内容 44323.2 项目实战案例二：用户管理 445