html5新手教程 HTML5新手基础教程

HTML5教程

什么是HTML5?

在这里我不说一些特别难懂的语言,我这里简单的解释一下,如果你学过HTML,那么就是HTML4,HTML5是针对现有的版本进行了一些丰富,把一些原先常用的标签进行了统一,还添加了一些以前没有的新标签来满足更复杂的功能,像原先网页上面的音乐播放器,现在都不需要通过flash插件来实现,仅仅通过HTML5编写程序来实现,可以说HTML5的出现是一个很大的进步。

给大家介绍一个HTML5学习的技术社区:HTML5伴侣

HTML5现在的局限?

最大的一个局限就是还没有完全支持,支持HTML5的现代浏览器:

但是还有些浏览器不支持,比如IE9之前的版本。

有些东西需要HTML5来实现,但是不能保证用户用的浏览器都支持HTML5,所以有些功能需要保证兼容性,所以这也是限制HTML5的一个原因。

另外的一个因素就是HTML5在移动端的表现没有想象中优越,有很多的开发者在移动端做了很多尝试,尤其是在移动端开发游戏,在动画效果的实现上面,流畅度没有得到很好地的保证,不过随着移动设备的硬件越来越快,所以在以后HTML5在移动端的劣势会被掩盖,当然并不是所有的移动端设备表现的都不好,HTML5在IOS平台下的表现就很不错,已经可以成为企业开发的一个选择,相反android就不尽人意。

HTML5的优势

HTML5最好的一个优势就是跨平台,如果你是开发者,你只要写一套程序就可以在任何地方运行,PC,移动端都可以,这个大大的节约了开发成本。

另外一个优点就是标准的统一,开发人员不需要再头疼浏览器的兼容性,不过在这之前得保证浏览器支持HTML5。

最后一个优点是站在用户的角度,在移动端你想要用一个APP,你得去下载,每次APP更新或者改版,用户很反感,用HTML5开发的只需要借助移动端浏览器打开,不需要用户下载,打开就可以直接用,用户头疼的更新问题也不用担心了。

以上都是我的废话,希望您不要对此感到反感,接下来我就正式来介绍HTML5。

HTML5新特性:

1.添加了canvas元素,这个元素可以帮助我们实现更炫更棒的动画效果,HTML5游戏就是通过这个canvas来实现的场景的渲染。

2.媒介元素,如video和audio元素。

3.本地离线存储的支持。

4.原先的标签更加分散和清晰,比如article,footer,header,nav等等。

5.新的表单元素属性,比如data,time,Email,url,search等。

HTML5视频

很多视频的网站都是通过flash插件来播放视频的,但是HTML5提供了对视频播放的支持。

Ogg?=?带有?Theora?视频编码和?Vorbis?音频编码的?Ogg?文件

HTML5新手基础教程_html5教程

MPEG4?=?带有?H.264?视频编码和?AAC?音频编码的?MPEG?4?文件

WebM?=?带有?VP8?视频编码和?Vorbis?音频编码的?WebM?文件

标签使用

1??<video?controls="controls">

2??????????<!--

3??????????ogg文件可以用于适用于Firefox、Opera?以及?Chrome?浏览器

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

5??????????video?元素允许多个?source?元素。

6??????????<video?width="320"?height="240"?controls="controls">

7??????????<source?src="movie.ogg"?type="video/ogg">

8??????????<source?src="movie.mp4"?type="video/mp4">

9??????????Your?browser?does?not?support?the?video?tag.

10??????????</video>

11??????????-->

12??????????<source?src="video/first.mp4">

13??????????浏览器不支持html5视频功能

14??????</video>

IE9一下不支持video,IE9支持了MPEG4的video元素。

Video的属性选择

HTML5音频

HTML5支持音频(音乐)的标准,通过audio元素。

音频格式:

要确保适用于?Safari?浏览器,音频文件必须是?MP3?或?Wav?类型。

标签使用:

<audio?controls="controls">

??<source?src="song.ogg"?type="audio/ogg">

??<source?src="song.mp3"?type="audio/mpeg">

Your?browser?does?not?support?the?audio?tag.

</audio>

IE8?不支持?audio?元素。在?IE?9?中,将提供对?audio?元素的支持。

HTML5?Canvas

Canvas元素可以实现绘制图形动画。

Canvas可以说是HTML5里面最重要的一个标签了,这个标签的出现让游戏开发更加容易,不过Canvas需要配合JavaScript使用。

元素创建

规定元素的?id、宽度和高度:

