HTML5网页技术

HTML5网页技术（精选5篇）

HTML5网页技术 第1篇

1 HTML5和CSS3的新特性和优势

1.1 HTML5和CSS3的新特性

HTML5是WHATWG工作组继HTML4.01和XHTML2.0之后开发的后续版本。和上一代HTML4相比, HTML5集中体现了结构标签语义化、视频、音频、画布、离线存储、新增表单界面控件功能等方面的优势。目前国内外很多大型的门户网站都使用HTML5和CSS3网页制作技术对所属网站进行结构和内容上的调整、布局和优化。毋庸置疑, 在未来的5~10年内, HTML5将成为移动互联网领域的领导者。

CSS3作为层叠样式表的最新升级版, 新增了诸多选择器及颜色透明度、阴影、渐变、圆角、自定义字体、弹性盒布局、多列布局等方面的特性, 可以方便快捷地实现精美的页面表现效果。

1.2 HTML5+CSS3架构优势

目前普遍使用的DIV+CSS布局模式, 是使用DIV标签将页面分割成各个区块, 再由CSS完成对区块布局、大小及颜色等方面的修饰。网页头部、导航条、正文内容、侧边栏以及版权声明等模块, 都是通过id属性对DIV的不同命名来区分。因为DIV标签本身除了具有容器性质外毫无语义, 搜索引擎在抓取网页内容的时候, 并不能知悉各个模块的作用。图1为常见DIV+CSS布局示意图。

针对DIV+CSS网页布局结构不清晰的问题, HTML5新增了一些结构标签, 对常用id命名的DIV标签进行了语义化。以独立的标签在HTML5中出现, 使得HTML文档结构的定义更为明确, 便于搜索引擎快速识别网页内容, 可阅读性更强。图2为对应HTML5+CSS3布局示意图。

网页布局中涉及的原理是盒子模型, 使用DIV+CSS2布局时, 盒子在页面上显示的位置依赖于浮动属性float和定位属性position, 而CSS3增加了弹性盒模型的概念, 使得元素在盒子中的分布方式和空间位置更加灵活。

2 HTML5新结构标签介绍

HTML5结构化标签的使用应遵循它特定的意义, 这就要求在适当的位置用适当的标签, 以更好地展现它的结构。

下面对常用的HTML5新增结构标签及其适用场合做简单介绍:

(1) header标签。

用于定义文档的页眉即头部信息, 其中可以简单地包含标题和文本, 也可以包含Logo、背景和菜单等。

(2) nav标签。

用于定义导航链接部分, 其中的导航内容可以链接到其他页面或当前页面的其他部分。

(3) article标签。

用于定义页面或文档中独立、完整的内容, 如文章内容、论坛帖子及用户评论等, 一个网页中可以有一个或多个该标签。

(4) section标签。

用于定义一段有专题性的内容, 如文档中的章节。

(5) aside标签:

用于定义网页的非正文内容, 如侧边栏、说明、引用等。

(6) footer标签:

用于定义文档的页脚或页面的页脚。作为文档页脚时, 一般包含作者姓名、联系信息和文档创建日期等内容;作为页面页脚时, 一般包含版权声明、相关链接等部分。

3 HTML 5+CSS3布局实例

以图3所示的W3school网站首页的布局为例, 介绍HTML5新结构标签和CSS3弹性盒布局技术的结合运用。

(1) 划分页面板块

这是一个典型的“国”字形布局, 页面整体分为头部、导航、左侧边栏、主体内容、右侧边栏、版权声明6个部分。使用HTML5结构标签分别对上述部分进行定义, 结构代码如下:

(2) 使用CSS3进行板块布局。

页面各板块的布局效果如图4所示。导入外部样式表文件, 在样式表文件中, 对页面各板块的位置、大小、颜色等做相应设置。

样式代码如下:

(3) 对各个页面板块添加内容。

4结语

