新书速览|HTML5+CSS3 Web前端开发与实例教程:微课视频版

《HTML5+CSS3 Web前端开发与实例教程:微课视频版》

本书内容

《HTML5+CSS3 Web前端开发与实例教程:微课视频版》秉承“思政引领,立德树人”的教育理念,自然融入多维度、深层次的思政元素,全面对标企业和行业需求;引入现代Web前端开发的核心技术,如Flex布局、Grid布局,以及人工智能编程插件,同时融入企业开发实践,确保学习内容与实际工作紧密相关。全书以一个完整案例为主线,结合综合项目实战操作,体现育人、应用和创新三项能力。《HTML5+CSS3 Web前端开发与实例教程:微课视频版》配套提供课程思政元素、案例源代码、PPT课件、课后习题与答案、微课视频、教案、教学大纲、章节测试、云题库、实验报告、学习通在线课程、企业高频面试题、学科竞赛真题等丰富的教学资源,并设有QQ群提供线上学习跟踪和指导服务

《HTML5+CSS3 Web前端开发与实例教程:微课视频版》共分14章,系统地讲解Web前端开发的核心技术,主要内容包括Web前端开发概述、HTML5基础、HTML5页面元素和属性、表单、CSS3基础、CSS3修饰页面元素、CSS3高级选择器、CSS3盒子模型、浮动与定位、CSS3高级应用、网页布局、Flex布局、Grid布局等,并提供“大学生参军入伍专题网站”和“文创商城”两个实战案例。

本书作者

卢欣欣,副教授。长期从事高校教学工作,专注Web应用开发,项目开发经验丰富。主讲《Web程序设计》《高级程序设计》《软件开发综合实践》等课程,先后主编教材2部,参编教材3部。在慕课网上线的《企业网站综合布局实战》课程学习人数超15万人。

崔仲远,副教授,毕业于北京交通大学。长期从事高校教学工作和软件项目开发工作,实战开发经验丰富。先后承担《网页特效设计》《Web前端基础》《跨平台脚本开发技术》等多门课程的教学任务,发表学术论文多篇,主编教材2部,参编教材3部、专著1部。主持省级教改项目1项、科研项目1项。

本书读者

《HTML5+CSS3 Web前端开发与实例教程:微课视频版》既可作为本专科院校计算机相关专业的Web程序设计、网页设计与制作等课程的教材,也可作为Web应用开发人员的自学手册和技术参考书。

本书目录

 第1章  Web前端开发概述 1

1.1  Web前端开发职责 1

1.2  Web前端开发相关概念 2

1.3  Web前端开发相关技术 3

1.3.1  Web标准 3

1.3.2  HTML 4

1.3.3  CSS 4

1.3.4  JavaScript 5

1.4  Web前端开发工具 5

1.4.1  代码编辑工具:VSCode 6

1.4.2  代码运行工具:浏览器 8

1.4.3  开发者工具 9

1.4.4  人工智能辅助编程工具 10

1.5  网站设计与开发流程 11

1.6  实战案例:网页显示“社会主义核心价值观” 12

1.7  本章小结 13

第2章  HTML5基础 14

2.1  HTML5语法基础 14

2.1.1  HTML文档结构 14

2.1.2  HTML标签语法 17

2.1.3  HTML注释 18

2.2  文本控制标签 19

2.2.1  标题标签 19

2.2.2  段落标签 20

2.2.3  换行标签 20

2.2.4  文本格式化标签 21

2.2.5  特殊字符 22

2.3  图像标签 23

2.3.1  网页常用图像格式 23

2.3.2  图像标签的使用 24

2.3.3  相对路径与绝对路径 26

2.4  超链接标签 27

2.4.1  文本链接 27

2.4.2  图像链接 28

2.4.3  书签(锚点)链接 28

2.4.4  其他链接 30

2.5  列表 30

2.5.1  有序列表 31

2.5.2  无序列表 32

2.5.3  定义列表 34

2.5.4  嵌套列表 35

2.6  表格 36

2.6.1  表格结构 36

2.6.2  表格标签 37

2.7  视频和音频标签 41

