HTML4与HTML5在网站前台设计中的比较研究

2015-07-13 12:12苏晨王丽芬胡晓红
电脑知识与技术 2015年13期

苏晨 王丽芬 胡晓红

摘要:随着社会的发展和信息技术的广泛应用,互联网越来越广泛地被应用,通过网页获取信息和知识成为一种重要手段。而网站前台的制作技术之一是HTML,HTML的最新版本是HTML5。文章对HTML5和HTML4在网站前台制作中进行比较和研究,论述了两者在网站前台制作中的不同和相同之处,并对两者的优点和缺点进行了说明。

关键词:HTML4,HTML5,网站前台

中图分类号:TP37 文献标识码:A 文章编号:1009-3044(2015)13-0059-01

Abstract: With the development of the society and the wide application of information technology, the Internet has become more and more widely used. Webpage has become an important means for more information and knowledge . But one of the manufacturing technology of website front is HTML, the latest version of HTML is HTML5. The article on the HTML5 and HTML4 were compared and studied in the website. The differences and similarities were discussed both in the making of website front between them, and the advantages and disadvantages of them are described.

Key words: HTML4; HTML5; website front

随着社会的发展和信息技术的广泛应用,互联网已成为人们生活中不可缺少的获取信息的重要手段,它正逐步改变着人们的生活方式和工作方式。人们通过互联网页面来获取知识和信息,而网站前台页面的制作和实现是在网页设计制作基础之上实现的,所以网站前台的制作需要一定的技术支持。在网站前台的实现过程中,需要用到的技术之一是HTML语言,也就是超文本标记语言。HTML5是该语言的最新版本。虽然越来越多的程序开发者开始使用HTML5来开发网站前台,但是HTML5并没有完全替代HTML4,并且两者还有很多相似之处。

首先来看一下HTML5和HTML4在网站前台制作中的区别。在HTML5中,书写代码时,不需要像HTML4那样进行声明<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">,而是直接声明<!DOCTYPE html>即可。

HTML5和HTML4在网站前台制作中的第二个区别是,在HTML4中,大多数视频都是通过插件(比如Flash)来显示的,但并不是所有的浏览器都有相同的插件,这就会导致视频有可能不能正确播放。而HTML5则规定了一种通过video元素来包含视频的标准方法。目前,video元素支持以下三种视频格式:Ogg,MPEG4,WebM。如果要在HTML5中显示视频,需要加入的代码如下:。所以在HTML5中,只要加入上面的代码,不需要插件即可。

在HTML5中,标签的使用,大大提高了网页的性能,比如,使用该标签,可以进行绘制图形、合成图像、字体设计、制作简单或者复杂的动画效果。是一个新的标签,在HTML4 是没有的。

除了标签之外,HTML5还新增了许多标签,比如

标签。由于HTML5的一个设计原则是更好的体现网站的语义性,所以增加了
标签,用来明确表示网页的结构。在制作和开发网站的时候,不需要像在HTML4中那样使用
标记了。与
相类似,以下两个标签也是在HTML5中新增加的——
,这两个标签也有利于体现网站的语义性和结构性,更利于SEO。

下面通过两个图示来看一下HTML4和HTML5在网站前台制作方面的结构性代码差别。图1指的是在HTML4中的两列布局结构,是通过

将相应内容进行添加,在此基础上设置各种样式表来实现相应的效果。而图2中,HTML5则通过新增加的标签,直接来实现页面内容。

通过图2可以看到,使用HTML5已经摈弃了

标签,而是使用语义性更强的相关标签来代替。这样对程序编写者来说,书写代码会更加方便。

对于图2所示的页面而言,其对应的程序代码如下:

...

...

...

综上所述,HTML4和HTML5在网站前台的制作过程中存在着很大区别,包括结构性代码上的区别,以及新旧标签的区别,总体说来,HTML5比HTML4更加人性化,功能也更强大,但是HMTL5最终占领统治地位还需要一定的时间,我们期待着HTML5在网站前台中的应用越来越广泛。

参考文献:

[1] 龚丽.HTML5中的Canvas绘图研究[J].软件导刊, 2014(4):152.

[2] 明日科技.HTML5从入门到精通[M].北京:清华大学出版社,2012.

[3] 唐俊开.HTML5技术与移动出版[M].北京:电子工业出版社,2013.

[4] 秀野堂主.论道HTML5[M].北京:人民邮电报社,2012.