目前HTML5+CSS3网页制作技术正处于快速发展阶段, 使用HTML5结构标签可以在短时间内搭建语义明确的网页结构, 使用CSS3可以更有效地控制网页的外观和布局, 增强页面美化效果。但是任何一种新技术的推广, 都需要一段适应的过程。HTML5和CSS3的发展和普及过程中, 遇到的最大阻碍就是浏览器的兼容问题。由于不同浏览器使用的内核不一样, 对web标准的兼容程度不一样, 同样的站点设计在不同浏览器上的显示效果可能有偏差。对于CSS3的很多新增属性, 不同浏览器需要加上自己的私有属性前缀, 比如Firefox浏览器的前缀是-moz-, Safari和Chrome浏览器的前缀是-webkit-, Opera浏览器的前缀是-o-等。但不可否认的是, 随着时间的推移, 各种浏览器对HTML5和CSS3的良好兼容将成为一种趋势。

摘要：随着互联网产业的高速发展, HTML超文本标记语言作为构建web世界的基础语言, 也经历了数次发展。从1995年的HTML2.0到当前最炙手可热的HTML5, 从1996年的CSS1.0到最近的CSS3.0, HTML5和CSS3两种技术的融合正引领着web前端开发的革命。本文主要探讨了HTML5和CSS3技术的新特性、优势, 以及通过实例说明它们在网页布局中的应用。

关键词：HTML5,CSS3.0,网页布局

参考文献

[1]田佳妮, 翟悦.DIV+CSS在网页布局中的应用研究[J].电脑知识与技术, 2015 (11) :181.

[2]张州, 李存永.HTML5和CSS3.0在网页设计中的新特性和优势探讨[J].无线互联科技, 2015 (4) :98-99.

HTML5网页游戏分析 第2篇

网页游戏是基于Web浏览器的单击或多人游戏, 通常无需下载客户端, 可直接通过浏览器进行游戏。近年来, 网页游戏迅速发展, 不论简单的休闲益智游戏, 还是复杂的多人角色扮演游戏, 游戏数量都有着飞速的增长。而HTML5标准的推出, 在多方面加强了Web技术, 使页面的表现能力得到很大提高。

2 技术比较

目前实现网页游戏的途径主要有Adobe Flash、第三方插件和HTML5, 三者各有特点。Flash是较为传统的技术, 使用面积最广, 目前市面上超过75%的网页游戏都基于该技术[1]。2012年Flash11推出后, 能良好地实现3D画面渲染, 较过去有很大改善。使用第三方插件运行的网页游戏也占有着一定比例, 插件扩展了浏览器的功能, 使网页游戏性能得到提高, 但同时带来了插件安装的麻烦, 以及潜在的安全隐患。

HTML5是实现网页游戏的一条新途径。Canvas元素、Web Socket技术以及Web GL标准的出现, 为网页提供了新的编程接口, 使网页游戏开发更加便捷。与其他技术相比, HTML5有两点主要优势, 首先HMTL5标准其相关技术均免费开放, 规范并且易于推广;另外HTML5标准免去了安装插件的必要[2], 减少了用户的麻烦, 提高了安全性。

3 相关技术

3.1 Canvas

Canvas是HTML5中添加的网页元素。该元素是页面中的图形绘制容器, 拥有一个基于Java Script的图形绘制API, 允许使用Java Script脚本动态绘制图像[3]。在网页游戏中, Canvas元素可用于绘制2D或3D的游戏图像, 并且允许嵌套多个Canvas元素构建游戏画面。Canvas元素中的图像内容会由游戏脚本绘制和更新。

3.2 Web GL

Web GL是一种3D绘图标准, 其正式版Web GL 1.0于2011年公布, 该标准通过增加Open GL ES 2.0的一个Java Script绑定, 为网页中Canvas元素提供硬件3D加速渲染, 使网页3D程序能够流畅运行[4]。Web GL免去了开发网页专用渲染插件的麻烦, 为页游插上了3D的翅膀。目前已有基于Web GL的网页3D引擎, 如THREE.js, 一个Java Script脚本形式的开源3D库, 提供了场景创建和变换的接口, 可以简化3D网页游戏开发。

3.3 DIV