<canvas?id="myCanvas"?width="200"?height="100"></canvas>

这个地方为什么要定义id属性呢?如果你对JS的DOM编程有一定了解的话,你就知道通过ID属性可以获取一个元素对象,从而可以通过JS来对元素进行操作。

如果你对DOM不熟悉的话,建议你先去看下相关的学习资料。

这里给你一个DOM学习的电子书下载链接:

JavaScript控制Canvas

<script?type="text/javascript">

var?c=document.getElementById("myCanvas");

var?cxt=c.getContext("2d");

cxt.fillStyle="#FF0000";

cxt.fillRect(0,0,150,75);

</script>

JavaScript?使用?id?来寻找?canvas?元素:

var?c=document.getElementById("myCanvas");

HTML5新手基础教程_html5教程

然后,创建?context?对象:

var?cxt=c.getContext("2d");

getContext("2d")?对象是内建的?HTML5?对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

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

cxt.fillStyle="#FF0000";

cxt.fillRect(0,0,150,75);?

fillStyle?方法将其染成红色,fillRect?方法规定了形状、位置和尺寸。

上面的?fillRect?方法拥有参数?(0,0,150,75)。

意思是:在画布上绘制?150x75?的矩形,从左上角开始?(0,0)。

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

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

实例?-?线条

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

JavaScript?代码:

<script?type="text/javascript">

var?c=document.getElementById("myCanvas");

var?cxt=c.getContext("2d");

cxt.moveTo(10,10);

cxt.lineTo(150,50);

cxt.lineTo(10,50);

cxt.stroke();

</script>

canvas?元素:

<canvas?id="myCanvas"?width="200"?height="100">

Your?browser?does?not?support?the?canvas?element.

</canvas>

实例?-?圆形

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

JavaScript?代码:

<script?type="text/javascript">

var?c=document.getElementById("myCanvas");

var?cxt=c.getContext("2d");

cxt.fillStyle="#FF0000";

cxt.beginPath();

cxt.arc(70,18,15,0,Math.PI*2,true);

cxt.closePath();

cxt.fill();

</script>

canvas?元素:

<canvas?id="myCanvas"?width="200"?height="100">

Your?browser?does?not?support?the?canvas?element.

</canvas>

实例?-?渐变

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

JavaScript?代码:

<script?type="text/javascript">

var?c=document.getElementById("myCanvas");

var?cxt=c.getContext("2d");

var?grd=cxt.createLinearGradient(0,0,175,50);

grd.addColorStop(0,"#FF0000");

grd.addColorStop(1,"#00FF00");

cxt.fillStyle=grd;

cxt.fillRect(0,0,175,50);

</script>

canvas?元素:

html5新手教程 HTML5新手基础教程

<canvas?id="myCanvas"?width="200"?height="100">

Your?browser?does?not?support?the?canvas?element.

</canvas>

实例?-?图像

把一幅图像放置到画布上:

JavaScript?代码:

<script?type="text/javascript">

var?c=document.getElementById("myCanvas");

var?cxt=c.getContext("2d");

var?img=new?Image()

img.src="flower.png"

HTML5新手基础教程_html5教程

cxt.drawImage(img,0,0);

</script>

canvas?元素:

<canvas?id="myCanvas"?width="200"?height="100">

Your?browser?does?not?support?the?canvas?element.

</canvas>

你看我canvas相比较前几个标签来说,解释说明举例明显更多,这也说明canvas标签的重要性,希望你能好好学习这个标签。

HTML5??Web存储

在客户端存储数据

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

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

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

之前,这些都是由?cookie?完成的。但是?cookie?不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得?cookie?速度很慢而且效率也不高。

在?HTML5?中,数据不是由每个服务器请求传递的,而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。

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

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

localStorage?方法

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

如何创建和访问?localStorage:

实例

<script?type="text/javascript">

localStorage.lastname="Smith";

document.write(localStorage.lastname);

</script>

sessionStorage?方法

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

如何创建并访问一个?sessionStorage:

实例

<script?type="text/javascript">

sessionStorage.lastname="Smith";

document.write(sessionStorage.lastname);

</script>

HTML5?Input类型

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

本章全面介绍这些新的输入类型:

1.email

2.url

3.number

4.range

5.Date?pickers?(date,?month,?week,?time,?datetime,?datetime-local)

6.search

7.color

注释:Opera?对新的输入类型的支持最好。不过您已经可以在所有主流的浏览器中使用它们了。即使不被支持,仍然可以显示为常规的文本域。

Input?类型?-?email

