首页>>建站技术

自己动手写HTML5网站

点击次数:121   发布时间:2023-11-24 09:49:54

由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>,分为三个区块。

相关文章:

联系我们

联系人: 荣先生

建站QQ: 97532866

手机: 15919993369

联系我们
  • 联系人: 荣先生
  • 建站QQ: 97532866
  • 手机: 15919993369
Copyright © 2009-2024 迅当网 All Rights Reserved.
扫描二维码! 关闭
二维码