Web前端学习笔记：HTML5+CSS3+JavaScript.pdf (Wang Tao, Yang Yancheng, Jiang Hao etc.) (Z-Library)

📄 File Format: PDF

💾 File Size: 25.4 MB

📖 Read Online ⬇️ Download

Registered users can read the full content for free

Register as a Gaohf Library member to read the complete e-book online for free and enjoy a better reading experience.

📄 Page 1

(This page has no text content)

📄 Page 2

(This page has no text content)

📄 Page 3

信息科学与技术丛书 Web 前端学习笔记： HTML5+CSS3+JavaScript 杰瑞教育 组编 王 涛 杨延成 姜 浩 编著 机 械 工 业 出 版 社

📄 Page 4

本书以杰瑞教育前端课程大纲为基准，由浅及深地讲解了 Web 前端开 发所需的知识。全书共 3 篇，涵盖了 HTML5、CSS3 以及 JavaScript 等多 项技术，并提供学习视频，循序渐进地讲解每个知识点，同时每章均配有 课堂案例与练习，让读者能够在学习的过程中进行实践操作，提高动手能 力。本书可以帮助初学者顺利步入 Web 前端开发领域，也可作为开发人员 的参考手册以及大中专院校与培训机构的教材。 图书在版编目（CIP）数据 Web 前端学习笔记：HTML5+CSS3+JavaScript / 王涛编著．—北京：机械工业出版 社，2018.7 ISBN 978-7-111-60090-9 Ⅰ. ①W… Ⅱ. ①王… Ⅲ. ①超文本标记语言－程序设计 ②网页制作工具 ③JAVA 语言－程序设计 Ⅳ. ①TP312 ②TP393.092.2 中国版本图书馆 CIP 数据核字（2018）第115579 号 机械工业出版社（北京市百万庄大街 22 号 邮政编码 100037） 策划编辑：丁 诚 责任编辑：丁 诚 王 荣 责任校对：张艳霞 责任印制：常天培董娅娅 北京铭成印刷有限公司印刷 2018 年 7 月第 1 版·第 1 次印刷 184mm×260mm·19.75 印张·479 千字 0001―3500 册 标准书号：ISBN 978-7-111-60090-9 定价：69.00 元 凡购本书，如有缺页、倒页、脱页，由本社发行部调换 电话服务 网络服务 服务咨询热线：（010）88361066 机 工 官 网：www.cmpbook.com 读者购书热线：（010）68326294 机 工 官 博：weibo.com/cmp1952 （010）88379203 教育服务网：www.cmpedu.com 封面无防伪标均为盗版 金 书 网：www.golden-book.com

📄 Page 5

III 前 言 HTML 诞生于 20 世纪 90 年代，它带来了 Web 行业的一片繁荣。而随着移动互联网时代 的到来，HTML 的最新版本——HTML5 应运而生，它的出现颠覆了互联网开发的格局，取代 了 Flash 插件在网页开发中的垄断地位，优化了移动互联网的体验，甚至颠覆了 Android、iOS 等手机软件。 为了帮助更多的读者进入移动互联网行业。杰瑞教育组织专业讲师团队，完成了此书的 编写工作。杰瑞教育成立于 2011 年，专注于互联网人才培训领域，每年均为全国各地互联网 企业输送优秀 IT 人才数千人。本书以杰瑞教育 Web 前端课程大纲为基准，结合杰瑞教育线下 培训授课内容与课堂案例编写而成。 为保证学习效果，本书秉承“纯干货”的原则，帮助广大读者通过更精简的语言、更通 俗的案例，学习更全面的知识体系。 本书特点 本书的特点主要体现在以下几个方面：  配套资源丰富。 为方便读者自学，本书随书附赠教学视频以及案例源代码等学习资源。  专业的技术支持服务。 为保证读者学习效果，杰瑞教育将为读者提供专业的技术支持服务，解决读者学习的后 顾之忧。  专业的就业咨询服务。 对那些顺利完成本书学习任务，并达到相应技术要求的学员，杰瑞教育将有专业的就业 导师团队，为广大读者在就业过程中遇到的问题提供就业咨询服务。  完善的知识体系。 本书讲授的所有知识内容，均来自杰瑞教育多年教学经验的积累，完全按照杰瑞教育 Web 前端课程教学大纲要求进行本书知识体系的编写。  每章均提供案例与习题。 本书在注重理论知识的同时，更加注重学员的动手实践能力，每章节均附有完整的章节 案例与章节练习，帮助读者提高动手操作能力。 本书内容 本书分为 3 篇，共 18 章。 第 1 篇 HTML5（第 1～4 章）首先讲授的是 HTML5 的基础入门知识，紧接着是常见的 块级标签与行级标签，最后详细地介绍了表格与表单的使用。 第 2 篇 CSS3（第 5～10 章）首先从 CSS3 的基础知识开始，讲解了 CSS 样式表与选择 器的使用（包括 CSS3 新增选择器），并重点讲解了 CSS 中的各种属性以及 CSS3 的新属性，

