Web前端技术基础

余量，男，曲靖职业技术学院党委书记。承担《大数据与AI导论》《数据结构》《Linux 作系统应用》课程教学，获曲靖市教育体育工作先进个人、 共产党员等20余项殊荣。 霍红艳，副教授，中 员，主要从事大数据专业程序设计、计算机动漫设计、陶瓷设计与工艺专业平面设计教学工作，公开发表十余篇教学论文，参与课题：4个，出版教材4本。

项目1 个人图片展示项目

1.1 项目导入

1.2 学习目标

1.2.1 职业能力

1.2.2 知识目标

1.2.3 职业素养

1.3 相关知识

1.3.1 HTML的产生和发展历史

1.3.2 HTML语法基础

1.3.3 图片标签的使用

1.3.4 图片的引用

1.3.5 常用Web前端开发工具

1.4 项目实施

小结

练习题

项目2 春节简介网页制作

2.1 项目导入

2.2 学习目标

2.2.1 职业能力

2.2.2 知识目标

2.2.3 职业素养

2.3 相关知识

2.3.1 段落标签的使用

2.3.2 文本格式化

2.3.3 链接标签的使用

2.4 项目实施

小结

练习题

项目3 网页计划表制作

3.1 项目导入

3.2 学习目标

3.2.1 职业能力

3.2.2 知识目标

3.2.3 职业素养

3.3 相关知识

3.3.1 表格标签的使用

3.3.2 列表标签的使用

3.4 项目实施

小结

练习题

项目4 注册页面制作

4.1 项目导入

4.2 学习目标

4.2.1 职业能力

4.2.2 知识目标

4.2.3 职业素养

4.3 相关知识

4.3.1 (div)标签的使用

4.3.2 (foml)表单标签的使用

4.4 项目实施

小结

练习题

项目5 “某趣阁”网站注册表单制作

5.1 项目导入

5.2 学习目标

5.2.1 职业能力

5.2.2 知识目标

5.2.3 职业素养

5.3 相关知识

5.3.1 CSS的相关概念

5.3.2 CSS行内样式表的使用

5.3.3 CSS字体常用属性的使用

5.3.4 CSS背景相关属性的使用

5.3.5 CSS边框相关属性的使用

5.4 项目实施

小结

练习题

项目6 某招聘网站登录网页制作

6.1 项目导入

6.2 学习目标

6.2.1 职业能力

6.2.2 知识目标

6.2.3 职业素养

6.3 相关知识

6.3.1 CSS内嵌样式表的使用

6.3.2 CSS盒子模型的概念

6.3.3 DIV+CSS布局的原理

6.3.4 盒子模型相关的CSS属性的使用

6.3.5 绝对定位和相对定位的CSS的使用

6.3.6 HTMIL 5中提供的新的布局元素

6.4 项目实施

小结

练习题

项目7 某网上商城体验店网页制作

7.1 项目导入

7.2 学习目标

7,2.1 职业能力

7.2.2 知识目标

7.2.3 职业素养

7.3 相关知识

7.3.1 CSS外部样式表的使用

7.3.2 CSS的子选择器和组合选择器的使用

7.3.3 CSS的伪类选择器的使用

7.3.4 display属性的使用

7.4 项目实施

小结

练习题

项目8 简易网页计算器

8.1 项目导入

8.2 学习目标

8.2.1 职业能力

8.2.2 知识目标

8.2.3 职业素养

8.3 相关知识

8.3.1 在网页中使用JavaScript程序

8.3.2 变量

8.3.3 数据类型概念

8.3.4 常用的JavaScript数据类型

8.3.5 运算符

8.3.6 程序流程控制结构

8.3.7 简单的输入和输出

8.3.8 程序注释

8.4 项目实施

小结

练习题

项目9 统计成绩单

9.1 项目导入

9.2 学习目标

9.2.1 职业能力

9.2.2 知识目标

9.2.3 职业素养

9.3 相关知识

9.3.1 JavaScript常用内置对象

9.3.2 Math对象的使用

9.3.3 Date对象的使用

9.3.4 String对象的使用

9.3.5 Array对象的使用

9.3.6 函数的使用

9.4 项目实施

小结

练习题

项目10 调色板

10.1 项目导入

10.2 学习目标

10.2.1 职业能力

10.2.2 知识目标

10.2.3 职业素养

10.3 相关知识

10.3.1 事件类型

10.3.2 事件处理程序

10.3.3 事件对象

10.3.4 事件流

10.4 项目实施

小结

练习题

项目11 随机菜单生成器制作

11.1 项目导入

11.2 学习目标

11.2.1 职业能力

11.2.2 知识目标

11.2.3 职业素养

11.3 相关知识

11.3.1 DOM的相关概念

1l.3.2 获取DOM元素

11.3.3 操作元素内容

1l.3.4 操作元素属性

11.3.5 DOM节点操作

11.4 项目实施

小结

练习题

项目12 整点报时时钟

12.1 项目导入

12.2 学习目标

12.2.1 职业能力

12.2.2 知识目标

12.2.3 职业素养

12.3 相关知识

12.3.1 浏览器对象模型的简介

12.3.2 常用浏览器对象模型

12.3.3 定时器

12.4 项目实施

小结

练习题

1.2学习目标

1.2.1职业能力

掌握扎实的计算机专业基础知识;

培养良好的学习能力;

培养优秀的动手实践能力。

1.2.2知识目标

了解Web的基本架构;

理解HTML的发展过程;

掌握标题标签的使用;

掌握图片标签的使用;

掌握边框常用属性的使用。

1.2.3职业素养

践行社会主义核心价值观，充分学习技能，为社会发展做出贡献;

诚信待人，在学习工作中虚心请教;

热爱工作，为实现中华民族伟大复兴中国梦贡献自己的力量。

1.3相关知识

1.3.1HTML的产生和发展历史

在学习Web前端相关技术之前,先介绍一些Web的相关知识。Web技术发展源于Web-based技术(即Web2.0)。简单地说，就是在网上建立一个网站并将其发布到网上以供人们浏览和使用。简单、易用、交互性强且操作简单等是Web-based技术给Web带来的优点。Web-based系统有两个重要角色，即服务器端、客户端。服务器端上存放HTML文件、图片、视频等资源文件，然后等待来自Web浏览器的请求，当收到请求后会根据要求返回不同的资源如 HTML 文件等。客户端(如浏览器)则主要负责对网页进行解释和对网页进行交互操作。

HTML(hyper text markup language)是一种标记语言，它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Intenet资源连接为一个逻辑整体。HTML主要通过标签对网页中的文本、图片、声音等内容进行描述。HTML提供了许多标签，如段落标签、标题标签、超链接标签、图片标签等。网页中需要定义什么内容，就用相应的HTML标签描述即可。在介绍HTML5之前，首先介绍HTML的演变历程。

……

本书是“十四五”高等职业教育新形态一体化教材，介绍了Web应用程序前端开发的基础技能。全书采用项目驱动式编写，共包括12个项目：项目1到项目4介绍HTML(超文本标记语言)的基础语法和使用，帮助读者学习如何使用HTML搭建网页结构；项目5到项目7介绍CSS(层叠样式表)的基础语法和使用，让读者可以通过CSS修饰美化网页；项目8到项目12讲解JavaScript的基本语法和在网页中的使用，赋予网页与用户进行交互的能力。通过学习本书，读者可以掌握前端网页开发的基础技能，为后续前端相关框架的学习奠定基础。