H5新标签

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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值