📄 Page 6

IV 紧接着讲解了 CSS 中的盒模型、浮动、定位的相关知识，最后介绍移动开发、响应式与弹 性布局。 第 3 篇 JavaScript（第 11～18 章）从 JavaScript 的语法基础开始，逐步讲解 JavaScript 中的变量与运算符、分支与循环、函数、BOM 与 DOM、数组与对象、正则表达式等相关 知识点，并通过学习 JavaScript 面向对象来结束这一篇章的学习。这部分内容是全书的重点 也是难点。 适合阅读本书的读者  希望学习并从事 Web 前端行业的初学者。  具有一定的工作经验但希望夯实基础知识的前端开发工程师。  相关专业大中专院校或培训学校的学生。  需要备课教材的大中专院校或培训学校的教师。  希望转入 Web 前端开发的其他软件工程师。 阅读建议  没有基础的读者应从第 1 章开始顺序阅读，尽量不要跳跃学习。  有一定工作经验的开发工程师可以根据需要选择所需章节阅读。  学练结合，将书中涉及的案例与练习亲自动手做一遍，会加深对内容的理解。  认真阅读书中的源代码，养成良好的编码习惯。  结合图书配套视频学习，可以帮助读者更好地掌握新的知识点。  养成良好的自学习惯，这将对读者以后的发展至关重要。  提升解决问题的能力，学会利用网络资源解决问题。 本书作者 本书由王涛、杨延成、姜浩编写，姜浩、王翠英负责本书的资料与案例整理，杨延成负 责全书的最后审定工作。 编 者 2018 年 1 月

📄 Page 7

V 目 录 前言 第 1 篇 HTML5 第 1 章 HTML5 学习概述 ······································································································ 1 1.1 认识 HTML5 ··············································································································· 1 1.1.1 HTML 的发展历程 ································································································· 1 1.1.2 HTML5 与 HTML4 的区别 ······················································································ 2 1.2 学习 HTML5 前的准备工作 ······················································································· 2 1.2.1 常用浏览器介绍 ···································································································· 2 1.2.2 常见的 HTML5 开发软件介绍 ·················································································· 3 1.2.3 创建第一个 HTML5 页面 ························································································ 4 1.3 HTML5 的语法与结构 ································································································ 5 1.3.1 HTML5 的语法 ······································································································ 5 1.3.2 HTML5 的文档结构 ······························································································· 6 1.4 章节案例：开始我的第一个网页 ··············································································· 8 第 2 章 HTML5 常见的块级标签和行级标签 ········································································ 10 2.1 常见的块级标签 ········································································································ 10 2.1.1 <h1></h1>…<h6></h6>：标题标签 ········································································· 10 2.1.2 <hr/>：水平线标签······························································································· 11 2.1.3 <p></p>：段落标签 ······························································································ 12 2.1.4 <br/>：换行标签 ·································································································· 12 2.1.5 <blockquote></blockquote>：引用标签 ···································································· 13 2.1.6 <pre></pre>：预格式标签 ····················································································· 13 2.1.7 <ul><li></li></ul>：无序列表标签 ·········································································· 14 2.1.8 <ol><li></li></ol>：有序列表标签 ·········································································· 15 2.1.9 <dl></dl>：定义列表标签 ····················································································· 17 2.1.10 <div></div>：分区标签 ······················································································· 18 2.2 常见的行级标签 ········································································································ 19 2.2.1 <img/>：图片标签 ······························································································· 19 2.2.2 <a></a>：超链接标签 ··························································································· 20 2.2.3 其他常用的行级标签 ···························································································· 21 2.3 HTML5 新增标签简介 ······························································································ 22 2.4 章节案例：促销信息网页实现 ················································································· 23 第 3 章 HTML5 表格 ············································································································· 25

📄 Page 8

