HTML5+ CSS3+JavaScript 网页设计实战-(视频教学版)

目 录 第1章 网站与HTML网页 1 1.1 什么是网站和网页 1 1.2 网站的组成 1 1.2.1 网址 2 1.2.2 网站空间 3 1.2.3 DNS域名解析 3 1.2.4 网站程序 3 1.2.5 数据库 3 1.2.6 Web服务器 4 1.3 HTML网页的组成 4 1.3.1 HTML网页结构 4 1.3.2 HTML网页头部 5 1.3.3 HTML网页主体 6 1.3.4 HTML网页要求 7 1.3.5 HTML网页标签 8 1.3.6 HTML与XHTML 10 1.4 静态网页与动态网页 11 1.5 Web标准 12 1.5.1 结构标准 12 1.5.2 表现标准 13 1.5.3 行为标准 13 1.5.4 代码标准 13 1.5.5 标准测试 15 1.5.6 HTML、CSS与JavaScript三者的关系 15 1.6 HTML 5介绍 15 1.6.1 HTML 5的发展历史 15 1.6.2 HTML 5的设计理念 17 1.6.3 HTML 5的新特性 18 1.6.4 HTML 5的新变革 19 1.6.5 HTML 5的新标签 19 1.6.6 HTML 5的移动特性及未来 21 1.7 如何创建一个HTML 5网页 21 1.7.1 HTML 5代码的编写 22 1.7.2 使用文本编辑器开发 22 1.7.3 使用EditPlus编辑器开发 24 1.7.4 使用Sublime编辑器开发 26 1.7.5 使用WebStorm平台开发 26 1.7.6 使用Dreamweaver平台开发 28 第2章 HTML网页结构 31 2.1 DOCTYPE标签 31 2.1.1 概念及作用 31 2.1.2 使用规则 31 2.1.3 DTD类型 32 2.2 HTML标签 32 2.2.1 概念及作用 32 2.2.2 使用方法 33 2.3 head标签 33 2.3.1 基本概念 34 2.3.2 功能作用 34 2.3.3 使用方法 34 2.4 refresh重定向 36 2.4.1 基本概念 36 2.4.2 使用方法 36 2.4.3 http-equiv属性 37 2.5 base基址标签 38 2.5.1 基本概念及作用 38 2.5.2 常规用法 39 2.5.3 特殊用法 41 2.6 引用CSS样式文件 42 2.6.1 概述 43 2.6.2 功能用法 43 2.6.3 简单示例 44 2.7 引用JavaScript脚本文件 46 2.7.1 概述 46 2.7.2 内嵌式JavaScript脚本 46 2.7.3 引入外部JavaScript脚本 49 2.8 HTML网页注释 51 2.9 浏览器对HTML属性的支持 53 第3章 HTML网页文字与排版 57 3.1 段落排版 57 3.1.1 段落标签 57 3.1.2 对齐与缩进 58 3.1.3 分割线 60 3.1.4 标题 61 3.2 文字排版 62 3.2.1 字形字体 62 3.2.2 上、下标字体 64 3.3 项目符号与编号 65 3.3.1 符号列表 65 3.3.2 编号列表 67 3.3.3 自定义列表 68 3.4 特殊符号 69 3.5 项目实战：在线新闻浏览 71 第4章 HTML网页图像 74 4.1 网页图片基础 74 4.1.1 图片尺寸、像素与分辨率 74 4.1.2 在网页中显示原始图片 75 4.1.3 在网页中调整图片尺寸 77 4.2 网页图片效果 80 4.2.1 背景图片 80 4.2.2 图片对齐 81 4.2.3 浮动图片 82 4.2.4 替换图片的文本 83 4.2.5 图片链接 85 4.3 项目实战：在线图文杂志 86 4.3.1 在线图文杂志源代码结构 86 4.3.2 在线图文杂志页眉设计 88 4.3.3 在线图文杂志目录设计 90 4.3.4 在线图文杂志正文设计 92 4.3.5 在线图文杂志页脚设计 95 第5章 HTML网页超链接 98 5.1 超链接基础 98 5.1.1 什么是超链接 98 5.1.2 超链接类型 98 5.2 超链接标签 99 5.2.1 超链接格式 99 5.2.2 超链接语法 99 5.3 超链接应用 103 5.3.1 关键字超链接 103 5.3.2 图片超链接 104 5.3.3 电子邮件链接 106 5.4 创建热点区域 109 5.5 项目实战：电子书制作 111 5.5.1 电子书源代码结构 111 5.5.2 电子书主页设计 112 5.5.3 电子书功能页设计 116 5.5.4 电子书参考书籍页设计 120 第6章 HTML网页中的表格与表单 124 6.1 HTML表格基础 124 6.1.1 什么是HTML表格 124 6.1.2 HTML表格组成 124 6.2 HTML表格标签 125 6.2.1 表格标签 125 6.2.2 表格语法 126 6.3 HTML表格应用 129 6.3.1 空单元格表格 129 6.3.2 单元格边距和间距 130 6.3.3 细线边框表格 131 6.3.4 跨行与跨列的表格 132 6.3.5 表格背景颜色 136 6.3.6 单元格内容对齐方式 137 6.3.7 表格嵌套元素 138 6.4 HTML表单基础 140 6.4.1 什么是HTML表单 140 6.4.2 HTML表单框架 141 6.5 HTML表单组成 142 6.5.1 表单标签 142 6.5.2 表单组成 143 6.5.3 一个简单的表单页面 143 6.6 HTML表单元素 145 6.6.1 文本域及其标记 145 6.6.2 密码域 147 6.6.3 单选按钮 148 6.6.4 复选框 149 6.6.5 下拉列表 150 6.6.6 多行文本域 152 6.6.7 分组框（Fieldset） 153 6.7 HTML 5表单新属性 154 6.7.1 自动完成属性 154 6.7.2 自动焦点属性 157 6.8 HTML 5表单输入类型 159 6.8.1 email类型 159 6.8.2 number类型 163 6.8.3 range类型 165 6.8.4 search类型 165 6.8.5 url类型 166 6.8.6 日期选择器（Data Pickers） 167 6.9 项目实战：HTML 5用户注册页面 171 第7章 HTML 5应用 176 7.1 画布工具 176 7.1.1 画布工具介绍 176 7.1.2 画布标签定义 176 7.1.3 画布工具对象、坐标、路径和填充 177 7.1.4 使用画布绘制图形 178 7.1.5 使用画布绘制文字 182 7.1.6 画布特效 184 7.2 HTML 5离线缓存 187 7.2.1 HTML 5离线缓存API介绍 187 7.2.2 使用Manifest文件 189 7.2.3 使用ApplicationCache API 190 7.3 HTML 5 Web存储 191 7.3.1 HTML 5 Web存储概述 `191 7.3.2 localStorage存储方式 191 7.3.3 sessionStorage存储方式 193 7.4 项目实战：搭建简单的HTML 5离线APP 195 第8章 CSS与CSS 3 199 8.1 回顾CSS 199 8.1.1 什么是CSS 199 8.1.2 CSS发展简史 199 8.1.3 XHTML CSS设计标准 200 8.2 CSS语法构成 200 8.2.1 CSS基础语法 200 8.2.2 CSS高级语法 201 8.2.3 CSS选择器 202 8.3 CSS标签语义化 202 8.4 CSS命名规范 204 8.4.1 CSS文件名称命名规范 204 8.4.2 页面功能区域的命名规范 204 8.4.3 页面位置的命名规范 204 8.4.4 父子关系的命名规范 205 8.4.5 具体功能的命名规范 205 8.4.6 控件的命名规范 205 8.4.7 自定义命名规范 205 8.5 CSS使用方法 205 8.5.1 外链式 205 8.5.2 嵌入式 208 8.5.3 内联式 210 8.5.4 优先级 212 8.6 创建并编辑CSS的工具 212 8.6.1 CSS创建与编辑工具 212 8.6.2 使用集成开发平台 213 8.7 CSS 3新增特性概述 215 8.7.1 CSS 3属性选择器 215 8.7.2 RGBA透明度 215 8.7.3 CSS 3多栏布局 216 8.7.4 CSS 3字符串溢出 216 8.7.5 CSS 3圆角 216 8.7.6 CSS 3阴影 217 第9章 CSS选择器 218 9.1 CSS选择器基础 218 9.1.1 什么是CSS选择器 218 9.1.2 CSS选择器分类 218 9.1.3 CSS选择器优先级 219 9.2 CSS选择器应用 219 9.2.1 标签选择器 219 9.2.2 类选择器 222 9.2.3 id选择器 224 9.2.4 派生选择器 227 9.2.5 后代选择器 229 9.2.6 子选择器 232 9.2.7 相邻兄弟选择器 234 9.2.8 属性选择器 236 9.2.9 伪类选择器 244 9.3 项目实战：应用CSS选择器设计页面 247 第10章 CSS基础样式 255 10.1 背景样式 255 10.1.1 背景颜色 255 10.1.2 背景图片 257 10.1.3 背景重复 258 10.1.4 背景定位 260 10.1.5 固定背景位置 262 10.2 字体样式 264 10.2.1 字体系列 264 10.2.2 字体风格 266 10.2.3 字体加粗 268 10.2.4 字体变形 270 10.2.5 字体大小 271 10.3 文本样式 273 10.3.1 文本对齐方式 273 10.3.2 文本缩进 274 10.3.3 文本间隔 275 10.3.4 文本修饰 277 10.3.5 文本方向 279 10.3.6 处理文本空白符 280 10.4 文本美化 281 10.4.1 文本阴影 281 10.4.2 文本溢出 283 10.4.3 文本边框轮廓 284 10.5 颜色样式 286 10.5.1 十六进制颜色 286 10.5.2 RGB颜色 287 10.5.3 RGBA颜色 288 10.6 项目实战：报纸风格页面 290 第11章 CSS表格与列表 293 11.1 CSS表格 293 11.1.1 表格边框 293 11.1.2 表格折叠边框 296 11.1.3 表格内边距 298 11.1.4 表格宽度和高度 299 11.1.5 表格文本对齐 302 11.2 CSS列表 304 11.2.1 列表标记类型 304 11.2.2 列表标记位置 306 11.2.3 图片列表标记 307 11.3 项目实战：CSS登录页面 309 第12章 JavaScript概述 312 12.1 了解JavaScript脚本语言 312 12.1.1 什么是JavaScript脚本语言 312 12.1.2 JavaScript的发展历史 312 12.1.3 JavaScript组成与特点 313 12.2 在网页中使用JavaScript脚本语言 313 12.2.1 在网页中嵌入JavaScript脚本 313 12.2.2 引入外部JavaScript文件 315 12.3 创建并编辑JavaScript的工具 316 12.4 JavaScript脚本语言开发与调试 316 12.4.1 使用WebStorm开发平台创建项目并编辑代码 317 12.4.2 使用Firefox浏览器调试js脚本 318 第13章 JavaScript语法 321 13.1 JavaScript语法基础 321 13.1.1 JavaScript语句 321 13.1.2 JavaScript代码及执行 321 13.1.3 JavaScript语法补充 322 13.1.4 JavaScript代码注释 322 13.2 JavaScript变量与数据类型 323 13.2.1 JavaScript变量 323 13.2.2 JavaScript数据类型 324 13.2.3 JavaScript对象 327 13.2.4 null与undefined数据类型 329 13.2.5 JavaScript保留关键字 334 13.3 JavaScript运算符与表达式 335 13.3.1 JavaScript算术运算符及表达式 335 13.3.2 JavaScript赋值运算符及表达式 335 13.3.3 JavaScript比较运算符及表达式 336 13.3.4 JavaScript逻辑运算符及表达式 336 13.3.5 JavaScript条件运算符及表达式 336 13.3.6 JavaScript位运算符及表达式 336 13.3.7 JavaScript字符串连接运算符 337 13.3.8 JavaScript运算符优先级 337 13.4 JavaScript流程控制语句 338 13.4.1 if语句 338 13.4.2 if…else…语句 338 13.4.3 if…else if…else…语句 339 13.4.4 switch语句 341 13.4.5 for语句 343 13.4.6 while语句 345 15.4.7 break语句 346 15.4.8 continue语句 347 13.5 JavaScript函数 348 13.5.1 JavaScript函数介绍 349 13.5.2 JavaScript函数声明、定义与调用 349 13.5.3 JavaScript系统函数 356 13.6 项目实战：简易在线JavaScript计算器 368 第14章 JavaScript对象模型编程 372 14.1 对象模型编程基础 372 14.2 JavaScript浏览器对象模型 372 14.3 JavaScript文档对象模型 374 14.3.1 文档对象模型基础 374 14.3.2 通过id获取DOM元素对象 375 14.3.3 通过name获取DOM元素对象 376 14.3.4 通过tag标签获取DOM元素对象 377 14.3.5 通过class获取DOM元素对象 379 14.4 JavaScript表单对象模型 381 14.4.1 表单（Form）对象模型 381 14.4.2 获取表单（Form）元素对象属性 381 14.4.3 获取表单（Form）内元素的方法 382 14.5 项目实战：动态操作DOM元素 384 第15章 JavaScript事件 389 15.1 JavaScript事件基础 389 15.1.1 HTML事件 389 15.1.2 DOM事件类型 390 15.2 JavaScript窗口事件 391 15.2.1 窗口（Window）加载事件 391 15.2.2 窗口（Window）加载多个事件 392 15.2.3 窗口（Window）加载事件（JS方式） 393 15.3 JavaScript表单事件 394 15.3.1 表单（Form）元素变化事件 394 15.3.2 表单（Form）元素被选中事件 395 15.3.3 表单（Form）元素焦点事件 396 15.3.4 表单（Form）重置与提交事件 398 15.4 JavaScript键盘事件 399 15.5 JavaScript鼠标事件 401 15.5.1 鼠标单击事件 401 15.5.2 鼠标双击事件 402 15.5.3 鼠标悬停与移出事件 405 15.6 项目实战：鼠标坐标位置应用 407 第16章 项目实战——自适应Web主页 409 16.1 自适应Web主页介绍 409 16.2 自适应Web主页模块 410 16.2.1 页面框架 410 16.2.2 页面头部导航工具条 411 16.2.3 页面主体部分 415 16.2.4 页面页脚部分 419 16.3 自适应Web主页交互功能 420 16.4 自适应Web主页媒体查询 422 第17章 项目实战——用户管理系统 426 17.1 用户管理系统介绍 426 17.2 数据存储结构 426 17.3 浏览器本地存储 428 17.4 用户管理系统功能模块 429 17.4.1 用户管理系统主页 429 17.4.2 登录页面 431 17.4.3 用户管理页面（用户权限） 436 17.4.4 新建用户信息 440 17.4.5 编辑用户信息 447 17.4.6 删除用户信息 455 17.4.7 新用户注册 456