DIV元素是用来为HTML文档内大块内容提供结构和背景的元素。对于网页游戏中存在的多个界面, 为了便于管理, 可以将界面置于多个DIV元素中, 再使用嵌套、隐藏等方法变换显示, 实现游戏中界面跳转、对话框显示/关闭等操作。

3.4 Web AUDIO API

Web Audio API由谷歌提出, 是一套用于网页音频处理的Java Script API[5]。其音频处理能力十分强大, 尤其是3D定位和音锥技术, 可根据游戏中声源与玩家的位置关系, 控制左右声道实现立体音效, 还能模拟多普勒效应。该技术的运用将大大提高网页游戏的音频水准, 丰富玩家们的听觉体验。

3.5 Web Socket

Web Socket是HTML5标准提供的浏览器与服务器间全双工通信技术, 可用于构建网页游戏中的通信模块, 实现客户端与服务器端的双向实时数据传递。目前多种服务端器程序都可以实现Web Socket, 如ASP.NET, Node JS等。

4 实现方案

4.1 游戏页面

网页游戏通常包含多个界面, 分别对应登录、加载、游戏等不同阶段。将多个界面放在一个页面可以使用DIV元素实现。分别将每个界面封装在DIV元素内, 并在程序中动态调整其可见性和层级顺序, 实现界面间的跳转。在样例游戏中, 实现了登录、大厅、房间、加载和游戏5个界面, 其中游戏界面包含了承载游戏画面的Canvas元素, 并且嵌套了子DIV元素, 用来表现用户UI界面, 如聊天框、提示信息界面等;而除游戏界面外其余的4个界面, 功能相对单一。同页面下界面的切换, 省去了多页面间跳转的时间。

4.2 服务器端

服务器端程序主要实现了数据库交互、玩家信息处理等功能。在数据库模块中, 服务程序与数据库连接, 并在程序中完成数据的取出、添加、修改等工作。在信息处理模块中, 服务程序监听各玩家Socket模块发送的信息, 并根据游戏逻辑, 完成相应的命令发送和信息转发。样例游戏使用NODE.JS构建服务器端程序, My SQL搭建游戏数据库。服务端程序维护游戏中的玩家信息, 处理游戏胜负判定。在玩家退出游戏时, 程序更新游戏数据库。

4.3 样例游戏截图

如图1, 图2所示。

5 结语

HTML5的出现为网页游戏提供了新的解决方案, 使游戏开发者不必再依赖如Flash、游戏插件等技术, 游戏的开发变的更加直接。Web GL提供了良好的3D硬件加速, 为3D网页游戏的流畅运行提供了保障。而在Web技术发展迅速的今天, 网页游戏画面越来越接近客户端游戏, Flash和一些插件实现的网页游戏, 同样可以流畅实现3D渲染, 不同技术下的游戏品质难分伯仲。而HTML5作为网页游戏的新技术, 虽然优点众多, 但其成熟还需要一段时间, 尤其是浏览器的兼容性以及移动端的支持程度, 都将决定HTML5能否在未来被广泛应用。

摘要：HTML5标准的推出, 增强了网页在图形绘制、媒体播放、消息传送等方面的能力。随着标准的推广和各大浏览器的不断支持, 网页的革新正在悄然进行。HTML5运用于网页游戏将提供崭新的解决方案, 改变原有的开发模式, 甚至影响网页游戏的技术走向。

关键词：网页游戏,HTML5标准,WebGL标准,WebSocket技术

参考文献

[1]3D页游新趋势Flash11技术全线逼近端游[OL]. (2012-08-28) [2012-10-28].http://www.265g.com/news/game-news/246548.html.

[2]Chen B J, Xu Z Q.A Framework for Browser-based Multi-player Online Games using WebGL and WebSocket[C]//Multimedia Technology (ICMT) , 2011 International Confer-ence, 2011:471-474.

[3]Yang J P, Zhang J.Towards HTML 5 and interactive 3D graphics[C]//Educational and Information Technology (ICEIT) , 2010International Conference, 2010:522-527.

[4]Khronos Group.WebGL 1.0—2011 WebGL[S].

HTML5网页技术 第3篇

1 HTML5的内涵

