HTML5基础入门教程分享

　　HTML5教程

　　HTML5简介

　　HTML5是下一代的HTML。

　　什么是HTML5？

　　HTML5将成为HTML、XHTML以及HTMLDOM的新标准。

　　HTML的上一个版本诞生于1999年。自从那以后，Web世界已经经历了巨变。HTML5仍处于完善之中。然而，大部分现代浏览器已经具备了某些HTML5支持。

　　包含宽度和高度属性也是不错的主意

　　< video>与< video>之间插入的内容是供不支持 video元素的浏览器显示的

　　实例

　　idth=320 height=240 controls=controls

　　Your browser does not support the video tag

　　/vid

　　上面的例子使用一个Ogg文件，适用于 Firefox、 Opera以及 Chrome浏览器。

　　要确保适用于 Safari浏览器，视频文件必须是MPEG4类型。

　　video元素允许多个 source元素。 sourcε元素可以链接不同的视频文件。浏览器将使用第

　　可识别的格式

　　实例

　　ideo width=320"height=240

　　Your browser docs not support the vidco tag

　　/videol

　　Internet Explorer

　　Internet Explorer8不支持 video元素。在IE9中，将提供对使用MPEG4的 video元素

　　的支持

　　<vde0>标签的属性

　　属性值

　　描述

　　autoplay autoplay如果出现该属性，则视频在就绪后马上播放。

　　controls controls如果出现该属性，则向用户显示控件，比如播放按钮。

　　height pixels设置视频播放器的高度。

　　loop

　　oop

　　如果出现该属性，则当媒介文件完成播放后冉次开始播放。

　　如果出现该属性，则视频在页面加载时进行加载，并预备播放

　　preload

　　如果使用" autoplay",则忽略该属性。

　　要播放的视频的URL。

　　width pixels设置视频播放器的宽度

　　HTML5音频

　　HTML5提供了播放音频的标准

　　Web上的音频

　　直到现在，仍然不存在一项旨在网页上播放音频的标准。

　　今天，大多数音频是通过插件（比如 Flash）来播放的。然而，并非所有浏览器都折有同样

　　的插件

　　HTML5规定了一种通过 audio元素来包含音频的标准方法

　　audio元素能够播放声音文件或者音频流

　　视频格式

　　当前， audio元素攴持三种音频格式：

　　Internet Explorer Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0

　　）gg vorbis

　　MP3

　　Ⅹ

　　如何工作

　　如需在HTML5中播放音频，您所有需要的是：

　　</audio

　　control属性供添加播放、暂停和音量控件

　　< audio>与</ audio>之间插入的内容是供不支持 audio元素的浏览器显示的

　　实例

　　Your browser does not support the audio tag

　　adio

　　上面的例子使用一个Ogg文件，适用于 Firefox、 Opera以及 Chrome浏览器。

　　要确保适用于 Safari浏览器，音频文件必须是MP3或wav类型

　　udio元素允许多个 Source元素。 source元素可以链接不同的音频文件。浏览器将使用第

　　个可识别的格式

　　实例

　　src= ogg"type=audio/ogg">

　　Ksource src= mp3 type="audio/mpeg

　　Your browser does not support the audio tag

　　</audio>

　　Internet Explorer

　　Internet Explorer8不支持 audio儿素。在IE9中，将提供对 audio元素的支持。

　　<audi0>标签的属性

　　属性值

　　描述

　　autoplay autoplay如果出现该属性，则音频在就绪后马上：播放。

　　controls controls如果出现该属性，则向用户显示控件，比如播放按钮。

　　如果出现该属性，则音频在贞面加载时进行加载，并预备播放。

　　preload preload

　　如果使用" autoplay",则忽略该属性。

　　要播放的音频的URL。

　　HTML 5 Canvas

　　canvas元素用于在网页上绘制图形

　　什么是 Canvas?

　　HTML5的 canvas元素使用 Javascript在网页上绘制图像

　　佃布是一个矩形区域，您可以控制其每一像素。

　　canva丶拥有多和绘制路径、矩形、圆形、字符以及添加图像的方法

　　创建 Canvas元素

　　向IIML5页面添加 canvas元素

　　规定元素的id、宽度和高度：

　　canvas id-="my Canvas"width-=200" height=100><canvas>

　　通过 JavaScript来绘制

　　canvas元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript内部完成

　　var c-document getElementByld（"my Canvas"）;

　　var cxt=c getContext（"2d"）

　　cxt fillStyle=#FF0000

　　cxt fillRect（0, 0, 150, 75）

　　c/script>

　　JavaScript使用id来寻找 canvas元素

　　var c=document. get yldc"my Canvas"）

　　然后，创建 context对象

　　var cxt=c getContext（"2d"）

　　getContext（"2d"）对象是内建的HTML5对象，拥有多种绘制硌径、矩形、圆形、字符以及

　　添加图像的方法。

　　下面的两行代码绘制一个红色的矩形

　　cxt fillStyle="#FF000O