email?类型用于应该包含?e-mail?地址的输入域。

在提交表单时,会自动验证?email?域的值。

实例

E-mail:?<input?type="email"?name="user_email"?/>

提示:iPhone?中的?Safari?浏览器支持?email?输入类型,并通过改变触摸屏键盘来配合它(添加?@?和?.com?选项)。

HTML5新手基础教程_html5教程

Input?类型?-?url

url?类型用于应该包含?URL?地址的输入域。

在提交表单时,会自动验证?url?域的值。

实例

Homepage:?<input?type="url"?name="user_url"?/>

提示:iPhone?中的?Safari?浏览器支持?url?输入类型,并通过改变触摸屏键盘来配合它(添加?.com?选项)。

Input?类型?-?number

number?类型用于应该包含数值的输入域。

您还能够设定对所接受的数字的限定:

实例

Points:?<input?type="number"?name="points"?min="1"?max="10"?/>

请使用下面的属性来规定对数字类型的限定:

属性

? ?

? ?

描述

? ?

max

? ?

number

? ?

规定允许的最大值

? ?

min

? ?

number

? ?

规定允许的最小值

? ?

step

? ?

number

? ?

规定合法的数字间隔(如果?step="3",则合法的数是?-3,0,3,6?等)

? ?

value

? ?

number

? ?

规定默认值

? ?

提示:iPhone?中的?Safari?浏览器支持?number?输入类型,并通过改变触摸屏键盘来配合它(显示数字)。

Input?类型?-?range

range?类型用于应该包含一定范围内数字值的输入域。

range?类型显示为滑动条。

您还能够设定对所接受的数字的限定:

实例

<input?type="range"?name="points"?min="1"?max="10"?/>

请使用下面的属性来规定对数字类型的限定:

属性

? ?

? ?

描述

? ?

max

? ?

number

? ?

规定允许的最大值

? ?

min

? ?

number

? ?

规定允许的最小值

? ?

step

? ?

number

? ?

规定合法的数字间隔(如果?step="3",则合法的数是?-3,0,3,6?等)

? ?

value

? ?

number

? ?

规定默认值

? ?

Input?类型?-?Date?Pickers(日期选择器)

HTML5?拥有多个可供选取日期和时间的新输入类型:

15?date?-?选取日、月、年

16?month?-?选取月、年

17?week?-?选取周和年

18?time?-?选取时间(小时和分钟)

19?datetime?-?选取时间、日、月、年(UTC?时间)

20?datetime-local?-?选取时间、日、月、年(本地时间)

下面的例子允许您从日历中选取一个日期:

实例

Date:?<input?type="date"?name="user_date"?/>

Input里面的类型新增的属性虽然多了一些,但是大多都很简单,和原先的text,password都是一样的道理。

HTML5表单元素

HTML5?拥有若干涉及表单的元素和属性。

HTML5新手基础教程_html5教程

datalist?元素

datalist?元素规定输入域的选项列表。

列表是通过?datalist?内的?option?元素创建的。

如需把?datalist?绑定到输入域,请用输入域的?list?属性引用?datalist?的?id:

实例

Webpage:?<input?type="url"?list="url_list"?name="link"?/>

<datalist?id="url_list">

<option?label="W3School"?value="http://www.W3School.com.cn"?/>

<option?label="Google"?value="http://www.google.com"?/>

<option?label="Microsoft"?value="http://www.microsoft.com"?/>

</datalist>

提示:option?元素永远都要设置?value?属性。

keygen?元素

keygen?元素的作用是提供一种验证用户的可靠方法。

keygen?元素是密钥对生成器(key-pair?generator)。当提交表单时,会生成两个键,一个是私钥,一个公钥。

私钥(private?key)存储于客户端,公钥(public?key)则被发送到服务器。公钥可用于之后验证用户的客户端证书(client?certificate)。

目前,浏览器对此元素的糟糕的支持度不足以使其成为一种有用的安全标准。

实例

<form?action="demo_form.asp"?method="get">

Username:?<input?type="text"?name="usr_name"?/>

Encryption:?<keygen?name="security"?/>

<input?type="submit"?/>

</form>

output?元素

output?元素用于不同类型的输出,比如计算或脚本输出:

实例

<output?id="result"?onforminput="resCalc()"></output>

HTML5表单属性

本章讲解涉及?<form>?和?<input>?元素的新属性。

新的?form?属性:

autocomplete

novalidate

新的?input?属性:

autocomplete

autofocus

form

form?overrides?(formaction,?formenctype,?formmethod,?formnovalidate,?formtarget)

