《HTML5 CSS3Web前端开发技术（第3版微课版）》教学大纲 .docx

PAGE10

《HTML5+CSS3Web前端开发技术》

教学大纲

适用专业：信息技术及相关专业

制订单位：

《HTML5+CSS3Web前端开发技术》教学大纲

第一部分：使用说明

一、课程性质

本课程属于专业发展课（选修课）。主要讲解Web前端开发相关技术。本课程是一门实践性强的课程，需要大量的上机实践加强对课程内容的理解。

二、在人才培养方案的地位和作用

Web前端开发技术是信息技术类专业课程体系中Web应用开发类模块中的核心课程之一，是学习其他Web类课程的基础。通过学习HTML5、CSS3、JavaScript等前端开发技术，学生应掌握网站开发与建设的基本内容，了解以Bootstrap为代表的框架技术，为后续的JavaWEB编程系列课程打下良好的知识储备。

三、教学目的

通过课程的学习，学生应掌握构建Web前端开发所需的HTML、CSS及Javascript等静态网页制作技术，能够独立设计并创建用户网站，为后续JavaWEB编程课程做好知识储备。

四、先修课程

计算机语言（C语言、Java语言等）。

五、学时与学分

完成本课程需要48~56学时，本大纲按48学时计算（讲授28学时，实践20学时），3学分。

六、教学方法

课堂讲授结合上机实践。

七、考核方式及成绩评定

考核方式：采用平时成绩+综合作业+期末考试结合方式考核。

成绩评定：平时成绩占比30%，综合作业占比30%，期末考核占比40%。

八、教材及主要参考书目

（一）教材

HTML5+CSS3Web前端开发技术（第3版）,刘德山等主编，北京：人民邮电出版社，2024。

（二）参考书

（1）温谦等.HTML5+CSS3Web开发案例教程.北京：人民邮电出版社，2023.

（2）陆凌牛.HTML5与CSS3权威指南（第3版）.北京：机械工业出版社，2015.

第二部分：课程内容

第1章Web开发基础知识

一、教学目的与要求

了解互联网的工作机制，掌握网站建设的常用技术及流程，要点如下。

（1）通过Web站点的访问过程了解Web的工作机制。

（2）了解网页设计的基本概念和常用技术。

（3）使用VSCode或WebStorm开发工具建立网页。

（4）了解Web站点的建立过程。

（5）上机实践

规划建立一个主题为“classical”的本地网站，并建立第一个网页文件index.html。

二、教学方法

课堂讲授。

三、教学重点与难点

重点：Web开发涉及的概念

难点：Web标准的理解

四、教学时数

2学时

五、主要教学内容

1.1浏览Web站点

1.2Web开发的基本概念

1.3Web标准与网站开发技术

1.4Web开发工具

1.5网站建设的流程

第2章?静态网页制作—使用HTML技术

一、教学目的与要求

掌握HTML5常用标记的语法规则与使用方法，掌握表单和表格的语法规则及使用方法，要点如下。

（1）了解HTML和HTML5的发展过程。

（2）学会在网页中插入文字、表格、图像等元素，并设置网页元素的格式。

（3）使用超链接、表单设计网页。

（4）使用表格及内嵌框架实现简单的网页布局。

（5）上机实践

制作一个会员注册表单，其中包含文本框、密码框、单选按钮、复选框、列表框、提交按钮和重置按钮等表单元素；应用HTML5标记和属性制作一个“学习经典，传承文化”网页。

二、教学方法

课堂讲授与上机实践结合。

三、教学重点与难点

重点：HTML的页面修饰标记、超级链接标记及表单标记等。

难点：HTML5新增标记，video标记和audio标记。

四、教学时数

6学时（含2学时上机）

五、主要教学内容

2.1HTML概述

2.2文本元素

2.3列表元素

2.4HTML5的文档结构元素

2.5超链接元素

2.6多媒体元素

2.7表格

2.8表单

2.9内嵌框架

第3章选择网页元素——使用CSS选择器

一、教学目的与要求

要求掌握CSS的各种选择器，样式的定义方法和应用。要点如下。

（1）理解CSS在前端开发中的作用。

（2）了解选择器的作用和CSS的语法规则。

（3）掌握HTML引用CSS的方法。

（4）使用复合选择器、属性选择器和伪类选择器等选择网页元素。

（5）上机实践

完成“四书”介绍的浏览网页，综合应用多种CSS选择器设置网页样式。

二、教学方法

课堂讲授与上机实践结合。

三、教学重点与难点

重点：CSS样式的定义与应用。

难点：CSS的伪类选择器和伪元素选择器。

四、教学时数

6学时（含2学时上机）

五、主要教学内容

3.1CSS概述

3.2CSS基本选择器

3.3在HTML中使用CSS的方式

3.4CSS复合选择器

3.5属性选择器

3.6伪类选择器

3.7伪元素选择器

第4章