HTML即超文本语言, 是用来描述网页的一种语言标准, HTML5是HTML的下一代语言标准, 在2008年, HTML5的草案正式得到认可以后, 在经过W3C通过对其进行进一步的完善, 在2012年12月该版本得到了公布, 在2014年HTML5标准得到了正式的应用, 而且HTML5有望成为下一代开放的WEB平台。

2 HTML5在网页技术中的应用

2.1 多媒体支持

相信大部分Web用户都有类似经历, 在浏览视频时需要安装视频插件, 才能正常的观看, 而且各个网站的视频插件互不通用, 影响用户的正常使用, 有的音频网站需要下载相应的音频插件, 如果用户观看过多的视频, 就会在电脑上安装多个插件, 这样就影响用户正常的使用电脑, 给用户的使用带来安全隐患, HTML5的技术的出现, 改变了这个被动的局面, 使这一切都变得极其简单, 只要在浏览器上植入<audio>、<video>等多媒体标签, 就可以采用统一的标签把不同格式的视频、音频、动画等多媒体文件有机的嵌入到浏览器上进行播放, 而且不需要第三方插件, 就能够实现多种媒体的应用。

2.2 画布

在web2.0时代, 用户想要直接在网页上进行绘图还不能轻易完成, 因为现有的技术还不能满足需求。在浏览器当中直接对图片进行操作与交互的功能十分有限, 一般的功能只能限于保存与点击等。如果用户需要对图片进行操作, 就需要安装插件或者相关的软件, 才能在浏览器中画出图形, HTML5针对这种需求, 在浏览器中引入<canvas>标签, 使得用户在浏览器端可以动态地生成各种图形图像、图表以及动画, 实现了网络页面的动态功能。在网页中可以使用Java Script来操作canvas中的对象, 实现对图形图像的交互操作, 实现复杂的canvas的二维的图画效果与3D交互动画。

2.3 本地存储

HTML5的本地存储实现了网页技术的突破, 它提供了一种全新的不同于cookie的方式, 采用以键值的方式在web页面上实现对本地数据的存储, 真正实现了无需第三方插件, 就可以实现对本地数据的永久存储。

2.4 离线Web应用

HTML5提供的非常强大的功能就是离线Web应用, 让Web可以在指定情形下将自己的应用数据缓存到本地浏览器, 没有连接一样可以浏览。使用离线Web应用时, 应用会引入这一清单文件, 浏览器会从清单文件中读取相应URL信息, 并下载相应的资源将其缓存到本地;因此, 在离线状态下访问Web应用的时候浏览器就会自动切换到从本地直接读取这些资源。

3 HTML5在移动通信中的应用

3.1 地理位置

HTML5 Geolocation API技术为移动手机提供了能够与用户分享与确定地理位置信息的功能, 该技术使用简便, 只需要在地理的web应用上插入一API程序就可以轻松的实现这一功能的扩展, 目前, 许多新的手机和浏览器采用HTML5技术开支持Geolocation API的应用来获取用户的地理位置, 同时还采用第三方程序保证用户的隐私安全。

3.2 智能化的表单

采用HTML5标准的表单设计则更为智能化, 具有直接使用的功能, 方便用户通过设置占位文本、增强的输入框类型、创建滑块条控件等功能实现操作与管理, 在表单功能中, HTML5具有自动聚焦、自动输入验证等功能, 能增强用户的体验, 提高工作效率。

3.3 Native App的应用

现在Native App已经成为移动通信的首选应用程序, 它是基于底层操作系统的开发, 在用户的交互与体验、感知方面具有良好的应用效应, 具有明显的优势, 相比浏览器开发来说, Native App可以访问移动终端的硬件资源, 并且能够高效的使用各种终端资源, 如重力加速器、GPS、地理信息等相关的功能。

4 小结

现阶段的HTML5已经开始向移动通讯与网页开发服务提供技术支持, 正改变着传统的web服务方式, 改变网络结构, 相信随着HTML5的技术不断发展的情况下, Web新的功能将会出现, Web App也将与Native App并驾齐驱, 提高网络交互的能力与移动通讯的功能。

参考文献

