H5新特性

1，H5新增新特性有哪些：

html5新增标签

mark　标记

meter　表示度量

progress　进度条

ruby　注释

rt　对ruby元素内容的解释

rp　当浏览器不支持ruby元素的时候显示的内容

 

time　表示一个时间点

 

datalist：配合input使用，并且通过input的list属性和datalist的id属性进行绑定

datalist相对于select多了一个自动查询的功能

 

h5新增的表单元素

新增的类型

　　email：可以自动验证输入的字符串是否是一个合法的邮箱地址

　　url：自动验证文本框内容是否是一个合法的URL地址

　　number：可以指定最大最小值以及数字改变的幅度，并且可以校验输入的数字是否在指定范围内，文本框只能输入数字

　　range：表示一个范围

　　Date Picker：

　　　　date：选取日、月、年

　　　　month：选取月、年

　　　　week：选取周和年

　　　　time：选取时间（小时和分钟）

　　　　datetime：选取时间、日、月、年（本地时间）

　　search：搜索

　　在移动端可以调取键盘的搜索按钮

 

output用法

<form oninput="x.value = parseInt(a.value) + parseInt(b.value)">
    0 <input type="range" id="a" value="50"> 100
    + <input type="number" id="b" value="50">
    = <output name="x" for="a b"></output>
</form>

 

<canvas></canvas>标签

canvas的详细用法还需配合JavaScript使用

 

audio：音频

　　src：音频的资源位置

　　controls：控制条

　　autoplay：自动播放

　　loop：循环播放

　　preload：预加载

video：视频

 

视频和音频支持的格式

用于视频：

　　video / ogg

　　video / mp4

　　video / webm

用于音频：

　　audio / ogg

　　audio / mpeg

 

source：导入视频或者音频资源

 

h5新增的语义标签

header　定义section或page的页眉

footer　定义section或page的页脚

section　定义section

article　定义文章

aside　定义页面内容之外的内容  侧边栏

都跟div的用法一模一样

唯一的区别就是这些标签具备语义

 

summary　为details元素定义可见的标题

details　定义元素的细节

示例：

<details>
    <summary>点击展开</summary>
    文本详细内容···
</details>