HTML5入门知识整理.docx
《HTML5入门知识整理.docx》由会员分享,可在线阅读,更多相关《HTML5入门知识整理.docx(36页珍藏版)》请在冰豆网上搜索。
HTML5入门知识整理
HTML5教程
什么是HTML5?
HTML5将成为HTML、XHTML以及HTMLDOM的新标准。
HTML的上一个版本诞生于1999年。
自从那以后,Web世界已经经历了巨变。
HTML5仍处于完善之中。
然而,大部分现代浏览器已经具备了某些HTML5支持。
你是不是多少有了解一点,但是你却对这个不精啊!
可以进群交流,⑤①④①⑥⑦⑥⑦⑧。
HTML5是如何起步的?
HTML5是W3C与WHATWG合作的结果。
编者注:
W3C指WorldWideWebConsortium,万维网联盟。
编者注:
WHATWG指WebHypertextApplicationTechnologyWorkingGroup。
WHATWG致力于web表单和应用程序,而W3C专注于XHTML2.0。
在2006年,双
方决定进行合作,来创建一个新版本的HTML。
为HTML5建立的一些规则:
•新特性应该基于HTML、CSS、DOM以及JavaScript。
•减少对外部插件的需求(比如Flash)
•更优秀的错误处理
•更多取代脚本的标记
•HTML5应该独立于设备
•开发进程应对公众透明
新特性
HTML5中的一些有趣的新特性:
•用于绘画的canvas元素
•用于媒介回放的video和audio元素
•对本地离线存储的更好的支持
•新的特殊内容元素,比如article、footer、header、nav、section
•新的表单控件,比如calendar、date、time、email、url、search
浏览器支持
最新版本的Safari、Chrome、Firefox以及Opera支持某些HTML5特性。
InternetExplorer
9将支持某些HTML5特性。
HTML5视频
许多时髦的网站都提供视频。
HTML5提供了展示视频的标准。
Web上的视频
直到现在,仍然不存在一项旨在网页上显示视频的标准。
今天,大多数视频是通过插件(比如Flash)来显示的。
然而,并非所有浏览器都拥有同样
的插件。
HTML5规定了一种通过video元素来包含视频的标准方法。
视频格式
当前,video元素支持两种视频格式:
InternetExplorerFirefox3.5Opera10.5Chrome3.0Safari3.0
OggXXX
MPEG4XX
Ogg=带有Thedora视频编码和Vorbis音频编码的Ogg文件
MPEG4=带有H.264视频编码和AAC音频编码的MPEG4文件
如何工作
如需在HTML5中显示视频,您所有需要的是:
control属性供添加播放、暂停和音量控件。
包含宽度和高度属性也是不错的主意。
之间插入的内容是供不支持video元素的浏览器显示的:
实例
Yourbrowserdoesnotsupportthevideotag.
上面的例子使用一个Ogg文件,适用于Firefox、Opera以及Chrome浏览器。
要确保适用于Safari浏览器,视频文件必须是MPEG4类型。
video元素允许多个source元素。
source元素可以链接不同的视频文件。
浏览器将使用第
一个可识别的格式:
实例
Yourbrowserdoesnotsupportthevideotag.
InternetExplorer
InternetExplorer8不支持video元素。
在IE9中,将提供对使用MPEG4的video元素
的支持。
属性值描述
autoplayautoplay如果出现该属性,则视频在就绪后马上播放。
controlscontrols如果出现该属性,则向用户显示控件,比如播放按钮。
heightpixels设置视频播放器的高度。
looploop如果出现该属性,则当媒介文件完成播放后再次开始播放。
preloadpreload
如果出现该属性,则视频在页面加载时进行加载,并预备播放。
如果使用"autoplay",则忽略该属性。
srcurl要播放的视频的URL。
widthpixels设置视频播放器的宽度。
HTML5音频
HTML5提供了播放音频的标准。
Web上的音频
直到现在,仍然不存在一项旨在网页上播放音频的标准。
今天,大多数音频是通过插件(比如Flash)来播放的。
然而,并非所有浏览器都拥有同样
的插件。
HTML5规定了一种通过audio元素来包含音频的标准方法。
audio元素能够播放声音文件或者音频流。
视频格式
当前,audio元素支持三种音频格式:
InternetExplorerFirefox3.5Opera10.5Chrome3.0Safari3.0
OggVorbisXXX
MP3XX
WavXXX
如何工作
如需在HTML5中播放音频,您所有需要的是:
control属性供添加播放、暂停和音量控件。
之间插入的内容是供不支持audio元素的浏览器显示的:
实例
Yourbrowserdoesnotsupporttheaudiotag.
上面的例子使用一个Ogg文件,适用于Firefox、Opera以及Chrome浏览器(读者注:
国产的很多浏览器也可以)。
要确保适用于Safari浏览器,音频文件必须是MP3或Wav类型。
audio元素允许多个source元素。
source元素可以链接不同的音频文件。
浏览器将使用第一个可识别的格式:
实例
Yourbrowserdoesnotsupporttheaudiotag.
InternetExplorer
InternetExplorer8不支持audio元素。
在IE9中,将提供对audio元素的支持。
属性值描述
autoplayautoplay如果出现该属性,则音频在就绪后马上播放。
controlscontrols如果出现该属性,则向用户显示控件,比如播放按钮。
preloadpreload
如果出现该属性,则音频在页面加载时进行加载,并预备播放。
如果使用"autoplay",则忽略该属性。
srcurl要播放的音频的URL。
HTML5Canvas
canvas元素用于在网页上绘制图形。
什么是Canvas?
HTML5的canvas元素使用JavaScript在网页上绘制图像。
画布是一个矩形区域,您可以控制其每一像素。
canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
创建Canvas元素
向HTML5页面添加canvas元素。
规定元素的id、宽度和高度:
通过JavaScript来绘制
canvas元素本身是没有绘图能力的。
所有的绘制工作必须在JavaScript内部完成:
varc=document.getElementById("myCanvas");
varcxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
JavaScript使用id来寻找canvas元素:
varc=document.getElementById("myCanvas");
然后,创建context对象:
varcxt=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实例
下面的在canvas元素上进行绘画的更多实例:
实例-线条
通过指定从何处开始,在何处结束,来绘制一条线:
JavaScript代码:
varc=document.getElementById("myCanvas");
varcxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();
canvas元素:
1pxsolid#c3c3c3;">
Yourbrowserdoesnotsupportthecanvaselement.
亲自试一试
实例-圆形
通过规定尺寸、颜色和位置,来绘制一个圆:
JavaScript代码:
varc=document.getElementById("myCanvas");
varcxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
canvas元素:
1pxsolid#c3c3c3;">
Yourbrowserdoesnotsupportthecanvaselement.
亲自试一试
实例-渐变
使用您指定的颜色来绘制渐变背景:
JavaScript代码:
varc=document.getElementById("myCanvas");
varcxt=c.getContext("2d");
vargrd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);
canvas元素:
1pxsolid#c3c3c3;">
Yourbrowserdoesnotsupportthecanvaselement.
亲自试一试
实例-图像
把一幅图像放置到画布上:
JavaScript代码:
varc=document.getElementById("myCanvas");
varcxt=c.getContext("2d");
varimg=newImage()
img.src="flower.png"
cxt.drawImage(img,0,0);
canvas元素:
1pxsolid#c3c3c3;">
Yourbrowserdoesnotsupportthecanvaselement.
HTML5Web存储
在客户端存储数据
HTML5提供了两种在客户端存储数据的新方法:
localStorage-没有时间限制的数据存储
sessionStorage-针对一个session的数据存储
之前,这些都是由cookie完成的。
但是cookie不适合大量数据的存储,因为它们由每个
对服务器的请求来传递,这使得cookie速度很慢而且效率也不高。
在HTML5中,数据不是由每个服务器请求传递的,而是只有在请求时使用数据。
它使在
不影响网站性能的情况下存储大量数据成为可能。
对于不同的网站,数据存储于不同的区域,并且一个网站只能访问其自身的数据。
HTML5使用JavaScript来存储和访问数据。
localStorage方法
localStorage方法存储的数据没有时间限制。
第二天、第二周或下一年之后,数据依然可用。
如何创建和访问localStorage:
实例
localStorage.lastname="Smith";
document.write(localStorage.lastname);
下面的例子对用户访问页面的次数进行计数:
实例
if(localStorage.pagecount)
{
localStorage.pagecount=Number(localStorage.pagecount)+1;
}
else
{
localStorage.pagecount=1;
}
document.write("Visits"+localStorage.pagecount+"time(s).");
sessionStorage方法
sessionStorage方法针对一个session进行数据存储。
当用户关闭浏览器窗口后,数据会被
删除。
如何创建并访问一个sessionStorage:
实例
sessionStorage.lastname="Smith";
document.write(sessionStorage.lastname);
下面的例子对用户在当前session中访问页面的次数进行计数:
实例
if(sessionStorage.pagecount)
{
sessionStorage.pagecount=Number(sessionStorage.pagecount)+1;
}
else
{
sessionStorage.pagecount=1;
}
document.write("Visits"+sessionStorage.pagecount+"time(s)thissession.");
HTML5Input类型
HTML5新的Input类型
HTML5拥有多个新的表单输入类型。
这些新特性提供了更好的输入控制和验证。
本章全面介绍这些新的输入类型:
email
url
number
range
Datepickers(date,month,week,time,datetime,datetime-local)
search
color
浏览器支持
InputtypeIEFirefoxOperaChromeSafari
emailNoNo9.0NoNo
urlNoNo9.0NoNo
numberNoNo9.0NoNo
rangeNoNo9.04.04.0
DatepickersNoNo9.0NoNo
searchNoNoNoNoNo
colorNoNoNoNoNo
注释:
Opera对新的输入类型的支持最好。
不过您已经可以在所有主流的浏览器中使用它们
了。
即使不被支持,仍然可以显示为常规的文本域。
Input类型-email
email类型用于应该包含e-mail地址的输入域。
在提交表单时,会自动验证email域的值。
实例
E-mail:
提示:
iPhone中的Safari浏览器支持email输入类型,并通过改变触摸屏键盘来配合它(添
加@和.com选项)。
Input类型-url
url类型用于应该包含URL地址的输入域。
在提交表单时,会自动验证url域的值。
实例
Homepage:
提示:
iPhone中的Safari浏览器支持url输入类型,并通过改变触摸屏键盘来配合它(添
加.com选项)。
Input类型-number
number类型用于应该包含数值的输入域。
您还能够设定对所接受的数字的限定:
实例
Points:
请使用下面的属性来规定对数字类型的限定:
属性值描述
maxnumber规定允许的最大值
minnumber规定允许的最小值
stepnumber规定合法的数字间隔(如果step="3",则合法的数是-3,0,3,6等)
valuenumber规定默认值
提示:
iPhone中的Safari浏览器支持number输入类型,并通过改变触摸屏键盘来配合它
(显示数字)。
Input类型-range
range类型用于应该包含一定范围内数字值的输入域。
range类型显示为滑动条。
您还能够设定对所接受的数字的限定:
实例
请使用下面的属性来规定对数字类型的限定:
属性值描述
maxnumber规定允许的最大值
minnumber规定允许的最小值
stepnumber规定合法的数字间隔(如果step="3",则合法的数是-3,0,3,6等)
valuenumber规定默认值
Input类型-DatePickers(数据检出器)
HTML5拥有多个可供选取日期和时间的新输入类型:
date-选取日、月、年
month-选取月、年
week-选取周和年
time-选取时间(小时和分钟)
datetime-选取时间、日、月、年(UTC时间)
datetime-local-选取时间、日、月、年(本地时间)
下面的例子允许您从日历中选取一个日期:
实例
Date:
输入类型"month":
输入类型"week":
输入类型"time":
输入类型"datetime":
输入类型"datetime-local":
Input类型-search
search类型用于搜索域,比如站点搜索或Google搜索。
search域显示为常规的文本域。
HTML5表单元素
HTML5的新的表单元素:
HTML5拥有若干涉及表单的元素和属性。
本章介绍以下新的表单元素:
datalist
keygen
output
浏览器支持
InputtypeIEFirefoxOperaChromeSafari
datalistNoNo9.5NoNo
keygenNoNo10.53.0No
outputNoNo9.5NoNo
datalist元素
datalist元素规定输入域的选项列表。
列表是通过datalist内的option元素创建的。
如需把datalist绑定到输入域,请用输入域的list属性引用datalist的id:
实例
Webpage:
//www.W3S"/>
提示:
option元素永远都要设置value属性。
keygen元素
keygen元素的作用是提供一种验证用户的可靠方法。
keygen元素是密钥对生成