VI 3.1 HTML5 表格简介 ····································································································· 25 3.1.1 表格的基本结构 ·································································································· 26 3.1.2 表格的定义 ········································································································· 26 3.2 表格的基本属性 ········································································································ 27 3.2.1 border: 表格边框属性 ·························································································· 27 3.2.2 width/height: 表格（宽度/高度）属性 ····································································· 28 3.2.3 bgcolor: 表格背景色属性 ······················································································ 28 3.2.4 background: 表格背景图属性 ················································································· 28 3.2.5 bordercolor: 表格边框颜色属性 ·············································································· 29 3.2.6 cellspacing: 表格单元格间距属性 ··········································································· 29 3.2.7 cellpadding: 表格单元格内边距属性 ······································································· 30 3.2.8 align:表格对齐属性 ······························································································ 31 3.3 行和列的属性 ··········································································································· 31 3.3.1 width/height：单元格宽度/高度属性 ········································································ 32 3.3.2 bgcolor：单元格背景色属性 ·················································································· 32 3.3.3 align：单元格内容水平对齐属性 ············································································ 33 3.3.4 valign：单元格内容垂直对齐属性 ·········································································· 33 3.3.5 colspan /rowspan：表格的跨行与跨列 ······································································ 34 3.4 表格的结构化与直列化 ···························································································· 35 3.4.1 表格的结构化 ······································································································ 35 3.4.2 表格的直列化 ······································································································ 36 3.5 章节案例：完成 “特别休假申请单” ···································································· 37 第 4 章 HTML5 表单 ············································································································· 40 4.1 表单简介 ··················································································································· 40 4.1.1 表单的结构 ········································································································· 40 4.1.2 表单的常用属性 ·································································································· 41 4.2 input 输入框 ·············································································································· 42 4.2.1 input 常用属性 ····································································································· 42 4.2.2 text：文本输入框 ································································································· 43 4.2.3 password：密码输入框 ·························································································· 44 4.2.4 radio：单选按钮 ·································································································· 44 4.2.5 checkbox：复选按钮 ····························································································· 44 4.2.6 file：文件上传按钮 ······························································································ 45 4.2.7 submit：表单提交按钮 ·························································································· 46 4.2.8 reset：重置按钮 ··································································································· 46 4.2.9 image：图形提交按钮 ··························································································· 47 4.2.10 button：可单击按钮 ···························································································· 47

📄 Page 9

VII 4.3 其他表单元素 ··········································································································· 47 4.3.1 select 下拉选择控件 ······························································································ 47 4.3.2 textarea 文本域 ···································································································· 50 4.3.3 button 按钮·········································································································· 50 4.4 HTML5 智能表单 ····································································································· 51 4.4.1 表单分组 ············································································································ 51 4.4.2 表单新增元素及属性 ···························································································· 52 4.5 章节案例：用户注册页面实现 ················································································· 57 第 2 篇 CSS3 第 5 章 CSS 基础知识 ············································································································ 60 5.1 CSS 概述 ··················································································································· 60 5.1.1 CSS 简介 ············································································································ 60 5.1.2 CSS 语法结构 ······································································································ 61 5.1.3 CSS 注释 ············································································································ 61 5.1.4 行内样式表 ········································································································· 62 5.1.5 内部样式表 ········································································································· 62 5.1.6 外部样式表 ········································································································· 62 5.2 CSS 选择器 ··············································································································· 64 5.2.1 通用选择器 ········································································································· 64 5.2.2 标签选择器 ········································································································· 64 5.2.3 类选择器 ············································································································ 64 5.2.4 id 选择器 ············································································································ 65 5.2.5 后代选择器与子代选择器 ······················································································ 66 5.2.6 交集选择器与并集选择器 ······················································································ 66 5.2.7 伪类选择器 ········································································································· 67 5.2.8 选择器的命名规则及优先级 ·················································································· 67 5.3 章节案例：CSS 选择器练习 ····················································································· 68 第 6 章 CSS 常用属性 ············································································································ 70 6.1 CSS 常用文本属性 ···································································································· 70 6.1.1 字体、字号与颜色属性 ························································································· 70 6.1.2 文本属性 ············································································································ 72 6.2 CSS 常用背景属性 ···································································································· 76 6.2.1 背景颜色属性 ······································································································ 76 6.2.2 背景图像属性 ······································································································ 76 6.3 CSS 其他常用属性 ···································································································· 79 6.3.1 列表常用属性 ······································································································ 79

📄 Page 10

