动狮网络——专业建站,值得信赖!

动狮网络

当前位置:首页 > 网站建设 > 认识新一代HTML5对网页设计的影响

认识新一代HTML5对网页设计的影响

时间:2014-03-23 人气: 标签: HTML5 网页设计
导语:根据W3C的发言稿称:“HTML5是开放的Web网络平台的奠基石。”2013年5月6日, HTML 5.1正式草案公布。该规范定义了第五次重大版本,第一次要修订万维网的核心语言:超文本标记语言(HTML),新功能不断推出,以帮助Web应用程序的作者,努力提高新元素互操作性。

认识新一代HTML5对网页设计的影响

了解早期网页设计的HTML架构

由W3C负责制定的HTML是用来编写网页设计的标记语言,而目前我们所使用的版本为4.01。如果开启网页的原始档查看,会发现到很多类似<html>这样由<及>符号包含文字的卷标,这就是HTML语言。其实说穿了,网页就是一堆卷标的组合。

HTML卷标通常都有起始卷标与结束卷标,例如<html>与</html>,而要构成一个网页架构,最基本的标签有<html>、<head>、<title>与<body>。<html>及</html>一定是放在程序的第一行与最后一行,告诉浏览器这是一份HTML文件。而<head>则是档头宣告,定义这一个网页的属性,例如使用何种编码方式,里面的内容除了<title>外,不会出现在网页上。title卷标被包含在head内,主要是显示页标题,里面的文字会出现在网页最上方的标题栏。而<body>标签的内容则是要呈现在网页设计上的信息。

由于HTML4.01只能传达文字或图片等的静态信息,于是为了让网页设计能有动态的效果,开始出现了像JavaScript语言这样的技术,达成与用户互动的目标,后来还出现像DHTML、XHTML等标准,这些规格的出现都是为了加强与使用者的互动。不过这些技术也都是以HTML4.01为核心所衍生出来的。随着宽带的普及,网络应用愈来愈广,例如在线观看影音、网页游戏等。但目前我们所使用的4.01版本已经无法应付这些技术,于是才会出现如Flash、Silverlight等插件,实现这些功能。

不过由于这些插件都是由不同公司所开发的,这之中牵涉到专利的问题,因此,开始有浏览器业者认为有制定新标准的必要。这些浏览器业者组成WHATWG团体,研究新的HTML标准,后来WHATWG与W3C合并,由W3C继续制定的工作。

由W3C所制定的新一代网页标准HTML5,虽然目前还在草案阶段,预计在2012年3月才会正式发表,但由于许多知名浏览器如IE、Chrome、Firefox都已开始支持,而iPhone及Android等智能型手机更是早就支持了此规格。另外Amazon及Google等公司,也都使用HTML5开发WebApp,例如GoogleDocs、KindleCloudReader等。

网络上也有许多人利用HTML5开发出许多有趣网页设计的应用程序,像是在线小画家、文字云等,同时由于HTML5具有跨平台的特性,未来开发人员只需写一套应用程序,不再需要针对不同平台开发相对应的程序代码,进而减少开发时间及成本,因此HTML5成为了目前较热门的话题之一。

为减少插件为目标而诞生的HTML新标准

以往要在网页上观赏影音或者玩网页游戏,必须要安装插件才能做到,而HTML5的制定则是为了要减少浏览器对插件的需求,因为如此,HTML5新增了许多可以用来制作网页应用程序的API,同时也增加了canvas标签,以达成能在网页设计上绘图的功能,要使用这些功能,必须搭配JavaScript语言使用。另外网页设计的美化,例如文字大小与颜色等,在以前虽然也可以使用<font>等标签做出来,但这样势必会让整分文件变得更复杂难懂。因此将美化的工作抽出来,交给CSS负责。而HTML5也废除了<font>及<center>标签。因此,广义来说,HTML5包含了HTML、JavaScript、CSS等三个部分。