height?和?width

list

min,?max?和?step

multiple

pattern?(regexp)

placeholder

Required

autocomplete?属性

autocomplete?属性规定?form?或?input?域应该拥有自动完成功能。

注释:autocomplete?适用于?<form>?标签,以及以下类型的?<input>?标签:text,?search,?url,?telephone,?email,?password,?datepickers,?range?以及?color。

当用户在自动完成域中开始输入时,浏览器应该在该域中显示填写的选项:

实例

<form?action="demo_form.asp"?method="get"?autocomplete="on">

First?name:?<input?type="text"?name="fname"?/><br?/>

Last?name:?<input?type="text"?name="lname"?/><br?/>

E-mail:?<input?type="email"?name="email"?autocomplete="off"?/><br?/>

<input?type="submit"?/>

</form>

HTML5新手基础教程_html5教程

注释:在某些浏览器中,您可能需要启用自动完成功能,以使该属性生效。

autofocus?属性

autofocus?属性规定在页面加载时,域自动地获得焦点。

注释:autofocus?属性适用于所有?<input>?标签的类型。

实例

User?name:?<input?type="text"?name="user_name"??autofocus="autofocus"?/>

form?属性

form?属性规定输入域所属的一个或多个表单。

注释:form?属性适用于所有?<input>?标签的类型。

form?属性必须引用所属表单的?id:

实例

<form?action="demo_form.asp"?method="get"?id="user_form">

First?name:<input?type="text"?name="fname"?/>

<input?type="submit"?/>

</form>

Last?name:?<input?type="text"?name="lname"?form="user_form"?/>

注释:如需引用一个以上的表单,请使用空格分隔的列表。

表单重写属性

表单重写属性(form?override?attributes)允许您重写?form?元素的某些属性设定。

表单重写属性有:

21?formaction?-?重写表单的?action?属性

22?formenctype?-?重写表单的?enctype?属性

23?formmethod?-?重写表单的?method?属性

24?formnovalidate?-?重写表单的?novalidate?属性

25?formtarget?-?重写表单的?target?属性

注释:表单重写属性适用于以下类型的?<input>?标签:submit?和?image。

实例

<form?action="demo_form.asp"?method="get"?id="user_form">

E-mail:?<input?type="email"?name="userid"?/><br?/>

<input?type="submit"?value="Submit"?/>

<br?/>

<input?type="submit"?formaction="demo_admin.asp"?value="Submit?as?admin"?/>

<br?/>

<input?type="submit"?formnovalidate="true"?value="Submit?without?validation"?/>

<br?/>

</form>

注释:这些属性对于创建不同的提交按钮很有帮助。

height?和?width?属性

height?和?width?属性规定用于?image?类型的?input?标签的图像高度和宽度。

注释:height?和?width?属性只适用于?image?类型的?<input>?标签。

实例

<input?type="image"?src="img_submit.gif"?width="99"height="99"?/>

list?属性

list?属性规定输入域的?datalist。datalist?是输入域的选项列表。

注释:list?属性适用于以下类型的?<input>?标签:text,?search,?url,?telephone,?email,?date?pickers,?number,?range?以及?color。

实例

Webpage:?<input?type="url"?list="url_list"?name="link"?/>

<datalist?id="url_list">

<option?label="W3Schools"?value="http://www.w3school.com.cn"?/>

<option?label="Google"?value="http://www.google.com"?/>

HTML5新手基础教程_html5教程

<option?label="Microsoft"?value="http://www.microsoft.com"?/>

</datalist>

min、max?和?step?属性

min、max?和?step?属性用于为包含数字或日期的?input?类型规定限定(约束)。

max?属性规定输入域所允许的最大值。

min?属性规定输入域所允许的最小值。

step?属性为输入域规定合法的数字间隔(如果?step="3",则合法的数是?-3,0,3,6?等)。

注释:min、max?和?step?属性适用于以下类型的?<input>?标签:date?pickers、number?以及?range。

下面的例子显示一个数字域,该域接受介于?0?到?10?之间的值,且步进为?3(即合法的值为?0、3、6?和?9):

实例

Points:?<input?type="number"?name="points"?min="0"max="10"step="3"?/>

multiple?属性

multiple?属性规定输入域中可选择多个值。

注释:multiple?属性适用于以下类型的?<input>?标签:email?和?file。

实例

Select?images:?<input?type="file"?name="img"?multiple="multiple"?/>

novalidate?属性

novalidate?属性规定在提交表单时不应该验证?form?或?input?域。