2.7.1  视频标签 41

2.7.2  音频标签 42

2.8  其他标签 42

2.8.1  预格式化标签 42

2.8.2  水平线标签 43

2.8.3  行内容器标签 43

2.9  实战案例:“大学生参军网站”兵役登记页面 44

2.10  本章小结 46

第3章  HTML5页面元素和属性 47

3.1  文档结构标签 47

3.1.1  标签 47

3.1.2  标签 49

3.1.3  标签 50

3.1.4  标签 51

3.1.5  标签 53

3.1.6  标签 53

3.1.7  和标签 54

3.1.8  标签 55

3.2  交互元素 55

3.2.1  标签 55

3.2.2  标签 56

3.2.3  标签 57

3.3  文本层次语义标签 58

3.3.1  标签 58

3.3.2  标签 59

3.3.3  标签 60

3.4  全局属性 61

3.5  实战案例:“大学生参军网站”页面结构 62

3.6  本章小结 64

第4章  表单 65

4.1  表单概述 65

4.2  标签 67

4.3  标签 68

4.3.1  单行文本框 69

4.3.2  密码框 69

4.3.3  文件域 70

4.3.4  单选按钮和复选框 71

4.3.5  隐藏域 73

4.3.6  按钮 73

4.3.7  HTML5新增输入元素 76

4.4  标签 78

4.5  标签 79

4.6  选择列表标签 80

4.7  多行文本框标签 83

4.8  表单常用属性 84

4.9  实战案例:“大学生参军网站”网上咨询表单 86

4.10  本章小结 88

第5章  CSS3基础 89

5.1  CSS概述 89

5.2  CSS语法规则 90

5.3  CSS样式的引入方法 91

5.3.1  行内样式表 91

5.3.2  内部样式表 92

5.3.3  外部样式表 93

5.4  CSS基本选择器 94

5.4.1  标签选择器 94

5.4.2  ID选择器 95

5.4.3  类选择器 95

5.4.4  通用选择器 97

5.5  实战案例:“大学生参军网站”公共样式表制作 97

5.6  本章小结 98

第6章  CSS3修饰页面元素 99

6.1  CSS字体样式 99

6.1.1  字体粗细属性 99

6.1.2  字体风格属性 100

6.1.3  字体大小属性 101

6.1.4  字体族属性 103

6.1.5  字体属性 106

6.2  CSS文本样式 107

6.2.1  行高属性 107

6.2.2  颜色属性 109

6.2.3  文本水平对齐属性 110

6.2.4  首行缩进属性 111

6.2.5  文本修饰属性 111

6.2.6  字符间距属性 112

6.2.7  字间距属性 113

6.2.8  字母大小写属性 114

6.2.9  文本阴影效果属性 115

6.3  CSS表格样式 116

6.4  CSS表单样式 118

6.4.1  单行文本框美化 119

6.4.2  按钮美化 120

6.4.3  下拉列表美化 120

6.5  CSS列表样式 122

6.6  实战案例:“大学生参军网站”在线咨询页面 123

6.7  本章小结 126

第7章  CSS3高级选择器 127

7.1  组合选择器 127

7.1.1  交集选择器 127

7.1.2  并集选择器 128

7.1.3  后代选择器 129

7.1.4  子元素选择器 130

7.1.5  相邻兄弟选择器 131

7.1.6  通用兄弟选择器 132

7.2  属性选择器 133

7.3  伪类选择器 134

7.4  伪元素选择器 136

7.5  CSS三大特性 138

7.6  本章小结 141

第8章  CSS3盒子模型 142

8.1  盒子模型概述 142

8.1.1  认识盒子模型 142

8.1.2  标签 144

8.2  盒子模型的相关属性 144

8.2.1  内容区域的宽度和高度 144

8.2.2  边框 145

8.2.3  内边距 152

8.2.4  外边距 153

8.3  阴影 155

8.4  box-sizing 156

8.5  背景属性 158

8.5.1  背景颜色 158

8.5.2  背景图像 158

8.5.3  图像平铺方式 158

8.5.4  背景图像位置 160

