从零开始学HTML5+CSS3+JavaScript

图书标准信息

• 作者 明日科技 编著
• 出版社 化学工业出版社
• 出版时间 2022-09
• 版次 1
• ISBN 9787122413277
• 定价 99.00元
• 装帧 平装
• 开本 16开
• 纸张 胶版纸
• 页数 371页
• 字数 593千字

【内容简介】

本书从零基础读者的角度出发，通过通俗易懂的语言、丰富多彩的实例，循序渐进地让读者在实践中学习HTML、CSS 与JavaScript编程知识，提升自己的实际开发能力。全书共分为5篇24章，内容包括HTML基础、文本、添加图像、超链接的使用、表格与div标签、CSS3概述、CSS3高级应用、列表、表单、多媒体播放、HTML5新特性、响应式网页设计、响应式组件、JavaScript概述、JavaScript 语言基础、JavaScript 基本语句、JavaScript 中的函数、JavaScript 中的对象、JavaScript 中的数组、Ajax技术、jQuery基础、jQuery控制页面和事件处理、设计叮叮商城网站、模仿王者荣耀游戏网站等。书中知识点讲解细致，侧重介绍每个知识点的使用场景，涉及的代码给出了详细的注释，可以使读者轻松领会前端开发的精髓，快速提高开发技能。同时，本书配套了大量教学视频，扫码即可观看，还提供所有程序源文件，方便读者实践。本书适合HTML、CSS、JavaScript初学者及前端开发入门者自学使用，也可用作高等院校相关专业的教材及参考书。

【作者简介】

无

【目录】

第1篇　HTML基础篇

第1章  HTML基础  2 视频讲解：5节，58分钟

1.1  HTML概述  3

1.1.1  什么是HTML  3

1.1.2  HTML的发展历程  3

1.2  HTML文件的基本结构  3

1.2.1  HTML的基本结构  4

1.2.2  HTML的基本标签  5

1.3  编写第一个HTML文件  8

1.3.1  HTML文件的编写方法  8

1.3.2  手工编写页面  9

1.3.3  使用WebStorm制作页面  10

[实例1.1]  运用属性，渲染页面效果  15

本章知识思维导图  16

第2章  文本  17 视频讲解：10节，72分钟

2.1  标题  18

2.1.1  标题标签  18

[实例2.1]  巧用标题标签，编写开心一笑  18

2.1.2  标题的对齐方式  20

[实例2.2]  活用文字居中，推荐商品信息  20

2.2  文字  21

2.2.1  文字的斜体、下划线、删除线  21

[实例2.3]  活用文字装饰，推荐商品信息  21

2.2.2  文字的上标与下标  22

[实例2.4]  使用上标与下标，展示数学公示表   23

2.2.3  特殊文字符号  23

[实例2.5]  巧用文字符，绘制字符画  24

2.3  段落  24

2.3.1  段落标签  25

[实例2.6]  巧用段落标签，介绍创意文字  25

2.3.2  段落的换行标签  26

[实例2.7]  巧用换行，书写古诗  26

2.3.3  段落的原格式标签  27

[实例2.8]  巧用原格式标签，输出元旦快乐  27

2.4  水平线  28

2.4.1  水平线标签  28

[实例2.9]  巧用水平线，绘制行表格  28

2.4.2  水平线标签的宽度  29

[实例2.10]  巧用的宽度属性，装饰文字  29

本章知识思维导图  30

第3章  添加图像  31 视频讲解：5节，74分钟

3.1  添加图像  32

3.1.1  图像的基本格式  32

3.1.2  添加图像  32

[实例3.1]  使用img标签，实现象棋简介  33

3.2  设置图像属性  34

3.2.1  图像大小与边框  34

[实例3.2]  改变手机商品图像的大小和边框  34

3.2.2  图像间距与对齐方式  35

[实例3.3]  使用align和vspace等改变头像的位置  36

3.2.3  替换文本与提示文字  36

[实例3.4]  设置图像的提示文字与替换文本  37

本章知识思维导图  38

第4章  超链接的使用  39 视频讲解：4节，67分钟

4.1  链 接 标 签  40

4.1.1  文本链接  40

[实例4.1]  巧用文本链接，实现网站导航  40

4.1.2  书签链接  41

[实例4.2]  巧用书签链接，实现商城网页内部跳转  41

4.2  图像的超链接  43

4.2.1  图像的超链接  43

[实例4.3]  添加图像链接，实现“手机风暴”板块  43

4.2.2  图像热区链接  44

[实例4.4]  使用热区链接，添加多个链接地址  45

本章知识思维导图  46

