Web前端开发思政教与学（704页思政PPT思政教案和大纲12个思政案例视频实验，储久良）

11.3表格属性设置

11.3.1掌握表格属性设置方法

11.3.2掌握表格边框样式属性的设置方法

11.3.3掌握表格单元格间距、边距的设置方法

11.3.4掌握表格水平对齐属性的设置方法

11.4设置表格行的属性

掌握表格行内容水平和垂直对齐的设置方法

11.5设置单元格的属性

△掌握单元格跨行属性rowspa、跨列属性colspan设置方法

11.6表格嵌套

学会运用表格嵌套技术实现一般网页布局

11.7思政案例11-社会主义核心价值观解读

12表单

12.1表单概述

△掌握表单标记的基本语法结构以及表单中包含其它标记

12.2定义域和域标题

掌握域和域标题标记的基本语法,学会使用域和域标题标记设置表单分区

12.3△表单信息输入

12.3.1掌握单行文本输入框与密码框的属性设置方法

12.3.2掌握复选框与单选按钮设置与使用方法

12.3.3掌握图像按钮设置及使用方法

12.3.4掌握提交、重置及普通按钮设置及使用方法

12.3.5掌握文件选择框与隐藏框设置方法

12.4多行文本输入框

12.5下拉列表框

掌握标记的基本语法及size、multiple、name等属性的设置方法，学会使用标记设置列表项，学会使用selected属性必将某一选项设为预选项

12.6综合实例1-通用会议注册表

13HTML5基础与CSS3应用

13.1HTML5概述

13.2HTML5文档结构

★掌握HTML5页面结构组成元素

△掌握HTML5新增结构元素的语法及使用方法（header、nav、section、articale、footer、aside等）

13.3HTML5新增页面元素

13.3.1△掌握hgroup标记语法及使用方法

13.3.2△掌握figure标记与figcaption标记语法及使用方法

13.3.3△掌握mark标记与time标记语法及使用方法

13.3.4△掌握details标记与summary标记语法及使用方法

13.3.5△掌握progress标记与meter标记语法及使用方法

13.3.6△掌握input标记与datalist标记语法及使用方法

13.4HTML5表单

13.4.1△掌握HTML5新增的表单属性

13.4.2★学会使用HTML5新增的表单元素

13.4.3★学会使用HTML5新增的input类型

13.5HTML5视频与音频

13.5.1★掌握video标记及属性的设置方法

13.5.2★掌握audio标记及属性的设置方法

13.6CSS3基础应用

13.6.1了解CSS3新特性

13.6.2了解CSS3浏览器兼容性及解决方法

13.6.3△掌握CSS3边框属性语法及设置方法

13.6.4★掌握CSS3转换transform属性语法及设置方法

13.6.5★掌握CSS3过渡transition属性语法及设置方法

13.6.6★掌握CSS3动画animation语法及设置方法

13.6.7掌握CSS3多列属性语法及设置方法

13.6.8掌握CSS3文本效果属性语法及设置方法

13.7思政案例12-卧薪尝胆

14JavaScript基础

14.1JavaScript概述

理解JavaScript在Web页面设计中作用及其特点

了解JavaScript在HTML中放置的位置

14.2JavaScript程序

14.2.1了解JavaScript语句类型、语句块标记

14.2.2理解JavaScript函数的作用和基本语法

14.2.3学会使用消息对话框实现页面交互

14.2.4学会使用注释给JS代码增加功能说明

14.3标识符和变量

14.3.1掌握标识符、变量命名的规范

14.3.2△掌握JavaScript中的基本数据类型，分别是字符串型、数值型、布尔型、Null型、undefined、object型

14.3.3.掌握变量的定义语法及使用方法

14.3.4.掌握常用的转义字符使用方法,例如\n、\r、\f、\uhhhh、\\、\”

14.4运算符和表达式

14.4.1了解运算符和表达式的类型

14.4.2△掌握算术、关系、逻辑、赋值、条件运算符的使用方法

14.4.2△了解位、逗号、new、delet、typeof等运算符的使用方法

14.5JavaScript程序控制结构

