《HTML5+CSS3》课程标准（含课程资政元素）

《HTML5+CSS3》课程标准一、课程概要课程名称HTML5+CSS3课程学分4课程学时共72学时，理论36学时，实践36学时课程类别通识教育：£基础课程£核心课程£一般课程£拓展专业课程专业教育：£基础课程R核心课程£拓展课程课程性质R必修£选修适用专业软件技术前导课程网页设计与制作、JavaScript程序设计后续课程无开设学期第一学期第二学期第三学期第四学期第五学期第六学期√二、课程定位本课程是软件技术专业的专业核心课程，主要目标是培养软件技术专业学生全面的Web前端开发能力，从基础的HTML/CSS编码技巧到高级的响应式设计策略前端开发能力、职业素养和创新能力；掌握HTML5新增的结构化元素、分组元素、交互性元素、文本级语义元素元素、HTML5属性、过渡与变形属性、HTML5新增input类型、datalist元素、output元素、progress元素、meter元素、fieldset元素和legend元素、CSSflex布局、CSSgrid布局、响应式布局、audio元素、video元素、原生响应式站点布局、移动端视口设置、精灵图、字体图标、移动端商城网站布局等课程内容。通过本课程的学习，学生能够全面掌握掌握现代Web开发所需的核心技能，利用HTML5、CSS3技术进行响应式、移动端项目开发的能力，为胜任Web前端开发等岗位工作提供核心支持。三、课程目标（一）素质（思政）目标1.培养学生爱党爱社会主义、担当民族复兴大任的爱国情怀；2.培养学生对社会主义核心价值观的情感认同和行为习惯；3.培养学生爱岗敬业、艰苦奋斗、勇于创新、热爱劳动的劳动精神；4.培养学生执着专注、精益求精、一丝不苟、科技强国的工匠精神；5.培养学生的创新意识和勇于探索精神，使其将个人专业成长与国家科技发展战略紧密结合，为国家科技进步贡献力量；6.引导学生成为终身学习者，使其保持好奇心，主动学习新技术和工具，培养适应未来职场变化的能力；7.强化学生责任意识，使其在开发过程中注重用户体验，理解优秀设计对于社会的意义；8.提高学生的团队协作能力。在项目实战中，通过小组合作的形式，加强沟通和协作能力，培养团队精神；9.强化学生的法律意识，提醒学生注意版权问题。（二）知识目标1.掌握HTML5的结构化元素、分组元素；2.掌握HTML5的交互性元素、文本级语义元素；3.掌握HTML5的全局属性；4.了解ARIA和HTML5中弃用与语义演变的元素；5.掌握过渡与变形属性；6.了解表单验证；7.掌握其他表单元素；8.了解正则表达式；9.掌握CSSflex布局；10.掌握CSSgrid布局；11.掌握响应式布局；12.掌握audio元素和video元素；13.掌握移动端视口设置、重置浏览器默认样式、网页图标、精灵图、字体图标；（三）能力目标1.能够规范使用HTML5新增的元素；2.能够利用HTML5新增属性进行页面开发；3.能够利用过渡与变形属性实现动画效果；4.能够利用CSSflex布局、CSSgrid布局、响应式布局进行页面设计与开发；5.能够在网页中添加音频文件、视频文件；6.能够实现响应式页面的开发；7.能够实现移动端页面的开发。四、课程设计思路本课程从学生专业发展的能力需求出发，结合“web前端开发”“web全栈开发”等1+X证书要求，对接教育部出台的软件技术专业教学标准。设计10个任务，每个任务以“知识准备→实战演练→进阶训练→动手实践”为主线。“知识准备”阶段的小案例是该知识点的典型案例。“实战演练”“进阶训练”“动手实践”构成由浅入深的项目任务实践体系：“实战演练”涵盖完成项目任务所需的所有知识点，是课程学习的基本要求；“进阶训练”是在“实战演练”的基础上，通过自学“拓展学习指导”所要求的内容，提高学生的技能水平和培养学生的自学能力；“动手实践”围绕企业真实案例，进一步提升学生的项目开发经验，以课下实训的形式呈现。五、课程内容与要求第1章HTML5新增元素及属性学习单元HTML5新增元素及属性课时12课时学习目标掌握HTML5的结构化元素、分组元素掌握HTML5的交互性元素、文本级语义元素掌握HTML5的全局属性了解ARIA和HTML5中弃用与语义演变的元素学习内容知识点掌握程度重点难点结构化元素掌握√分组元素掌握√ARIA了解交互性元素掌握√文本级语义元素掌握√HTML5的全局属性掌握√√HTML5中弃用与语义演变的元素了解第2章过渡和变形属性学习单元过渡和变形属性课时6课时学习目标掌握过渡与变形属性的相关设置与应用学习内容知识点掌握程度重点难点transition-property属性掌握√transition-duration属性掌握√transition-timing-function属性掌握√transition-delay属性掌握√transition属性掌握√√平移（translate）掌握√缩放（scale）掌握√倾斜（skew）掌握√旋转（rotate）掌握√√rotateX()了解rotateY()了解rotate3d()了解第3章其他表单元素学习单元其他表单元素课时6课时学习目标了解表单验证掌握其他表单元素了解正则表达式学习内容知识点掌握程度重点难点使用required属性来确保字段必须填写了解使用pattern属性结合使用正则表达式来限制输入格式了解textarea元素掌握√select元素、option元素和optgroup元素掌握√datalist元素掌握√output元素掌握√√progress元素掌握√meter元素掌握√√fieldset元素和legend元素掌握√√正则表达式了解第4章CSSflex布局学习单元CSSflex布局课时6课时学习目标掌握CSSflex布局相关规范学习内容知识点掌握程度重点难点什么是flex掌握flex容器掌握flex-direction属性掌握√√flex-wrap属性掌握√√flex-flow属性掌握√√justify-content属性掌握√√align-items属性掌握√√align-content属性掌握√√为什么使用flex掌握order属性了解flex-grow属性了解flex-basis属性了解flex-shrink属性了解flex属性了解align-self属性了解第5章CSSgrid布局学习单元CSSgrid布局课时6课时学习目标掌握CSSgrid布局基本属性用法学习内容知识点掌握程度重点难点grid布局概念了解display属性掌握√grid-template-columns/grid-template-rows属性掌握√grid-gap/row-gap/column-gap属性掌握√grid-auto-flow属性掌握√√justify-content/align-content属性掌握√√grid-column/grid-row属性掌握√√justify-items/align-items属性掌握√grid布局与flex布局的区别了解grid-template-areas属性了解第6章响应式布局学习单元响应式布局课时6课时学习目标掌握CSS媒体查询学习内容知识点掌握程度重点难点响应式设计了解响应式之前了解液态网格掌握√液态图像掌握√媒体查询掌握√√img元素的srcset和sizes属性了解第7章网页多媒体学习单元网页多媒体课时6课时学习目标了解视频与音频的编码与解码了解视频与音频的文件类型掌握audio元素的语法、常用属性，能够在网页中添加音频文件掌握video元素的语法、常用属性，能够在网页中添加音频文件了解DOM控制audio和video对象的使用方法学习内容知识点掌握程度重点难点编码与解码了解音频编解码器了解视频编解码器了解√文件类型了解容器格式了解audio元素的基本语法掌握√audio元素的常用属性掌握√√检查浏览器的支持情况掌握√设置多个音频来源掌握√video元素的基本语法掌握√video元素的常用属性掌握√√设置多个视频来源掌握√使用网络视频资源掌握√HTML5audio/video对象的事件了解HTML5audio/video对象的方法了解HTML5audio/video对象的属性了解第8章综合实战项目——原生响应式站点布局学习单元综合实战项目——原生响应式站点布局课时6课时学习目标掌握响应式页面的开发掌握CSS3媒体查询的应用学习内容知识点掌握程度重点难点首页头部区布局掌握√首页正文及版权布局掌握√列表页布局掌握√第9章综合实战项目——移动端商城网站布局学习单元综合实战项目——移动端商城网站布局课时18课时学习目标掌握移动端视口设置、重置浏览器默认样式、网页图标、精灵图、字体图标掌握移动端网站布局的应用掌握浏览器开发者工具的使用学习内容知识点掌握程度重点难点移动端视口设置掌握√重置浏览器默认样式掌握√网页图标掌握√图片图标掌握√精灵图掌握√字体图标的生成掌握√字体图标的应用掌握√首页头部掌握首页轮播图掌握√√首页导航栏掌握首页正文标题掌握√首页正文内容掌握首页数码产品及标签栏掌握商品分类页掌握购物车掌握购物车交互功能掌握商品列表页掌握商品详情页掌握商品详情页交互功能掌握课时分配章目讲课上机合计第1章HTML5新增元素及属性6612第2章过渡和变形属性336第3章其他表单元素336第4章CSSflex布局336第5章CSSgrid布局336第6章响应式布局336第7章网页多媒体336第8章综合实战项目——原生响应式站点布局336第9章综合实战项目——移动端商城网站布局9918合计363672六、实施建议（一）课程团队本课程负责人由学术造诣深厚、教学经验丰富、教学特色鲜明、具有研究生学历并取得相应学位或者具有高级专业技术职务的教师担任，并建立职称、学历、年龄等结构合理、专兼结合的“双师型”教学团队，每个教学班应配备主讲教师1名。专任教师应具有高校教师资格，软件类专业本科以上学历，半年以上企业行业相关经历。（二）教学方法与手段本课程采用案例分析、任务驱动等教学方法，通过师生完成一个个训练项目，培养学生在Web前端开发的实际工作技能，锻炼思考问题、解决问题、自主学习和创新能力，培养前端开发师岗位方面的综合职业能力。通过融入开源精神、知识产权意识、工匠精神等思政元素，挖掘专业思政元素，帮助学生树立正确价值观，培养其精益求精的工作态度和踏实肯干的工作作风。利用多媒体信息化技术，通过视频、微课、案例分析、在线教学平台等辅助教学手段让学生的学习更高效，师生互动更加密切。（三）教学资源开发与利用1.教材选用《HTML5+CSS3网页制作任务驱动式教程》，杨建强著，湖南大学出版社，2024.2.参考资料《Web前端开发任务驱动式教程：HTML5+CSS3+JavaScript第2版》汪婵婵、徐兴雷，电子工业出版社，20233.教学手段利用多媒体信息化技术，通过视频、微课、案例分析、在线教学平台等辅助教学手段让学生的学习更高效，师生互动更加密切（四）教学评价1.教学评价思路课程以学生学业质量为导向，结合课程知识、技能、素质要求，探索形成了教师、行业企业专家、学生评价主体相结合，线上线下相结合，诊断性评价、过程性评价、终结性评价、增值性评价相结合的考核与评价模式。2.评价内容与标准表1教学评价说明考核方式过程性考核（50分）终结性考核（50分）增值性评价（10分）平时考勤任务训练网络学习实操考核大赛获奖、职业资格证书获取等分值设定1030105010评价主体教师教师、学生教师、学生教师教师评价方式线上、线下结合线下线上线下线下表2课程评分标准考核方式考核项目评分标准（含分值）过程性考核平时考勤16次考勤，全勤10分，迟到早退一次扣0