第5章  表格与标签  47 视频讲解：9节，72分钟

5.1  简单表格  48

5.1.1  简单表格的制作  48

[实例5.1]  使用表格标签编写值日表  48

5.1.2  表头的设置  49

[实例5.2]  使用表头标签制作简单课程表  50

5.2  表格的高级应用  51

5.2.1  表格的样式  51

[实例5.3]  制作商品推荐表格  51

5.2.2  表格的合并  52

[实例5.4]  使用表格标签，制作复杂的课程表  53

5.2.3  表格的分组  54

[实例5.5]  使用表格分组制作学生练习表  54

5.3  标签  56

5.3.1  标签的介绍  56

[实例5.6]  使用标签制作一首古诗  56

5.3.2  标签的应用  57

[实例5.7]  使用标签制作个人简历  57

5.4  标签  58

5.4.1  标签的介绍  58

[实例5.8]  使用标签制作春节介绍短文  59

5.4.2  标签的应用  59

[实例5.9]  使用标签制作公司介绍小短文  60

本章知识思维导图  61

第2篇　CSS3与HTML5应用篇

第6章  CSS3概述  64 视频讲解：9节，141分钟

6.1  CSS概述  65

6.1.1  CSS的发展史  65

6.1.2  一个简单的CSS示例  65

6.2  CSS3中的选择器  67

6.2.1  属性选择器  68

[实例6.1]  实现51购商城中的手机风暴版块  68

6.2.2  类和ID选择器  69

[实例6.2]  实现商城首页中爆款特卖版块  70

6.2.3  伪类和伪元素选择器  71

[实例6.3]  实现vivo X9s手机的宣传页面  72

6.2.4  其他选择器  74

[实例6.4]  实现商城的分类版块界面  74

6.3  常用属性  76

6.3.1  文本相关属性  76

[实例6.5]  实现51购商城的抢购页面  78

6.3.2  背景相关属性  79

[实例6.6]  实现为登录页面插入背景图像  80

6.3.3  列表相关属性  81

[实例6.7]  实现购物商城导航栏  81

本章知识思维导图  83

第7章  CSS3高级应用  84 视频讲解：8节，155分钟

7.1  框模型  85

7.1.1  外边距（margin）  85

[实例7.1]  实现vivo X9 Plus手机宣传页面  86

7.1.2  内边距（padding）  87

[实例7.2]  实现手机商城新品专区的商品页面  88

7.1.3  边框（border）  89

[实例7.3]  实现购物商城中的商品列表  91

7.2  布局常用属性  92

7.2.1  浮动  93

[实例7.4]  比较各浮动方式的区别  93

7.2.2  定位  94

[实例7.5]  实现鼠标滑过文字显示对应的内容  95

7.3  动画与特效  95

7.3.1  变换（transform）  96

[实例7.6]  实现鼠标滑过时图像显示对应的变形效果  96

7.3.2  过渡（transition）  98

[实例7.7]  实现鼠标滑过时逐渐展开图像的效果  99

7.3.3  动画（animation）  100

[实例7.8]  实现滚动广告动画  102

本章知识思维导图  103

第8章  列表  104 视频讲解：7节，32分钟

8.1  列表的标签  105

8.2  无序列表  105

8.2.1  无序列表标签  105

[实例8.1]  无序列表列举唐宋八大家  106

8.2.2  无序列表属性  106

[实例8.2]  无序列表制作商品预览效果  106

8.3  有序列表  108

8.3.1  有序列表标签  108

[实例8.3]  运用有序列表输出古诗  108

8.3.2  有序列表属性  108

[实例8.4]  运用有序列表制作商城页面  109

8.4  列表的嵌套  110

8.4.1  定义列表的嵌套  110

[实例8.5]  运用列表嵌套输出古诗  111

8.4.2  无序列表和有序列表的嵌套  112

[实例8.6]  使用列表嵌套制作导航栏  112

本章知识思维导图  114

第9章  表单  115 视频讲解：8节，44分钟

9.1  表单概述  116

9.1.1  概述  116

9.1.2  表单标签  116

9.2  输入标签  118

9.2.1  文本框  118

[实例9.1]  实现商城中登录页面  119

9.2.2  单选框和复选框  120

[实例9.2]  实现购物车界面选择商品功能  120

9.2.3  按钮  121

[实例9.3]  实现收货地址信息填写页面  122

9.2.4  图像域和文件域  123

[实例9.4]  实现上传头像页面  124

9.3  文本域和菜单/列表  125

9.3.1  文本域  125

[实例9.5]  实现商品评价输入框  126

