H5新标签
H5新特性都有哪些?
1.新增了很多语义化标签
2.废弃了一些CSS修饰和html标签
3.支持本地持久化数据
4.增加了音视频标签的api
5.提供了canvas画布及其api
mark 标记标签
<p>两个<mark>黄鹂</mark>鸣翠柳</p>
meter 用电量标签
常用于能量的使用或者内容的使用量等
属性:
value 当前电量的值
max 最大值
min 最小值
low 用电量最低报警值
high 用电量最高报警值
<meter value="10" max="100" low="20" heigh="90" min="0">你的浏览器太low了</meter>
progress 进度条标签
只有最大max属性
没有min属性
value属性是当前值
<progress max="100" value="50"></progress>
ruby 标签
常用来做拼音,注音,注释等
rt 表示注释的内容
rp 如果浏览器不支持,显示的内容
<ruby>崔
<rt>cui</rt>
<rp>你的浏览器太low了</rp>
</ruby>
datalist 数据列表
通过input的list属性和datalist的id属性进行绑定
datalist 中的选项使用option标签
通过datalist 可以制作关联查询效果
<input type="text" value="" list="show"/>
<datalist id="show">
<option value="轻舟已过万重山"></option>
<option value="轻舟已过"></option>
<option value="轻舟"></option>
<option value="轻舟舟"></option>
</datalist>
sup 上角标
sub 下角标
<p>3<sup>2</sup>+ 4<sup>2</sup>=5<sup>2</sup></p>
details 展示详情标签
自带折叠效果
summary 标签是details的标题
<details>
<summary>四大名著</summary>
<p>西游记</p>
<p>水浒传</p>
<p>红楼梦</p>
<p>三国演义</p>
</details>
audio 标签
用来播放音频文件,支持mp3 ogg wav类型的文件
属性:
controls:控制是否出现播放的控制条
autoplay:控制自动播放
loop:循环播放
muted:设置静音
preload:设置预加载 (值:auto、metadata、none)
auto:默认值,在整个页面加载之后立即加载音频文件
matadata:只加载音乐的源文件
none:不加载,可以用它来减少服务器压力
如果设置了autoplay,则可以不设置preload,默认即可
<audio src="./SRC/2.mp3" controls autoplay muted preload="auto"></audio>
audio 结合 source标签 做音频播放的兼容效果
source 专门用来解决不同浏览器对不同资源格式的支持问题,做兼容
<audio controls>
<source src="./SRC/1.mp3"/>
<source src="./SRC/1.ogg"/>
<source src="./SRC/1.wav"/>
</audio>
video 视频播放标签
支持mp4,ogg,webm格式
controls、loop、muted、autoplay
width:视频播放区域的宽度
poster:视频封面
<video src="./SRC/a.mp4" controls loop muted width="400" poster="./SRC/4k2.jpg" class="man"></video>
figure注释标签
一般包裹一段文字,图片、代码、图表等
注释的内容写在figcaption 标签中
<figure>
<figcaption>二次元的内容</figcaption>
<img width="300" src="./SRC/4k2.jpg" alt="">
</figure>