Html5新增的一些内容

H5新增的一些内容

1.新增标签

H5新增了许多语义化的标签，这些标签大多是块元素，和div完全一致，但是div是无意义的块元素，而Html5新增的这些元素多为有意义的元素，例如header表达了头部的意思，在网页中任意暗含头部的结构都可以使用header标签。

​ article, section,aside,header,nav,footer,address…

此外，Html5还新增了一些功能性标签，但是由于其在各个浏览器中的表现形式不一致，我们很少使用这些元素，取而代之的是组件。这里不多做讨论。

​ progress 表示运行中的进度 等。。。

<progress value="50" max='100'></progress>

input输入框

1.placeholder 用来描述输入字段预期值的提示信息。输入字段为空时显示

2.type的类型

​ 可以设置为number，date等。type=‘number’ 设置只能输入数字类型，火狐没效果，谷歌可以，兼容性差不建议使用

2.音视频

video视频

在video标签出现之前，如果想在网页中播放视频或者音频数据很困难，h5中video标签可以像使用img显示图片一样简单去播放视频。

属性

​ src 需要引入的视频资源地址

​ controls 是否显示视频的控件，比如播放暂停进度条音量全屏等。

​ autoplay 在视频就绪后马上播放。跟muted搭配使用，否则可能不能自动播放。

​ muted 视频的音频为静音。

​ loop 当视频完成播放后再次开始播放

​ volume 视频的音量 0～1

​ duration 视频的总时长

​ currentTime 当前播放的进度

​ paused 当前视频的状态是否暂停 暂停true

​ width 设置宽度

​ height 设置高度

方法：

​ play() 播放

​ pause() 暂停方法：3

​ load() 重新加载当前视频

audio音频

audio元素和video类似，是用来播放音频的。其属性方法事件也几乎与video元素一致

3. 画布

canvas元素是H5新增的一个重要元素，专门用来绘制图形。在页面中放置一个canvas元素，就相当于在页面上放置一块画布，可以利用canvas api在其中进行图形的描绘。canvas只是一个容器，不具备绘制能力，需要我们编写js代码实现