[1]Mark Pilgrim.HTML5揭秘[M].北京:电子工业出版社.2010.

HTML5网页技术 第4篇

HTML5将成为HTML、XHTML以及HTML DOM的新标准。HTML的上一个版本诞生于1999年。自从那以后,Web世界已经经历了巨变。HTML5仍处于完善之中。然而,大部分现代浏览器已经具备了某些HTML5支持[4]。

1 程序设计中所引用的关键技术介绍

1.1 HTML 5的Canvas元素

HTML5的canvas元素使用Java Script在网页上绘制图像。相当于画布,它是一个矩形区域,您可以控制其每一像素,canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。我们可以通过下面语句创建并规定canvas元素的id、宽度和高度:

上述这段语言完成了在canvas中绘制一个红色的矩形。

1.2 web GL中的可编程处理器

Web GL中引用了Open GL es2.0的可编程处理器,这也是web GL的关键所在,即顶点着色器和片元着色器,所以接下来本文详细论述了可编程管线是如何对数据进行处理的。

1.2.1 可编程管线的具体流程

图1描述了顶点着色器和片元着色器在可编程管线中的具体位置以及整个API的调用顺序,这个示意图也向我们展示了可编程管线的流处理本质:数据流从应用程序到达顶点处理器,然后到达片元处理器,最后到达帧缓冲区[3]。

1.2.2 着色器的数据处理

首先来介绍一下着色器中所使用到的几种限定符:

Attribute:用于经常更改的信息,用于从应用程序到顶点着色器所传的数据。

Uniform:用于不经常更改的信息,用于顶点着色器和片元着色器。

varying:用于从顶点着色器传递到片元着色器。

Const:用来声明非可写的编译时常量变量。跟C语言相同。

顶点着色器所操作的是输入的顶点值与其相关联的数据。它可以用来执行顶点变换,发现变换以及规格化,纹理坐标生成,纹理坐标变换,光照等。

比较简单的顶点着色器程序代码如下:

片元着色器是一个处理片元值及其相关数据的可编程单元。片元着色器用来执行传统的图形操作,例如在插值得到的值上的操作,访问纹理,应用纹理,雾化,颜色汇总等等。此外光照也可以选择在片元着色器上进行,而且效果会比顶点着色器要好一些。片元着色器不会取代在web GL像素处理管道的后端发生的固定功能图形操作,例如覆盖、像素所有权测试、剪切、点画、alpha测试、深度测试、模板测试、逻辑操作等等。对片元着色器的主要输入是插值得到的易变变量(内置的及用户定义的),它们是栅格化的结果。用户定义的易变变量必须被定义在片元着色器中,并且它们的类型必须在顶点着色器中定义的类型相符。此外,需要注意的是再片元着色器中是没有属性变量的定义的[5]。

比较简单的片元着色器程序代码如下:

图2介绍了顶点着色器和片元着色器中的整个数据处理流程。

1.3 着色器与程序对象的链接

图3展示了在web GL的执行环境中是如何处理web GL着色器与应用程序的链接的。应用程序通过构建的对象调用API函数与web GL进行通信。利用gl.creat Shader创建着色器对象,之后应用程序可以通过调用gl.shader Source来提供着色器的源代码。使用这个命令可以向web GL提供包含着色器源代码的字符串。将着色器源代码加载到着色器对象中后,可以调用gl.compile Shader来编译它。“程序对象”是web GL管理的一种数据结构,它由gl.creat Program创建,它充当了着色器对象的容器。应用程序需要使用命令gl.attach Shader将着色器对象附加到一个程序对象上。之后通过调用gl.link Program可以将编译好的着色器对象链接到一起,链接步骤会解决着色器之间的外部引用,检查顶点着色器与片元着色器之间的兼容性,向一致变量指定内存位置等。其结果就是产生一个或多个可执行代码,通过调用gl.use Program就可以将它们安装为web GL当前状态的一部分。这个命令会在顶点处理器和片元处理器上安装可执行代码,以便用它们来渲染之后的所有图形图元。

执行着色器的程序代码如下(以顶点着色器为例):