注释:novalidate?属性适用于?<form>?以及以下类型的?<input>?标签:text,?search,?url,?telephone,?email,?password,?date?pickers,?range?以及?color.

实例

<form?action="demo_form.asp"?method="get"?novalidate="true">

E-mail:?<input?type="email"?name="user_email"?/>

<input?type="submit"?/>

</form>

pattern?属性

pattern?属性规定用于验证?input?域的模式(pattern)。

模式(pattern)?是正则表达式。您可以在我们的?JavaScript?教程中学习到有关正则表达式的内容。

注释:pattern?属性适用于以下类型的?<input>?标签:text,?search,?url,?telephone,?email?以及?password。

下面的例子显示了一个只能包含三个字母的文本域(不含数字及特殊字符):

实例

Country?code:?<input?type="text"?name="country_code"

pattern="[A-z]{3}"?title="Three?letter?country?code"?/>

placeholder?属性

placeholder?属性提供一种提示(hint),描述输入域所期待的值。

注释:placeholder?属性适用于以下类型的?<input>?标签:text,?search,?url,?telephone,?email?以及?password。

提示(hint)会在输入域为空时显示出现,会在输入域获得焦点时消失:

实例

<input?type="search"?name="user_search"??placeholder="Search?W3School"?/>

required?属性

required?属性规定必须在提交之前填写输入域(不能为空)。

注释:required?属性适用于以下类型的?<input>?标签:text,?search,?url,?telephone,?email,?password,?date?pickers,?number,?checkbox,?radio?以及?file。

HTML5新手基础教程_html5教程

实例

Name:?<input?type="text"?name="usr_name"?required="required"?/>

? ?

这份简易的HTML5教程是为了新手准备,HTML5还有很大其他的更高级的东西,我在这里没有介绍,不过随着学习的深入,以后你肯定会接触到的,我在最后给大家展示一些HTML5开发的实例,包括游戏,应用以及各种demo。

HTML5开发的驴子跳游戏:

HTML5开发游戏场景:

HTML5和JS结合开发的植物大战僵尸:

HTML5的传奇还在继续,你现在是不是充满了热情,摩拳擦掌的想要试试HTML5具有什么样的魅力?那就快来学习吧,希望这份教程在你HTML5的启蒙道路有所帮助。

  

爱华网本文地址 » http://www.aihuau.com/a/8104540103/297895.html

更多阅读

新手玩英雄联盟LOL详细教程 英雄联盟新手教程按键

新手玩英雄联盟LOL详细教程——简介英雄联盟是目前非常火的一款游戏,新手在接触游戏后常常束手无策,没关系,高手都是由菜鸟一步步走来的,小辑针对新人们做了这篇零基础新手的英雄联盟LOL教程。高手可以略过。新手玩英雄联盟LOL详细教程

新手怎样学习ps?_新手教程_photoshop教程

本教程主要详细解析如何学好PS新手入门解答过程,主要是胡艺沛老师的一些对PS学习的看法和心得,喜欢的朋友一起来学习吧。01:学好PS, 并非一朝一夕。兴趣---是迈向PS高手之路的一个好的开端:如果你本身对PS并不感兴趣,只是因为工作需要而刻

2013火爆网络营销新手网赚基础教程 王者荣耀新手零基础

2013最火爆的网赚项目,别人都在闷声赚钱,你却还在到处寻找项目,您还想找多久,眼下是您最好的一个机会。如果你是刚进入网赚界的新手,想通过网络赚到你的第一桶金,如你觉得迷茫,如何你曾被骗过、、、、、、这26套网络营销网赚基础赚教程,绝

电脑入门--新手学电脑免费视频教程 ps基础教程新手入门

新手学电脑《洪恩教你学电脑》教程是一个入门级的电脑教程,适合零基础的刚刚开始学习电脑的学员,主讲人洪恩很细致地从最简单的菜单使用讲起,一共从五大方面把电脑初级知识全部扫盲。这五个方面是:1、电脑的入门学习;2、windows(视窗)的使

PT基础教程 红种 又见红种——HDC路边社 - 新手学习区 -

【PT基础教程】红种 又见红种——【HDC路边社】由于网络或客户端或系统设置等原因,有时候会出现红种,一般短时间的红种(几分钟或十几分钟)是因为连接不上Tracker服务器,一般稍等一会或手动更新一下Tracker(对该种子点右键,选择“更新Tracke

声明:《html5新手教程 HTML5新手基础教程》为网友野性酷女分享!如侵犯到您的合法权益请联系我们删除