VIII 6.3.2 超链接样式属性 ·································································································· 79 6.4 章节案例：实现素材图片效果 ················································································· 80 第 7 章 CSS3 新增属性与选择器 ··························································································· 82 7.1 CSS3 的过渡与变换 ·································································································· 82 7.1.1 transition：过渡属性 ····························································································· 82 7.1.2 transform：变换属性 ···························································································· 84 7.2 CSS3 动画 ················································································································· 86 7.2.1 CSS3 动画的@keyframes 和 animation ····································································· 86 7.2.2 CSS3 animation 动画属性 ······················································································ 88 7.3 CSS3 其他常用属性 ·································································································· 90 7.3.1 CSS3 渐变效果 ···································································································· 90 7.3.2 CSS3 多列属性 ···································································································· 92 7.4 CSS3 新增选择器 ······································································································ 93 7.4.1 属性选择器 ········································································································· 93 7.4.2 结构伪类选择器 ·································································································· 95 7.4.3 状态伪类选择器 ·································································································· 96 7.4.4 其他选择器 ········································································································· 97 7.5 章节案例：飞机滑翔动画实现 ················································································· 98 第 8 章 CSS 盒模型与浮动定位 ··························································································· 101 8.1 盒模型 ····················································································································· 101 8.1.1 盒模型概述 ······································································································· 101 8.1.2 margin：外边距 ································································································· 104 8.1.3 border：边框 ····································································································· 107 8.1.4 padding：内边距 ································································································ 109 8.2 盒模型相关属性 ······································································································· 110 8.2.1 overflow：内容溢出控制 ······················································································ 110 8.2.2 outline：外围线 ·································································································· 112 8.2.3 box-shadow：盒子阴影 ························································································ 113 8.2.4 border-radius：边框圆角 ······················································································ 113 8.2.5 border-image：图片边框 ······················································································ 115 8.3 浮动与清除浮动 ······································································································· 116 8.3.1 float：浮动 ········································································································ 116 8.3.2 clear：清除浮动 ·································································································· 117 8.3.3 子盒子浮动造成父盒子高度塌陷 ··········································································· 118 8.4 定位 ························································································································ 120 8.4.1 relative：相对定位 ····························································································· 120 8.4.2 absolute：绝对定位 ···························································································· 121

📄 Page 11

IX 8.4.3 fixed：固定定位 ································································································ 123 8.4.4 使用定位实现元素的绝对居中 ············································································· 124 8.4.5 z-index ············································································································· 126 8.5 章节案例：网页布局练习 ······················································································· 127 第 9 章 移动开发与响应式 ··································································································· 131 9.1 移动开发基础知识 ·································································································· 131 9.1.1 媒体设备常用属性 ····························································································· 131 9.1.2 像素的基础知识 ································································································ 132 9.1.3 viewport：视口 ·································································································· 132 9.2 移动开发常用设置 ·································································································· 134 9.2.1 移动开发中常用的头部标签 ················································································ 134 9.2.2 移动开发中常用的 CSS 设置················································································ 135 9.3 网页布局方式介绍 ·································································································· 136 9.3.1 网页的布局方式 ································································································ 136 9.3.2 响应式布局介绍 ································································································ 137 9.4 媒体查询实现响应式 ······························································································ 138 9.4.1 媒体查询的基本语法 ·························································································· 138 9.4.2 使用媒体查询的三种方式 ···················································································· 139 9.5 章节案例：媒体查询实例练习 ··············································································· 139 第 10 章 CSS3 弹性布局 ······································································································ 143 10.1 弹性布局简介 ······································································································· 143 10.1.1 弹性布局的基本概念 ························································································ 143 10.1.2 使用弹性布局需要注意的问题 ············································································ 143 10.1.3 弹性布局代码示例 ···························································································· 144 10.2 作用于容器的属性 ································································································ 145 10.2.1 flex-direction：主轴方向 ··················································································· 145 10.2.2 flex-wrap：控制换行 ························································································ 146 10.2.3 flex-flow：缩写形式 ························································································· 146 10.2.4 justify-content：主轴对齐 ·················································································· 146 10.2.5 align-items：交叉轴单行对齐 ············································································· 147 10.2.6 align-content：交叉轴多行对齐 ·········································································· 147 10.3 作用于项目的属性 ································································································ 148 10.3.1 order：项目排序 ······························································································· 148 10.3.2 flex-grow：项目放大比 ····················································································· 149 10.3.3 flex-shrink：项目缩小比···················································································· 149 10.3.4 flex-basis：伸缩基准值 ····················································································· 149 10.3.5 flex：缩写形式 ································································································ 150

📄 Page 12