8.5.5  背景图像固定 161

8.5.6  背景图像大小 161

8.5.7  背景裁剪 163

8.5.8  背景复合属性 164

8.5.9  CSS精灵图 165

8.6  实战案例:“大学生参军网站”登录页面 166

8.7  本章小结 169

第9章  浮动与定位 170

9.1  标准文档流 170

9.2  元素的分类 171

9.2.1  块级元素、行内元素与行内块元素 171

9.2.2  元素的类型转换 172

9.3  元素的浮动 173

9.3.1  设置浮动 174

9.3.2  清除浮动 176

9.4  元素的定位 180

9.4.1  定位的概念 180

9.4.2  定位属性 181

9.4.3  静态定位 181

9.4.4  相对定位 182

9.4.5  绝对定位 183

9.4.6  固定定位 186

9.4.7  粘性定位 187

9.4.8  层叠等级属性 188

9.5  实战案例:“大学生参军网站”轮播图效果 190

9.6  本章小结 192

第10章  CSS3高级应用 193

10.1  变换 193

10.1.1  旋转 194

10.1.2  倾斜 195

10.1.3  缩放 196

10.1.4  平移 197

10.1.5  变换原点 198

10.2  过渡 200

10.3  动画 202

10.4  实战案例:“大学生参军网站”CSS3高级应用 205

10.5  本章小结 208

第11章  网页布局 209

11.1  网页布局概述 209

11.1.1  网页布局的概念 209

11.1.2  网页布局的流程 210

11.1.3  常见的网页布局方法 211

11.2  网页布局命名规范 211

11.3  常见布局的实现 212

11.3.1  单列布局 212

11.3.2  两列常规布局 214

11.3.3  三列常规布局 216

11.3.4  两列自适应等高布局 217

11.3.5  三列自适应布局 219

11.4  实战案例:“大学生参军网站”首页主体部分 223

11.5  本章小结 225

第12章  Flex布局 226

12.1  Flex布局概述 226

12.2  Flex布局相关概念 227

12.3  容器属性 227

12.3.1  display属性 228

12.3.2  flex-direction属性 228

12.3.3  flex-wrap属性 230

12.3.4  justify-content属性 232

12.3.5  align-items属性 233

12.3.6  align-content属性 235

12.4  项目属性 236

12.4.1  order属性 236

12.4.2  flex-grow属性 237

12.4.3  flex-shrink属性 239

12.4.4  flex-basis属性 240

12.4.5  flex属性 241

12.5  实战案例:“大学生参军网站”导航条 242

12.6  本章小结 244

第13章  Grid布局 245

13.1  Grid布局概述 245

13.2  Grid布局相关概念 246

13.3  容器属性 246

13.3.1  display属性 247

13.3.2  划分网格 248

13.3.3  行间隔和列间隔 252

13.3.4  项目对齐方式 253

13.4  项目属性 255

13.4.1  grid-column和grid-row属性 255

13.4.2  grid-area属性 257

13.5  实战案例:“大学生参军网站”视频展播列表 258

13.6  本章小结 260

第14章  Web前端项目综合实践——文创商城 261

14.1  项目概述 261

14.2  需求分析 262

14.3  原型设计 262

14.4  公共部分的设计与实现 265

14.4.1  重置样式 265

14.4.2  页面头部 265

14.4.3  页面底部 268

14.4.4  悬浮侧边栏 270

14.5  首页的设计与实现 271

14.5.1  甄选好物版块 271

14.5.2  国博文房版块 274

14.6  商品列表页的设计与实现 277

14.6.1  商品类型筛选 277

14.6.2  分页导航 278

14.7  商品详情页的设计与实现 279

14.8  本章小结 283

编辑推荐

1HTML5与CSS3是Web前端开发的两大核心技术,它们不仅是Web前端开发工程师必须掌握的技能,也是高校一门重要的Web前端课程内容

2《HTML5+CSS3 Web前端开发与实例教程:微课视频版》以“从项目中来到项目中去”为主旨,从Web前端开发的基本概念入手,系统介绍HTML5、CSS3网页编程技巧。

