编辑推荐
适读人群:前端开发有志于从事前端开发行业的初学者
移动互联网时代,前端开发技术发展迅速而且持续火爆,因此前端开发技术岗位需求量巨大,且平均薪水相当可观。相对于学习门槛高,涉及知识面广,上手慢的后台技术前端开发技术具有门槛低、易学易用、快速上手的特点,特别适合那些非计算机专业出身但是向往互联网产业的人群学习。《Web前端学习笔记:HTML5+CSS3+JavaScript》正是为了满足这个市场需求而编写的,《Web前端学习笔记:HTML5+CSS3+JavaScript》上手容易,内容实用,配套丰富,既适合自学,也可作为培训机构或院校的教材。内容简介
《Web前端学习笔记:HTML5+CSS3+JavaScript》以杰瑞教育前端课程大纲为基准,由浅及深地讲解了Web前端开发所需的知识。《Web前端学习笔记:HTML5+CSS3+JavaScript》共3篇,涵盖了HTML5、CSS3以及JavaScript等多项技术,并提供学习视频,循序渐进地讲解每个知识点,同时每章均配有课堂案例与练习,让读者能够在学习的过程中进行实践操作,提高动手能力。《Web前端学习笔记:HTML5+CSS3+JavaScript》可以帮助初学者顺利步入Web前端开发领域,也可作为开发人员的参考手册以及大中专院校与培训机构的教材。作者简介
【王涛】,
山东捷瑞数字科技股份有限公司CEO,北京大学硕士研究生校外导师,山东省软件企业家、山东省电子信息行业企业家。创建并带领捷瑞数字成为领先的大数据可视化与数字展馆解决方案提供商。
【杨延成】,
杰瑞教育总经理、高级讲师,从事IT教育领域多年,主要研究方向为C#、Java、HTML5以及Python。自2010年以来,受聘于山东省内多所高等院校担任客座讲师。
【姜浩】,
杰瑞教育在线教育事业部总监,精通Web前端开发技术以及Java、PHP、Python等后台开发语言,曾参与多款企业级电商项目开发,所教授学员多人入职国内IT企业,深受学员好评。目录
前言
第1篇HTML5
第1章HTML5学习概述
1.1认识HTML5
1.1.1HTML的发展历程
1.1.2HTML5与HTML4的区别
1.2学习HTML5前的准备工作
1.2.1常用浏览器介绍
1.2.2常见的HTML5开发软件介绍
1.2.3创建第一个HTML5页面
1.3HTML5的语法与结构
1.3.1HTML5的语法
1.3.2HTML5的文档结构
1.4章节案例:开始我的第一个网页第2章HTML5常见的块级标签和行级标签
2.1常见的块级标签
2.1.1:标题标签
2.1.2:水平线标签
2.1.3:段落标签
2.1.4
:换行标签
2.1.5:引用标签
2.1.6:预格式标签
2.1.7:无序列表标签
2.1.8:有序列表标签
2.1.9:定义列表标签
2.1.10:分区标签
2.2常见的行级标签
2.2.1:图片标签
2.2.2:超链接标签
2.2.3其他常用的行级标签
2.3HTML5新增标签简介
2.4章节案例:促销信息网页实现第3章HTML5表格
3.1HTML5表格简介
3.1.1表格的基本结构
3.1.2表格的定义
3.2表格的基本属性
3.2.1border:表格边框属性
3.2.2width/height:表格(宽度/高度)属性
3.2.3bgcolor:表格背景色属性
3.2.4background:表格背景图属性
3.2.5bordercolor:表格边框颜色属性
3.2.6cellspacing:表格单元格间距属性
3.2.7cellpadding:表格单元格内边距属性
3.2.8align:表格对齐属性
3.3行和列的属性
3.3.1width/height:单元格宽度/高度属性
3.3.2bgcolor:单元格背景色属性
3.3.3align:单元格内容水平对齐属性
3.3.4valign:单元格内容垂直对齐属性
3.3.5colspan/rowspan:表格的跨行与跨列
3.4表格的结构化与直列化
3.4.1表格的结构化
3.4.2表格的直列化
3.5章节案例:完成“特别休假申请单第4章HTML5表单
4.1表单简介
4.1.1表单的结构
4.1.2表单的常用属性
4.2input输入框
4.2.1input常用属性
4.2.2text:文本输入框
4.2.3password:密码输入框
4.2.4radio:单选按钮
4.2.5checkbox:复选按钮
4.2.6file:文件上传按钮
4.2.7submit:表单提交按钮
4.2.8reset:重置按钮
4.2.9image:图形提交按钮
4.2.10button:可单击按钮
4.3其他表单元素
4.3.1select下拉选择控件
4.3.2textarea文本域
4.3.3button按钮
4.4HTML5智能表单
4.4.1表单分组
4.4.2表单新增元素及属性
4.5章节案例:用户注册页面实现第2篇CSS3
第5章CSS基础知识
5.1CSS概述
5.1.1CSS简介
5.1.2CSS语法结构
5.1.3CSS注释
5.1.4行内样式表
5.1.5内部样式表
5.1.6外部样式表
5.2CSS选择器
5.2.1通用选择器
5.2.2标签选择器
5.2.3类选择器
5.2.4id选择器
5.2.5后代选择器与子代选择器
5.2.6交集选择器与并集选择器
5.2.7伪类选择器
5.2.8选择器的命名规则及优先级
5.3章节案例:CSS选择器练习第6章CSS常用属性
6.1CSS常用文本属性
6.1.1字体、字号与颜色属性
6.1.2文本属性
6.2CSS常用背景属性
6.2.1背景颜色属性
6.2.2背景图像属性
6.3CSS其他常用属性
6.3.1列表常用属性
6.3.2超链接样式属性
6.4章节案例:实现素材图片效果第7章CSS3新增属性与选择器
7.1CSS3的过渡与变换
7.1.1transition:过渡属性
7.1.2transform:变换属性
7.2CSS3动画
7.2.1CSS3动画的@keyframes和animation
7.2.2CSS3animation动画属性
7.3CSS3其他常用属性
7.3.1CSS3渐变效果
7.3.2CSS3多列属性
7.4CSS3新增选择器
7.4.1属性选择器
7.4.2结构伪类选择器
7.4.3状态伪类选择器
7.4.4其他选择器
7.5章节案例:飞机滑翔动画实现第8章CSS盒模型与浮动定位
8.1盒模型
8.1.1盒模型概述
8.1.2margin:外边距
8.1.3border:边框
8.1.4padding:内边距
8.2盒模型相关属性
8.2.1overflow:内容溢出控制
8.2.2outline:外围线
8.2.3box-shadow:盒子阴影
8.2.4border-radius:边框圆角
8.2.5border-image:图片边框
8.3浮动与清除浮动
8.3.1float:浮动
8.3.2clear:清除浮动
8.3.3子盒子浮动造成父盒子高度塌陷
8.4定位
8.4.1relative:相对定位
8.4.2absolute:绝对定位
8.4.3fixed:固定定位
8.4.4使用定位实现元素的绝对居中
8.4.5z-index
8.5章节案例:网页布局练习第9章移动开发与响应式
9.1移动开发基础知识
9.1.1媒体设备常用属性
9.1.2像素的基础知识
9.1.3viewport:视口
9.2移动开发常用设置
9.2.1移动开发中常用的头部标签
9.2.2移动开发中常用的CSS设置
9.3网页布局方式介绍
9.3.1网页的布局方式
9.3.2响应式布局介绍
9.4媒体查询实现响应式
9.4.1媒体查询的基本语法
9.4.2使用媒体查询的三种方式
9.5章节案例:媒体查询实例练习第10章CSS3弹性布局
10.1弹性布局简介
10.1.1弹性布局的基本概念
10.1.2使用弹性布局需要注意的问题
10.1.3弹性布局代码示例
10.2作用于容器的属性
10.2.1flex-direction:主轴方向
10.2.2flex-wrap:控制换行
10.2.3flex-flow:缩写形式
10.2.4justify-content:主轴对齐
10.2.5align-items:交叉轴单行对齐
10.2.6align-content:交叉轴多行对齐
10.3作用于项目的属性
10.3.1order:项目排序
10.3.2flex-grow:项目放大比
10.3.3flex-shrink:项目缩小比
10.3.4flex-basis:伸缩基准值
10.3.5flex:缩写形式
10.3.6align-self:自身对齐第3篇JavaScript
第11章JavaScript基础
11.1JavaScript简介
11.1.1JavaScript概念
11.1.2页面中使用JavaScript的三种方式
11.2JavaScript的变量
11.2.1变量的声明
11.2.2声明变量的注意事项与命名规范
11.2.3变量的数据类型
11.3JavaScript中的变量函数
11.3.1Number:将变量转为数值类型
11.3.2isNaN:检测变量是否为NaN
11.3.3parseInt:将字符串转为整型
11.3.4parseFloat:将字符串转为浮点型
11.3.5typeof:变量类型检测
11.4JavaScript中的输入输出
11.4.1document.write:文档中打印输出
11.4.2alert:浏览器弹窗输出
11.4.3prompt:浏览器弹窗输入
11.4.4confirm:浏览器弹窗确认
11.4.5console.log:浏览器控制台输出
11.4.6JavaScript中的注释
11.5JavaScript的运算符
11.5.1算术运算
11.5.2赋值运算符
11.5.3关系运算与逻辑运算
11.5.4条件运算(多目运算)
11.5.5逗号运算符
11.5.6运算符的优先级
11.6章节案例:判断一个数是否为水仙花数第12章JavaScript流程控制语句
12.1分支结构
12.1.1简单if结构
12.1.2if-else结构
12.1.3多重if结构
12.1.4嵌套if结构
12.1.5switch-case结构
12.2循环结构
12.2.1循环的基本思路
12.2.2while循环结构
12.2.3do-while循环结构
12.2.4for循环结构
12.2.5循环嵌套
12.3流程控制语句
12.3.1break语句
12.3.2continue语句
12.3.3return语句
12.4章节案例:打印输出一个菱形第13章JavaScript函数
13.1函数的声明与调用
13.1.1函数的声明
13.1.2函数的调用
13.1.3函数的作用域
13.1.4函数声明和调用的注意事项
13.2匿名函数的声明与调用
13.2.1事件调用匿名函数
13.2.2匿名函数表达式
13.2.3自执行函数
13.3函数中的内置对象
13.3.1arguments对象
13.3.2this关键字
13.4JavaScript中代码的执行顺序
13.5章节案例:编写函数统计任意区间内的质数第14章BOM与DOM
14.1window对象
14.1.1window对象的属性
14.1.2window对象的常用方法
14.2浏览器对象模型的其他对象
14.2.1screen:屏幕对象
14.2.2location:地址栏对象
14.2.3history:历史记录对象
14.2.4navigator:浏览器配置对象
14.3CoreDOM
14.3.1DOM树结构分析
14.3.2操作元素节点
14.3.3操作文本节点
14.3.4操作属性节点
14.3.5JavaScript修改元素样式
14.3.6获取层次节点
14.3.7创建新节点
14.3.8删除/替换节点
14.4HTMLDOM
14.4.1HTMLDOM操作表格对象
14.4.2HTMLDOM操作行对象
14.4.3HTMLDOM操作单元格对象
14.5章节案例:实现评论提交展示功能第15章JavaScript事件
15.1JavaScript的事件
15.1.1鼠标事件
15.1.2键盘事件
15.1.3HTML事件
15.1.4event事件因子
15.2JavaScript的事件模型
15.2.1DOM0事件模型
15.2.2DOM2事件模型
15.3JavaScript的事件流模型
15.3.1事件冒泡
15.3.2事件捕获
15.3.3事件委派
15.3.4阻止事件冒泡
15.3.5阻止默认事件
15.4章节案例:对表格进行修改删除操作第16章数组和对象
16.1JavaScript的数组
16.1.1数组的概念
16.1.2数组的声明
16.1.3数组的访问
16.1.4数组常用方法
16.1.5二维数组和稀疏数组
16.2JavaScript的内置对象
16.2.1Boolean:逻辑对象
16.2.2Number:数字对象
16.2.3String:字符串对象
16.2.4Date:日期对象
16.2.5Math:算术对象
16.3JavaScript自定义对象
16.3.1对象的概念
16.3.2对象的声明
16.3.3对象的属性与方法
16.4章节案例:编写对象实现班级成绩录入第17章JavaScript中的正则表达式
17.1正则表达式基础
17.1.1正则表达式概述
17.1.2正则表达式的声明
17.2正则表达式的常用字符
17.2.1正则表达式中的元字符
17.2.2正则表达式中的特殊字符
17.3正则表达式的常用模式
17.3.1g:全局匹配
17.3.2i:忽略大小写匹配
17.3.3m:多行匹配
17.4正则表达式的常用方法
17.4.1test()方法
17.4.2exec()方法
17.5章节案例:使用正则表达式验证用户注册表单第18章JavaScript面向对象编程
18.1面向对象编程基础前言/序言
前言
HTML诞生于20世纪90年代,它带来了Web行业的一片繁荣。而随着移动互联网时代的到来,HTML的最新版本——HTML5应运而生,它的出现颠覆了互联网开发的格局,取代了Flash插件在网页开发中的垄断地位,优化了移动互联网的体验,甚至颠覆了Android、iOS等手机软件。
为了帮助更多的读者进入移动互联网行业。杰瑞教育组织专业讲师团队,完成了此书的编写工作。杰瑞教育成立于2011年,专注于互联网人才培训领域,每年均为全国各地互联网企业输送优秀IT人才数千人。《Web前端学习笔记:HTML5+CSS3+JavaScript》以杰瑞教育Web前端课程大纲为基准,结合杰瑞教育线下培训授课内容与课堂案例编写而成。
为保证学习效果,《Web前端学习笔记:HTML5+CSS3+JavaScript》秉承“纯干货”的原则,帮助广大读者通过更精简的语言、更通俗的案例,学习更全面的知识体系。
《Web前端学习笔记:HTML5+CSS3+JavaScript》特点《Web前端学习笔记:HTML5+CSS3+JavaScript》的特点主要体现在以下几个方面:
配套资源丰富。
为方便读者自学,《Web前端学习笔记:HTML5+CSS3+JavaScript》随书附赠案例源代码等学习资源。
专业的技术支持服务。
为保证读者学习效果,杰瑞教育将为读者提供专业的技术支持服务,解决读者学习的后顾之忧。
专业的就业咨询服务。
对那些顺利完成《Web前端学习笔记:HTML5+CSS3+JavaScript》学习任务,并达到相应技术要求的学员,杰瑞教育将有专业的就业导师团队,为广大读者在就业过程中遇到的问题提供就业咨询服务。
完善的知识体系。
《Web前端学习笔记:HTML5+CSS3+JavaScript》讲授的所有知识内容,均来自杰瑞教育多年教学经验的积累,完全按照杰瑞教育Web前端课程教学大纲要求进行《Web前端学习笔记:HTML5+CSS3+JavaScript》知识体系的编写。
每章均提供案例与习题。
《Web前端学习笔记:HTML5+CSS3+JavaScript》在注重理论知识的同时,更加注重学员的动手实践能力,每章节均附有完整的章节案例与章节练习,帮助读者提高动手操作能力。
《Web前端学习笔记:HTML5+CSS3+JavaScript》内容《Web前端学习笔记:HTML5+CSS3+JavaScript》分为3篇,共18章。
第1篇HTML5(第1~4章)首先讲授的是HTML5的基础入门知识,紧接着是常见的块级标签与行级标签,最后详细地介绍了表格与表单的使用。
第2篇CSS3(第5~10章)首先从CSS3的基础知识开始,讲解了CSS样式表与选择器的使用(包括CSS3新增选择器),并重点讲解了CSS中的各种属性以及CSS3的新属性,紧接着讲解了CSS中的盒模型、浮动、定位的相关知识,最后介绍移动开发、响应式与弹性布局。
第3篇JavaScript(第11~18章)从JavaScript的语法基础开始,逐步讲解JavaScript中的变量与运算符、分支与循环、函数、BOM与DOM、数组与对象、正则表达式等相关知识点,并通过学习JavaScript面向对象来结束这一篇章的学习。这部分内容是《Web前端学习笔记:HTML5+CSS3+JavaScript》的重点也是难点。
适合阅读《Web前端学习笔记:HTML5+CSS3+JavaScript》的读者?希望学习并从事Web前端行业的初学者。
具有一定的工作经验但希望夯实基础知识的前端开发工程师。
相关专业大中专院校或培训学校的学生。
需要备课教材的大中专院校或培训学校的教师。
希望转入Web前端开发的其他软件工程师。
阅读建议
没有基础的读者应从第1章开始顺序阅读,尽量不要跳跃学习。
有一定工作经验的开发工程师可以根据需要选择所需章节阅读。
学练结合,将书中涉及的案例与练习亲自动手做一遍,会加深对内容的理解。
认真阅读书中的源代码,养成良好的编码习惯。
养成良好的自学习惯,这将对读者以后的发展至关重要。
提升解决问题的能力,学会利用网络资源解决问题。
《Web前端学习笔记:HTML5+CSS3+JavaScript》作者《Web前端学习笔记:HTML5+CSS3+JavaScript》由王涛、杨延成、姜浩编写,姜浩、王翠英负责《Web前端学习笔记:HTML5+CSS3+JavaScript》的资料与案例整理,杨延成负责《Web前端学习笔记:HTML5+CSS3+JavaScript》的最后审定工作。
编者2018年1月