X 10.3.6 align-self：自身对齐 ························································································· 150 第 3 篇 JavaScript 第 11 章 JavaScript 基础 ······································································································ 151 11.1 JavaScript 简介 ······································································································ 151 11.1.1 JavaScript 概念 ································································································· 151 11.1.2 页面中使用 JavaScript 的三种方式 ······································································ 152 11.2 JavaScript 的变量 ·································································································· 152 11.2.1 变量的声明 ····································································································· 152 11.2.2 声明变量的注意事项与命名规范 ········································································ 153 11.2.3 变量的数据类型 ······························································································· 154 11.3 JavaScript 中的变量函数 ······················································································· 156 11.3.1 Number：将变量转为数值类型 ··········································································· 156 11.3.2 isNaN：检测变量是否为 NaN ············································································· 157 11.3.3 parseInt：将字符串转为整型 ·············································································· 157 11.3.4 parseFloat：将字符串转为浮点型 ········································································ 158 11.3.5 typeof：变量类型检测 ······················································································· 158 11.4 JavaScript 中的输入输出 ······················································································· 159 11.4.1 document.write：文档中打印输出 ········································································ 159 11.4.2 alert：浏览器弹窗输出 ······················································································ 159 11.4.3 prompt：浏览器弹窗输入 ·················································································· 160 11.4.4 confirm：浏览器弹窗确认·················································································· 160 11.4.5 console.log：浏览器控制台输出 ·········································································· 161 11.4.6 JavaScript 中的注释 ·························································································· 162 11.5 JavaScript 的运算符 ······························································································· 163 11.5.1 算术运算 ········································································································ 163 11.5.2 赋值运算符 ····································································································· 164 11.5.3 关系运算与逻辑运算 ························································································ 165 11.5.4 条件运算（多目运算） ····················································································· 166 11.5.5 逗号运算符 ····································································································· 167 11.5.6 运算符的优先级 ······························································································· 167 11.6 章节案例：判断一个数是否为水仙花数 ······························································ 168 第 12 章 JavaScript 流程控制语句 ······················································································ 170 12.1 分支结构 ··············································································································· 170 12.1.1 简单 if 结构 ····································································································· 170 12.1.2 if-else 结构 ······································································································ 171 12.1.3 多重 if 结构 ····································································································· 172

📄 Page 13

XI 12.1.4 嵌套 if 结构 ····································································································· 172 12.1.5 switch-case 结构 ······························································································· 173 12.2 循环结构 ··············································································································· 175 12.2.1 循环的基本思路 ······························································································· 175 12.2.2 while 循环结构 ································································································· 176 12.2.3 do-while 循环结构 ···························································································· 177 12.2.4 for 循环结构 ···································································································· 177 12.2.5 循环嵌套 ········································································································ 178 12.3 流程控制语句 ······································································································· 180 12.3.1 break 语句 ······································································································· 180 12.3.2 continue 语句 ··································································································· 180 12.3.3 return 语句 ······································································································ 181 12.4 章节案例：打印输出一个菱形 ············································································· 182 第 13 章 JavaScript 函数 ····································································································· 184 13.1 函数的声明与调用 ································································································ 184 13.1.1 函数的声明 ····································································································· 184 13.1.2 函数的调用 ····································································································· 185 13.1.3 函数的作用域 ·································································································· 186 13.1.4 函数声明和调用的注意事项 ··············································································· 187 13.2 匿名函数的声明与调用 ························································································ 188 13.2.1 事件调用匿名函数 ···························································································· 188 13.2.2 匿名函数表达式 ······························································································· 188 13.2.3 自执行函数 ····································································································· 189 13.3 函数中的内置对象 ································································································ 190 13.3.1 arguments 对象 ································································································· 190 13.3.2 this 关键字 ······································································································ 192 13.4 JavaScript 中代码的执行顺序 ··············································································· 193 13.5 章节案例：编写函数统计任意区间内的质数 ······················································· 194 第 14 章 BOM 与 DOM ······································································································· 196 14.1 window 对象 ········································································································· 196 14.1.1 window 对象的属性 ·························································································· 196 14.1.2 window 对象的常用方法 ···················································································· 197 14.2 浏览器对象模型的其他对象 ················································································· 199 14.2.1 screen：屏幕对象 ····························································································· 199 14.2.2 location：地址栏对象 ························································································ 200 14.2.3 history：历史记录对象 ······················································································ 201 14.2.4 navigator：浏览器配置对象 ················································································ 202

📄 Page 14

XII 14.3 Core DOM ············································································································· 203 14.3.1 DOM 树结构分析 ····························································································· 204 14.3.2 操作元素节点 ·································································································· 204 14.3.3 操作文本节点 ·································································································· 205 14.3.4 操作属性节点 ·································································································· 208 14.3.5 JavaScript 修改元素样式 ···················································································· 209 14.3.6 获取层次节点 ·································································································· 212 14.3.7 创建新节点 ····································································································· 214 14.3.8 删除/替换节点 ································································································· 217 14.4 HTML DOM ·········································································································· 218 14.4.1 HTML DOM 操作表格对象 ················································································ 219 14.4.2 HTML DOM 操作行对象 ··················································································· 220 14.4.3 HTML DOM 操作单元格对象 ············································································· 222 14.5 章节案例：实现评论提交展示功能 ······································································ 223 第 15 章 JavaScript 事件 ····································································································· 228 15.1 JavaScript 的事件 ·································································································· 228 15.1.1 鼠标事件 ········································································································ 228 15.1.2 键盘事件 ········································································································ 229 15.1.3 HTML 事件 ····································································································· 231 15.1.4 event 事件因子 ································································································· 233 15.2 JavaScript 的事件模型 ··························································································· 234 15.2.1 DOM0 事件模型 ······························································································· 234 15.2.2 DOM2 事件模型 ······························································································· 234 15.3 JavaScript 的事件流模型 ······················································································· 236 15.3.1 事件冒泡 ········································································································ 236 15.3.2 事件捕获 ········································································································ 238 15.3.3 事件委派 ········································································································ 240 15.3.4 阻止事件冒泡 ·································································································· 242 15.3.5 阻止默认事件 ·································································································· 242 15.4 章节案例：对表格进行修改删除操作 ·································································· 243 第 16 章 数组和对象 ············································································································ 246 16.1 JavaScript 的数组 ·································································································· 246 16.1.1 数组的概念 ····································································································· 246 16.1.2 数组的声明 ····································································································· 246 16.1.3 数组的访问 ····································································································· 248 16.1.4 数组常用方法 ·································································································· 248 16.1.5 二维数组和稀疏数组 ························································································ 255

