HTML5基础入门教程小编搜集辛苦啊必看.docx

1、HTML5基础入门教程小编搜集辛苦啊必看HTML5教程什么是HTML5？HTML5 将成为HTML、XHTML 以及HTML DOM 的新标准。HTML 的上一个版本诞生于1999 年。自从那以后，Web 世界已经经历了巨变。HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些HTML5 支持。你是不是多少有了解一点，但是你却对这个不精啊！可以进群交流，418355531。HTML5 是如何起步的？HTML5 是W3C 与WHATWG 合作的结果。编者注：W3C 指World Wide Web Consortium，万维网联盟。编者注：WHATWG 指Web Hypertext A

2、pplication Technology Working Group。WHATWG 致力于web 表单和应用程序，而W3C 专注于XHTML 2.0。在2006 年，双方决定进行合作，来创建一个新版本的HTML。为HTML5 建立的一些规则： 新特性应该基于HTML、CSS、DOM 以及JavaScript。 减少对外部插件的需求（比如Flash） 更优秀的错误处理 更多取代脚本的标记 HTML5 应该独立于设备 开发进程应对公众透明新特性HTML5 中的一些有趣的新特性： 用于绘画的canvas 元素 用于媒介回放的video 和audio 元素 对本地离线存储的更好的支持 新的特殊内容元

3、素，比如article、footer、header、nav、section 新的表单控件，比如calendar、date、time、email、url、search浏览器支持最新版本的Safari、Chrome、Firefox 以及Opera 支持某些HTML5 特性。Internet Explorer9 将支持某些HTML5 特性。HTML 5 视频许多时髦的网站都提供视频。HTML5 提供了展示视频的标准。Web 上的视频直到现在，仍然不存在一项旨在网页上显示视频的标准。今天，大多数视频是通过插件（比如Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。HTML5 规定了一种通过v

4、ideo 元素来包含视频的标准方法。视频格式当前，video 元素支持两种视频格式：Internet Explorer Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0Ogg X X XMPEG 4 X XOgg = 带有Thedora 视频编码和Vorbis 音频编码的Ogg 文件MPEG4 = 带有H.264 视频编码和AAC 音频编码的MPEG 4 文件如何工作如需在HTML5 中显示视频，您所有需要的是：control 属性供添加播放、暂停和音量控件。包含宽度和高度属性也是不错的主意。 与 之间插入的内容是供不支持video 元素的浏览器显示的：

5、实例Your browser does not support the video tag.上面的例子使用一个Ogg 文件，适用于Firefox、Opera 以及Chrome 浏览器。要确保适用于Safari 浏览器，视频文件必须是MPEG4 类型。video 元素允许多个source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式：实例Your browser does not support the video tag.Internet ExplorerInternet Explorer 8 不支持video 元素。在IE 9 中，将提供对使用MPEG4 的

6、video 元素的支持。 标签的属性属性值描述autoplay autoplay 如果出现该属性，则视频在就绪后马上播放。controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。height pixels 设置视频播放器的高度。loop loop 如果出现该属性，则当媒介文件完成播放后再次开始播放。preload preload如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用autoplay，则忽略该属性。src url 要播放的视频的URL。width pixels 设置视频播放器的宽度。HTML 5 音频HTML5 提供了播放音频的标准。Web

7、上的音频直到现在，仍然不存在一项旨在网页上播放音频的标准。今天，大多数音频是通过插件（比如Flash）来播放的。然而，并非所有浏览器都拥有同样的插件。HTML5 规定了一种通过audio 元素来包含音频的标准方法。audio 元素能够播放声音文件或者音频流。视频格式当前，audio 元素支持三种音频格式：Internet Explorer Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0Ogg Vorbis X X XMP3 X XWav X X X如何工作如需在HTML5 中播放音频，您所有需要的是：control 属性供添加播放、暂停和音量控件。 与

8、 之间插入的内容是供不支持audio 元素的浏览器显示的：实例Your browser does not support the audio tag.上面的例子使用一个Ogg 文件，适用于Firefox、Opera 以及Chrome 浏览器(读者注：国产的很多浏览器也可以)。要确保适用于Safari 浏览器，音频文件必须是MP3 或Wav 类型。audio 元素允许多个source 元素。source 元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式：实例Your browser does not support the audio tag.Internet ExplorerInte

9、rnet Explorer 8 不支持audio 元素。在IE 9 中，将提供对audio 元素的支持。 标签的属性属性值描述autoplay autoplay 如果出现该属性，则音频在就绪后马上播放。controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。preload preload如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用autoplay，则忽略该属性。src url 要播放的音频的URL。HTML 5 Canvascanvas 元素用于在网页上绘制图形。什么是Canvas？HTML5 的canvas 元素使用JavaScript 在网页

10、上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。创建Canvas 元素向HTML5 页面添加canvas 元素。规定元素的id、宽度和高度：通过JavaScript 来绘制canvas 元素本身是没有绘图能力的。所有的绘制工作必须在JavaScript 内部完成：var c=document.getElementById(myCanvas);var cxt=c.getContext(2d);cxt.fillStyle=#FF0000;cxt.fillRect(0,0,150,75);JavaScript 使用id 来寻找

11、canvas 元素：var c=document.getElementById(myCanvas);然后，创建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)。意思是：在画布上绘制1

12、50x75 的矩形，从左上角开始(0,0)。如下图所示，画布的X 和Y 坐标用于在画布上对绘画进行定位。实例：把鼠标悬停在矩形上可以看到坐标更多Canvas 实例下面的在canvas 元素上进行绘画的更多实例：实例- 线条通过指定从何处开始，在何处结束，来绘制一条线：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();canvas 元素：Your browser does not support the canvas element.亲自试一试实例- 圆形通过规定尺寸、颜色和位置，来绘制一个圆：JavaScript 代码：var c=document.getElementById(myCanvas);var cxt=c.getContext(2d);cxt.fillStyle=#FF0000;cxt.beginPath();cxt.arc(70,18,15,0,Math.PI*