摘 要：本文主要阐述最热门交互式网页布局技术HTML+CSS的发展历程，以及HTML5+CSS3的优势，并以HTML5中新的页面交互元素应用为例讲述其新的交互功能，并通过CSS3样式表的控制功能完善交互式网页的布局的案例体现HTML5与CSS3相结合在制作交互式网页中起到的关键性作用。
关键词：交互式网页；HTML5；CSS3
随着Web技术的迅速发展，用户对互联网的依赖性愈加强烈，由最初的浏览静态文档，到后期的动态网页，客户端与服务端的交互显得尤为重要。用户不仅仅局限于读书、浏览新闻、购物，越来越希望能够参与其中。随着Blog的诞生，网页的交互性功能体现的愈加明显，用户的参与性也得到提高，因此对于Web前端开发人员提出了更高的要求，对于网页的交互式需求日益增加，这就需要开发人员能够应用最新最强大的技术来完成项目的开发。
一、 HTML概述
（一） HTML简介
HTML，超文本标记语言，通过段落标记、图片标记、超链接标记等对网页中的文本、图片、声音等进行描述，使Web页面变得丰富多彩。
它的发展经历了六个阶段，超文本标记语言（第一版）、HTML2.0、HTML3.2、HTML4.0、HTML4.01、HTML5.0。
直到HTML5的出现，本着用户优先的原则，化繁为简，新增多个新特性，并解决了跨浏览器的问题，使网页开发技术得到了前所未有的改善，是一个很大的突破。
（二） HTML5的优势
作为当下最热门的通用性标记语言，HTML5的到来没有带给开发者很大的冲击，它只是使这种描述性标记语言更加规范，并增加了许多实用的新功能和新特性。
（1） 化繁为简
简化了字符集声明、DOCTYPE声明、属性定义等，增加了新的简单的API，使语义简明清晰，更易读取，提高了浏览速度。
（2） 跨平台性
●由于各浏览器中不具有统一的标准，功能多种多样，导致HTML5之前不同浏览器，
看到不同的页面效果。而HTML5解决了这个问题，但却对浏览器版本要求比较高，
对于不支持新标签的老式IE浏览器，只需简单的添加JavaScript代码就可以使用。
●HTML5开发的游戏，可以很轻易地移植到UC的开放平台、Opera的游戏中心、
Facebook应用平台，甚至可以通过封装的技术发放到App Store或Google Play上，
所以它的跨平台性非常强大。
（3） 新特性
为实现图文并茂的网页效果，增强网页多媒体显示功能，HTML5新增了许多新特性。
●新的页面元素：如header、nav、section、article、footer。
●新的表单控件：如calendar、date、time、email、url、search。
●用于绘画的canvas元素。
●用于嵌入视频音频的video和audio元素。
●支持本地离线存储。
●新增地理位置、拖拽、摄像头等API。
二、 CSS概述
（一） CSS简介
CSS，层叠样式表，用来表现HTML或XHTML的一种语言，CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。能够控制网页中文本样式、图片外形及版本布局。
它的发展出现四个版本，CSS1、CSS2.0、CSS2.1、CSS3.0。随着CSS技术的升级，CSS3将过去的复杂的一个大模块规范分解成一些小模块规范，如盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等，简化编码，但是增加美观度。
（二） CSS3的优势
●CSS3较之前的版本新增许多新特性，使编码更加简化，布局更加清晰，读取更加
速度。
●Grid布局用简单的代码实现复杂的布局。
●Flexbox伸缩布局盒能让我们更好的操作它的子元素布局。
●强大的生成工具：CSS3 Maker在线演示渐变、阴影、旋转、动画等效果并生成代码；
CSS3 Generator支持圆角、渐变、旋转和阴影等众多特性并生成代码；CSS3 Please
即时在线修改代码并预览效果。
三、 HTML5+CSS3优化交互式网页布局案例解析
（一） HTML5页面交互元素details和summary
Details元素与summary元素结合使用，可用来定义网页中下拉式列表或菜单，summary用来定义details的标题，标题可见，当用户单击标题时，会显示或隐藏details中的其他内容。
（二） CSS3重复径向渐变
CSS3可为HTML5编写的网页提供多姿多彩的样式，使布局更合理美观，为实现更好的交互式网页提供有力的支持。
CSS3中，通过“background-image： repeating-radial-gradient（参数值）；”样式可以实现重复线性渐变的效果。
参考文献：
[1] 传智播客高教产品研发部.HTML5+CSS3网站设计基础教程[M].人民邮电出版社，2016，3.
[2] 传智播客高教产品研发部. HTML+CSS+Javascript网页制作案例教程[M].人民邮电出版社，2015，9.
作者簡介：
辛红，讲师，吉林省松原市，松原职业技术学院。endprint
