自己动手写HTML5网站

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

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

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

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

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

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

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

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

在HTML5中主要新增的功能有──首先是使用语意标签来加强文件的结构化、接着是新增＜video＞及＜audio＞标签强化对声音及影像等多媒体的播放功能、以及增加可以自由描绘图形的＜canvas＞标签、最后则是提供多种有助于网站应用程序开发的API。如果要制作HTML5网站，只要在档案内容的第一行写入＜！DOCTYPE html＞，意思是宣告这文件为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即可，例如＜nav id=”link1”＞。

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

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

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

其他新增的标签功能

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

＜figure＞

＜img src=”档案位置”＞

＜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＞标签的用法大致如下：

＜audio src=”档案位置”controls＞

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

＜/audio>

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

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

＜audio controls＞

＜source src=”文件名.mp3＞

＜source src=”文件名.ogg＞

未支持此标签时显示的内容 ＜/audio＞

而＜video＞标签的用法大致与＜audio＞相同。

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

目前各家浏览器所支持的视频格式主要分为OGG（*.ogv）与MPEG4（*.mp4）二种。而在使用＜source src＞标签时，开发人员还必须指定文件类型（type），例如＜source src=”test.ogv type=”video/ogg”＞及＜source src=”test.mp4 type=”video/mp4”＞。

canvas标签功能，让网站也能绘出图形

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

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

设定好画布之后，接着就可以使用JavaScript进行绘图。首先必须使用document.getElementById（）方法来取得canvas对象，可以写成var canvas= document.getElementById（draw），再使用canvas的getContext（）方法取得绘图函数，例如var ctx=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给开发者使用，例如应用程序快取（Application Cache）。

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

另一个值得介绍的API是Web SQL Database，则是当设备没有连上网络，可以利用此功能存取数据。

如果要使用这些API，你必须对JavaScript有一定程度的理解，同时也要了解DOM（Document Object Model）的相关知识才行。

使用新的的语意标签，制作具结构化的网站

利用section标签，将标题＜header＞、内文＜article＞及版权信息＜footer＞，分为三个区块。

测试浏览器对HTML5的支持

利用HTML5 Test网站，可以实际测试你使用的浏览器，支持那些新的HTML功能。

HTML 5新增为图片加上说明的方法

利用

及

标签，就能轻松为图片加上文字。

利用新增的canvas标签绘出图形

利用section标签，将标题＜header＞、内文＜article＞及版权信息＜footer＞，分为三个区块。