14.5.1△掌握顺序结构程序的编写方法

14.5.2△掌握if…else分支结构程序的编写方法，△掌握if…elseif…elseif…else多分支结构及switch多分支结构应用场合和编程方法

14.5.3了解循环结构类型及应用场合。△掌握for、while、do…while、for…in的使用方法，理解break和continue语句在循环结构中的作用

14.6JavaScript函数

14.6.1掌握常用系统函数使用方法，如eval()、escape()、unescape()、parseFloat()、parseInt()、isNaN()等全局函数的使用方法，熟练使用对象的函数，如toString()、toFixed（n）、charAt(n)、indexOf()、lastIndexOf()、substring()等

14.6.2△★掌握自定义函数的使用方法，并学会编程

14.6.3学会使用return返回函数计算结果

14.6.4理解局部变量与全局变量使用区别

14.7综合实例2-手机批发业务-产品选购

15JavaScript事件处理

15.1JavaScript事件概述

15.1.1理解JavaScript中事件的概念、事件基本类型

15.1.2△掌握JavaScript中主要事件句柄

15.1.3△掌握事件处理方法（定静态、动态指定）

15.1.4△学会使用事件处理程序的返回值

15.2表单事件

了解表单事件源和事件句柄

△掌握表单获得焦点、失去焦点、提交及重置、改变及选择等事件处理程序的调用方法

15.3鼠标事件

了解鼠标事件源和事件句柄

△掌握鼠标单击、双击、移动事件处理程序的调用方法

15.4键盘事件

了解键盘事件源和事件句柄；△掌握键盘事件处理程序的调用方法

15.5窗口事件

了解窗口事件源和事件句柄；△掌握窗口事件处理程序的调用方法

15.6综合实例3-用户注册信息验证

16BOM与DOM模型

16.1常用对象

16.2HTMLDOM

16.2.1理解HTMLDOM的节点树的基本概念

16.2.2熟悉DOM节点树与HTML文件的映射关系

16.2.3熟悉DOM节点类型

16.2.4△掌握DOM节点的访问方法(通过对象的ID、Name、TagName访问节点)

16.2.5学会使用DOM节点操作方法操作HTML页面上的元素，掌握DOM中innerText和innerHTML两个属性的区别，并学会使用；学会获取并设置指定元素的属性

16.3BOM

16.3.1理解BOM概念及BOM所包含的对象

16.3.2掌握Window对象属性和常用方法，学会利用window对象进行简单编程

16.3.3理解Navigate对象属性和常用方法，学会利用Navigate对象进行简单编程

16.3.4理解Screen对象属性，学会利用Screen对象进行简单编程

16.3.5理解History对象属性和常用方法，学会利用History对象进行简单编程

16.3.6理解Location对象属性和常用方法，学会利用Location对象进行简单编程

16.4综合案例4-福彩投注站投注小程序

17HTML5高级应用

17.1HTML5WebStorage

17.1.1△掌握localStorage对象

17.1.2△掌握sessionstorage对象

17.1.3△学会使用浏览器端数据库IndexedDB来存储客户端数据

17.2HTML5Canvas画布

17.2.1△掌握Canvas标记的语法及设置方法

17.2.2理解Canvas坐标的概念

17.2.3了解Canvas路径的常用方法，并学会使用绘制路径的方法

17.2.4△掌握Canvas绘制线段的方法(moveTo()、lineTo())

17.2.5△掌握Canvas绘制文本的常用方法

17.2.6△掌握Canvas渐变的语法及设置方法

17.2.7△掌握Canvas绘制图像的方法

17.3HTML5拖放

17.3.1△学会设置元素为可拖放元素

17.3.2了解常用的拖放事件和事件属性

17.3.3了解dataTransfer对象的常用的属性

17.3.4△掌握拖放操作实现步骤

17.4HTML5WebWorkers

17.4.1熟悉WebWorker的工作原理

17.4.2△学会创建WebWorker文件

17.4.3△学会创建WebWorker对象

17.4.4△学会使用终止WebWorker

17.5综合实例5-简易图书管理系统

4

5

课程说明

