本书从初学者的角度出发,通过通俗易懂的语言、丰富多彩的实例,详细介绍了HTML5 CSS3 JavaScript前端开发技术。本书共21章,第1章讲解Web前端开发快速入门;第2章到第7章讲解HTML网页中的文本、图像、表格等;第8章到第11章讲解CSS的基础知识、字体样式、段落样式等;第12章到第21章讲解JavaScript的基础知识、判断结构、循环结构等。 在讲解过程中既考虑读者的学习习惯,又通过具体实例剖析讲解HTML5 CSS3 JavaScript前端开发技术中的热点问题、关键问题及种种难题。 本书适合大中专学校的师生和有编程梦想的初高中生阅读,更适合培训机构的师生、编程爱好者、网页设计人员、网络程序开发人员及维护人员阅读参考。

第1章 Web 前端开发快速入门 / 11.1 初识Web / 21.1.1 什么是Web / 21.1.2 Web 页的分类 / 21.1.3 Web 的工作过程 / 21.1.4 URL 统一资源定位器 / 31.2 Web 前端开发语言 / 31.2.1 HTML 标记语言 / 41.2.2 CSS 样式 / 51.2.3 JavaScript 脚本语言 / 61.3 Web 前端集成开发软件 / 101.3.1 Sublime Text 概述 / 101.3.2 Sublime Text 3 的下载 / 101.3.3 Sublime Text 3 的安装 / 121.3.4 利用Sublime Text 3 创建HTML 文档 / 13第2章 HTML 网页中的文本和图像 / 152.1 HTML 中的元素 / 162.1.1 标题元素 / 162.1.2 段落元素和水平线元素 / 162.1.3 实例:在网页中排版一首古诗 / 172.2 元素的属性 / 172.2.1 属性的语法格式 / 172.2.2 实例:对网页中的古诗进一步排版 / 182.3 文本元素 / 192.3.1 常用的文本元素 / 192.3.2 实例:文本元素的应用 / 192.4 文本的超链接 / 202.4.1 相对地址与**地址 / 212.4.2 超链接元素及其属性 / 212.4.3 实例:超链接的应用 / 222.4.4 实例:文件下载链接 / 232.4.5 实例:锚链接 / 242.5 图像元素 / 252.5.1 GIF 格式 / 262.5.2 JPEG 格式 / 262.5.3 图像元素的属性 / 262.5.4 实例:图像的显示 / 272.5.5 实例:图像的大小和对齐方式 / 282.5.6 图像的超链接 / 292.6 列表元素 / 302.6.1 无序列表元素 / 302.6.2 有序列表元素 / 312.6.3 定义列表元素 / 312.6.4 列表元素的应用 / 31第3章 HTML 网页中的表格和框架 / 333.1 HTML 中的表格 / 343.1.1 表格的三个基本元素 / 343.1.2 表格的标题和列头 / 353.1.3 表格的合并单元格 / 363.1.4 表格的属性 / 383.1.5 表格的表头、主体和页脚元素 / 403.1.6 表格列的美化 / 423.2 HTML 中的框架 / 433.2.1 框架组元素 / 433.2.2 框架元素 / 443.2.3 实例:窗口的上下设置 / 443.2.4 实例:窗口的左右设置 / 453.2.5 实例:窗口的嵌套设置 / 463.2.6 窗口的名称和链接 / 473.2.7 内联框架元素 / 49第4章 HTML 网页中的表单 / 514.1 初识表单 / 524.2 表单中的常用控件元素 / 524.2.1 文本框控件 / 524.2.2 按钮控件 / 534.2.3 实例:用户登录界面 / 534.2.4 单选框控件 / 544.2.5 复选框控件 / 554.2.6 实例:个人信息统计 / 554.2.7 下拉列表框控件 / 564.2.8 datalist 控件 / 574.2.9 实例:下拉列表框和datalist 控件的应用 / 574.3 电子邮箱控件和图像提交按钮 / 584.4 网址控件 / 604.5 number 控件和range 控件 / 614.6 日期时间类控件 / 624.6.1 日期控件和时间控件 / 634.6.2 月份控件和星期控件 / 634.6.3 日期 时间控件和本地日期时间控件 / 634.6.4 实例:日期时间类控件的应用 / 634.7 搜索控件、颜色控件和选择文件控件 / 664.8 多行文本框控件 / 674.9 output 控件 / 694.10 进度条控件和度量条控件 / 704.11 label 控件和button 控件 / 714.12 fieldset 控件和legend 控件 / 72第5章 HTML 网页中的canvas 绘图 / 755.1 利用canvas 绘制画布 / 765.2 利用canvas 绘制基本图形 / 775.2.1 绘制线段 / 775.2.2 线段的样式 / 785.2.3 绘制矩形 / 795.2.4 绘制圆和圆弧 / 805.2.5 实例:绘制扇面 / 825.3 利用canvas 绘制文本 / 835.4 填充渐变色 / 845.4.1 线性渐变色 / 855.4.2 放射状渐变色 / 865.5 创建带有阴影的图形和文字 / 875.6 利用canvas 操作图像 / 895.6.1 绘制图像 / 895.6.2 利用图像填充图形 / 90第6章 HTML 网页中的音频和视频 / 936.1 HTML 网页中的音频 / 946.2 HTML 网页中的视频 / 956.2.1 利用video 元素播放视频 / 956.2.2 利用source 元素解决浏览器播放视频的兼容问题 / 966.2.3 实例:自定义按钮实现视频的控制操作 / 976.3 利用embed 元素嵌入Flash 动画 / 99第7章 HTML 网页中的布局元素 / 1017.1 初识HTML 网页中的布局 / 1027.2 header 元素和footer 元素 / 1027.2.1 header 布局元素 / 1027.2.2 footer 布局元素 / 1037.2.3 利用header 和footer 元素布局网页页面 / 1037.3 article 元素 / 1047.4 section 元素 / 1067.5 aside 元素 / 1077.6 nav 元素 / 1087.7 hgroup、address 和time 元素 / 1097.8 figure 和figcaption 元素 / 1117.9 实例:手机端HTML 网页的布局 / 1127.9.1 制作手机端的HTML 网页 / 1127.9.2 测试手机端的HTML 网页 / 1137.9.3 制作section 元素内容 / 1147.9.4 制作header 元素内容 / 1167.9.5 制作aside 元素内容 / 1177.9.6 制作footer 元素内容 / 118第8章 CSS 基础 / 1218.1 初识CSS / 1228.1.1 什么是CSS / 1228.1.2 CSS 样式的作用 / 1228.2 CSS 的语法 / 1228.2.1 CSS 的基本语法 / 1238.2.2 选择器的类型 / 1248.2.3 CSS 的注释 / 1288.3 CSS 的引用方式 / 1298.3.1 嵌入样式表 / 1298.3.2 链接外部样式表 / 1298.3.3 内嵌样式 / 1318.3.4 CSS 样式的优先级 / 132第9章 CSS 中的各种样式 / 1339.1 字体样式 / 1349.1.1 font-family 字体类型 / 1349.1.2 font-size 字体大小 / 1359.1.3 font-weight 字体粗细 / 1379.1.4 font-style 字体倾斜 / 1379.1.5 color 字体颜色 / 1379.2 段落样式 / 1389.2.1 text-decoration 文本修饰 / 1399.2.2 text-transform 大小写转换 / 1409.2.3 text-indent 首行缩进 / 1409.2.4 text-align 对齐方式 / 1429.2.5 line-height 行高 / 1429.3 边框样式 / 1439.3.1 边框的宽度和颜色 / 1449.3.2 边框的外观 / 1449.3.3 边框的局部样式 / 1459.4 背景样式 / 1479.4.1 background-color 背景颜色 / 1489.4.2 背景图像 / 1499.5 图像样式 / 1519.5.1 图像的大小、边框和水平对齐方式 / 1519.5.2 图像的垂直对齐方式 / 1529.5.3 文字环绕效果 / 1549.5.4 设置文字与图像的间距 / 155第10章 CSS 盒子模型和布局 / 15710.1 CSS 盒子模型 / 15810.1.1 CSS 盒子模型的4 个属性 / 15810.1.2 实例:CSS 盒子模型的应用 / 15910.2 CSS 定位布局 / 16110.2.1 固定定位 / 16110.2.2 相对定位 / 16210.2.3 **定位 / 16310.2.4 静态定位 / 16410.3 CSS 浮动布局 / 16410.3.1 浮动属性float / 16410.3.2 清除浮动属性clear / 167第11章 CSS 特殊效果与动画 / 16911.1 CSS 圆角效果 / 17011.1.1 border-radius 属性 / 17011.1.2 为4 个圆角设置不同的弧度 / 17111.2 CSS 渐变色效果 / 17211.2.1 线性渐变色 / 17211.2.2 复杂的线性渐变色 / 17411.2.3 径向渐变色 / 17611.3 CSS 阴影效果 / 17711.4 过渡动画 / 17811.4.1 过渡属性 / 17911.4.2 过渡动画效果实例 / 17911.5 2D 转换动画 / 18011.5.1 2D 缩放动画效果 / 18111.5.2 2D 移动动画效果 / 18211.5.3 2D 旋转动画效果 / 18311.5.4 2D 拉伸动画效果 / 18411.6 3D 转换动画 / 18511.6.1 3D 转换常用属性 / 18511.6.2 3D 旋转动画效果 / 18511.6.3 3D 缩放动画效果 / 18711.6.4 3D 移动动画效果 / 18911.7 animation 动画 / 19111.7.1 animation 属性 / 19111.7.2 制作animation 动画的流程 / 192第12章 JavaScript 编程的初步知识 / 19512.1 基本数据类型 / 19612.1.1 数值型 / 19612.1.2 字符串型 / 19812.1.3 布尔型 / 20112.1.4 空值型 / 20212.1.5 未定义值 / 20212.2 变量 / 20312.2.1 什么是变量 / 20412.2.2 变量的命名规则 / 20412.2.3 变量的声明 / 20412.2.4 变量的赋值 / 20612.3 数据类型的转换 / 20812.3.1 数据类型的自动转换 / 20812.3.2 数据类型的强制转换 / 20812.3.3 基本数据类型转换 / 20812.3.4 提取整数的parseInt() 方法 / 21012.3.5 提取浮点数的parseFloat() 方法 / 21012.3.6 计算表达式值的eval() 方法 / 21012.4 运算符的应用 / 21112.4.1 算术运算符的应用 / 21212.4.2 赋值运算符的应用 / 21512.4.3 位运算符的应用 / 21712.5 JavaScript 的语法规则 / 21812.5.1 大小写敏感性 / 21912.5.2 可选的分号 / 21912.5.3 代码注释 / 220第13章 JavaScript 编程的判断结构 / 22113.1 if 语句 / 22213.1.1 if 语句的一般格式 / 22213.1.2 实例:任意输入两个数,显示两个数的大小关系 / 22213.2 if......else 语句 / 22413.2.1 if......else 语句的一般格式 / 22413.2.2 实例:任意输入两个学生的成绩,显示成绩较高的学生成绩 / 22413.2.3 实例:任意输入一个正数,判断奇偶性 / 22513.3 多个if……else 语句 / 22713.3.1 实例:企业奖金发放系统 / 22713.3.2 实例:每周计划系统 / 22913.4 关系运算符 / 23013.4.1 关系运算符及意义 / 23013.4.2 实例:成绩评语系统 / 23113.5 逻辑运算符 / 23313.5.1 逻辑运算符及意义 / 23413.5.2 实例:判断是否是闰年 / 23413.5.3 实例:剪刀、石头、布游戏 / 23513.6 嵌套if 语句 / 23713.6.1 嵌套if 语句的一般格式 / 23713.6.2 实例:判断一个数是否是5 或7 的倍数 / 23713.6.3 实例:用户登录系统 / 23913.7 条件运算符和条件表达式 / 24013.8 switch 语句 / 24213.8.1 switch 语句的一般格式 / 24213.8.2 实例:根据输入的数显示相应的星期几 / 242第14章 JavaScript 编程的循环结构 / 24514.1 while 循环 / 24614.1.1 while 循环的一般格式 / 24614.1.2 实例:利用while 循环显示100 之内的自然数 / 24614.1.3 实例:随机产生10 个随机数,并显示*大的数 / 24714.1.4 实例:猴子吃桃问题 / 24814.2 do-while 循环 / 24914.2.1 do-while 循环的一般格式 / 24914.2.2 实例:计算1 2 3 …… 100 的和 / 25014.2.3 实例:阶乘求和 / 25014.3 for 循环 / 25214.3.1 for 循环的一般格式 / 25214.3.2 实例:利用for 循环显示100 之内的偶数 / 25214.3.3 实例:小球反弹的高度 / 25314.4 for...in 语句 / 25414.5 循环嵌套 / 25514.5.1 实例:九九乘法表 / 25614.5.2 实例:分解质因数 / 25614.5.3 实例:绘制“#”号的菱形 / 25814.5.4 实例:杨辉三角 / 25914.5.5 实例:弗洛伊德三角形 / 26114.6 break 语句 / 26214.7 continue 语句 / 263第15章 JavaScript 编程的函数和正则表达式 / 26515.1 初识函数 / 26615.2 函数的定义与调用 / 26615.2.1 定义函数 / 26615.2.2 调用函数 / 26715.3 函数参数的使用 / 26815.3.1 值传递 / 26915.3.2 地址传递 / 27015.4 函数的返回值 / 27315.4.1 return 语句的语法格式 / 27315.4.2 实例:显示数组中的*大数 / 27415.5 递归函数 / 27515.6 正则表达式 / 27615.6.1 什么是正则表达式 / 27615.6.2 正则表达式的语法格式 / 27715.6.3 RegExp 对象 / 27715.6.4 RegExp 对象的属性 / 27815.6.5 String 对象的4 个方法 / 27815.6.6 **正则表达式 / 283第16章 JavaScript 的对象编程 / 28716.1 初识对象编程 / 28816.1.1 面向对象 / 28816.1.2 基于对象 / 28916.1.3 基于对象的JavaScript / 28916.2 对象的属性和方法 / 28916.2.1 对象的属性 / 29016.2.2 对象的方法 / 29016.3 预定义对象 / 29116.4 自定义对象 / 29116.4.1 创建对象 / 29116.4.2 创建对象的方法 / 29416.4.3 对象的删除 / 29716.5 Array 对象 / 29716.5.1 创建Array 对象 / 29716.5.2 访问数组元素 / 29816.5.3 多维数组 / 29916.5.4 Array 对象的常用属性和方法 / 30016.6 Math 对象 / 30216.7 Date 对象 / 30416.7.1 Date 对象的创建方式 / 30416.7.2 Date 对象的方法 / 30416.8 Object 对象 / 307第17章 JavaScript 的表单验证和Cookie 处理 / 30917.1 JavaScript 的表单验证 / 31017.1.1 获得表单信息 / 31017.1.2 检验表单的方法 / 31117.1.3 利用JavaScript 获取个人信息统计 / 31217.1.4 利用JavaScript 获取下拉列表框和datalist 控件中的信息 / 31317.1.5 利用JavaScript 获取电子邮箱信息 / 31417.1.6 利用JavaScript 改变网页的背景色 / 31517.1.7 利用JavaScript 实现文本框的智能输入 / 31717.2 JavaScript 的Cookie 处理 / 31817.2.1 什么是Cookie / 31817.2.2 Cookie 的属性 / 31917.2.3 Cookie 的储存 / 32017.2.4 Cookie 的读取 / 322第18章 JavaScript 的网页** / 32518.1 JavaScript 的文字** / 32618.1.1 文字的跑马灯动画效果 / 32618.1.2 打字动画效果 / 32718.1.3 大小不断变化的文字动画效果 / 33018.1.4 颜色不断变化的文字动画效果 / 33118.1.5 来回升降的文字动画效果 / 33318.2 JavaScript 的图像** / 33518.2.1 动态改变图像的位置 / 33518.2.2 图像不断闪烁的动画效果 / 33618.2.3 拖动鼠标改变图像大小 / 33818.3 JavaScript 的时间** / 33918.3.1 分时问候时间** / 33918.3.2 动态显示当前日期和时间效果 / 34018.3.3 时间***页面效果 / 34218.4 JavaScript 的鼠标事件** / 34318.4.1 不允许单击鼠标左右键** / 34318.4.2 动态显示鼠标的当前坐标 / 34518.5 JavaScript 的菜单** / 34618.5.1 下拉菜单** / 34618.5.2 滚动的导航菜单** / 347第19章 JavaScript 窗口的控制和提醒功能 / 34919.1 JavaScript 的window 对象 / 35019.1.1 window 对象的属性 / 35019.1.2 window 对象的方法 / 35119.1.3 在JavaScript 中引用window 对象属性和方法 / 35219.2 窗口的基本操作 / 35219.2.1 打开窗口 / 35219.2.2 关闭窗口 / 35519.2.3 移动或改变窗口大小 / 35619.3 与用户交互的对话框 / 35719.3.1 提示对话框 / 35719.3.2 询问对话框 / 35819.3.3 输入对话框 / 360第20章 JavaScript 的DOM 编程 / 36320.1 初识文档对象模型 / 36420.1.1 DOM 中的节点 / 36420.1.2 Node 对象 / 36520.1.3 Node 对象的常用属性和方法 / 36520.1.4 实例:HTML 文档的节点属性 / 36620.2 访问文档中的对象 / 36820.2.1 getElementsByTagName() 方法 / 36820.2.2 getElementById() 方法 / 36920.2.3 getElementsByName() 方法 / 37020.3 节点的基本操作 / 37120.3.1 节点的生成 / 37120.3.2 节点的添加和插入 / 37220.3.3 节点的替换 / 37520.3.4 节点的删除 / 37620.4 对属性进行操作 / 37720.5 事件驱动及处理 / 379第21章 JavaScript 的框架库jQuery / 38321.1 初识框架库jQuery / 38421.1.1 jQuery 的下载 / 38421.1.2 jQuery 的使用 / 38521.2 jQuery 的常用选择器 / 38621.3 jQuery 的常用事件方法 / 38921.3.1 $(document).ready() 事件方法 / 38921.3.2 鼠标常用事件方法 / 39021.3.3 键盘常用事件方法 / 39221.4 jQuery 的动画效果 / 39421.4.1 显示和隐藏动画效果 / 39421.4.2 淡入和淡出动画效果 / 39521.4.3 滑动动画效果 / 39721.4.4 自定义动画 / 399