HTML5+CSS3+JavaScript+Vue.js前端教与学（多学时大纲+教案+AI辅助编程+课件+视频+上机，周文洁） 10:12 广告 广告 广告 了解详情 > 会员跳广告 首月9.9元 秒后跳过广告 开通搜狐视频黄金会员，尊享更高品质体验！
1080P及以上画质仅为黄金会员专享>
开通/续费会员 抱歉，您观看的视频加载失败 请检查网络连接后重试，有话要说？请点击 我要反馈>> 正在切换清晰度... 播放 按esc可退出全屏模式 00:00 00:00 01:14 广告 只看TA 高清 倍速 剧集 字幕 下拉浏览更多 5X进行中 炫彩HDRVIP尊享HDR视觉盛宴 超清 720P 高清 540P 2.0x 1.5x 1.25x 1.0x 0.8x 50哎呀，什么都没识别到反馈循环播放 跳过片头片尾 画面色彩调整 AI明星识别 视频截取 跳过片头片尾 是 | 否色彩调整亮度标准饱和度100对比度100恢复默认设置关闭复制全部log
1
课程的性质和教学目的
课程描述：
HTML5网页前端设计是计算机专业一门重要的专业方向课程，它是为培养我们社会主义现代化建设所需要的高质量专业人才服务。
HTML5网页前端设计是学习Web前端开发的必修课程。本课程介绍了开发Web前端网页应具备的基础知识，包括HTML5、CSS3、Java技术入门以及HTML5拖放、表单、画布、音频和视频、地Web存储的应用API、HTML5字符集和符号、基于Vue3.x的入门开发等知识。通过理论教学和上机练习训练学生编写程序的熟练度和规范性；在项目经验的积累方面，通过完成项目案例，增加对实际软件项目开发的经验。
教学目的：
知识目标：了解Web原理基础和前端新技术的由来，掌握HTML5+CSS3+Java基础知识以及各类HTML5 API如拖放、表单、画布、音频和视频、Web存储的应用，了解HTML5字符集和符号的使用，掌握Vue3.x的入门开发技巧。
技能目标：能综合应用HTML5、CSS3与Java技术开发Web网站，能够在开发过程中熟练掌握HTML5新增文档结构元素的使用、CSS各类选择器的使用和样式的表达，提高开发者网页前端实战项目分析能力以及强化综合应用能力。
2
课程教学内容
第1章 绪论：HTML5入门介绍。
第2章 HTML5基础：HTML5基本结构、HTML5保留的常用标签、HTML5新增的常用标签。
第3章 CSS基础：CSS样式表、CSS选择器、CSS常用样式、CSS定位。
第4章 Java基础： Java变量、基本数据类型、Java对象类型、Java运算符、Java 条件语句、Java函数、Java DOM。
第5章 HTML5 拖放API：掌握HTML5元素拖放功能
第6章 HTML5 表单API：HTML表单基础、HTML5表单新增输入类型、HTML5表单新增元素标签、HTML5表单新增属性。
第7章 HTML5 画布API：HTML5画布创建，绘制路径、矩形、图片和文本，颜色和样式设置，保存与恢复技术，变形与剪裁。
第8章 HTML5 媒体API：HTML5音频的应用、HTML5视频的应用、HTML5媒体API的其他通用功能。
第9章 HTML5 Web存储API：localStorage和sessionStorage存储，存储、读取数据、数据遍历，删除指定数据，清空所有数据。
第10章 HTML5 字符集与符号：HTML5常用字符集，实体名称和数字编码（数学符号、带圈符号、货币符号、卡牌符号、杂项符号），HTML5 Emoji系列。
第11章 CSS3技术：CSS3边框和背景效果、CSS3文本和字体效果、CSS3变形与动画效果、CSS3多列。
第12章 综合应用设计实例：综合应用HTML5、CSS3与Java相关知识开发网页。
附录：AI辅助编程综合案例：基于ChatSDK搭建网页版智能体
3
教学要求
一、严格按照课表规定的时间、地点上课，不迟到、不早退。
二、根据大纲要求，认真备课完成教案与讲稿编写等各项课前准备工作；授课过程力求内容充实、概念准确、思路清晰、详略得当、逻辑性强、重难点突出，力戒平铺直叙、照本宣科，
三、重视对学生的学习方法指导和课堂教学效果信息的反馈，实现教与学的双向互动；
四、做好考核内容设计，并严格按照大纲要求做好出勤率统计、作业评价。
五、学生根据课程大纲要求制定本门课程学习计划，加强学业管理，严格自我要求，提升自主学习能力，主动适应课程学习要求。参与课堂教学活动不迟到、不早退，无正当理由不请假，上课认真听讲，不做任何与课堂教学无关事宜，不使用手机，积极与授课教师进行教学互动，同时利用课余时间做好预习、复习、课外书籍阅读等工作，主动与同学开展合作学习，认真完成任课教师布置的课程作业。
4
实验环节
本课程建议课内上机18个学时，针对每章节知识点进行基础项目案例开发训练。教师可根据实际情况从教材中每章节末尾的阶段案例作为上机的具体内容。
具体安排见下表。
注：在总课时量较少的情况下，建议上机课节选主要功能模块讲解，其余扩展功能模块作为选学内容由学生课下继续完成，可上传到学校配套的课堂派、学习通等平台的讨论区或者qq群等地方参与每期的交流讨论。
上机实验环节可以巩固学生对理论知识的理解，提高学生的实践操作能力和解决问题的逻辑思维能力，课后还可布置思考题培养学生的创新思维能力。
根据学生在上机课的参与度、表现、操作熟练程度以及项目源代码等内容综合评定上机实践成绩，建议按总成绩的10%录入课程总分。
5
建议学时
6
课程教材
扫码优惠购书
内容简介：
本书是一本从零开始学习的Web前端开发教材，无需额外的基础。本书知识体系结构较新，以项目驱动为宗旨，详细介绍HTML5、CSS3与Java的基础知识与使用技巧。 本书包含211个示例，均在浏览器中调试通过。作者为书中所有示例以及最后两章的综合设计实例精心录制了总计1400分钟的视频讲解，包括264个视频文件。 本书新增了各章节知识点案例的AI快捷实现技巧介绍，并额外提供了关于内嵌AI智能体的网页项目开发实战案例。 本书提供丰富的配套资源，包括教学大纲、教学课件、电子教案、程序源码、教学进度表和在线题库。
7
目录
扫一扫
源码下载
目录
第一部分基础知识篇
第1章绪论
1.1Web原理基础
1.1.1Internet与万维网
1.1.2Web架构
1.1.3Web应用
1.2Web前端技术基础
1.2.1HTML技术
1.2.2CSS技术
1.2.3Java技术
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章Java基础
4.1Java的使用
4.1.1内部Java
4.1.2外部Java
4.2Java的语法
4.2.1Java的大小写
4.2.2Java分号
4.2.3Java注释
4.2.4Java代码块
4.3Java变量
4.3.1变量的声明
4.3.2变量的命名规范
4.3.3Java关键字和保留字
4.4Java基本数据类型
4.4.1Undefined类型
4.4.2Null类型
4.4.3String类型
4.4.4Number类型
4.4.5Boolean类型
4.5Java运算符
4.5.1赋值运算符
4.5.2算术运算符
4.5.3逻辑运算符
4.5.4关系运算符
4.5.5相等性运算符
4.6Java条件语句
4.6.1if语句
4.6.2switch语句
4.7Java函数
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.js3.x的安装
13.2.2基于Vue.js3.x的第一个应用
13.3基于Vue.js3.x的简易秒表的设计与实现
13．3．1创建项目结构
13．3．2页面设计
13．3．3逻辑实现
13．3．4完整代码展示
本章小结及AI辅助编程技巧
结束语
附录AHTML5元素标签对照表
附录BHTML5事件属性对照表
附录CCSS3颜色名称对照表
附录DAI辅助编程综合案例
8
本考核方式及要求
为实现课程教学目标，本门课程考核方式及要求为：采取期末考试和平时成绩相结合的方式。
平时成绩（占40%）：考勤（10%）+课后作业（20%）+上机实践（10%）
期末考试（占60%）：为闭卷考试，卷面成绩为100分；或期末实战项目作业，总成绩为100分。
最终成绩 = 平时成绩*40% + 期末考试*60% 。
9
视频样例
10
题库及期末试卷（www.qingline.net）
11
课件样例
12
教案和教学进度表样例
13
AI助教：你的随身教师返回搜狐，查看更多
评论 (0)