📄 Page 15

XIII 16.2 JavaScript 的内置对象 ··························································································· 256 16.2.1 Boolean：逻辑对象 ··························································································· 256 16.2.2 Number：数字对象 ··························································································· 256 16.2.3 String：字符串对象 ·························································································· 258 16.2.4 Date：日期对象 ······························································································· 260 16.2.5 Math：算术对象······························································································· 261 16.3 JavaScript 自定义对象 ··························································································· 262 16.3.1 对象的概念 ····································································································· 262 16.3.2 对象的声明 ····································································································· 263 16.3.3 对象的属性与方法 ···························································································· 264 16.4 章节案例：编写对象实现班级成绩录入 ······························································ 265 第 17 章 JavaScript 中的正则表达式 ··················································································· 268 17.1 正则表达式基础 ···································································································· 268 17.1.1 正则表达式概述 ······························································································· 268 17.1.2 正则表达式的声明 ···························································································· 269 17.2 正则表达式的常用字符 ························································································ 269 17.2.1 正则表达式中的元字符 ····················································································· 269 17.2.2 正则表达式中的特殊字符 ·················································································· 270 17.3 正则表达式的常用模式 ························································································ 271 17.3.1 g：全局匹配 ···································································································· 272 17.3.2 i：忽略大小写匹配 ··························································································· 272 17.3.3 m：多行匹配 ··································································································· 273 17.4 正则表达式的常用方法 ························································································ 274 17.4.1 test() 方法 ······································································································· 274 17.4.2 exec() 方法 ····································································································· 274 17.5 章节案例：使用正则表达式验证用户注册表单 ··················································· 276 第 18 章 JavaScript 面向对象编程 ······················································································ 278 18.1 面向对象编程基础 ································································································ 278 18.1.1 面向对象概述 ·································································································· 278 18.1.2 类与对象 ········································································································ 279 18.1.3 类和对象的关系 ······························································································· 279 18.1.4 JavaScript 创建类与对象的步骤 ·········································································· 279 18.1.5 constructor 与 instanceof ····················································································· 281 18.1.6 for-in：对象的遍历 ·························································································· 281 18.2 成员属性、静态属性与私有属性 ········································································· 282 18.2.1 成员属性与成员方法 ························································································ 282 18.2.2 静态属性与静态方法 ························································································ 282

📄 Page 16

XIV 18.2.3 私有属性与私有方法 ························································································ 283 18.3 this 关键字 ············································································································ 284 18.3.1 this 的指向概述 ································································································ 284 18.3.2 this 指向的规律 ································································································ 284 18.3.3 this 指向练习 ··································································································· 285 18.4 原型与原型链 ······································································································· 286 18.4.1 __proto__与 prototype ························································································ 286 18.4.2 原型链 ············································································································ 287 18.4.3 原型属性与原型方法 ························································································ 287 18.5 封装 ······················································································································ 289 18.5.1 封装的基本概念 ······························································································· 289 18.5.2 JavaScript 模拟实现封装 ···················································································· 290 18.6 继承 ······················································································································ 291 18.6.1 继承的基本概念 ······························································································· 291 18.6.2 扩展 Object 的 prototype 实现继承 ······································································· 291 18.6.3 使用原型继承 ·································································································· 293 18.6.4 使用 call 和 apply 实现继承 ················································································ 294 18.7 JavaScript 中的闭包 ······························································································ 295 18.7.1 闭包的基本概念 ······························································································· 296 18.7.2 闭包的作用 ····································································································· 296 18.7.3 闭包应用实例 ·································································································· 297 18.8 章节案例：定义一个 URL 信息操作类 ································································ 298

📄 Page 17