在HTML5中主要新增的功能有──首先是使用语意卷标来加强文件的结构化、接着是新增<video>及<audio>卷标强化对声音及影像等多媒体的播放功能、以及增加可以自由描绘图形的<canvas>卷标、最后则是提供多种有助于网页应用程序开发的API。如果要制作HTML5网页,只要在档案内容的第一行写入<!DOCTYPEhtml>,意思是宣告这文件为HTML5文件,浏览器只要读到这一行,就会将此文件视为HTML5了。

语意标签让开发人员在维护时,更容易理解网页设计的内容

以前在制作网页时,我们常会利用<div>或<table>标签来对文件进行排版,在HTML5中则使用了具有意义的语意卷标,例如<header>卷标是用来表示网页的标题或主选单。这里的<header>跟<head>虽然字面上看起来很像,但这二者代表的意思是不一样的,也就是说二者之间并没什么关系。

使用语意标签制作网页文件,好处有很多,对开发人员而言,只要看到标签就能了解这部分是标题、内文还是选单;而搜索引擎在检索寻网页内容时,可以更精确地找到所要的数据;要构成一个具有完整结构化的HTML5网页,主要有<header>、<nav>、<section>、<article>、<aside>、<footer>这6个语意标签。

<header>标签通常置于文件的顶部,它可以放在网站或文章的开头当作标题使用,主要的功能是用来放置网站的介绍信息、主选单及网站Logo。在这之中也能使用其它HTML标签,例如,当作标题时,我们可以使用<h1>到<h6>标签,也能使用<img>放置图片,而使用<form>卷标时,则是为了插入主选单或搜寻窗口。

<nav>标签则是用来放置网站的选单或连结等,它可以放在<header>或<footer>标签里,也可以独立使用。如果在网页中需一次使用多个<nav>时,只要另外指定不同ID即可,例如<navid=”link1”>。

而<section>卷标的功能是定义文件的区段,将具有主题性的内容群组化,例如,我们可以将网页中依照选单、主文、连络信息,区分为3个区段。当使用<section>标签定义群组之后,我们也能在其中置入<section>形成一个巢状的section或者是置入<article>标签。

<article>标签是用来标示本文中的主要内容,在一个<article>标签中,可以包含标题、主文等。而同一个网页中也可以有多个<article>标签。一般来说,部落格文章、论坛发文或网页内容等都可以包含在内。而<article>与<section>标签不同的地方在于,<article>所包含的通常是一段独立的文章,而<section>标签包含的是文件中的一个章节或段落。

如果要置入本文之外的其他部分,则是使用<aside>标签,通常用于与主要内容相关的部分,例如补充说明等。而<footer>标签是用来标示制作者、著作权等信息,一般都是摆在文件的下方。

其他新增的卷标功能

在HTML5里新增的标签还有<figure>和<figcaption>,以前没有为网页中的图片加上解说文字的方法,但现在利用这二个标签就可以轻松做到,使用的方法如下:

<figure>

<imgsrc=”档案位置”>

<figcaption>图片解说</figcaption>

</figure>

在<figure>标签里,也可以放入多个<img>标签。如果要强调文件中某一段文字,可以在文字前后加上<mark></mark>。<mark>卷标主要的功能是透过CSS的设定,改变所标示文字的背景颜色或文字颜色,藉以强调该段文字。另外HTML5还提供了可以表示日期格式的<time>卷标,只要在<time>卷标里指定日期,就能在浏览器中辨识日期,而日期的格式为yyyy-mm-dd,例如2011-10-10。<address>标签则是用来标示网页制作者的名称或连络信息等,用<address>所标示的文字会呈现出斜体样式。

支持影音播放,减少插件需求

HTML5里另一个受瞩目的功能,就是新增了用来播放音讯的<audio>,以及影片的<video>标签。不过目前各家浏览器所支持的格式并不相同,那是因为HTML5的标准规格还未确定,等正式的标准订立之后,程序代码应该会变得更简洁。

<audio>卷标的属性包含了用来指定音频档案位置的src属性,当开启网页时是否自动加载的preload属性,而controls属性则是指定是否显示控制面板,如果指定了,控制面板就会显示在画面上,此时使用者就可以藉由面板进行播放、暂停等动作。

<audio>标签的用法大致如下:

<audiosrc=”档案位置”controls>

未支持此卷标时显示的内容

