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>
原文地址:https://www.cnblogs.com/crazier/p/12470315.html