《HTML5简介》由会员分享，可在线阅读，更多相关《HTML5简介（17页珍藏版）》请在金锄头文库上搜索。
1、HTMLHTML 5 5 简介简介什么是什么是 HTML5？HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。HTML 的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。HTML5 是如何起步的？是如何起步的？HTML5 是 W3C 与 WHATWG 合作的结果。编者注：编者注：W3C 指 World Wide Web Consortium，万维网联盟。编者注：编者注：WHATWG 指 Web Hypertext Application Technology W
2、orking Group。WHATWG 致力于 web 表单和应用程序，而 W3C 专注于 XHTML 2.0。在 2006 年，双方决定进行合作，来创建一个新版本的 HTML。为 HTML5 建立的一些规则：新特性应该基于 HTML、CSS、DOM 以及 JavaScript。减少对外部插件的需求（比如 Flash）更优秀的错误处理更多取代脚本的标记HTML5 应该独立于设备 开发进程应对公众透明新特性新特性HTML5 中的一些有趣的新特性：用于绘画的 canvas 元素用于媒介回放的 video 和 audio 元素对本地离线存储的更好的支持新的特殊内容元素，比如 article、foot
3、er、header、nav、section新的表单控件，比如 calendar、date、time、email、url、search浏览器支持浏览器支持最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。标签标签描述描述45定义注释。45定义文档类型。45定义超链接。45定义缩写。45HTML 5 中不支持。定义首字母缩写。4 定义地址元素。45HTML 5 中不支持。定义 applet。4 定义图像映射中的区域。45new定义 article。 5new定义页面内容之外的内
4、容。 5new定义声音内容。 5定义粗体文本。45定义页面中所有链接的基准 URL。45HTML 5 中不支持。请使用 CSS 代替。4 定义文本显示的方向。45HTML 5 中不支持。定义大号文本。4 定义长的引用。45定义 body 元素。45插入换行符。45定义按钮。45new定义图形。 5定义表格标题。45HTML 5 中不支持。定义居中的文本。4 定义引用。45定义计算机代码文本。45定义表格列的属性。45定义表格列的分组。45new定义命令按钮。 5new定义下拉列表。 5定义定义的描述。45定义删除文本。45new定义元素的细节。 5定义定义项目。45HTML 5 中不支持。定义
5、目录列表。4 定义文档中的一个部分。45定义定义列表。45定义定义的项目。45定义强调文本。45new定义外部交互内容或插件。 5定义 fieldset。45new定义 figure 元素的标题。 5new定义媒介内容的分组，以及它们的标题。 5HTML 5 中不支持。4 new定义 section 或 page 的页脚。 5定义表单。45HTML 5 中不支持。定义子窗口（框架）。4 HTML 5 中不支持。定义框架的集。4 to 定义标题 1 到标题 6。45定义关于文档的信息。45new定义 section 或 page 的页眉。 5new定义有关文档中的 section 的信息。 5定
6、义水平线。45定义 html 文档。45定义斜体文本。45定义行内的子窗口（框架）。45定义图像。45定义输入域。45定义插入文本。45new定义生成密钥。 5HTML 5 中不支持。定义单行的输入域。4 定义键盘文本。45定义表单控件的标注。45定义 fieldset 中的标题。45定义列表的项目。45定义资源引用。45定义图像映射。45new定义有记号的文本。 5定义菜单列表。45定义元信息。45new定义预定义范围内的度量。 5new定义导航链接。 5HTML 5 中不支持。定义 noframe 部分。4 定义 noscript 部分。45定义嵌入对象。45定义有序列表。45定义选项组。
7、45定义下拉列表中的选项。45new定义输出的一些类型。 5定义段落。45为对象定义参数。45定义预格式化文本。45new定义任何类型的任务的进度。 5定义短的引用。45new定义若浏览器不支持 ruby 元素显示的内容。 5new定义 ruby 注释的解释。 5new定义 ruby 注释。 5HTML 5 中不支持。定义加删除线的文本。4 定义样本计算机代码。45定义脚本。45new定义 section。 5定义可选列表。45定义小号文本。45new定义媒介源。 5定义文档中的 section。45HTML 5 中不支持。定义加删除线的文本。4 定义强调文本。45定义样式定义。45定义下标文
8、本。45new定义 details 元素的标题。 5定义上标文本。45定义表格。45定义表格的主体。45定义表格单元。45定义 textarea。45定义表格的脚注。45定义表头。45定义表头。45new定义日期/时间。 5定义文档的标题。45定义表格行。45HTML 5 中不支持。定义打字机文本。4 HTML 5 中不支持。定义下划线文本。4 定义无序列表。45定义变量。45new定义视频。 5HTML 5 中不支持。定义预格式文本。4 实例:Web 上的视频上的视频1. 如需在 HTML5 中显示视频: control 属性供添加播放、暂停和音量控件。包含宽度和高度属性也是不错的主意。与
9、之间插入的内容是供不支持 video 元素的浏览器显示的实例: Your browser does not support the video tag.上面的例子使用一个 Ogg 文件，适用于 Firefox、Opera 以及 Chrome 浏览器。要确保适用于 Safari 浏览器，视频文件必须是 MPEG4 类型。video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式Internet Explorer 8 不支持 video 元素。在 IE 9 中，将提供对使用 MPEG4 的 video 元素的支持标签的属性标签的属性属性属
10、性值值描述描述autoplayautoplay如果出现该属性，则视频在就绪后马上播放。controlscontrols如果出现该属性，则向用户显示控件，比如播放按钮。heightpixels设置视频播放器的高度。looploop如果出现该属性，则当媒介文件完成播放后再次开始播放。preloadpreload如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 “autoplay“，则忽略该属性。srcurl要播放的视频的 URL。widthpixels设置视频播放器的宽度。Web 上的音频上的音频audio 元素能够播放声音文件或者音频流。当前，audio 元素支持三种音频格式IE
11、 8Firefox 3.5Opera 10.5Chrome 3.0Safari 3.0Ogg Vorbis MP3 Wav 如需在 HTML5 中播放音频control 属性供添加播放、暂停和音量控件。与 之间插入的内容是供不支持 audio 元素的浏览器显示的：实例实例:Your browser does not support the audio tag.上面的例子使用一个 Ogg 文件，适用于 Firefox、Opera 以及 Chrome 浏览器。要确保适用于 Safari 浏览器，音频文件必须是 MP3 或 Wav 类型。audio 元素允许多个 source 元素。source 元
12、素可以链接不同的音频文件。浏览器将使用第一个可识别的格式Internet Explorer 8 不支持 audio 元素。在 IE 9 中，将提供对 audio 元素的支持标签的属性标签的属性属性属性值值描述描述autoplayautoplay如果出现该属性，则音频在就绪后马上播放。controlscontrols如果出现该属性，则向用户显示控件，比如播放按钮。looploop如果出现该属性，则每当音频结束时重新开始播放。preloadpreload如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 “autoplay“，则忽略该属性。srcurl要播放的音频的 URL。canv
13、ascanvas 元素用于在网页上绘制图形元素用于在网页上绘制图形HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。规定元素的 id、宽度和高度：通过通过 JavaScript 来绘制来绘制canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：var c=document.getElementById(“myCanvas“);var cxt=c.getContext(“2d“);cxt.fillStyle=“#FF0
14、000“;cxt.fillRect(0,0,150,75);JavaScript 使用 id 来寻找 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 方法将其染成红色，fillRe
15、ct 方法规定了形状、位置和尺寸。理解坐标理解坐标上面的 fillRect 方法拥有参数 (0,0,150,75)。意思是：在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。如下图所示，画布的 X 和 Y 坐标用于在画布上对绘画进行定位。实例：把鼠标悬停在矩形上可以看到坐标更多更多 Canvas 实例实例下面的在 canvas 元素上进行绘画的更多实例：实例实例 - 线条线条通过指定从何处开始，在何处结束，来绘制一条线：JavaScript 代码：var c=document.getElementById(“myCanvas“);var cxt=c.getContext(“2d“)
16、;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*2,true);cxt.closePath();cxt.fill();canvas 元素：Your browser does not support the canvas element.实例实例 - 渐变渐变使用您指定的颜色来绘制渐变背景：JavaScript 代码：var c=document.getElementBy