第 1 篇 HTML5 1 第 1 篇 HTML5 第 1 章 HTML5 学习概述 HTML 是 HyperText Markup Language（超文本标记语言）的缩写，它是用于创建网页 的标准标记语言。HTML 使用标记标签来描述网页，由浏览器来解析，即使用 HTML 来建 立 Web 站点，通过 Web 浏览器读取 HTML 文档，并以网页的形式显示出来。 欢迎各位读者步入 HTML5 的世界。本书将立足企业需求，从最基础的知识点讲解，一 步步带领大家成为一名优秀的 HTML5 开发工程师。 本章学习目标：  了解 HTML 的发展历程及影响。  安装 HTML 的开发软件。  掌握 HTML 的基本结构与语法。 本章首先介绍 HTML5 的由来，HTML5 与 HTML4 的区别，然后介绍学习 HTML 前的 准备工作，最后介绍 HTML5 的语法与结构，并完成一个简单的网页页面。 1.1 认识 HTML5 HTML5 是 HTML 最新的修订版本，2014 年 10 月由万维网联盟（W3C）完成标准制 定。HTML5 是跨平台的，被设计为在不同类型的硬件（台式计算机、平板计算机、手机、 电视机等）上运行的语言。 1.1.1 HTML 的发展历程 通俗来讲，HTML 就是网页的源代码，任何一个网页都是由一行行 HTML 代码编写而 成的。 HTML 的第一个版本诞生于 20 世纪七八十年代，当时互联网没有普及，也没有专业的 组织制定 HTML 规范。因此，那个时代 HTML 的发展非常混乱，并没有受到开发者的重 视，更没有得到大幅度的发展，HTML 还是一门冷门的语言。 HTML 真正崛起是从 1998 年诞生的 HTML4.0 版本开始的，紧接着在 1999 年更新了 HTML4.01 版本。自 HTML4.01 版本以后，Web 世界经历了巨变。此时，被称为 BAT 三巨 头的百度、阿里巴巴、腾讯等互联网企业相继崛起，标志着互联网时代的到来。 HTML5 是由 W3C（万维网联盟）于 2007 年正式立项的，直至 2014 年 10 月底，这个 长达八年的规范终于制定完成并公开发布。 HTML5 将会取代 HTML4.01、XHTML1.0 标准，使网络标准满足互联网应用迅速发展 的需求，为移动平台带来多媒体，推动 Web 进入新的时代。

📄 Page 18

Web 前端学习笔记：HTML5+CSS3+JavaScript 2 1.1.2 HTML5 与 HTML4 的区别 除了本身的 HTML5 标记之外，广义的 HTML5 还包含 CSS3 与 JavaScript。由于 HTML5 设计的目的是在移动设备上支持多媒体，所以新的语法特征被引进以支持这一点， 但是基本的标记语法并没有大的改变。下面列出 HTML4 与 HTML5 的主要区别。 1．语法简化 更简单的 doctype 是 HTML5 中众多新特征之一。在 HTML5 中，头部只需要写 <!DOCTYPE html>即可。HTML5 的语法兼容 HTML4 和 XHTML1，但不兼容 SGML。 2．新增语义化标签 新增加的语义化标签（如<header>、<footer>、<section>等）使得网页的可读性变得更 高，也更加明确地表示出网页的结构，对于搜索引擎优化（SEO）有很大帮助。 3．新的媒体标签 新的<audio>和<video>标签可以用来嵌入音频文件和视频文件。这些标签的使用让网页 播放音频、视频更加方便。 4．使用画布标签绘制图形 <canvas>标签具有绘图功能，通过与 JavaScript 脚本的搭配，可在网页上绘制图像。 5．新的表单设计 在 HTML5 中，表单增加了新元素，也为表单元素增加了许多新属性，让表单的使用更 加便利。 6．废除了一些旧标签 HTML5 废除了一些标签，其中大部分为网页美化标签，如<center>、<font>、<tt>、 <big>、<dir>、<marquee>、<frame>等。 1.2 学习 HTML5 前的准备工作 在开始编写 HTML5 网页之前，首先要准备好编写 HTML5 的操作环境和浏览器环境。 本节介绍常用浏览器和常见的 HTML5 开发软件，以及如何创建一个 HTML5 页面。 1.2.1 常用浏览器介绍 浏览器是指可以显示网页服务器或者文件系统的HTML 文件（标准通用标记语言的一个 应用）内容，并可以让用户与 HTML 文件交互的一种软件。浏览器可以解析 HTML 文件， 它不会显示 HTML 标签，而是使用标签来解释页面的内容。 1．常用浏览器 1）Internet Explorer 是微软公司推出的一款网页浏览器。全称 Microsoft Internet Explorer（6 版本以前）和 Windows Internet Explorer（7、8、9、10、11 版本），简称 IE。 在 IE7 以前，中文直译为“网络探路者”，但在 IE7 以后便直接称为“IE 浏览器”。IE9 和 IE10 支持部分 HTML5 技术。 2013 年 10 月 IE11（11.0.9600.16384）问世，由于 HTML5 标准规范于 2014 年 10 月公 布，所以 IE11 不可能完全支持 HTML5 的所有技术。