　　cxt fillRect（0, 0, 150, 75）;

　　fillStyle方法将其染成红色， dirEct方法规定」形状、位置和尺寸。

　　理解坐标

　　上面的 fillRect方法拥有参数（0,0,150,75）

　　意思是：在画布上绘制150x75的矩形，从左上角开始（0,0）

　　如下图所示，画布的X和Y坐标用于在画布上对绘画进行定位。

　　实例：把鼠标悬停在矩形上可以看到坐标

　　更多 Canvas实例

　　下面的在 canvas元素上进行绘画的更多实例

　　实例-线条

　　通过指定从何处开始，在何处结束，来绘制一条线：

　　Javascript代码

　　script type-"text/javascript">

　　var c=document. gctElcment（"my Canvas"）;

　　var cxt=c getcontext（ 2d

　　"）

　　cXt moveTo（10, 10）;

　　cxt lineTo（150, 50）

　　cxt lineTo（10, 50）

　　cXtstroke;

　　</script>

　　canvas

　　元素：

　　<canvas id="my Canvas"width=200"height=100 style="border: I px solid #c3c3c3

　　Your browser does not support the canvas element

　　亲自试一试

　　实例-圆形

　　通过规定尺寸、颜色和位置，来绘制一个圆：

　　代码

　　var c=document. getElementByld（"my Canvas"）

　　var cxt=c getContext（"2d"）

　　cxt fillStyle"#FF0000

　　cxt. beginPath0:

　　cXtarc（70, 18, 15, 0, Math. Pl*2, true）

　　cXt. closcPatho;

　　cxt fillO

　　</script>

　　canvas

　　元素：

　　canvas id="my Canvas"width=200 height=100 style="border: l px solid #c3c3c3

　　Your browser does not support the canvas element

　　</c

　　亲自试一试

　　实例-渐变

　　使用您指定的颜色来绘制渐变背景

　　Javascript代码：

　　var c=document. getElementByld"my Canvas"）

　　var cxt=c getContext（"2d"）

　　var grd=cxt. createLinearGradient（0, 0, 175, 50）

　　grd. addColorStop（o, #FF0000"）

　　grd. addColor Stop（1, FO0FF0O"）

　　cxt. fillStyle-grd

　　cxt fillRect（0, 0, 175, 50）;

　　canvas元素

　　<canvas id="my Canvas"width=200"height=100 style"border: 1px solid #c3c3c3

　　Your browser does not support the canvas element

　　亲自试一试

　　实例·图像

　　把一幅图像放置到画布上

　　代码：

　　script type"text/javascript">

　　var c=document. getElementByldc"my Canvas"）

　　var cxt=c. gctContcxt（"2d"）

　　var img-new Image（

　　img src="flower. png

　　cxt draw lmage（img, 0,0）;

　　</script>

　　canvas元素：

　　canvas id="my Canvas"width=200"height=100 style="border: l px solid #c3c3c3

　　Your browser does not support the canvas element

　　</canvas>

　　HTML5Web存储

　　在客户端存储数据

　　HTML5提供了两种在客户端存储数据的新方法

　　localStorage-没有时间限制的数据存储

　　sessionStorage-针对一个 session的数据存储

　　之前，这些都是山 cookie完成的。但是 cookie不适合大量数据的存储，因为它们山每个

　　对服务器的请求来传递，这使得 cookie速度很慢而且效率也不高

　　在HTML5中，数据不是由每个服务器请求传递的，而是只有在清求时使用数据。它使在

　　不影响网站性能的情況下存储大量数据成为可能

　　对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。

　　HTML5使用 Javascript来存储和访问数据。

　　localstorage方法

　　localStorage方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

　　如何创建和访问 locaIStorage

　　实例

　　localStorage. lastname="Smith

　　document. write（localStorage. lastname）

　　下面的例子对用户访问页面的次数进行计数

　　实例

　　if （localIStorage. pagecount）

　　localStoragc. pagccount=Number（localstoragc pagccount）+I

　　localStorage. pagecount=l

　　document. write（"Visits-localStorage pagecount +"time（s）。 "

　　</script>

　　session Storage方法

　　sessionStorage方法针对一个 session进行数据存储。当用户关闭浏览器窗口后，数据会被

　　删除。

　　如何创建并访间一个 scssion Storagc:

　　实例

　　sessionStorage. lastname-"Smith

　　document. write（session Storage lastname）

　　下面的例子对用户在当前 session中访问页面的次数进行计数：

　　实例

　　script type="text/javascript">>

　　if（scssion Storagc. pagccount）

　　sessionStorage pagecount=Number（session Storage pagecount）+1

　　sessionstor

　　age. pagecount-1

　　document. write（"Visits"scssion Storage. pagccount+"time（s）this session ）

　　script

　　HTML5 Input类型

　　HTML5新的 Input类型

　　HTML5拥有多个新的表单输入类型。这些新特性提供了更好的输入控訇和验证。

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h59928.shtml