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

1．1Web概述

1．1．1Web的起源

1．1．2Web的特点

1．1．3Web的工作原理

1．1．4Web的相关概念

1．2Web前端开发工程师的职业需求

1．2．1Web前端开发的由来

1．2．2Web前端开发工程师的职业要求

1．3Web前端开发技术

1．3．1HTML

1．3．2CSS

1．3．3JavaScript

1．4Web前端开发工具

1．4．1Visual Studio Code

1．4．2HBuilder X

1．5浏览器工具

1.5.1Microsoft Edge

1．5．2Google Chrome

1．5．3Mozilla Firefox

1．5．4Safari

1．5．5Opera

〖2〗

〖2〗

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．4HTML基本语法

2．4．1标记的类型

2．4．2HTML属性

2．5注释

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．1Web页面初步设计

3．1．1向Web页面中添加文字信息

3．1．2标题字标记

3．1．3添加空格与特殊符号

3．2格式化文本标记

3．2．1文本修饰标记

3．2．2字体标记

3．3段落与排版标记

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．1列表概述

4．2无序列表

4．3有序列表

4．4列表嵌套

4．5定义列表

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

本章小结

练习4

实验4

第5章超链接与浮动框架

5．1超链接概述

5．2超链接的语法、路径及分类

5．2．1超链接的语法

5．2．2超链接的路径

5．2．3超链接的分类

5．3超链接的应用

5．3．1创建HTTP文档下载超链接

5．3．2创建FTP站点访问超链接

5．3．3创建图像超链接

5．3．4创建电子邮件超链接

5．3．5创建页面书签链接

5．4浮动框架

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

本章小结

练习5

实验5

第6章图像与多媒体文件

6．1图像

6．1．1插入图像

6．1．2设置图像的替代文本

6．1．3设置图像的高度和宽度

6．1．4设置图像的边框

6．1．5设置图像的对齐方式

6．1．6设置图像的间距

6．1．7设置图像的热区链接

6．2滚动文字

6．2．1添加滚动文字

6．2．2设置滚动文字的背景颜色与滚动循环

6．2．3设置滚动方向与滚动方式

6．2．4设置滚动速度与滚动延迟

6．2．5设置滚动范围与滚动空白空间

6．3embed标记

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

本章小结

练习6

实验6

第7章CSS基础

7．1CSS概念

7．1．1CSS的基本概念

7．1．2传统HTML的缺点

7．1．3CSS的特点

7．1．4CSS的优势

7．1．5CSS的编辑方法

7．2使用CSS控制Web页面

7．2．1CSS基本语法

7．2．2CSS选择器类型

7．2．3CSS选择器声明

7．2．4CSS定义与引用

7．3CSS继承与层叠

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．3span标记

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

本章小结

练习8

实验8

第9章CSS样式属性

9．1CSS属性值中的单位

9．1．1绝对单位

9．1．2相对单位

9．2CSS字体样式

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．3CSS文本样式

9．3．1字符间距、行距与首行缩进属性

9．3．2字符装饰、英文大小写转换属性

9．3．3水平对齐、垂直对齐属性

9．4CSS颜色与背景

9．4．1颜色color属性

9．4．2背景background属性

9．5CSS列表样式

9．6CSS盒模型

9．6．1CSS盒模型结构

9．6．2边界属性设置

9．6．3边框属性设置

9．6．4填充属性设置

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

本章小结

练习9

实验9

第10章DIV+CSS页面布局

10．1页面布局设计

10．1．1“三行模式”和“三列模式”

10．1．2“三行二列模式”和“三行三列模式”

10．1．3多行多列复杂模式

10．2导航菜单设计

10．2．1对象的显示与隐藏

10．2．2一级水平导航菜单

10．2．3二级水平导航菜单

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

本章小结

练习10

实验10