本文摘自PHP中文网,作者php中世界最好的语言,侵删。
这次给大家带来h5的新增标签和废弃标签,使用h5的新增标签和废弃标签的注意事项有哪些,下面就是实战案例,一起来看一下。<strong>一.video标签</strong>
什么是video标签?
作用: 播放视频
a.第一种格式:
<video src=""></video>
video标签的属性
src: 用于告诉video标签需要播放的视频地址
autoplay: 用于告诉video标签是否需要自动播放视频
controls: 用于告诉video标签是否需要显示控制条
poster: 用于告诉video标签视频没有播放之前显示的占位图片
loop: 一般用于做广告视频, 用于告诉video标签视频播放完毕之后是否需要循环播放
preload: 预加载视频, 但是需要注意preload和autoplay相冲, 如果设置了autoplay属性, 那么preload属性就会失效
muted:静音
width/height: 和img标签中的一模一样
1 |
|
b.第二种格式
2.1.格式:
1 2 3 4 |
|
2.2.第二种格式存在的意义:
由于视频数据非常非常的重要, 所以五大浏览器厂商都不愿意支持别人的视频格式, 所以导致了没有一种视频格式是所有浏览器都支持的
这个时候W3C为了解决这个问题, 所以推出了第二个video标签的格式
video标签的第二种格式存在的意义就是为了解决浏览器适配问题
video 元素支持三种视频格式, 我们可以把这三种格式都通过source标签指定
给video标签, 那么以后当浏览器播放视频时它就会从这三种中选择一种自己支持的格式来播放
2.3.注意点:
2.3.1当前通过video标签的第二种格式虽然能够指定所有浏览器都支持的视频格式, 但是想让所有浏览器都通过video标签播放视频还有一个前提条件, 就是浏览器必须支持HTML5标签, 否则同样无法播放
2.3.2在过去的一些浏览器是不支持HTML5标签的, 所以为了让过去的一些浏览器也能够通过video标签来播放视频, 那么我们以后可以通过一个JS的框架叫做html5media来实现
1 2 3 4 5 6 |
|
<strong>二. audio标签</strong>
1.什么是audio标签?
作用: 播放音频
2.格式:
1 2 |
|
3.注意点:
audio标签的使用和video标签的使用基本一样, video中能够使用的属性在audio标签中大部分都能够使用, 并且功能都一样
只不过有3个属性不能用, height/width/poster
1 2 |
|
<strong>三. 详情和概要标签</strong>
什么是详情和概要标签?
作用:利用summary标签来描述概要信息, 利用details标签来描述详情信息
默认情况下是折叠展示, 想看见详情必须点击
格式:
1 2 3 |
|
示例代码
1 2 |
|
概要详情.gif
<strong>四. marquee标签</strong>
1.什么是marquee ([m??r'ki])标签?
作用: 跑马灯
2.格式:
<marquee>内容</marquee>
3.属性:
direction: 设置滚动方向 left/right/up/down
scrollamount: 设置滚动速度, 值越大就越快
loop: 设置滚动次数, 默认是-1, 也就是无限滚动
behavior: 设置滚动类型 slide滚动到边界就停止, alternate滚动到边界就弹回
4.注意点:
marquee标签不是W3C推荐的标签, 在W3C官方文档中也无法查询这个标签, 但是各大浏览器对这个标签的支持非常好
示例代码:
1 2 |
|
marquee滚动方向
<strong>五. 废弃标签</strong>
1.为什么HTML中有一部分标签会被废弃?
因为当前的HTML中的标签只有一个作用, 就是用来添加语义
而早期的HTML标签中有一部分标签是没有语义的,
有一部分标签是用来修改样式的
所以这部分标签就被淘汰了
1 2 3 4 5 6 7 |
|
注意点:
以后在企业开发中, 不到万不得已一定不要使用这些被废弃掉的标签 如果一定要使用, 一般情况下都是用来作为CSS的钩子来使用
1 2 3 4 5 6 7 8 9 |
|
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
iOS webView怎样加载HTMLString
关于正则表达式的几个小练习
以上就是h5的新增标签和废弃标签的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
更多相关阅读请进入《HTML5》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者