前端学习：如何掌握新增标签（html5）

今天分享下”前端学习：如何掌握新增标签（html5）“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。

1991年HTML1.0规范发生

1997年HTML4.0公布，4.0规范下的浏览器局限

Flash （安全性与平稳堪忧、耗电量、触碰、不对外开放）

Silverlight

JavaApplet

2008年HTML5发生， W3C2014年10月29日，万维网联盟公布，历经贴近8年的辛苦勤奋，该技术标准总算制订进行。

HTML5提高了浏览器的原生态功能，合乎HTML5标准的浏览器功能将更为强劲，降低了Web运用对软件的依靠，让客户体验更强，让开发设计更为便捷，此外W3C从发布HTML4.0到5.0中间共经历了17年，HTML的改变不大，这并不符一个好商品的演变标准。

下列的 HTML 4.01 原素在HTML5中早已被删掉：

标签定义外部的内容。比如来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文本。

HTML5:

HTML4:

标签定义 article 以外的内容。aside 的内容应该与 article 的内容相关。

HTML5:

Aside 的内容是独立的内容，但应与文档内容相关。

HTML4:

Aside 的内容是独立的内容，但应与文档内容相关。

标签定义声音，比如音乐或其他音频流。

HTML5:您的浏览器不支持 audio 标签。

HTML4:

标签定义图形，比如图表和其他图像。这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为，但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。

HTML5:

HTML4:

标签定义命令按钮，比如单选按钮、复选框或按钮。

HTML5: <command οnclick=cut（）" label=“cut”>

HTML4: none

标签定义可选数据的列表。与 input 元素配合使用，就可以制作出输入值的下拉列表。

HTML5:

HTML4: see combobox.

标签定义元素的细节，用户可进行查看，或通过点击进行隐藏。与 一起使用，来制作 detail 的标题。该标题对用户是可见的，当在其上点击时可打开或关闭 detail。

HTML5:

HTML4:

标签定义嵌入的内容，比如插件。

HTML5:

HTML4:

标签定义 figure 元素的标题。”figcaption” 元素应该被置于 “figure” 元素的第一个或最后一个子元素的位置。

HTML5:

PRC

HTML4: none

标签用于对元素进行组合。使用

元素为元素组添加标题。

HTML5:

PRC

The People’s Republic of China was born in 1949…

HTML4:

PRC

The People’s Republic of China was born in 1949…

标签定义 section 或 document 的页脚。典型地，它会包含创作者的姓名、文档的创作日期以及/或者联系信息。

HTML5:

HTML4:

标签定义 section 或 document 的页眉。

HTML5:

HTML4:

标签用于对网页或区段（section）的标题进行组合。

HTML5:

HTML4:

标签定义生成密钥。

HTML5:

HTML4: none

主要用来在视觉上向用户呈现那些需要突出的文字。标签的一个比较典型的应用就是在搜索结果中向用户高亮显示搜索关键词。

HTML5:

HTML4:

标签定义度量衡。仅用于已知最大和最小值的度量。必须定义度量的范围，既可以在元素的文本中，也可以在 min/max 属性中定义。

HTML5:

HTML4: none

标签定义导航链接的部分。

HTML5:

HTML4:

标签定义不同类型的输出，比如脚本的输出。

HTML5:

HTML4:

标签运行中的进程。可以使用 标签来显示 JavaScript 中耗费时间的函数的进程。

HTML5:

HTML4: none

标签在 ruby 注释中使用，以定义不支持 ruby 元素的浏览器所显示的内容。

HTML5: 漢 （ㄏㄢˋ）

HTML4: none< http://www.qlyl1688.com/products/ycxsys6152.html >

标签定义字符（中文注音或字符）的解释或发音。

HTML5: 漢 ㄏㄢˋ

HTML4: none

标签定义 ruby 注释（中文注音或字符）。

HTML5: 漢 （ㄏㄢˋ）

HTML4: none

标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。

HTML5:

HTML4:

标签为媒介元素（比如 和 ）定义媒介资源。

HTML5:

HTML4:

标签包含 details 元素的标题，”details” 元素用于描述有关文档或文档片段的详细信息。”summary” 元素应该是 “details” 元素的第一个子元素。

HTML5: HTML 5This document teaches you everything you have to learn about HTML 5.

HTML4: none

标签定义日期或时间，或者两者。

HTML5:

HTML4:

标签定义视频，比如电影片段或其他视频流。

HTML5: 您的浏览器不支持 video 标签。

HTML4:

表示特定范围内的数值，可用于工资、数量、百分比等 max表示最大值，min表示最小值，value代表当前值。

可以试试用js控制让它从0变化到100。

time。表示时间值，属性datetime强调时间

大会时间：2015-10-6

运行效果：

因为该标签是一个语义标签，在浏览器上查看时没有特别的效果，基本与没有设置标签的效果相同。

用来表示进度条

max：最大值，完成时的值

value：当前值

firefox运行结果：

chrome运行结果：

该标签定义可选数据的列表。与 input 元素配合使用，就可以制作出输入值的下拉列表。

当与input组合时既可以完成选择有可以输入。

在没有使用HTML5时如果要在页面中播放音频与视频，则可以使用的方法有：

a）、embed

如一些三方插件，flowplayer602

html5多媒体组件指的是video（视频）组件和audio（音频）组件。HTML5多媒体组件可以在不借助诸如Flash Player等第三方插件的情况下，直接在你的网页上嵌入多媒体组件。浏览器提供原生支持视频的新能力使得网页开发人员更易于在不依赖于外置插件有效性的情况下，在他们的网站上添加视频组件。由于苹果公司现阶段在iPhone和iPad上使用的Flash技术的局限性，HTML5多媒体组件的能力就显得尤为重要了。

用于在播放视频，电影

标签基本格式如下：

运行效果：

source是视频源，可以有多种，当一种失败时将选择下一种，主要有如下3种：

Ogg=带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

MPEG4=带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

WebM=带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

格式支持情况：

标签属性：

source子标签属性：

video API方法

video API属性

video API事件

注意：

多数的HTML5标签的innerHTML内容是浏览器不支持该标签时显示的内容。

事件绑定与监听的区别：

运行结果：

使用on事件名的形式绑定事件后绑定会覆盖前面绑定的事件，也就是最后一个绑定的事件会生效；

使用addEventListener绑定事件则不会覆盖，可同时在一个元素上绑定多个相同的事件。

video API的属性与事件示例：

运行结果：

练习：

练习代码：

audio可以实现播放声音，音乐功能。

您的浏览器不支持audio元素

audio标识的属性，许多 属性全是与video同样的：

autoplay：true|false，如果是 true，则音频在准备就绪后立刻播放视频。

controls：true|false 如果是true，则向消费者表明控制，例如播放按钮。

end：numeric value 界定播放软件在音频流中的哪里停止播放。默认地，响声会播放视频到末尾。

loopend：numeric value 界定在音频流中循环播放终止的部位，默认是 end 属性的值。

loopstart： numeric value 界定在音频流中循环播放的開始部位。默认是 start 属性的值。

今天的文章就分享到这啦，内容转自divcss5平台，下篇文章再见！