3《HTML5+CSS3 Web前端开发与实例教程:微课视频版》采取“知识点讲解+示例解析+案例详讲+高频面试题+实践操作+学科竞赛真题”的递进式教学模式,引导读者理解理论知识,掌握开发方法,学会复杂的网站设计技能,全面提升读者的Web前端开发能力。

4《HTML5+CSS3 Web前端开发与实例教程:微课视频版》配套资源非常丰富,包括思政元素、案例源代码、PPT课件、微课视频、习题与答案、教案、教学大纲、章节测试、云题库、实验报告、学习通在线课程,能帮助读者快速掌握HTML5与CSS3前端技术。

本文摘自《HTML5+CSS3 Web前端开发与实例教程:微课视频版》,获出版社和作者授权发布。

新书速览|HTML5+CSS3 Web前端开发与实例教程:微课视频版——jd

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/790313.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

IAR 编译优化等级详解

目录 1.编译时优化器何时介入 2.编译优化等级汇总 3.优化项解读 3.1 代码移动 3.2 函数内联 3.3 循环交换 3.4 循环展开 3.5 公用表达式消除 3.6 链接阶段的优化 4 小结 大家好,这里是快乐的肌肉。 最近在迁移工程到IAR编译器上,发现编译优化…

【第27章】MyBatis-Plus之Mybatis X 插件

文章目录 前言一、安装指南二、核心功能1.XML 映射跳转2.代码生成3. 重置模板 三、JPA 风格提示四、常见问题解答1. JPA 提示功能无法使用?2. 生成的表名与预期不符? 五、代码生成模板配置1. 默认模板2. 重置默认模板3. 自定义模板内容3.1 实体类信息3.2…

虚拟机因断电进入./#状态解决办法

现象: 解决:先查看错误日志:journalctl -p err -b查看自己虚拟机中标黄部分的名字 之后运行:xfs_repair -v -L /dev/sda #这里sda用你自己标黄的 最后重启 reboot 即可。

基于Java技术的网吧管理系统

你好呀,我是计算机学姐码农小野!如果有相关需求,可以私信联系我。 开发语言:Java 数据库:MySQL 技术:Java技术,B/S结构 工具:MyEclipse,MySQL 系统展示 首页 个人中…

WebRTC API接口教程:实现高效会议的步骤?

WebRTC api接口教程如何使用?WebRTC api接口的功能? WebRTC无需中间服务器即可传输音视频流,为视频会议、在线教育等应用提供了强大的支持。AokSend将详细介绍如何利用WebRTC API接口实现高效会议的步骤。 WebRTC API接口教程:获…

悠律凝声环开放式耳机体验:强劲低音、高颜值设计

最近发现了一款潮酷的开放式耳机,不仅颜值抗打,更重要的是能在嘈杂的环境中提供给我一份宁静的沉浸式音乐体验,号称是开放音频中的重低音之王,它就是悠律凝声环开放式耳机。 这款耳机无论其外观设计、音质效果、性价比以及续航能力…

MinIO - 服务端签名直传(前端 + 后端 + 效果演示)

目录 开始 服务端签名直传概述 代码实现 后端实现 前端实现 效果演示 开始 服务端签名直传概述 传统的,我们有两种方式将图片上传到 OSS: a)前端请求 -> 后端服务器 -> OSS 好处:在服务端上传,更加安全…

【智能算法改进】一种混合多策略改进的麻雀搜索算法

目录 1.算法原理2.改进点3.结果展示4.参考文献5.代码获取 1.算法原理 【智能算法】麻雀搜索算法(SSA)原理及实现 2.改进点 精英反向学习策略 将精英反向学习策略应用到初始化阶段, 通过反向解的生成与精英个体的选择, 不仅使算法搜索范围得到扩大, 提…

DELTA: DEGRADATION-FREE FULLY TEST-TIME ADAPTATION--论文笔记

论文笔记 资料 1.代码地址 2.论文地址 https://arxiv.org/abs/2301.13018 3.数据集地址 https://github.com/bwbwzhao/DELTA 论文摘要的翻译 完全测试时间自适应旨在使预训练模型在实时推理过程中适应测试数据流,当测试数据分布与训练数据分布不同时&#x…