6

课程教材

扫码优惠购书

7

目录（12个思政案例）

第1章Web前端开发技术综述

1.1.1Web的起源

1.1.2Web的特点

1.1.3Web的工作原理

1.2Web前端开发工程师的职业需求

1.2.1Web前端开发的由来

1.2.2Web前端开发工程师的职业要求

1.3.1HTML

1.3.2CSS

1.3.3JavaScript

1.4.1VisualStudioCode

1.4.2HBuilderX

1.5.1MicrosoftEdge

1.5.2GoogleChrome

1.5.3MozillaFirefox

1.5.4Safari

1.5.5Opera

1.6思政案例1——社会主义核心价值观

本章小结

练习1

实验1

第2章HTML基础

2.1HTML文档的结构

2.2头部head

2.2.1标题title标记

2.2.2元信息meta标记

2.3主体body

2.3.1body标记

2.3.2body标记的属性

2.4.1标记的类型

2.4.2HTML属性

2.6HTML文档的编写规范

2.6.1HTML代码的书写规范

2.6.2HTML文档的命名规则

2.7HTML文档的类型

2.7.1!doctype标记

2.7.2HTML5的DTD定义

2.8思政案例2——传统美德故事：铁杵磨成针

练习2

实验2

第3章格式化文本与段落

3.1.1向Web页面中添加文字信息

3.1.2标题字标记

3.1.3添加空格与特殊符号

3.2.1文本修饰标记

3.2.2字体标记

3.3.1段落标记

3.3.2换行标记

3.3.3水平分隔线标记

3.3.4拼音/音标注释标记

3.3.5段落缩进标记

3.3.6预格式化标记

3.4思政案例3——公民基本道德规范

练习3

实验3

第4章列表

4.6思政案例4——中国传统文化故事：悬梁刺股

练习4

实验4

第5章超链接与浮动框架

5.2超链接的语法、路径及分类

5.2.1超链接的语法

5.2.2超链接的路径

5.2.3超链接的分类

5.3.1创建HTTP文档下载超链接

5.3.2创建FTP站点访问超链接

5.3.3创建图像超链接

5.3.4创建电子邮件超链接

5.3.5创建页面书签链接

5.5思政案例5——公民基本道德规范诠释

练习5

实验5

第6章图像与多媒体文件

6.1.1插入图像

6.1.2设置图像的替代文本

6.1.3设置图像的高度和宽度

6.1.4设置图像的边框

6.1.5设置图像的对齐方式

6.1.6设置图像的间距

6.1.7设置图像的热区链接

6.2.1添加滚动文字

6.2.2设置滚动文字的背景颜色与滚动循环

6.2.3设置滚动方向与滚动方式

6.2.4设置滚动速度与滚动延迟

6.2.5设置滚动范围与滚动空白空间

6.4思政案例6——中国影响世界的十大杰出发明创造

练习6

实验6

第7章CSS基础

7.1.1CSS的基本概念

7.1.2传统HTML的缺点

7.1.3CSS的特点

7.1.4CSS的优势

7.1.5CSS的编辑方法

7.2.1CSS基本语法

7.2.2CSS选择器类型

7.2.4CSS定义与引用

7.4思政案例7——预防冠状病毒这样做

练习7

实验7

第8章DIV与SPAN

8.1DIV图层

8.1.1DIV定义

8.1.2DIV应用

8.2图层嵌套与层叠

8.2.1DIV嵌套

8.2.2DIV层叠

8.4思政案例8——经典励志成语故事选编

练习8

实验8

第9章CSS样式属性

9.1CSS属性值中的单位

9.1.1绝对单位

9.1.2相对单位

9.2.1字体大小fontsize属性

9.2.2字体样式fontstyle属性

9.2.3字体系列fontfamily属性

9.2.4字体变体fontvariant属性

9.2.5字体粗细fontweight属性

9.2.6字体font属性

9.3.1字符间距、行距与首行缩进属性

9.3.2字符装饰、英文大小写转换属性

9.3.3水平对齐、垂直对齐属性

9.4.1颜色color属性

9.4.2背景background属性

