Web前端开发技术-HTML5.CSS3.JavaScript-(第3版)

第1章 Web前端开发技术综述... 1 1.1 Web概述... 1 1.1.1 Web的起源... 2 1.1.2 Web的特点... 3 1.1.3 Web工作原理... 3 1.1.4 Web相关概念... 4 1.2 Web前端开发工程师的职业需求... 6 1.2.1 Web前端开发的由来... 6 1.2.2 Web前端开发工程师的职业要求... 6 1.3 Web前端开发技术... 7 1.3.1 HTML. 7 1.3.2 CSS. 8 1.3.3 JavaScript 9 1.3.4 HTML DOM.. 9 1.3.5 BOM.. 10 1.3.6 AJAX.. 10 1.3.7 jQuery. 11 1.4 Web前端开发工具... 11 1.4.1 EditPlus 11 1.4.2 Adobe Dreamweaver 11 1.4.3 Sublime Text 12 1.4.4 WebStorm.. 12 1.4.5 HBuilder 13 1.5 浏览器工具... 13 1.5.1 Internet Explorer 14 1.5.2 Google Chrome. 14 1.5.3 Mozilla Firefox. 14 1.5.4 Safari 14 1.5.5 Opera. 14 1.6 综合实例... 15 本章小结... 16 练习与实验... 16 练习1. 16 实验1. 17 第2章 HTML基础... 18 2.1 HTML文档结构... 18 2.2 头部head. 19 2.2.1 标题title标记... 19 2.2.2 元信息meta标记... 20 2.3 主体body. 22 2.3.1 body标记... 22 2.3.2 body标记属性... 23 2.4 HTML基本语法... 25 2.4.1 标记类型... 25 2.4.2 HTML属性... 26 2.5 注释... 27 2.6 HTML文档编写规范... 28 2.6.1 HTML代码书写规范... 28 2.6.2 HTML文档命名规则... 29 2.7 HTML文档类型... 30 2.7.1 标记... 30 2.7.2 DTD类型... 30 2.8 综合实例... 31 本章小结... 32 练习与实验... 32 练习2. 32 实验2. 33 第3章 格式化文本与段落... 34 3.1 Web页面初步设计... 34 3.1.1 向Web页面添加文字信息... 34 3.1.2 标题字标记... 35 3.1.3 添加空格与特殊符号... 36 3.2 格式化文本标记... 37 3.2.1 文本修饰标记... 37 3.2.2 计算机输出标记... 38 3.2.3 引用和术语标记... 38 3.2.4 字体font标记... 39 3.3 段落与排版标记... 40 3.3.1 段落p标记... 40 3.3.2 换行br标记... 41 3.3.3 水平分隔线hr标记... 41 3.3.4 拼音/音标注释ruby标记和rt/rp标记... 42 3.3.5 段落缩进blockquote标记... 43 3.3.6 预格式化pre标记... 44 3.4 综合实例... 45 本章小结... 46 练习与实验... 46 练习3. 46 实验3. 47 第4章 列表... 49 4.1 列表概述... 49 4.2 无序列表... 49 4.3 有序列表... 51 4.4 列表嵌套... 53 4.5 定义列表... 54 4.6 综合实例... 56 本章小结... 57 练习与实验... 57 练习4. 57 实验4. 58 第5章 超链接与浮动框架... 59 5.1 超链接概述... 59 5.2 超链接语法、路径及分类... 59 5.2.1 超链接语法... 59 5.2.2 超链接路径... 61 5.2.3 超链接分类... 62 5.3 超链接的应用... 62 5.3.1 创建HTTP文件下载超链接... 62 5.3.2 创建FTP站点访问超链接... 62 5.3.3 创建图像超链接... 63 5.3.4 创建电子邮件超链接... 63 5.3.5 创建页面书签链接... 65 5.4 浮动框架... 67 5.5 综合实例... 69 本章小结... 70 练习与实验... 70 练习5. 70 实验5. 71 第6章 图像与多媒体文件... 73 6.1 图像... 73 6.1.1 插入图像... 73 6.1.2 设置图像的替代文本... 75 6.1.3 设置图像的高度和宽度... 75 6.1.4 设置图像的边框... 76 6.1.5 设置图像对齐方式... 77 6.1.6 设置图像的间距... 77 6.1.7 设置图像热区链接... 77 6.2 滚动文字... 79 6.2.1 添加滚动文字... 79 6.2.2 设置滚动文字背景颜色与滚动循环... 80 6.2.3 设置滚动方向与滚动方式... 80 6.2.4 设置滚动速度与滚动延迟... 81 6.2.5 设置滚动范围与滚动空白空间... 81 6.3 音频、视频及Flash文件... 82 6.4 综合实例... 84 本章小结... 85 练习与实验... 85 练习6. 85 实验6. 86 第7章 CSS基础... 88 7.1 CSS概念... 88 7.1.1 CSS的基本概念... 88 7.1.2 传统HTML的缺点... 88 7.1.3 CSS的特点... 89 7.1.4 CSS的优势... 89 7.1.5 CSS的编辑方法... 89 7.2 使用CSS控制Web页面... 90 7.2.1 CSS基本语法... 90 7.2.2 CSS选择器类型... 91 7.2.3 CSS选择器声明... 95 7.2.4 CSS定义与引用... 96 7.3 CSS继承与层叠... 101 7.4 综合实例... 102 本章小结... 105 练习与实验... 106 练习7. 106 实验7. 106 第8章 DIV与SPAN.. 108 8.1 DIV图层... 108 8.1.1 DIV定义... 108 8.1.2 DIV应用... 109 8.2 图层嵌套与层叠... 110 8.2.1 DIV嵌套... 110 8.2.2 DIV层叠... 111 8.3 div标记与span标记... 112 8.4 综合实例... 114 本章小结... 118 练习与实验... 118 练习8. 118 实验8. 119 第9章 CSS样式属性... 120 9.1 CSS属性值中的单位... 120 9.1.1 绝对单位... 120 9.1.2 相对单位... 120 9.2 CSS字体样式... 121 9.2.1 字体大小font-size属性... 121 9.2.2 字体样式font-style属性... 122 9.2.3 字体系列font-family属性... 122 9.2.4 字体变体font-variant属性... 123 9.2.5 字体粗细font-weight属性... 124 9.2.6 字体font属性... 124 9.3 CSS文本样式... 125 9.3.1 字符间距letter-spacing属性... 125 9.3.2 行距line-height属性... 125 9.3.3 首行缩进text-indent属性... 126 9.3.4 字符装饰text-decoration属性... 127 9.3.5 英文大小写转换text-transform属性... 127 9.3.6 水平对齐text-align属性... 128 9.3.7 垂直对齐vertical-align属性... 128 9.4 CSS颜色与背景... 130 9.4.1 颜色color属性... 130 9.4.2 背景background属性... 131 9.5 CSS列表样式... 134 9.6 CSS盒模型... 136 9.6.1 CSS盒模型结构... 136 9.6.2 边界属性设置... 137 9.6.3 边框属性设置... 138 9.6.4 填充属性设置... 141 9.7 综合实例... 142 本章小结... 146 练习与实验... 146 练习9. 146 实验9. 147 第10章 DIV CSS页面布局... 149 10.1 页面布局设计... 149 10.1.1 “三行模式”或“三列模式”... 149 10.1.2 “三行二列”“三行三列”模式... 150 10.1.3 多行多列复杂模式... 152 10.2 导航菜单设计... 154 10.2.1 一级水平导航菜单... 154 10.2.2 二级水平导航菜单... 156 10.3 综合实例... 162 本章小结... 168 练习与实验... 168 练习10. 168 实验10. 169 第11章 表格... 170 11.1 表格概述... 170 11.2 表格标记... 171 11.3 表格属性设置... 173 11.3.1 表格边框属性... 174 11.3.2 表格的宽度和高度属性... 174 11.3.3 表格背景颜色与背景图像属性... 174 11.3.4 表格边框样式属性... 176 11.3.5 表格单元格间距、单元格边距属性... 177 11.3.6 表格水平对齐属性... 178 11.4 设置表格行的属性... 180 11.5 设置单元格的属性... 181 11.5.1 表格单元格跨行属性... 182 11.5.2 表格单元格跨列属性... 182 11.6 表格嵌套... 183 11.7 综合实例... 185 本章小结... 189 练习与实验... 189 练习11. 189 实验11. 190 第12章 表单... 191 12.1 表单概述... 191 12.2 定义域和域标题... 193 12.3 表单信息输入... 194 12.3.1 单行文本输入框... 194 12.3.2 密码输入框... 195 12.3.3 复选框... 196 12.3.4 单选按钮... 196 12.3.5 图像按钮... 198 12.3.6 提交按钮... 199 12.3.7 重置按钮... 199 12.3.8 普通按钮... 200 12.3.9 文件选择框... 201 12.3.10 隐藏框... 201 12.4 多行文本输入框... 203 12.5 下拉列表框... 204 12.6 综合实例... 205 本章小结... 208 练习与实验... 208 练习12. 208 实验12. 209 第13章 HTML5基础与CSS3应用... 210 13.1 HTML5概述... 210 13.1.1 HTML5的八个特性... 211 13.1.2 HTML5的优势... 212 13.1.3 HTML5新增结构元素及页面元素... 213 13.1.4 HTML5废除的元素与属性... 214 13.1.5 浏览器支持与选择... 215 13.2 HTML5文档结构... 216 13.2.1 HTML5页面结构... 216 13.2.2 HTML5新增结构元素... 217 13.3 HTML5新增页面元素... 221 13.3.1 hgroup标记... 222 13.3.2 figure标记与figcaption标记... 222 13.3.3 mark标记与time标记... 223 13.3.4 details标记与summary标记... 224 13.3.5 progress标记与meter标记... 225 13.3.6 input标记与datalist标记... 226 13.4 HTML5表单... 227 13.4.1 HTML5新增的表单属性... 227 13.4.2 HTML5新增的表单元素... 231 13.4.3 HTML5新增的input类型... 232 13.5 HTML5视频与音频... 236 13.5.1 video标记及属性... 236 13.5.2 audio标记及属性... 238 13.6 CSS3基础应用... 239 13.6.1 CSS3新特性... 239 13.6.2 CSS3浏览器兼容性... 239 13.6.3 CSS3边框... 240 13.6.4 CSS3转换transform属性... 247 13.6.5 CSS3过渡transition属性... 251 13.6.6 CSS3动画animation. 253 13.6.7 CSS3多列属性... 256 13.6.8 CSS3文本效果... 258 13.7 综合实例... 260 本章小结... 262 练习与实验... 262 练习13. 262 实验13. 263 第14章 JavaScript基础... 265 14.1 JavaScript概述... 265 14.1.1 JavaScript简介... 265 14.1.2 **个JavaScript程序... 266 14.1.3 JavaScript放置的位置... 267 14.2 JavaScript程序... 270 14.2.1 语句和语句块... 270 14.2.2 代码... 271 14.2.3 消息对话框... 271 14.2.4 JavaScript注释... 274 14.3 标识符和变量... 274 14.3.1 命名规范... 274 14.3.2 数据类型... 275 14.3.3 变量... 278 14.3.4 转义字符... 278 14.4 运算符和表达式... 279