2 模拟太阳系的动画设计

绘制太阳系的动画图像大致流程图如图4。

其中前四个过程在前面讲的关键技术中已经详细阐述过,现在我们从初始化缓冲区开始阐明,初始化缓冲区时要给顶点位置,纹理坐标,法向量坐标,索引坐标分别设置缓冲区,比如初始化顶点位置缓冲区的代码如下:

初始化纹理时最重要的是要设置纹理环境,也就是设置合适的纹理参数,代码如下[1,2]:

gl.tex Parameteri(gl.TEXTURE_2D,gl.TEXTURE_MAG_FILTER,gl.LINEAR);

gl.tex Parameteri(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER,gl.LINEAR_MIPMAP_NEAREST);

如何实现动态过程这一步是在绘制过程实现的,比如代码:

mat4.rotate(mv Matrix,deg To Rad(moon Angle),[0,1,0]);

这一命令实现的是让整个坐标系沿Y轴旋转moon Angle角度,moon Angle这个变量的值会随着系统时间的增加而逐渐增加,所以再次绘制时转动的角度又会变大,这样便实现了图像的动态过程。图5描述了在网页上运行的模拟太阳系动画图像。

3 结论

本论文通过描述web GL的工作流程介绍了如何基于web GL和Html5实现网页3D动画图像,通过论证,Web GL完美地解决了现有的Web交互式三维动画的两个问题:第一,它通过Html脚本本身实现Web交互式三维动画的制作,无需任何浏览器插件支持;第二,它利用底层的图形硬件加速功能进行的图形渲染,是通过统一的、标准的、跨平台的Open GL接口实现的,可移植性好。所以web GL的发展前景是可想而知的[6]。

参考文献

[1]Wright R S.OpenGL Super Bible[M].北京:人民邮电出版社,2010.

[2]Shreiner D.OpenGL Programming Guide[M].北京:机械工业出版社,2008.

[3]Rost R J.OpenGL Shading Language[M].北京:人民邮电出版社,2006.

[4]JavaScript教程[EB/OL].http://www.w3school.com.cn/js/index.asp.

[5]WebGL Lesson 1–A triangle and a square[DEB/OL].(2009-10-13).http://learningwebgl.com/blog/?p=28.

HTML5网页技术 第5篇

1991年欧洲核子研究组织的科学家蒂姆·伯纳斯·李在瑞士的研究中心发布了世界上第一个网站,距今为止已过去25年。在这段时间里计算机和互联网技术不断创新,网页设计从静态页面到动态效果,从表格布局到DIV+CSS设计,直到现在广为流行的网格布局,响应式布局等,设计者们一直想为用户提供更好的直观感和操作方便的体验感。目前随着移动互联网的不断壮大,智能手机、平板电脑的用户呈逐年上升趋势,给网页设计者带来了新的思考和挑战,同时HTML与CSS经过版本的演变和磨合使其性能得到提升,因此,为了满足社会日益发展的需求,需积极探索HTML5与CSS3在网页设计中新特性的应用。

2 HTML5发展历程

HTML(Hypertext Markup Language)全称为超文本标记语言,是目前网络上应用最为广泛的语言,其主要的目标是将互联网语义化,以便更好地被人类和机器阅读,并同时提供更好地支持各种媒体的嵌入。HTML标准自1999年制定的HTML4.0后,10年的时间内未做实质性的变化,随着互联网技术的不断发展,以往的技术水平不能跟上时代发展步伐,为了能推动跨平台Web应用,为了在移动设备上支持多媒体,在移动互联网应用高峰,制定相应的网络规范来适合时代发展需求。

2014年,W3C的HTML工作组正式发布了HTML5(可扩展标记语言的第5版)。增加了支持Web应用开发者的许多新特性,以及更符合开发者使用习惯的新元素,并重点关注定义清晰的、一致的准则,以确保Web应用和内容在不同用户代理(浏览器)中的互操作性。

3 HTML5内涵