</audio>

要注意的是由于各家浏览器支持的音乐格式都不同,例如,Firefox并不支持MP3,而是支持.OGG格式的音频档案,所以在使用<audio>标签时,必须考虑到这点,因此可以改成使用<sourcesrc>标签的方法。

例如要让Firefox也能播放音乐,可以将程序代码改成:

<audiocontrols>

<sourcesrc=”文件名.mp3>

<sourcesrc=”文件名.ogg>

未支持此卷标时显示的内容

</audio>

而<video>标签的用法大致与<audio>相同。

在使用<video>插入影片时,需先指定影片的大小,例如<videowidth=”500”height=”400”>。同样的,由于各家的浏览器所支持的视讯译码器不太相同,因此在置入视讯时,也必须考虑到这点。

目前各家浏览器所支持的视讯格式主要分为OGG(*.ogv)与MPEG4(*.mp4)二种。而在使用<sourcesrc>标签时,开发人员还必须指定文件类型(type),例如<sourcesrc=”test.ogvtype=”video/ogg”>及<sourcesrc=”test.mp4type=”video/mp4”>。

canvas卷标功能,让网页设计也能绘出图形

HTML5新增了具有绘图功能的<canvas>卷标,利用这项功能可以直接在网页上画出线条、图形及动画,甚至还能做出网页设计游戏。不过<canvas>标签并不能直接使用,而必须搭配JavaScript来操作。而且,目前<canvas>标签仅能画出2D图形。

要使用canvas的功能,必须先配置<canvas>卷标,首先要指定ID名称,接着指定画布的大小,例如<canvasid=”draw”width=”500”height=”400”>,记得最后要加上</canvas>作为结尾。

设定好画布之后,接着就可以使用JavaScript进行绘图。首先必须使用document.getElementById()方法来取得canvas对象,可以写成varcanvas=document.getElementById(draw),再使用canvas的getContext()方法取得绘图函数,例如varctx=canvas.getContext(2d);取得绘图方法之后,就要呼叫用来描绘的方法进行绘图。fillRect方法负责描绘矩形,fillStyle则是指定颜色。

<canvas>卷标里唯一提供的图形只有矩形,如果要画三角形或圆形等其他图形,必须使用路径方法绘制。

而使用路径绘制图形的方法有beginPath(开始绘制路径)、closePath(关闭路径)、stroke(绘制路径边框)、fill(将图形填色)。另外,moveTo(x,y)方法则是将绘制路径的起点移至(x,y)位置,若没有使用moveTo(),则路径起点默认是在(0,0)。lineTo(x,y)方法则是由目前端点到(x,y)画一直线。

要绘制圆形或圆弧则是使用arc方法,我们可以写成arc(x,y,r,startAngle,endAngle,anticlockwise),意思是从(x,y)为起点画出半径(r)的圆形,其中的startAngle和endAngle参数是以角度标示圆形的起点及终点,而anticlockwise参数则是指定是否由逆时钟顺序来绘制,可以指定true(真)和false(假)。

提供多种API开发网页设计应用程序

HTML5为了让开发者能开发网页设计应用程序,提供了多种的API给开发者使用,例如应用程序快取(ApplicationCache)。

一般来说,网页设计应用程序必须在网络联机的情况下才能使用,这种API的目的,则是为了让这些应用程序在脱机状态下也能使用。

另一个值得介绍的API是WebSQLDatabase,则是当装置没有连上网络,可以利用此功能存取数据。

如果要使用这些API,你必须对JavaScript有一定程度的理解,同时也要了解DOM(DocumentObjectModel)的相关知识才行。

顶一下 (19)100%
踩一下 (0)0%
热点内容
解决方案
联系方式

    郑州动狮网络技术有限公司
    【大成图文-河南ICP网站备案中心】

    QQ:361461588

    电话:

    邮箱:[email protected]

    网址:www.movelion.com

    地址:河南省郑州市管城区郑汴路升龙环球大厦A座2号馆西门一楼(升龙金泰成名灯广场正门东侧)

在线咨询
新版帮助
扫二微码

网址二维码

微信官方账号

返回顶部