9.3.2  菜单/列表  126

[实例9.6]  实现个人资料填写页面  127

本章知识思维导图  128

第10章  多媒体播放  129 视频讲解：8节，116分钟

10.1  HTML5多媒体的简述  130

10.1.1  HTML4中多媒体的应用  130

10.1.2  HTML5页面中的多媒体  130

10.2  多媒体元素基本属性  131

10.3  多媒体元素常用方法  135

10.3.1  媒体播放时的方法  135

[实例10.1]  多功能的视频播放效果  135

10.3.2  canPlayType(type)方法  137

10.4  多媒体元素重要事件  138

10.4.1  事件处理方式  138

10.4.2  事件介绍  138

10.4.3  事件实例  139

[实例10.2]  多媒体元素重要事件的运用示例  139

本章知识思维导图  141

第11章  HTML5新特性  142 视频讲解：12节，53分钟

11.1  谁在开发HTML5  143

11.2  HTML5和HTML4的区别  143

11.2.1  HTML5的语法变化  143

11.2.2  HTML5中的标记方法  143

11.2.3  HTML5语法中需要掌握的3个要点  144

[实例11.1]  巧用标签制作区域图像映射  145

11.3  新增和废除的元素  146

11.3.1  新增的结构元素  146

[实例11.2]  运用结构元素制作导航链接  147

11.3.2  新增的块级（block）的语义元素  149

11.3.3  新增的行内（inline）的语义元素  150

[实例11.3]  运用meter元素制作柱状图  151

11.3.4  新增的嵌入多媒体元素与交互性元素  151

11.3.5  新增的input元素的类型  152

11.3.6  废除的元素  153

11.4  新增的属性和废除的属性  153

11.4.1  新增的属性  153

11.4.2  废除的属性  155

本章知识思维导图  157

第12章  响应式网页设计  158 视频讲解：10节，40分钟

12.1  概述  159

12.1.1  响应式网页设计的概念  159

12.1.2  响应式网页设计的优缺点和技术原理  159

12.2  像素和屏幕分辨率  160

12.2.1  像素和屏幕分辨率  160

12.2.2  设备像素和CSS像素  161

12.3  视口  162

12.3.1  视口  162

12.3.2  视口常用属性  163

12.3.3  媒体查询  163

12.4  响应式网页的布局设计  164

12.4.1  常用布局类型  164

12.4.2  布局的实现方式  165

12.4.3  响应式布局的设计与实现  166

[实例12.1]  实现51购商城登录页面的响应式布局  166

本章知识思维导图  167

第13章  响应式组件  168 视频讲解：9节，76分钟

13.1  响应式图像  169

13.1.1  方法1：使用标签  169

[实例13.1]  巧用标签实现图像响应式布局  169

13.1.2  方法2：使用CSS图像  170

[实例13.2]  巧用媒体查询控制图像显示  170

13.2  响应式视频  171

13.2.1  方法1：使用标签  172

[实例13.3]  巧用标签播放手机视频  172

13.2.2  方法2：使用HTML5手机播放器  173

[实例13.4]  实现带点赞、分享和换肤功能的手机播放器  173

13.3  响应式导航菜单  174

13.3.1  方法1：CSS3响应式菜单  175

[实例13.5]  巧用media关键字实现响应式菜单  175

13.3.2  方法2：JavaScript响应式菜单  176

[实例13.6]  巧用第三方组件实现响应式菜单  177

13.4  响应式表格  178

13.4.1  方法1：隐藏表格中的列  178

[实例13.7]  设计招聘信息表格隐藏次要信息列  178

13.4.2  方法2：滚动表格中的列  180

[实例13.8]   设计招聘信息表格滚动查看信息列  180

13.4.3  方法3：转换表格中的列  182

[实例13.9]  将招聘信息的表格变为列表  182

本章知识思维导图  183

第3篇　JavaScript基础篇

第14章   JavaScript概述  186 视频讲解：6节，46分钟

14.1  JavaScript简述  187

14.2  WebStorm简介  190

14.3  JavaScript在HTML中的使用  190

14.3.1  在页面中直接嵌入JavaScript代码  190

[实例14.1]  编写第一个JavaScript程序  191

14.3.2  链接外部JavaScript文件  194

[实例14.2]  调用外部JavaScript文件  194

14.3.3  作为标签的属性值使用  196

14.4  JavaScript基本语法  197

本章知识思维导图  198

第15章  JavaScript基础  199 视频讲解：16节，139分钟

15.1  数据类型  200

15.1.1  数值型  200

[实例15.1]  输出红、绿、蓝三种颜色的色值  201

