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>