HTML5学习笔记.docx
《HTML5学习笔记.docx》由会员分享,可在线阅读,更多相关《HTML5学习笔记.docx(13页珍藏版)》请在冰豆网上搜索。
HTML5学习笔记
1.HTML5简介
什么是HTML5?
HTML5将成为HTML、XHTML以及HTMLDOM的新标准。
HTML的上一个版本诞生于1999年。
自从那以后,Web世界已经经历了巨变。
HTML5仍处于完善之中。
然而,大部分现代浏览器已经具备了某些HTML5支持。
HTML5是W3C与WHATWG合作的结果。
为HTML5建立的一些规则:
∙新特性应该基于HTML、CSS、DOM以及JavaScript。
∙减少对外部插件的需求(比如Flash)
∙更优秀的错误处理
∙更多取代脚本的标记
∙HTML5应该独立于设备
∙开发进程应对公众透明
新特性
HTML5中的一些有趣的新特性:
∙用于绘画的canvas元素
∙用于媒介回放的video和audio元素
∙对本地离线存储的更好的支持
∙新的特殊内容元素,比如article、footer、header、nav、section
∙新的表单控件,比如calendar、date、time、email、url、search
2.HTML5视频
视频格式
当前,video元素支持三种视频格式:
实例
Yourbrowserdoesnotsupportthevideotag.
3.HTML5音频
音频格式
当前,audio元素支持三种音频格式:
实例
Yourbrowserdoesnotsupporttheaudiotag.
4.HTML画布(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方法规定了形状、位置和尺寸。
实例-线条
通过指定从何处开始,在何处结束,来绘制一条线:
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.
4.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.");
亲自试一试
5.HTML5输入类型
HTML5新的Input类型
HTML5拥有多个新的表单输入类型。
这些新特性提供了更好的输入控制和验证。
本章全面介绍这些新的输入类型:
∙email
∙url
∙number
∙range
∙Datepickers(date,month,week,time,datetime,datetime-local)
∙search
∙color
Input类型-email
email类型用于应该包含e-mail地址的输入域。
在提交表单时,会自动验证email域的值。
Input类型-url
url类型用于应该包含URL地址的输入域。
在提交表单时,会自动验证url域的值。
Input类型-number
number类型用于应该包含数值的输入域。
Input类型-range
range类型用于应该包含一定范围内数字值的输入域。
range类型显示为滑动条
Input类型-DatePickers(数据检出器)
HTML5拥有多个可供选取日期和时间的新输入类型:
∙date-选取日、月、年
∙month-选取月、年
∙week-选取周和年
∙time-选取时间(小时和分钟)
∙datetime-选取时间、日、月、年(UTC时间)
∙datetime-local-选取时间、日、月、年(本地时间)
Input类型-search
search类型用于搜索域,比如站点搜索或Google搜索。
search域显示为常规的文本域。
6.HTML5表单元素
HTML5的新的表单元素:
HTML5拥有若干涉及表单的元素和属性。
本章介绍以下新的表单元素:
∙datalist
∙keygen
∙output
datalist元素
datalist元素规定输入域的选项列表。
列表是通过datalist内的option元素创建的。
如需把datalist绑定到输入域,请用输入域的list属性引用datalist的id:
keygen元素
keygen元素的作用是提供一种验证用户的可靠方法。
keygen元素是密钥对生成器(key-pairgenerator)。
当提交表单时,会生成两个键,一个是私钥,一个公钥。
私钥(privatekey)存储于客户端,公钥(publickey)则被发送到服务器。
公钥可用于之后验证用户的客户端证书(clientcertificate)。
目前,浏览器对此元素的糟糕的支持度不足以使其成为一种有用的安全标准。
output元素
output元素用于不同类型的输出,比如计算或脚本输出
7.HTML5表单属性
HTML5的新的表单属性
新的form属性:
∙autocomplete
∙novalidate
新的input属性:
∙autocomplete
∙autofocus
∙form
∙formoverrides(formaction,formenctype,formmethod,formnovalidate,formtarget)
∙height和width
∙list
∙min,max和step
∙multiple
∙pattern(regexp)
∙placeholder
∙required