9.6.1CSS盒模型结构

9.6.2边界属性设置

9.6.3边框属性设置

9.6.4填充属性设置

9.7思政案例9——中华礼仪用语

练习9

实验9

第10章DIV+CSS页面布局

10.1.1“三行模式”和“三列模式”

10.1.2“三行二列模式”和“三行三列模式”

10.1.3多行多列复杂模式

10.2.1对象的显示与隐藏

10.2.2一级水平导航菜单

10.2.3二级水平导航菜单

10.3思政案例10——中华传统文化典故

练习10

实验10

第11章表格

11.1表格概述

11.3表格的属性设置

11.3.1表格属性

11.3.2表格的边框样式属性

11.3.3表格的单元格间距、单元格边距属性

11.3.4表格的水平对齐属性

11.6表格的嵌套

11.7思政案例11——社会主义核心价值观解读

练习11

实验11

第12章表单

12.3表单信息的输入

12.3.1单行文本输入框与密码框

12.3.2复选框与单选按钮

12.3.3图像按钮

12.3.4提交、重置及普通按钮

12.3.5文件选择框与隐藏框

12.6综合案例1——通用会议注册表

练习12

实验12

第13章HTML5基础与CSS3应用

13.2.1HTML5页面结构

13.2.2HTML5新增的结构元素

13.3HTML5新增的页面元素

13.3.1hgroup标记

13.3.2figure标记与figcaption标记

13.3.3mark标记与time标记

13.3.4details标记与summary标记

13.3.5progress标记与meter标记

13.3.6input标记与datalist标记

13.4.1HTML5新增的表单属性

13.4.2HTML5新增的表单元素

13.4.3HTML5新增的input类型

13.5.1video标记及属性

13.5.2audio标记及属性

13.6.1CSS3新特性

13.6.2CSS3浏览器兼容性

13.6.3CSS3边框

13.6.4CSS3转换transform属性

13.6.5CSS3过渡transition属性

13.6.6CSS3动画animation属性

13.6.7CSS3多列属性

13.6.8CSS3文本效果

13.7思政案例12——卧薪尝胆

练习13

实验13

第14章JavaScript基础

14.1.1JavaScript简介

14.1.2第一个JavaScript程序

14.1.3JavaScript放置的位置

14.2.1语句和语句块

14.2.2代码

14.2.3消息对话框

14.2.4JavaScript注释

14.3.1命名规范

14.3.2数据类型

14.3.3变量

14.3.4转义字符

14.4.1算术运算符和表达式

14.4.2关系运算符和表达式

14.4.3逻辑运算符和表达式

14.4.4赋值运算符和表达式

14.4.5位运算符和表达式

14.4.6条件运算符和表达式

14.4.7其他运算符和表达式

14.5.1顺序结构

14.5.2分支结构

14.5.3循环结构

14.6.1常用系统函数

14.6.2自定义函数

14.6.3带参数返回的return语句

14.6.4函数变量的作用域

14.7综合案例2——手机批发业务产品选购

练习14

实验14

第15章JavaScript事件分析

15.1.1事件类型

15.1.2事件句柄

15.1.3事件处理

15.1.4事件处理程序的返回值

15.2.1获得焦点与失去焦点事件

15.2.2提交及重置事件

15.2.3改变及选择事件

15.3.1鼠标单击、双击事件

15.3.2鼠标移动事件

15.6综合案例3——用户注册信息的验证

练习15

实验15

第16章DOM和BOM

16.1JavaScript常用对象

16.1.1Array对象

16.1.2Date对象

16.1.3Math对象

16.1.4Number对象

16.1.5String对象

16.1.6Boolean对象

16.2.1DOM简介

16.2.2DOM节点树

16.2.3DOM节点

16.2.4DOM节点访问

16.2.5DOM节点操作

16.3.1window对象

16.3.2navigator对象

16.3.3screen对象

16.3.4history对象

16.3.5location对象

16.4综合案例4——福彩投注站的投注小程序

练习16

实验16

第17章HTML5高级应用

17.1.1localStorage对象

17.1.2sessionStorage对象

