2024年6月12日发(作者：)

Web前端开发技术(Web客户端编程)

学分：3.5 学时：56 (28时理论/28时上机)

一、课程的性质、地位与任务

《Web前端开发技术》（又名“Web客户端编程”）课程是计算机科学与技术、信息管理与信息

系统、软件工程、网络工程、数字媒体、物联网工程等专业的一门专业课程，也是其他计算机相关

专业的普及型课程，通过对Web前端三大主流开发技术学习和研究，让学生理解和掌握HTML5、CSS3、

JavaScript等脚本语言的相关知识，通过项目实践培养学生开发和设计Web站点的基本操作技能

和工作岗位适应能力。

二、课程的教学目标与基本要求

本课程教学基本要求是让学生理解Web前端开发与设计的基本原则、Web网站的目录结构定义、

主流页面布局方法、导航菜单制作、图文排版、页面交互等方面的基础知识。掌握网站规划、设计、

制作、管理、发布的相关技术及Web前端设计的操作技能；并熟练运用HTML中的文字、链接、列

表、表格、表单、图像、多媒体、框架标记及属性设计出框架网页、表格与表单网页、多媒体动态

网页；掌握使用DIV+CSS结合技术进行网页布局的基本方法。掌握JavaScript脚本语言的基本语

法知识，HTML中JavaScript程序的嵌入方法，理解对象的概念及使用JavaScript来进行开发、

维护、管理和设置Web应用程序；掌握综合网站设计和发布的基本流程和方法。

本课程的教学目标是让学生理解HTML5、CSS3、JavaScript三大脚本语言的基本语法，掌握常

用的Web页面布局技术，理解并熟练应用JavaScript常用的对象的属性与方法，熟练地使用DOM

技术编写页面交互的客户端程序，通过项目实训，培养学生Web页面布局和页面交互设计初步能力。

三、课程内容（重点△，难点★）

1 Web前端开发技术综述

1.1 Web概述

1.1.1 了解Web起源

1.1.2 理解Web特点

1.1.3理解Web工作原理

1.1.4 掌握Web相关概念，掌握URL构成、Web服务器、超链接基本概念。

1.2 Web前端开发职业需求

了解Web前端开发职业需求

1.3 Web前端开发技术

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

1.3.2理解CSS在Web页面设计中作用

1.3.3理解JavaScript在Web页面设计中作用

1.3.4了解HTML DOM、BOM及AJAX在页面设计中的作用

1.3.5了解jQuery 含义及基本用途

1.4 Web前端开发工具

△掌握EditPlus、Adobe Dreamweaver、Sublime Text、WebStorm、HBuilder

等开发工具

1.5 浏览器工具

1

熟悉常用五类浏览器安装与使用

1.6 熟悉综合实例

2 HTML基础

2.1 HTML文档结构

2.1.1 △理解HTML文档组成结构

2.2 头部

△掌握HTML头部标记作用及标题标记、元信息meta标记的语法

2.3 主体

2.3.1 △掌握HTML主体标记作用

2.3.2 △掌握主体标记主要属性及其设置方法

2.4 HTML基本语法

△掌握标记类型语法及HTML属性语法

2.5 注释

掌握两种注释标记的使用方法及作用，重点掌握标记的使用。

2.6 HTML文档编写规范

2.6.1 掌握HTML代码书写规范

2.6.2 掌握HTML文档命名规则

2.7 HTML文档类型

了解3种HTML文档类型和HTML5的DTD定义方法。

2.8掌握综合实例中所使用的标记语法

3 格式化文本与段落

3.1 Web页面初步设计

3.1.1 △掌握在添加文字信息的方法

3.1.2 掌握标题字标记语法及对齐属性的设置方法

3.1.3 掌握添加空格、特殊符号的方法

3.2 格式化文本标记

3.2.1 掌握文本修饰标记的使用方法

3.2.2 了解计算机输出标记的使用方法

3.2.3 理解引用和术语标记的使用方法

3.2.4 △掌握字体font标记的face、size、color属性语法

3.3 段落与排版标记

3.4.1 △掌握段落p标记语法及align属性的设置

3.4.2 掌握换行、水平分隔线、拼音/音标注释ruby标记和rt/rp标记拼音/音标注释ruby

标记和rt/rp标记、预格式化、块引用等标记的使用及属性怕设置

3.4 综合实例

学会运用所学知识完成Web页面设计

4 列表

4.1 列表概述

4.1.1 了解列表的定义和常用列表的分类

4.2 无序列表

4.2.1 △掌握无序列表基本语法

2