2019.04目前我国已经进入Web2.0时代袁网页制作的基础上衍生的一种新型技术袁统称为Web前端开发技术袁Web前端开发技术具体包括3个方面院HTML尧CSS尧JavaScript遥其中HTML5是HTML技术代表袁CSS3是CSS技术的代表袁HTML5和CSS3相结合技术在网站设计与制作中越来越普遍袁HTML5和CSS3不仅应用在传统的PC端网页袁还应用在手机APP和微信公众号平台等方面的网页开发和制作袁对于这两项技术的当前应用现状及未来发展趋势的研究具有现实意义遥1前端开发技术HTML5与CSS3HTML是一种网页制作技术袁意思是超文本标记语言袁英文全称为野HyperTextMarkupLanguage冶袁[1]作为Web网页前端开发技术的基础袁HTML本质上是一系列标签袁通过这些标签可以规范地组合成文本文件[1]袁它不仅仅是网页制作使用的标记语言袁对于超文本文档的创建也能够较好地应用遥HTML5作为HTML语言的代表袁它是第五版超文本标记语言袁它并不是第四版的简单升级袁HTML5是一个开放式标准协议袁它是2014年10月由万维网联盟W3C发布正式推荐标准遥也是首个将Web作为应用开发平台的HTML标准遥Web上的信息可以通过HTML5技术传递到智能手机和其他无线通信设备上袁在现有互联网标准基础之上开发出来的HTML5袁它针对无线网络的特点进行了改进和升级[2]遥HTML5技术在原有技术基础之上新增加了音视频等新功能实现形式袁彻底改变了在线保存的历史和现状袁让非网络状态下的存储变为可能遥使用此技术制作的网页与用户的互动性更加强大[3]袁HTML5技术被目前市场上的绝大部分浏览器所支持袁如IE9尧Chrome尧Firefox尧360安全浏览器等遥CSS即层叠样式表袁通常又叫做风格样式表袁英文表示为野CascadingStyleSheet冶袁网页中的布局尧颜色尧字体等设置都是通过该技术可以完成的袁以此来美化网页制作袁CSS也是一种表现语言技术[3]遥CSS3是CSS技术的升级版本袁也是CSS技术的代表袁CSS3的主要功能是控制网页的显示效果遥CSS技术不仅能够美化网页袁而且可以迅速高效地制作网页袁更是一种制作网页的便捷方式袁CSS模块主要包括盒子模型尧列表模块尧超链接方式与多栏布局等模块遥2HTML5技术与CSS3技术优势2援1HTML5技术2援1援1HTML5技术特征HTML5技术的显著优势是可以在智能手机等移动终端上支持多媒体袁版本兼容性问题在低版本与高版本之间能够顺利实现袁例如袁某些元素标记的省略等方面都可以得到HTML5技术的兼容[2]袁与此同时HTML5技术也减少和增加了一些相关元素遥例如袁为了在表单里强化表单元素的强大功能袁为此HTML5技术则新增了很多重要属性遥它有新的表单元素袁它有新的语义标记袁它能提供文本尧数值等新输入类型袁也能引入某些通用属性[4]袁以上这些都是HTML5技术的核心特征袁另外袁还具有对表单字段进行随时调整的便利性曰有利于服务搜索引擎或辅助技术并加强页面可访问性曰可以随作者简介：江涛渊1971-冤袁男袁学士袁研究方向院计算机数字媒体技术尧计算机应用等曰谢世芳渊1982-冤袁女袁硕士袁高级讲师袁研究方向院计算机程序设计尧图像处理尧网页设计等遥收稿日期：2019-01-11Web前端开发技术HTML5与CSS3的融合及未来发展趋势江涛，谢世芳（中山市中等专业学校，广东中山528400）摘要院随着互联网技术的不断发展，移动设备及智能手机的广泛应用和高普及度，不断增多的网民群体数量，网页制作的重视程度不断增强，网页作为互联网信息的重要载体，网页制作技术变革将面临新的挑战。为了使网页制作更符合用户需求，结合HTML5与CSS3技术的功能优势，分析其在网页设计与制作中的应用及未来发展趋势。关键词院Web技术；HTML5技术；CSS3技术；融合
1 第一章
1．简答题
（1）在Web前端开发方面，HTML5与HTML4比较，主要解决哪几方面的问题？
HTML5的核心在于解决当前Web开发中存在的各种问题。
一是解决Web浏览器之间的兼容性问题。在一个浏览器上正常显示的网页（或运行的Web应用程序），很可能在另一个浏览器上不能显示或显示效果不一致；
二是文档结构描述的问题。HTML4之前的各版本中，HTML文档的结构一般用div元素描述，文档元素的结构含义不够清晰；
三是使用HTML+CSS+JavaScript开发Web应用程序时，开发功能受到很大的限制，比如本地数据存储功能、多线程访问、获取地理位置信息等，这些都影响了用户的体验。
（2）HTML5新增的全局属性有哪几个？描述其主要功能。
HTML5新增的全局属性，是指可以对任何元素都使用的属性。功能如下所示。
属性 描述 HTML5新增
accesskey 规定访问元素的键盘快捷键
class 规定元素的类名（用于规定样式表中的类）。
contenteditable 规定是否允许用户编辑内容。 是
contextmenu 规定元素的上下文菜单。 是
dir 规定元素中内容的文本方向。
draggable 规定是否允许用户拖动元素。 是
dropzone 规定当被拖动的项目/数据被拖放到元素中时会发生什么。 是
hidden 规定该元素是无关的。被隐藏的元素不会显示。 是
id 规定元素的唯一 ID。
lang 规定元素中内容的语言代码。
spellcheck 规定是否必须对元素进行拼写或语法检查。 是
style 规定元素的行内样式。
tabindex 规定元素的 tab 键控制次序。
title 规定有关元素的额外信息。
2 （3）HTML5是下一代Web语言的开发框架，典型特性有哪些？
HTML5从标记语言的功能提升到下一代Web语言的开发框架，他集成了HTML+CSS3+JavaScript的Web应用框架。。
WORD格式可编辑
专业知识整理分享 第一章
1．简答题
（1）在Web前端开发方面，HTML5与HTML4比较，主要解决哪几方面的问题？
HTML5的核心在于解决当前Web开发中存在的各种问题。
一是解决Web浏览器之间的兼容性问题。在一个浏览器上正常显示的网页（或运行的Web应用程序），很可能在另一个浏览器上不能显示或显示效果不一致；
二是文档结构描述的问题。HTML4之前的各版本中，HTML文档的结构一般用div元素描述，文档元素的结构含义不够清晰；
三是使用HTML+CSS+JavaScript开发Web应用程序时，开发功能受到很大的限制，比如本地数据存储功能、多线程访问、获取地理位置信息等，这些都影响了用户的体验。
（2）HTML5新增的全局属性有哪几个？描述其主要功能。
HTML5新增的全局属性，是指可以对任何元素都使用的属性。功能如下所示。
属性 描述 HTML5新增
accesskey 规定访问元素的键盘快捷键
class 规定元素的类名（用于规定样式表中的类）。
contenteditable 规定是否允许用户编辑内容。 是
contextmenu 规定元素的上下文菜单。 是
dir 规定元素中内容的文本方向。
draggable 规定是否允许用户拖动元素。 是
dropzone 规定当被拖动的项目/数据被拖放到元素中时会发生什么。 是
hidden 规定该元素是无关的。被隐藏的元素不会显示。 是
id 规定元素的唯一 ID。
lang 规定元素中内容的语言代码。
spellcheck 规定是否必须对元素进行拼写或语法检查。 是
style 规定元素的行内样式。
tabindex 规定元素的 tab 键控制次序。
title 规定有关元素的额外信息。
XXXX职业技术学院教案首页
编号：JX/GC7.1-01-JL03
教师姓名 张老师 部 门 软件与信息学院 课程名称 前端设计与开发 编号 1
适用班级 -班级编号-
课时安排 2学时 教学课型：√理论课 □实验课 □体育课 □习题课 □实训课 □实践环境课
教案介质 √纸质 √电子 教案篇幅 √打印稿1页 □手写稿__页 √PPT 23幅 □有其他电子文件
题目（教学章、节或主题）
第一章 网页设计理论
第二章 HTML语言
教学目的要求：
了解网页的来源和本质、网页的组成元素、网页的尺寸、网页的布局、网页的色彩、网站建设需求分析、网页设计流程
了解HTML特点、HTML语法、HTML文档结构
时 间 授 课 内 容 提 要
（标注重点、难点） 教 师 活 动 学 生 活 动 使用资源
15分钟
30分钟
30分钟
15分钟
1、引言
1） 为什么要学习前端设计与开发
2） 前端设计与开发课程的内容
2、网页设计理论
1）网页的来源和本质
2）网页的组成元素
3）网页的尺寸
4）网页的布局
5）网页的色彩
6）网站建设需求分析
7）网页设计流程
3、HTML语言
1）HTML特点
2）HTML语法（难点）
3）HTML文档结构（重点）
4、小结
引入新课程
讲授新课内容
授课过程中穿插提问
辅导学生上机操作实践
认真听讲并思考
思考并回答问题
上机操作完成任务
电脑
投影仪
传奇软件
网络
讨论、思考题、作业：
课后练习题
部门领导意见：
教研室主任签章： 2021 年 8 月 31 日 XXXX职业技术学院教案首页
编号：JX/GC7.1-01-JL03
教师姓名 张老师 部门 软件与信息学院 课程名称 前端设计与开发 编号 2
适用班级 -班级编号-
课时安排 2学时 教学课型：√理论课□实验课□体育课□习题课□实训课□实践环境课