HTML5由国际标准团体万维网联盟(W3C)正式定义,广义理解为HTML5是描述一组HTML、CSS和Java Script规范的简称,这些规范旨在帮助编程人员构建下一代网站和应用程序。这个定义主要由3部分组成:HTML、CSS和JS。这3部分规定开发人员如何使用改进的标记、丰富的样式功能以及新的JS API以充分利用新网站开发功能。

4 HTML5新特性和优势

4.1增加了丰富API(应用程序接口)

HTML5.0在原有DOM接口上新增加了更多的适合网络发展的API,为网络应用平台建设提供重要的条件。它主要包括以下几类接口:图形绘制API、网络通信API、地理位置共享API、文档编辑API、离线存储API、浏览记录API等。

4.2跨平台性

HTML5可以做到跨操作系统平台,多数核心代码不用重写,Java Script的代码用得好的话,在许多地方都可以用到,包括移动应用、移动网站、PC网站、各种浏览器插件,甚至可以作为跨平台的应用程序。

4.3新型的视频和音频承载方式

HTML5协带的<audio>和<video>标签,可以使Web程序开发人员轻松地加载音频和视频文件。video标签和audio标签也提供了很实用的Java Script API,允许创建自定义的控件。不需要第三方插件的安装即可播放,flash在手机端全部能得到支持,移动端对HTML5中的媒体支持的效果也好,这就使HTML5在移动端也很流行。

4.4大量应用于移动应用程序和游戏

HTML5是万维网的核心语言,它的技术可以进行跨平台的使用。比如开发了一款HTML5的游戏,可以很轻易地移植到UC的开放平台、Opera的游戏中心、Fb应用平台,甚至可以通过封装的技术发放到App Store或Google Play上,所以它的跨平台性非常强大,这也是大多数人对HTML5有兴趣的主要原因。

4.5 HTML5全新语义化标签

HTML5结构标签可以让语义结构化,代码标签代替大量的无意义的div标签。这种语义化的特性不仅提升了网页的质量和语义,并且减少了以前用于CSS调用的class和id属性,能够使网页结构清晰化,搜索更简洁,兼容性更好地支持更多的网络设备。

HTML5新增标签介绍如下:

(1)<section>标签

用来定义文档或应用程序中的区域。如个人联系信息、新闻动态等。

(2)<nav>标签

用来定义文档的主导航区域,其中的链接指向其他页面或当前页面的某些区域。

(3)<article>标签

用来包裹独立的内容片段。如博客正文。该标签可以嵌套使用,但内层标签内容和外层内容直接关联。

(4)<aside>标签

用来表示与页面主内容松散要关的内容。如引文、广告及导航链接等。

(5)<header>标签

用来包含对区域内容的介绍说明。如可用作网站头部信息“刊头”区域。

(6)<footer>标签

用来包含其所在区域的辅助信息或版权信息。如网站页脚区域信息。

(7)<hgroup>标签

用来表示网页标题组合。

(8)<canvas>标签

用来定义图形,比如图表和其他图像。canvas元素只是图形容器(画布),必须使用Java Script脚本来在网面上绘制图形。画布是一个矩形区域,可以随意绘制多种路径、矩形、圆形以及添加图像的方法。

4.6 HTML5增加的表单控件

HTML5制作表单可提供简洁的页面,不再需要用Java Script来验证表单的功能,而且还可以设计表单风格跨浏览器保持相对一致。

5探析CSS3新特性和优势

5.1 CSS3背景

目前,社会上广泛流行的1998年推行发布的CSS2.1标准至今已有18年历史。在计算机和移动互联网技术飞跃的今天,原有的标准已不能满足用户的体验网络的高速需求。为了提高客户端的浏览的质量,新一代CSS标准产生即CSS3。它不仅简化了网页编程代码结构体系,还使原有性能提到扩展和增加,同时还注入了Web UI设计思路,大大提升了网页开发人员的工作效率和质量。

5.2 CSS3内涵

CSS(Cascading Style Sheets,简称CSS)层叠式样式表,使用该技术可以很好地对网页的布局结构、字体样式、颜色和背景设置更加精确。CSS3版本是CSS技术的升级。它提供了更加丰富的使用特性,将以往复杂内容按模块化设计思想,划分成具有特定性能的小模板,而且还增加了新模块,方便管理和维护,极大地提高了工作效率。