📄 Page 19

第 1 章 HTML5 学习概述 3 2015 年微软公司放弃 IE 浏览器，推出 Microsoft Edge 浏览器。Microsoft Edge 浏览器在 支持 HTML5 方面有了很大提高。 2）Google Chrome 是由 Google 公司开发的一款网页浏览器。Google Chrome 的特点是 简洁、快速。由于 Google Chrome 拥有更强大的 JavaScript V8 引擎，使其拥有更快的解析和 执行速度。2016 年 12 月，Google Chrome 把 HTML5 设为网页核心内容。 3）Mozilla Firefox 中文俗称“火狐”（正式缩写为 Fx 或 fx），是一个自由及开放源代 码的网页浏览器，支持多种操作系统。它是在网页开发调试过程中常用的一款浏览器。 2．浏览器内核介绍 浏览器内核主要分成两部分：渲染引擎和 JavaScript 引擎。 1）渲染引擎负责获取网页内容（HTML、XML、图像等）、整理信息（如加入 CSS 等）以及计算网页的显示方式，然后输出至显示器或打印机。所有网页浏览器、电子邮件客 户端及其他需要编辑、显示网络内容的应用程序都需要内核。浏览器内核的不同对于网页的 语法解释也会有不同，所以渲染的效果也不同。 2）JavaScript 引擎负责解析和执行 JavaScript 来实现网页的动态效果。 开始，渲染引擎和 JavaScript 引擎并没有区分得很明确，后来，JavaScript 引擎越来越独 立，内核就倾向于指渲染引擎。 常见的浏览器内核见表 1-1。 表 1-1 常见的浏览器内核 浏览器内核分类 常见浏览器 备 注 Trident(IE 内核) IE 浏览器、360 安全浏览器、猎豹安全浏 览器、傲游浏览器、百度浏览器、世界之窗 浏览器、2345 浏览器、搜狗高速浏览器等 其中部分浏览器的新版本是“双 核”，甚至是“多核”，其中一个内核是 Trident，然后增加一个其他内核 Gecko(Firefox 内核) Netscape6 及以上版本，Mozilla Firefox、 Mozilla SeaMonkey 等 Gecko 的特点是代码完全公开 Presto(Opera 前内核) (已废弃) Opera12.17 及更早版本曾经采用的内核 Presto 内核现已停止开发并废弃。Opera 现已改用Google Chrome的Blink内核 Webkit(Safari 内核,Chrome 内 核原型,开源) Chrome、Apple Safari（Windows/Mac/iPhone/ iPad）、Android 默认浏览器等 Blink 内核是一个由 Google 和 Opera Software 开发的浏览器排版引擎，作为 Webkit 的分支 1.2.2 常见的 HTML5 开发软件介绍 1．HBuilder HBuilder 是 DCloud（数字天堂）推出的一款支持 HTML5 的 Web 开发软件。HBuilder 主体是由 Java 编写的。它基于 Eclipse，所以顺其自然地兼容了 Eclipse 的插件。 快是 HBuilder 的最大优势，通过完整的语法提示和代码输入法、代码块等，大幅提升 HTML、JavaScript、CSS 的开发效率。同时，它还包括最全面的语法库和浏览器兼容性数据。 2．Dreamweaver Adobe Dreamweaver 简称“DW”，中文名称“梦想编织者”，是美国 MACROMEDIA 公 司（该公司成立于 1992 年，2005 年被 Adobe 公司收购）开发的集网页制作和网站管理功能 于一身的所见即所得网页代码编辑器。 3．WebStorm WebStorm 是 JetBrains 公司旗下一款 JavaScript 开发工具。目前，WebStorm 被广大中国

📄 Page 20

Web 前端学习笔记：HTML5+CSS3+JavaScript 4 JavaScript 开发者誉为“Web 前端开发神器”“最强大的 HTML5 编辑器”“最智能的 JavaScript IDE”等。 4．Notepad++ Notepad++是 Windows 操作系统下的一套文本编辑器，有完整的中文化接口并支持多国 语言编写的功能（UTF8 技术）。 本书选择 HBuilder 进行讲解和开发。 1.2.3 创建第一个 HTML5 页面 首先要安装 HBuilder。下载地址为 http://www.dcloud.io/，下载后的安装文件为一个压缩 包，解压到想要存放的目录，打开使用即可。 1）打开 HBuilder，单击“文件”→“新建”→“Web 项目”，如图 1-1 所示。 图 1-1 创建 Web 项目 2）在弹出的对话框中输入项目名称，如 HelloWorld，再单击“浏览”按钮，选择项目 存放位置，单击“完成”按钮，如图 1-2 所示。 图 1-2 设置项目信息