[实例15.2]  输出科学计数法表示的浮点数  202

15.1.2  字符串型  202

[实例15.3]  输出奥尼尔的中文名、英文名和别名  204

15.1.3  布尔型  205

15.1.4  特殊数据类型  205

15.2  常量和变量  206

15.2.1  常量  206

15.2.2  变量  206

[实例15.4]   输出球员信息  208

15.3  运算符  209

15.3.1  算术运算符  209

[实例15.5]  将华氏度转换为摄氏度  210

15.3.2  字符串运算符  210

[实例15.6]  字符串运算符的使用  211

15.3.3  比较运算符  211

[实例15.7]  比较运算符的使用  212

15.3.4  赋值运算符  213

[实例15.8]  赋值运算符的使用  213

15.3.5  逻辑运算符  214

[实例15.9]  逻辑运算符的使用  214

15.3.6  条件运算符  215

[实例15.10]  条件运算符的使用  215

15.3.7  其他运算符  216

15.3.8  运算符优先级  217

[实例15.11]  运算符优先级的使用  218

15.4  表达式  219

15.5  数据类型的转换规则  219

本章思维导图  220

第16章  JavaScript基本语句  221 视频讲解：11节，115分钟

16.1  条件判断语句  222

16.1.1  if语句  222

[实例16.1]  获取3个数中的最大值  223

[实例16.2]  判断2021年2月份的天数  224

[实例16.3]  输出考试成绩对应的等级  225

[实例16.4]  判断女职工是否已经退休  227

16.1.2  switch语句  227

[实例16.5]  输出奖项级别及奖品  229

16.2  循环语句  229

16.2.1  while语句  230

[实例16.6]  计算5000米比赛的完整圈数  231

16.2.2  do...while语句  231

[实例16.7]  计算1 2 … 100的和  232

16.2.3  for语句  232

[实例16.8]  计算100以内所有偶数的和  234

16.2.4  循环语句的嵌套  234

[实例16.9]  输出乘法口诀表  235

16.3  跳转语句  235

16.3.1  continue语句  235

[实例16.10]  输出影厅座位图  236

16.3.2  break语句  236

16.4  异常处理语句  237

16.4.1  try...catch...finally语句  238

16.4.2  Error对象  239

16.4.3  使用throw语句抛出异常  239

本章知识思维导图  240

第17章   JavaScript中的函数  241 视频讲解：13节，82分钟

17.1  函数的定义和调用  242

17.1.1  函数的定义  242

17.1.2  函数的调用  243

17.2  函数的参数  244

[实例17.1]  输出图书名称和图书作者  245

17.3  函数的返回值  245

[实例17.2]  计算购物车中商品总价  246

17.4  嵌套函数  247

17.4.1  函数的嵌套定义  247

17.4.2  函数的嵌套调用  247

[实例17.3]  获得选手的平均分  248

17.5  递归函数  249

17.6  变量的作用域  249

17.6.1  全局变量和局部变量  249

17.6.2  变量的优先级  250

17.7  内置函数  250

17.7.1  数值处理函数  251

17.7.2  字符串处理函数  253

17.8  定义匿名函数  254

17.8.1  在表达式中定义函数  254

[实例17.4]  输出6以内的乘法表  255

17.8.2  使用Function()构造函数  255

本章知识思维导图  256

第18章  JavaScript中的对象  257 视频讲解：10节，132分钟

18.1  对象简介  258

18.1.1  什么是对象  258

18.1.2  对象的属性和方法  258

18.1.3  JavaScript对象的种类  259

18.2  自定义对象的创建  259

18.2.1  直接创建自定义对象  259

18.2.2  通过自定义构造函数创建对象  260

[实例18.1]  创建一个球员对象  261

[实例18.2]  输出电影信息  262

[实例18.3]  创建一个圆的对象  263

18.2.3  通过Object对象创建自定义对象  264

[实例18.4]  创建一个图书对象  265

18.3  对象访问语句  266

18.3.1  for...in语句  266

18.3.2  with语句  266

18.4  常用内部对象  267

18.4.1  Math对象  268

[实例18.5]  生成指定位数的随机数  269

18.4.2  Date对象  270

[实例18.6]  输出当前日期和时间  273

[实例18.7]  获取当前日期距离明年元旦的天数  275

本章知识思维导图  276

第19章  JavaScript中的数组  277 视频讲解：14节，114分钟

19.1  数组介绍  278

19.2  定义数组  278

19.2.1  定义空数组  278

19.2.2  指定数组长度  279

19.2.3  指定数组元素  279

19.2.4  直接定义数组  280

