html5教程div,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元素

的支持

标签的属性

属性值

描述

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中播放音频，您所有需要的是：

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

Internet Explorer

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

标签的属性

属性值

描述

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>

通过 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;

canvas

元素：

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

canvas

元素：

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

Your browser does not support the canvas element

亲自试一试

实例-渐变

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

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元素

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);

canvas元素：

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

Your browser does not support the canvas element

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)。 "

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拥有多个新的表单输入类型。这些新特性提供了更好的输入控訇和验证。