5.3探析CSS3新特性和优势

CSS3新增加了很多选择器,(1)让用户在网页上冲浪视觉冲击力更强些,页面动感美观化;(2)有利于网站维护与开发,缩小了文件的容量,网页速度得到提升,优化了网站性能;(3)可以快速地获取以往通过较多插件才能得到的页面效果,用标签本身来替换需要的图片,使网页浏览速度性能得到提高,同时也可以快速地被搜索引擎查找出来。

对于网站研发人员来说,将不在依赖于图像处理软件和JS,一样可以完成对象该有的特殊效果。下面就重点介绍CSS3新特性标签。

(1)用户自定义字体(@font-face)

能够根据用户制作页面需求,嵌入网页字体。

(2)多栏布局(Multi-column)

能够实现一段文本分多栏设置,还可以增加栏间隙和分割线。

(3)边框(Border)

新增加了边框的多个属性,更好地展示网页表格边框视觉感和美感。

(4)背景渐变(Gradient)

CSS3可为网页添加了丰富多样的背景渐变效果,主要有线性背景渐变、径向背景渐变、重复背景渐变等,极大地美化了网页设计创意。

(5)动画效果(Animation)

CSS3动画效果不需要特别编写Java Script脚本就可以实现,

(6)CSS3变形(Transform)

能够对2D和3D变形,转换效果有缩放、旋转、斜切、移动元素等。

(7)阴影效果(text-shadow和box-shadow)

CSS3包括文字阴影和盒阴影效果极大增添了网页的立体感。

(8)RGBA

CSS3允许用RGB声明颜色,还可以在后边追加一个透明通道。

6 HTML5与CSS3在网页设计中的应用

6.1响应式布局设计

目前,移动互联网的蓬勃发展和壮大,越来越多的人开始用智能设备(手机、IPAD)上网,为了满足不同设备的浏览效果达到一样,传统的网页设计方法已经落后。需要不断优化制作方案来适合各种终端设备,响应式网页设计就是在这种大的环境下应运而生。

响应式网页设计(RWD,Responsive Web Design)由伊桑.马科特在2010年提出,他在发表的文章中将弹性网格布局、弹性图片、媒体查询3个部分整合起来得到的结果,也叫流式设计或弹性布局等。它可以为不同终端的用户提供更加舒适的界面和更友好的用户体验。

HTML5与CSS3在响应布局下能更好地发挥其作用,需要必备的两个方面:一方面是通过媒体查询(Media Queries)来支持不同的视口,可以根据设备显示器的特性为其设定CSS样式,限制元素变动范围;另一方面布局设置为百分比布局,可以创建流动的弹性界面。

6.2跨浏览器方面设计

用HTML5和CSS3目前还算是前沿技术,主要是CSS3加HTML5可以很好地用于网页布局,相当于无缝连接一样,但是目前jsp也应用不少,在优势方面就是代码简单,在修改方面比较轻松,因为之前的div已经把网站构建好了,只要将其中的一些内容更换就行了,不需要对网站进行大规模修改。虽然目前HTML5与CSS3规范还不成熟,但支持它们的浏览器越来越多,像谷歌、火狐、IE10等,网页技术也在不断提高,很多企业也在尝试利用其优越的性能进行研发,这也是未来两者更好地融合所呈现的发展趋势。

7结语

HTML5与CSS3技术的不断升级是计算机和互联网技术不断发展的结果,HTML5用来搭建网页结构和格式,CSS3用来设置网页外观显示和美化效果,两者新特性的融合会使网页设计方法更完善,网页性能和加载速度得到大大提升。虽然HTML5与CSS3目前还是存于发展阶段,遇到很多浏览器不兼容的问题,但这都不影响技术的发展。随着HTML5与CSS3性能不断完善,未来将成为企业网络搭建的主流技术,在互联网发展的空间极大。

参考文献

[1]Ben Frain.响应式Web设计HTML5和CSS3实战[M].王永强,译.人民邮电出版社,2013.