HTML5学习笔记

《HTML5学习笔记》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、1.HTML5简介什么是HTML5？HTML5将成为HTML、XHTML以及HTMLDOM的新标准。HTML的上一个版本诞生于1999年。自从那以后，Web世界已经经历了巨变。HTML5仍处于完善之中。然而，大部分现代浏览器已经具备了某些HTML5支持。HTML5是W3C与WHATWG合作的结果。为HTML5建立的一些规则：·新特性应该基于HTML、CSS、DOM以及JavaScript。·减少对外部插件的需求（比如Flash）·更优秀的错误处理·更多取代脚本的标记·HTML5应该独立于设备·开

2、发进程应对公众透明新特性HTML5中的一些有趣的新特性：·用于绘画的canvas元素·用于媒介回放的video和audio元素·对本地离线存储的更好的支持·新的特殊内容元素，比如article、footer、header、nav、section·新的表单控件，比如calendar、date、time、email、url、search2.HTML5视频视频格式当前，video元素支持三种视频格式：实例

3、Yourbrowserdoesnotsupportthevideotag.3.HTML5音频音频格式当前，audio元素支持三种音频格式：实例

4、dio/mpeg">Yourbrowserdoesnotsupporttheaudiotag.4.HTML画布（Canvas）HTML5的canvas元素使用JavaScript在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。创建Canvas元素向HTML5页面添加canvas元素。规定元素的id、宽度和高度：

5、anvas>通过JavaScript来绘制canvas元素本身是没有绘图能力的。所有的绘制工作必须在JavaScript内部完成：varc=document.getElementById("myCanvas");varcxt=c.getContext("2d");cxt.fillStyle="#FF0000";cxt.fillRect(0,0,150,75);JavaScript使用id来寻找canvas元素：varc

6、=document.getElementById("myCanvas");然后，创建context对象：varcxt=c.getContext("2d");getContext("2d")对象是内建的HTML5对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。下面的两行代码绘制一个红色的矩形：cxt.fillStyle="#FF0000";cxt.fillRect(0,0,150,75);fillStyle方法将其染成红色，fillRect方法规定了形状、位置和尺寸。实例-线条通过指定

7、从何处开始，在何处结束，来绘制一条线：JavaScript代码：varc=document.getElementById("myCanvas");varcxt=c.getContext("2d");cxt.moveTo(10,10);cxt.lineTo(150,50);cxt.lineTo(10,50);cxt.stroke();canvas元素：

8、ht="100"style="border:1pxsolid#c3c3c3;">Yourbrowserdoesnotsupportthecanvaselement.实例-圆形通过规定尺寸、颜色和位置，来绘制一个圆：JavaScript代码：varc=document.getElementById("myCanvas");varcxt=c.getContext("2d");cxt.fillStyle="#FF0000";