苹果笔记本电脑能玩哪些游戏 苹果电脑可以玩的单机游戏推荐

苹果笔记本有着优美的外观和强大的性能。用户不仅可以使用苹果笔记本办公、剪辑,越来越多的用户开始关注苹果笔记本在游戏领域的表现,尤其是在大型游戏方面。本文将为你详细介绍苹果笔记本都能玩什么游戏,以及为你推荐苹果电脑可以玩的单机游…

tesla p100显卡显示资源不足,api调用失败

🏆本文收录于《CSDN问答解惑-专业版》专栏,主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案,希望能够助你一臂之力,帮你早日登顶实现财富自由🚀;同时,欢迎大家关注&&收…

进程间的通信--管道

文章目录 一、进程通信的介绍1.1进程间为什么需要通信1.2进程如何通信 二、管道2.1匿名管道2.1.1文件描述符理解管道2.1.2接口使用2.1.3管道的4种情况2.1.4管道的五种特征 2.2管道的使用场景2.2.1命令行中的管道2.2.2进程池 2.命名管道2.1.1原理2.2.2接口2.2.3代码实例 一、进程…

C++初阶:类与对象(一)

✨✨所属专栏:C✨✨ ✨✨作者主页:嶔某✨✨ 类的定义 定义格式 • class为定义类的关键字,后面跟类的名字,{}中为类的主体,注意类定义结束时后⾯分号不能省略。类体中内容称为类的成员;类中的变量称为类的…

设计模式之职责链模式

1. 职责链模式(Chain of Responsibility Pattern) 在职责链模式中,多个处理器依次处理同一个请求。一个请求先经过 A 处理器处理,然后再把请求传递给 B 处理器,B处理器处理完后再传递给 C 处理器,以此类推&…

【Android组件】封装加载弹框

📖封装加载弹框 ✅1. 构造LoadingDialog✅2. 调用LoadingDialog 效果: ✅1. 构造LoadingDialog 构造LoadingDialog类涉及到设计模式中的建造者模式,进行链式调用,注重的是构建的过程,设置需要的属性。 步骤一&#x…

基于考研题库小程序V2.0实现倒计时功能板块和超时判错功能

V2.0 需求沟通 需求分析 计时模块 3.1.1、功能描述←计时模块用于做题过程中对每一题的作答进行30秒倒计时,超时直接判错,同时将总用时显示在界面上;记录每次做题的总用时。 3.1.2、接口描述←与判定模块的接口为超时判定,若单题用时超过 …

C++:缺省参数|函数重载|引用|const引用

欢迎来到HarperLee的学习笔记! 博主主页传送门:HarperLee的博客主页 想要一起进步的uu可以来后台找我哦! 一、缺省参数 1.1 缺省参数的定义 缺省参数:是声明或定义函数时为函数的参数指定⼀个缺省值。在调用该函数时,…

MYSQL数据库建表规则及注意事项

数据类型以及应用场景 数值类型 TINYINT:使用在 0~1 SMALLINT:使用在2~10 INT:常用 BIGINT:使用在用户ID等更大范围的整数 DECIMAL:用于存储精确的小数。常用于需要高精度计算的场景,如金融数据处理。 日期…

【UE5.3】笔记10-时间轴的使用

时间轴 右键--Add Timeline(在最下面) --> 双击进入时间轴的编辑界面: 左上角可以添加不同类型的轨道,可以自定义轨道的长度,单位秒,一次可以添加多个 可以通过右键添加关键帧,快捷键:shift鼠标左键按…

JMH325【剑侠情缘3】第2版80级橙武网游单机更稳定亲测视频安装教学更新整合收集各类修改教学补丁兴趣可以慢慢探索

资源介绍: 是否需要虚拟机:是 文件大小:压缩包约14G 支持系统:win10、win11 硬件需求:运行内存8G 4核及以上CPU独立显卡 下载方式:百度网盘 任务修复: 1,掌门任务&#xff08…