HTML5网页前端设计——HTML5+CSS3+JavaScript+Vue.js
定 价:59.8 元
丛书名:Web前端开发技术丛书
- 作者:周文洁
- 出版时间:2024/12/1
- ISBN:9787302695318
- 出 版 社:清华大学出版社
- 中图法分类:TP312.8HT
- 页码:
- 纸张:胶版纸
- 版次:
- 开本:16开
-
商品库位:
本书是一本从零开始学习的Web前端开发教材,无需额外的基础。本书知识体系结构较新,以项目驱动为宗旨,详细介绍HTML5、CSS3与JavaScript的基础知识与使用技巧。本书包含211个示例,均在浏览器中调试通过。作者为书中所有示例以及最后两章的综合设计实例精心录制了总计1400分钟的视频讲解,包括264个视频文件。本书新增了各章节知识点案例的AI快捷实现技巧介绍,并额外提供了关于内嵌AI智能体的网页项目开发实战案例。本书提供丰富的配套资源,包括教学大纲、教学课件、电子教案、程序源码、教学进度表和在线题库。本书可作为高等院校计算机相关专业HTML5课程的教材,也可作为学习HTML5开发的自学教材或培训教材。
本书特色:(1)项目驱动教学:完整例题199个,每章阶段案例10个,进阶综合案例2个;(2)AI辅助编程:知识点案例的AI快捷实现技巧详解,内嵌AI智能体的网页项目开发实战。为便于教学,本书提供丰富的配套资源,包括教学大纲、教学课件、电子教案、例题与案例源码、在线作业、习题答案和1400分钟的微课视频。
前言
党的二十大报告指出: 教育、科技、人才是全面建设社会主义现代化国家的基础性、战略性支撑。必须坚持科技是优质生产力、人才是优质资源、创新是优质动力,深入实施科教兴国战略、人才强国战略、创新驱动发展战略,开辟发展新领域新赛道,不断塑造发展新动能新优势。高等教育与经济社会发展紧密相连,对促进就业创业、助力经济社会发展、增进人民福祉具有重要意义。
HTML5的时代已经到来——高度跨平台自适应的特性让HTML5逐步走向技术前沿,为PC端和移动端设备带来无缝衔接的丰富内容。如今HTML5这个词已经不仅仅是它本身的意思了,还代表着以它为首的CSS3、jQuery等一系列新技术的合集,这也是未来Web前端开发的趋势所在。
本书是一本从零开始学习的Web前端开发教材,无需额外的基础。全书以项目驱动为宗旨,详细介绍HTML5、CSS3与JavaScript的基础知识与使用技巧。
全书共包含13章,可分为以下三部分:
优质部分是基础知识篇,包括第1~4章的内容。其中,第1章是绪论,概要介绍Web原理基础、主流Web前端开发技术以及开发工具的选择; 第2章是HTML5基础,讲解HTML5的基本结构、保留的HTML常用标签以及HTML5新增的常用标签的用法; 第3章是CSS基础,主要讲解CSS样式表、选择器、语法规则、取值单位以及一系列CSS常用样式; 第4章是JavaScript基础,主要讲解JavaScript的变量、基本数据类型、对象、运算符、条件语句、循环语句、函数、DOM以及BOM的相关知识。本版第2~4章新增的阶段案例分别是“优质个Web页面”、“导航菜单栏的设计与实现”和“数字时钟的设计与实现”。
第二部分是重点篇,包括第5~10章的内容。这6个章节分别详细讲解HTML5新增API中的一款,包括HTML5拖放API、表单API、画布API、音频/视频API、Web存储API,以及新增了HTML5字符集与符号的用法。本版每章节新增的阶段案例分别是“仿回收站效果的设计与实现”、“用户注册页面的设计与实现”、“手绘时钟的设计与实现”、“在线教学视频的设计与实现”、“网页主题设置的设计与实现”和“简易Emoji查询器的设计与实现”。
第三部分是提高篇,包括第11~13章的内容。第11章是CSS3技术,主要讲解CSS3新增的样式用法,包括边框、背景、文本、字体、多列等方面的样式效果,以及新增的变形、渐变和动画技术。本版该章节新增阶段案例“特殊字体效果的设计与实现”。第12章主要讲解一个节选自实战性质的项目——高校辅导员培训基地网的设计与实现; 第13章是本版的新增内容,介绍基于Vue.js 3.x的优质个项目以及使用组合式API制作一个秒表应用。这两章通过对项目实例的解析与实现,提高开发者的分析能力,强化对HTML5、CSS3、JavaScript以及Vue.js 3.x的综合应用能力。
本书包含完整例题199个、每章阶段案例10个以及提高篇进阶综合案例2个,均在浏览器中调试通过。由于很多HTML5和CSS3的代码需要较高版本浏览器方能提供更好的体验效果,建议读者使用但不限于Chrome 17.0、Firefox 10.0、Safari 5.0或Opera 11.1以上版本的浏览器。
本书提供丰富的配套资源,包括教学大纲、教学课件、电子教案、例题和案例源代码、在线题库、习题答案、教学进度表和1400分钟的微课视频。
资源下载提示
课件等资源: 扫描封底的“图书资源”二维码,在公众号“书圈”下载。
素材(源码)等资源: 扫描目录上方的二维码下载。
在线作业: 扫描封底的作业系统二维码,再扫描自测题二维码,可以在线做题及查看答案。
视频资源: 扫描封底的文泉云盘防盗码,再扫描书中相应章节中的视频讲解二维码,可以在线学习。
本书新增了各章节知识点案例的AI快捷实现技巧介绍,并额外提供了关于内嵌AI智能体的网页项目开发实战案例。
最后,感谢清华大学出版社魏江江分社长、王冰飞编辑以及相关工作人员,非常荣幸能与的你们再度合作; 特别感谢敬爱的周泉先生和任萱女士对本书出版给予的倾力帮助,无论何时想起都会让我不忘初心继续努力; 感谢家人和朋友给予的关心和鼓励,同时也要感谢我的丈夫刘嵩先生多年来对我的工作的一贯支持。
愿本书能够对读者学习Web前端新技术有所帮助,并真诚地欢迎读者批评指正。希望能与读者朋友共同学习成长,在浩瀚的技术之海不断前行。
作者
2025年5月
扫一扫
源码下载
目录
优质部分基础知识篇
第1章绪论
1.1Web原理基础
1.1.1Internet与万维网
1.1.2Web架构
1.1.3Web应用
1.2Web前端技术基础
1.2.1HTML技术
1.2.2CSS技术
1.2.3JavaScript技术
1.3Web前端新技术
1.3.1HTML5技术
1.3.2CSS3技术
1.4Web开发工具
1.4.1Adobe Dreamweaver
1.4.2Sublime Text
1.4.3NodePad++
1.4.4Visual Studio Code
1.4.5WebStorm
1.5Web技术的前景与展望
1.5.1Flash的兴衰
1.5.2HTML5的前景
1.5.3未来展望
本章小结及AI辅助编程技巧
习题1
第2章HTML5基础
2.1HTML5基本结构
2.1.1文档类型声明!DOCTYPE
2.1.2根标签html
2.1.3标签head
2.1.4主体标签body
2.1.5HTML5文档注释
2.1.6HTML5文档规范
2.1.7HTML4.01转换为HTML5
2.2HTML5保留的常用标签
2.2.1基础标签
2.2.2文本格式标签
2.2.3列表标签
2.2.4图像标签
2.2.5超链接标签
2.2.6表格标签
2.2.7框架标签
2.2.8容器标签
2.3HTML5新增的常用标签
2.3.1HTML5新增文档结构标签
2.3.2HTML5新增格式标签
2.4HTML5新增API
2.5实验案例——优质个Web页面
本章小结及AI辅助编程技巧
习题2
第3章CSS基础
3.1CSS样式表
3.1.1内联样式表
3.1.2内部样式表
3.1.3外部样式表
3.1.4样式表层叠优先级
3.2CSS选择器
3.2.1元素选择器
3.2.2ID选择器
3.2.3类选择器
3.2.4属性选择器
3.3语法规则
3.3.1注释语句
3.3.2@charset
3.3.3!important
3.4CSS取值与单位
3.4.1数字
3.4.2长度
3.4.3角度
3.4.4时间
3.4.5文本
3.4.6颜色
3.5CSS常用样式
3.5.1CSS背景
3.5.2CSS框模型
3.5.3CSS文本
3.5.4CSS字体
3.5.5CSS超链接
3.5.6CSS列表
3.5.7CSS表格
3.6CSS定位
3.6.1非常定位
3.6.2相对定位
3.6.3层叠效果
3.6.4浮动
3.7实验案例——导航菜单栏的设计与实现
本章小结及AI辅助编程技巧
习题3
第4章JavaScript基础
4.1JavaScript的使用
4.1.1内部JavaScript
4.1.2外部JavaScript
4.2JavaScript的语法
4.2.1JavaScript的大小写
4.2.2JavaScript分号
4.2.3JavaScript注释
4.2.4JavaScript代码块
4.3JavaScript变量
4.3.1变量的声明
4.3.2变量的命名规范
4.3.3JavaScript关键字和保留字
4.4JavaScript基本数据类型
4.4.1Undefined类型
4.4.2Null类型
4.4.3String类型
4.4.4Number类型
4.4.5Boolean类型
4.5JavaScript运算符
4.5.1赋值运算符
4.5.2算术运算符
4.5.3逻辑运算符
4.5.4关系运算符
4.5.5相等性运算符
4.6JavaScript条件语句
4.6.1if语句
4.6.2switch语句
4.7JavaScript函数
4.7.1函数的基本结构
4.7.2函数的调用
4.7.3函数的返回值
4.8文档对象模型
4.8.1查找HTML元素
4.8.2DOM HTML
4.8.3DOM CSS
4.8.4DOM事件
4.8.5DOM节点
4.9实验案例——数字时钟的设计与实现
本章小结及AI辅助编程技巧
习题4
第二部分重点篇
第5章HTML5拖放API
5.1HTML5新增拖放API
5.2浏览器支持情况
5.3HTML5拖放API的应用
5.3.1DragEvent事件
5.3.2DataTransfer对象
5.3.3拖放元素过程
5.3.4自定义拖放图标
5.3.5自定义拖放行为
5.3.6本地文件的拖放
5.4实验案例——仿回收站效果的设计与实现
本章小结及AI辅助编程技巧
习题5
第6章HTML5表单API
6.1HTML表单基础
6.1.1表单标签form
6.1.2输入标签input
6.1.3标记标签label
6.1.4多行文本标签textarea
6.1.5列表标签select
6.1.6按钮标签button
6.1.7域标签fieldset和域标题标签legend
6.2HTML5表单新特性
6.2.1HTML5表单新增输入类型
6.2.2HTML5表单新增元素标签
6.2.3HTML5表单新增属性
6.3实验案例——用户注册页面的设计与实现
本章小结及AI辅助编程技巧
习题6
第7章HTML5画布API
7.1画布概述
7.1.1HTML5画布
7.1.2画布坐标
7.1.3主流浏览器支持情况一览
7.2HTML5画布API的应用
7.2.1检测浏览器支持情况
7.2.2创建画布
7.2.3画布绘制方法
7.2.4绘制路径
7.2.5绘制矩形
7.2.6绘制图片
7.2.7绘制文本
7.2.8颜色与样式
7.2.9保存和恢复
7.2.10变形
7.2.11剪裁
7.3实验案例——手绘时钟的设计与实现
本章小结及AI辅助编程技巧
习题7
第8章HTML5媒体API
8.1HTML5媒体API概述
8.1.1HTML5音频和视频
8.1.2HTML5媒体支持的格式
8.2主流浏览器支持情况一览
8.2.1对HTML5音频的支持情况
8.2.2对HTML5视频的支持情况
8.3HTML5音频的应用
8.3.1HTML5音频的基本格式
8.3.2检查浏览器支持情况
8.3.3音频来源多样性
8.3.4自定义音频控制
8.4HTML5视频的应用
8.4.1HTML5视频的基本格式
8.4.2检测浏览器支持情况
8.4.3视频来源多样性
8.4.4自定义视频控制
8.5HTML5媒体API其他通用功能
8.5.1标记媒体播放时间范围
8.5.2跳转媒体播放时间点
8.5.3获取媒体播放时间
8.5.4终止媒体文件的下载
8.6实验案例——在线教学视频的设计与实现
本章小结及AI辅助编程技巧
习题8
第9章HTML5 Web存储API
9.1Web存储技术概述
9.1.1HTTP Cookie存储
9.1.2HTML5 Web存储
9.2主流浏览器支持情况
9.3HTML5 Web存储 API的应用
9.3.1检测浏览器支持情况
9.3.2Storage接口
9.3.3localStorage与sessionStorage
9.3.4存储数据
9.3.5读取指定数据
9.3.6数据遍历
9.3.7删除指定数据
9.3.8清空所有数据
9.4实验案例——网页主题设置的设计与实现
本章小结及AI辅助编程技巧
习题9
第10章HTML5 字符集与符号
10.1HTML5字符集概述
10.1.1什么是字符集
10.1.2常见字符集介绍
10.2HTML5符号
10.2.1HTML5数学符号
10.2.2HTML5带圈符号
10.2.3HTML5货币符号
10.2.4HTML5扑克牌符号
10.2.5HTML5杂项符号
10.3HTML5 Emoji
10.3.1什么是Emoji
10.3.2HTML5 Emoji笑脸表情系列
10.3.3HTML5 Emoji交通系列
10.3.4HTML5 Emoji动物系列
10.3.5HTML5 Emoji办公系列
10.4实验案例——简易Emoji查询器的设计与实现
本章小结及AI辅助编程技巧
习题10
第三部分提高篇
第11章CSS3技术
11.1CSS3边框和背景效果
11.1.1CSS3边框
11.1.2CSS3背景效果
11.2CSS3文本和字体效果
11.2.1CSS3文本
11.2.2CSS3字体
11.3CSS3变形与动画效果
11.3.1CSS3 2D变形
11.3.2CSS3 Transition动画
11.3.3CSS3 Animation动画
11.4CSS3多列
11.4.1columns
11.4.2columngap
11.4.3columnrule
11.5实验案例——特殊字体效果的设计与实现
本章小结及AI辅助编程技巧
习题11
第12章前端综合应用·基于HTML5+CSS3的高校网站的设计与实现
12.1项目简介
12.2整体布局设计
12.3网站页眉实现
12.4菜单导航栏实现
12.4.1菜单栏目的实现
12.4.2搜索框的实现
12.5主体内容优质行实现
12.5.1左侧面板的实现
12.5.2右侧面板上方的实现
12.5.3右侧面板下方的实现
12.6主体内容第二行实现
12.7网站页脚实现
12.7.1页脚1的实现
12.7.2页脚2的实现
12.8完整代码展示
本章小结及AI辅助编程技巧
第13章前端框架实战·基于Vue.js 3.x的秒表程序的设计与实现
13.1前端框架简介
13.1.1什么是前端框架
13.1.2基础前端框架
13.1.3高级前端框架
13.2Vue.js 3.x入门
13.2.1Vue.js 3.x的安装
13.2.2基于Vue.js 3.x的优质个应用
13.3基于Vue.js 3.x的简易秒表的设计与实现
13.3.1创建项目结构
13.3.2页面设计
13.3.3逻辑实现
13.3.4完整代码展示
本章小结及AI辅助编程技巧
结束语
附录AHTML5元素标签对照表
附录BHTML5事件属性对照表
附录CCSS3颜色名称对照表
附录DAI辅助编程综合案例