《专业综合实践》教学大纲 一、课程基本信息 课程代码：16030202 课程名称：专业综合实践 英文名称：Professional comprehensive practice I 课程类别：专业课 课程模块： 课程性质：选修 学时：32 学 分：2 适用专业：计算机科学与技术专业本科四年级 先修课程：《iava语言程序设计》、《数据结构》 二、课程简介 本课程是计算机科学与技术、软件工程专业的一门专业基础课程，以W 基本概念和Wb标准为基准点、通过对Wb前端主流开发技术的学习和研究，让 学生理解和掌握HTL5、CSS3以及JavaScript脚本语言、Vue和Elementui的 相关知识，通过这门课程的教学，不仅使学生通过项目实践培养学生开发和设计 Web站点的基本技能，更要使学生充分了解Web思想，为进一步学习web开发后 续课程打下良好的基础。 三、课程性质与教学目的 本课程的教学目标是让学生理解HTML5、CSS3以及JavaScript脚本语言、 Vue和Elementui的基本语法，罩握常用的Web页面布局技术，理解并熟练应用 JavaScript常用对象的属性方法，使用DOM技术编写页面的客户端程序，通过 项目实训，培养学生具备设计实现Wb客户端页面的初步能力。 本课程教学基本要求是让学生理解Wb设计的基本原则、栏目和网站目录结 构定义、标准页面布局方法、 导航菜单制作、图文排版、页面交互等方面的基 知识；能够熟练运用HTL5中的文字、链接、列表、表格、表单、图像、多媒体 等标记语言设计制作网页；熟练掌握CSS3对网页进行布局和修饰的基本方法： 掌握JavaScript脚本语言的基本语法，理解对象的概念及使用JavaScript来编 写客户端脚本程序
《专业综合实践 I》教学大纲 一、课程基本信息 课程代码：16030202 课程名称：专业综合实践 I 英文名称:Professional comprehensive practice I 课程类别：专业课 课程模块： 课程性质：选修 学 时：32 学 分：2 适用专业：计算机科学与技术专业本科四年级 先修课程：《java 语言程序设计》、《数据结构》 二、课程简介 本课程是计算机科学与技术、软件工程专业的一门专业基础课程，以 Web 基本概念和 Web 标准为基准点、通过对 Web 前端主流开发技术的学习和研究，让 学生理解和掌握 HTML5、CSS3 以及 JavaScript 脚本语言、Vue 和 Elementui 的 相关知识，通过这门课程的教学，不仅使学生通过项目实践培养学生开发和设计 Web 站点的基本技能，更要使学生充分了解 Web 思想，为进一步学习 web 开发后 续课程打下良好的基础。 三、课程性质与教学目的 本课程的教学目标是让学生理解 HTML5、CSS3 以及 JavaScript 脚本语言、 Vue 和 Elementui 的基本语法，掌握常用的 Web 页面布局技术，理解并熟练应用 JavaScript 常用对象的属性方法，使用 DOM 技术编写页面的客户端程序，通过 项目实训，培养学生具备设计实现 Web 客户端页面的初步能力。 本课程教学基本要求是让学生理解 Web 设计的基本原则、栏目和网站目录结 构定义、标准页面布局方法、导航菜单制作、图文排版、页面交互等方面的基础 知识；能够熟练运用 HTML5 中的文字、链接、列表、表格、表单、图像、多媒体 等标记语言设计制作网页；熟练掌握 CSS3 对网页进行布局和修饰的基本方法； 掌握 JavaScript 脚本语言的基本语法，理解对象的概念及使用 JavaScript 来编 写客户端脚本程序
四、教学内容及要求 其中标记★为难点 第1章Web技术概述 (一)主要教学内容 一节Web概述 了解Web历史 2★掌握Web体系结构 3理解基本Web技术 4了解Web服务器 5超文本与标记语言 5.1 掌握超文本与超媒体 5.2掌握标记语言 6浏览器 61 了解常用刘监器 6.2掌握标准浏览器 Web开发工身 1 ★掌握vscode集成开发环境 2掌握测试和调试环境 第二节HTM机5基出 1HTML5基础 1.1 掌握TL5文档结构 12 掌握元素与标签 1.3堂握属性 1.4掌握语法规则 2文档结构元素 2.1 掌握<html>标签 2.2 掌握<head>标 2.3掌握<body>标签 2.4头部元素 介绍Wb前端开发技术在中国的应用发展情况，同时对比世界b前端技 术现况，让学生在了解前嘴开发的前沿研究和先进技术的同时，更清嘴 认识到我国在技术理论研究和技术应用上还存在的短板，激励学生奋发图强的 意志，致力于Wb前端技术技术的创新发展。 第2音HTML基础 第 一节TML5内容结构与文本 1HTL5结构标盆 1.l掌握<header>标签 1.2堂据(nav>标签 1.3堂握<artic】e>标签 1.4 掌握<section>标签 1.5 握(aside》标签 1.6掌握(footer>标签
四、教学内容及要求 其中标记★为难点 第 1 章 Web 技术概述 （一）主要教学内容 第一节 Web 概述 1 了解 Web 历史 2 ★掌握 Web 体系结构 3 理解基本 Web 技术 4 了解 Web 服务器 5 超文本与标记语言 5.1 掌握超文本与超媒体 5.2 掌握标记语言 6 浏览器 6.1 了解常用浏览器 6.2 掌握标准浏览器 3 Web 开发工具 1 ★掌握 vscode 集成开发环境 2 掌握测试和调试环境 第二节 HTML5 基础 1 HTML5 基础 1.1 掌握 HTML5 文档结构 1.2 掌握元素与标签 1.3 掌握属性 1.4 掌握语法规则 2 文档结构元素 2.1 掌握<html>标签 2.2 掌握<head>标签 2.3 掌握<body>标签 2.4 头部元素 介绍 Web 前端开发技术在中国的应用发展情况，同时对比世界 Web 前端技 术现况，让学生在了解 Web 前端开发的前沿研究和先进技术的同时，更清晰地 认识到我国在技术理论研究和技术应用上还存在的短板，激励学生奋发图强的 意志，致力于 Web 前端技术技术的创新发展。 第 2 章 HTML 基础 第一节 HTML5 内容结构与文本 1 HTML5 结构标签 1.1 掌握<header>标签 1.2 掌握<nav>标签 1.3 掌握<article>标签 1.4 掌握<section>标签 1.5 掌握<aside>标签 1.6 掌握<footer>标签
l.7理解<details>.和<summary>.标签 l.8★掌握<div>标签 1g理解 标签 2 HTM5基码 2.1 草握标 2.2堂据段落 2.3 掌握换行符 2.4理解注释 HTML5 3.1 掌握无序列 3.2掌握有序列表 3.3掌握定义列表 第二节HTML5超连接 1<a>标签 1.1 掌握href属性 L.2★掌握target属性 1.3掌握使用d属性 2HTML5字符集与颜色 2.1理解HTM5字符集 2.2 理解HM5字符实体 2.3 掌握HTL5频色 2.4了解HTL5颜色名 第三节HTML5表格 HTML5表格 1.1 ★理解表格结构 1.2掌握表格标签 2常用表格标签 2.1 掌握<table>标签 2.2 掌握<tr>标签 2.3 掌握<td>标签 2.4 理解(c01>标签 2.5了解<thead>、<tbody>和<tfoot>:标签 第四节HTML5表单 1 HTM5表单 1.1 ★学握表单 1.2堂握<fom>标签 2表单域 2.1掌握<input>标 2.2 标签 2.3 掌握<1abel)标签 2.4 理解<fieldset>标签 2.5掌握<select>标签
1.7 理解<details>和<summary>标签 1.8 ★掌握<div>标签 1.9 理解<span>标签 2 HTML5 基础标签 2.1 掌握标题 2.2 掌握段落 2.3 掌握换行符 2.4 理解注释 3 HTML5 列表 3.1 掌握无序列表 3.2 掌握有序列表 3.3 掌握定义列表 第二节 HTML5 超连接 1 <a>标签 1.1 掌握 href 属性 1.2 ★掌握 target 属性 1.3 掌握使用 id 属性 2 HTML5 字符集与颜色 2.1 理解 HTML5 字符集 2.2 理解 HTML5 字符实体 2.3 掌握 HTML5 颜色 2.4 了解 HTML5 颜色名 第三节 HTML5 表格 1 HTML5 表格 1.1 ★理解表格结构 1.2 掌握表格标签 2 常用表格标签 2.1 掌握<table>标签 2.2 掌握<tr>标签 2.3 掌握<td>标签 2.4 理解<col>标签 2.5 了解<thead>、<tbody>和<tfoot>标签 第四节 HTML5 表单 1 HTML5 表单 1.1 ★掌握表单 1.2 掌握<form> 标签 2 表单域 2.1 掌握<input>标签 2.2 掌握<textarea>标签 2.3 掌握<label>标签 2.4 理解<fieldset>标签 2.5 掌握<select>标签
2.6掌握<option>标签 2.7 >标签 28 2. 理解<datalist>标签 第3章样式与布局 s基础 了解CSS概述 2掌握CSS语法 3掌握CSS常用选择器 4★堂握CSS3洗择器 5CSS属性 5.1 5.2 5.3掌握CSS3属性值和单位 6掌握使用CSS 7★了解层叠（多重）样式 第二节 页面布局定位 1CSS盒模型 1.1理解CSS盒模型概述 1.2掌握CSS内边距 13据CS边相 掌握CSS3 边框 1.5掌握CSS外边距 1.6理解CSS轮脚 2★CSS布局 91 ★掌握盒模型显示类型 2.2 星CSS3伸缩盒布局 2.3 理解CSS浮动 2.4掌握可见与溢出 3CSS定位 3.1掌握position属性 3.2掌握z index属性 4 基本布局模板 4.1 掌握固定（液态）布局 4.2掌握弹性伸缩布局 第三节元素外观属性 背景 (Background 1.1掌握CSS背景 1.2掌握CSS3背景 1.3掌握CSS3透明度
2.6 掌握<option>标签 2.7 了解<optgroup>标签 2.8 掌握<button>标签 2.9 理解<datalist>标签 第 3 章 样式与布局 第一节 css 基础 1 了解 CSS 概述 2 掌握 CSS 语法 3 掌握 CSS 常用选择器 4 ★掌握 CSS3 选择器 5 CSS 属性 5.1 掌握 CSS 属性 5.2 掌握 CSS 属性值和单位 5.3 掌握 CSS3 属性值和单位 6 掌握使用 CSS 7 ★了解层叠（多重）样式 第二节 页面布局定位 1 CSS 盒模型 1.1 理解 CSS 盒模型概述 1.2 掌握 CSS 内边距 1.3 掌握 CSS 边框 1.4 掌握 CSS3 边框 1.5 掌握 CSS 外边距 1.6 理解 CSS 轮廓 2 ★ CSS 布局 2.1 ★掌握盒模型显示类型 2.2 ★掌握 CSS3 伸缩盒布局 2.3 理解 CSS 浮动 2.4 掌握可见与溢出 3 CSS 定位 3.1 掌握 position 属性 3.2 掌握 z-index 属性 4 基本布局模板 4.1 掌握固定（液态）布局 4.2 掌握弹性伸缩布局 第三节 元素外观属性 1 背景（Background） 1.1 掌握 CSS 背景 1.2 掌握 CSS3 背景 1.3 掌握 CSS3 透明度
2字体(Font) 2.1堂据指定字林 92 掌握指定大小 2.3 理解字体 2.4 理解字体粗细 第四节伪类和伪元素 1CSS伪类 11 掌握超连接伪类 1.2 ★理解结构性 为类 1.3 掌握子元素伪 1.4掌握UI元素状态伪类 2理解CSS伪元素 3 ★掌握CSS内容(content) 第4章 ECMAScript基础 第一节lavaScript其研 1 了解JavaScript历史 2 掌握ECMAScript语法基础 掌握ECMAScript基本数据类型 4 掌握ECMAS pt语句 ★理解使用对 第二节D0M 1DOM概述 1.1了解DOW简个 1.2 掌握节点松 DOM对家 2.1 理解Node对象 2.2★理解HTMLElement对象 2.3理解HTMLDocument对象 24掌握访问节点 DOM与CSS 3.1 理解Style对象 3.2理解Currentstyle对象 3.3理解StyleSheet对象 笪三节BOM 1 BOM对象 1.1★掌握window对象 l.2堂握navigator对象 1.3理解screen对象 1.4理解1 ocation对象 1.5 ★理解 tory对 5章Vue开发基础（上） 第 节vue基础
2 字体（Font） 2.1 掌握指定字体 2.2 掌握指定大小 2.3 理解字体风格 2.4 理解字体粗细 第四节 伪类和伪元素 1 CSS 伪类 1.1 掌握超连接伪类 1.2 ★理解结构性伪类 1.3 掌握子元素伪类 1.4 掌握 UI 元素状态伪类 2 理解 CSS 伪元素 3 ★掌握 CSS 内容（content） 第 4 章 ECMAScript 基础 第一节 JavaScript 基础 1 了解 JavaScript 历史 2 掌握 ECMAScript 语法基础 3 掌握 ECMAScript 基本数据类型 4 掌握 ECMAScript 语句 5 ★理解使用对象 第二节 DOM 1 DOM 概述 1.1 了解 DOM 简介 1.2 掌握节点树 2 DOM 对象 2.1 理解 Node 对象 2.2 ★理解 HTMLElement 对象 2.3 理解 HTMLDocument 对象 2.4 掌握访问节点 3 DOM 与 CSS 3.1 理解 Style 对象 3.2 理解 CurrentStyle 对象 3.3 理解 StyleSheet 对象 第三节 BOM 1 BOM 对象 1.1 ★ 掌握 window 对象 1.2 掌握 navigator 对象 1.3 理解 screen 对象 1.4 理解 location 对象 1.5 ★理解 history 对象 第 5 章 Vue 开发基础（上） 第一节 vue 基础