19.3  操作数组元素  280

19.3.1  数组元素的输入和输出  280

[实例19.1]  输出3个学霸的姓名  282

19.3.2  数组元素的添加  282

19.3.3  数组元素的删除  283

19.4  数组的属性  283

19.4.1  length属性  283

[实例19.2]  输出省份、省会以及旅游景点  284

19.4.2  prototype属性  285

[实例19.3]  应用自定义方法输出数组  285

19.5  数组的方法  286

19.5.1  数组的添加和删除  287

19.5.2  设置数组的排列顺序  290

[实例19.4]  输出2016电影票房排行榜前五名  292

19.5.3  获取某段数组元素  293

[实例19.5]  计算选手的最终得分  294

19.5.4  数组转换成字符串  294

本章知识思维导图  296

第4篇　JavaScript高级篇

第20章  Ajax技术  298 视频讲解：11节，33分钟

20.1  Ajax概述  299

20.1.1  Ajax应用案例  299

20.1.2  Ajax的开发模式  299

20.1.3  Ajax的优点和缺点  300

20.2  Ajax的技术组成  301

20.2.1  XMLHttpRequest对象  301

20.2.2  XML语言  301

20.2.3  JavaScript脚本语言  303

20.2.4  DOM  303

20.2.5  CSS  303

20.3  XMLHttpRequest对象  304

20.3.1  XMLHttpRequest对象的初始化  304

20.3.2  XMLHttpRequest对象的常用属性  305

20.3.3  XMLHttpRequest对象的常用方法  306

[实例20.1]  读取HTML文件  309

本章知识思维导图  310

第21章  jQuery基础  311 视频讲解：8节，62分钟

21.1  jQuery概述  312

21.2  jQuery下载与配置  312

21.3  jQuery选择器  313

21.3.1  jQuery的工厂函数  313

21.3.2  基本选择器  314

[实例21.1]  获取文本框中输入的值  314

[实例21.2]  修改div元素的内容  316

[实例21.3]  获取元素并设置CSS样式  317

[实例21.4]  筛选元素并添加新的样式  319

21.3.3  层级选择器  319

[实例21.5]  为版权列表设置样式  320

[实例21.6]  实现为匹配元素换肤  322

[实例21.7]  改变匹配元素的背景颜色  323

[实例21.8]  筛选div元素的同辈元素  324

21.3.4  过滤选择器  325

[实例21.9]  实现一个带表头的双色表格  326

[实例21.10]  应用内容过滤器匹配不同的单元格  328

[实例21.11]  利用表单对象的属性过滤器匹配元素  329

21.3.5  属性选择器  331

21.3.6  表单选择器  331

[实例21.12]  利用表单选择器匹配元素  332

本章知识思维导图  333

第22章  jQuery控制页面和事件处理  334 视频讲解：8节，50分钟

22.1  jQuery控制页面和时间处理  335

22.1.1  对元素内容和值进行操作  335

[实例22.1]  对元素内容进行设置  336

[实例22.2]  为多行列表框设置并获取值  337

22.1.2  对DOM节点进行操作  338

[实例22.3]  开心小农场  341

22.1.3  对元素属性进行操作  343

22.1.4  对元素的CSS样式进行操作  343

22.2  jQuery的事件处理  345

22.2.1  页面加载响应事件  345

22.2.2  jQuery中的事件  345

22.2.3  事件绑定  346

22.2.4  模拟用户操作  347

[实例22.4]  模拟用户单击事件  348

[实例22.5]  为图像添加和去除边框  348

本章知识思维导图  349

第5篇　项目开发篇

第23章  设计叮叮商城网站  352 视频讲解：1节，4分钟

23.1  项目设计思路  353

23.1.1  需求分析  353

23.1.2  功能结构  353

23.1.3  叮叮商城概览  353

23.2  主页功能实现  354

23.2.1  关键技术  355

23.2.2  实现过程  355

23.3  商品详情页面设计  356

23.3.1  关键技术  356

23.3.2  实现过程  357

23.4  购物车页面设计  357

23.4.1  关键技术  358

23.4.2  实现过程  358

23.5  付款页面设计  359

23.5.1  关键技术  359

23.5.2  实现过程  360

本章知识思维导图  361

第24章  模仿王者荣耀网站  362 视频讲解：1节，3分钟

24.1  功能概述  363

24.2  界面预览  363

24.3  设计思路  364

24.4  实现过程  364

24.4.1  主页的设计与实现  364

24.4.2  登录页面的设计与实现  368

24.4.3  注册页面的设计与实现  370

本章知识思维导图  371