17.1.3浏览器端数据库IndexedDB

17.2.1canvas标记

17.2.2Canvas坐标

17.2.3Canvas路径

17.2.4用Canvas绘制线段

17.2.5用Canvas绘制文本

17.2.6Canvas渐变

17.2.7用Canvas绘制图像

17.3.1设置元素为可拖放

17.3.2拖放事件

17.3.3dataTransfer对象

17.3.4拖放操作的实现步骤

17.4HTML5WebWorker

17.4.1WebWorker的工作原理

17.4.2创建WebWorker文件

17.4.3创建WebWorker对象

17.4.4终止WebWorker

17.5综合案例5——简易图书管理系统

练习17

实验17

参考文献

8

视频样例

09

配套题库网站www.（提供6套期末试卷）

10

思政PPT样例(704页)

11

思政教案样例

授课内容

第1章WEB前端开发技术综述

授课日期、节次

3.8第1-2节

授课地点

1325

授课教师

Web前端框架技术教学团队

授课班级

19培优(计1、2)班

授课目的与要求

l了解了解Web发展历史。

l了解Web前端开发工程师的职业需求。

l理解各种Web前端开发技术及其在Web网页中的作用。

l熟悉各种常用的Web前端开发工具、浏览器工具，并学会使用主流开发工具。

l掌握HTML文档的基本结构。

l理解标记类型、标记语法。

l学会body标记属性的设置方法。

l学会给网页添加注释。

l理解元信息meta标记的作用。

l了解HTML文档类型。

授课重点、难点、方法与手段

主要知识点

重难点标识

授课方法与手段

前端的作用

√重点难点

理解HTML概念及在网页中的作用，理解HTML文档定义。

开发环境

掌握VSCode、WebStorm、HBuilderX等开发工具

HTML基本语法

理解HTML文档组成结构及基本语法。

教改方案及

实施要点

整合教学内容，完备知识体系；重视实践环节，培养创新能力；艺术组织教学，优化教学手段。

教学资源

主要网站

辅助课件

自作PPT课件

参考教材

储久良.Web前端开发技术-HTML5、CSS3、JavaScript(第4版).北京:清华大学出版社.2023.1；

储久良.Web前端开发技术实验与实践-HTML5、CSS3、JavaScript（第4版）.北京:清华大学出版社.2023.1。

授课具体内容及实施过程

一、课程概况

简述课程性质、考核方式、学习注意点。

二、授课目标

介绍Web前端开发技术及其在Web网页中的作用；

熟悉并学会使用常用的Web前端开发工具、浏览器工具

掌握HTML文档的基本结构、标记类型、标记语法；

学会body标记的属性的设置方法；

理解meta元信息标记的作用；

学会给网页添加注释；

掌握HTML文档编写规范和命名规范。

三、组织教学

引入问题：谁发明了万维网(WWW)？是基于什么目的要发明万维网？万维网以是如何工作的？

浏览器的诞生：1989TimBerners·Lee发表论文（ENQUIRE）--1994W3C万维网联盟创立，无偿使用万维网。

PPT网站访问流程图的讲解。

1.1.5Web服务器--服务器工作模式（Browser/Server架构）/条件

1.1.6超链接-HyperLink：强调目标连接关系

1.2Web前端开发工程师职业需求

通过介绍前端工程师的职业要求对照本课程的学习目标

通过对三种技术的介绍和对比，使学生理解不同技术承担的不同责任，对前端编程技术有一个初步的认识。

HTML：结构

CSS：样式

JS：行为

简单介绍各种主流开发工具和浏览器

1.6思政案例1-社会主义核心价值观

2.7HTML文档类型

思政案例1-社会主义核心价值观

中共十八大强调，倡导富强、民主、文明、和谐，倡导自由、平等、公正、法治，倡导爱国、敬业、诚信、友善，积极培育和践行社会主义核心价值观。在社会主义核心价值观基本内容中，富强、民主、文明、和谐是国家层面的价值目标，自由、平等、公正、法治是社会层面的价值取向，爱国、敬业、诚信、友善是公民个人层面的价值准则。