h5的新增标签和废弃标签

这次给大家带来h5的新增标签和废弃标签，使用h5的新增标签和废弃标签的注意事项有哪些，下面就是实战案例，一起来看一下。

8e99a69fbe029cd4e2b854e244eab143一.video标签128dba7a3a77be0113eb0bea6ea0a5d0

什么是video标签?
作用: 播放视频
a.第一种格式:

49cc88199ae4a3acd3e5aa36d83ccfd5a6a9c6d3f311dabb528ad355798dc27d

video标签的属性
src: 用于告诉video标签需要播放的视频地址
autoplay: 用于告诉video标签是否需要自动播放视频
controls: 用于告诉video标签是否需要显示控制条
poster: 用于告诉video标签视频没有播放之前显示的占位图片
loop: 一般用于做广告视频, 用于告诉video标签视频播放完毕之后是否需要循环播放
preload: 预加载视频, 但是需要注意preload和autoplay相冲, 如果设置了autoplay属性, 那么preload属性就会失效
muted:静音
width/height: 和img标签中的一模一样

//设置 自动播放 + 控制条ea5b88fb3a92df1430adee1c4d2a313da6a9c6d3f311dabb528ad355798dc27d//控制条 + 占位图00e358d5764da9d6b99a58e7f23187d4a6a9c6d3f311dabb528ad355798dc27d//广告视频 : 自动播放 + 无限循环 + 静音 + 宽度cfdef7cbcaef23766f0666b570eea5caa6a9c6d3f311dabb528ad355798dc27d

b.第二种格式

2.1.格式:

39000f942b2545a5315c57fa3276f220
    c8662bf9467af1c1ad9d430db961e59b055a816595e1cf5e4b7c6fe05c404a6c
    c8662bf9467af1c1ad9d430db961e59b055a816595e1cf5e4b7c6fe05c404a6c
a6a9c6d3f311dabb528ad355798dc27d

2.2.第二种格式存在的意义:
由于视频数据非常非常的重要, 所以五大浏览器厂商都不愿意支持别人的视频格式, 所以导致了没有一种视频格式是所有浏览器都支持的
这个时候W3C为了解决这个问题, 所以推出了第二个video标签的格式

video标签的第二种格式存在的意义就是为了解决浏览器适配问题

video 元素支持三种视频格式, 我们可以把这三种格式都通过source标签指定
给video标签, 那么以后当浏览器播放视频时它就会从这三种中选择一种自己支持的格式来播放

2.3.注意点:

2.3.1当前通过video标签的第二种格式虽然能够指定所有浏览器都支持的视频格式, 但是想让所有浏览器都通过video标签播放视频还有一个前提条件, 就是浏览器必须支持HTML5标签, 否则同样无法播放

2.3.2在过去的一些浏览器是不支持HTML5标签的, 所以为了让过去的一些浏览器也能够通过video标签来播放视频, 那么我们以后可以通过一个JS的框架叫做html5media来实现

//示例代码:
a86f2f0decfb44dbc6ab747ffae6c963
    0bae7145216d37e458653d11326e10da055a816595e1cf5e4b7c6fe05c404a6c
    2ebb1fff27d637a57fd020e2c97bd0af055a816595e1cf5e4b7c6fe05c404a6c
    1baf04e0402116deb9d58c6d8b437329055a816595e1cf5e4b7c6fe05c404a6c
a6a9c6d3f311dabb528ad355798dc27d

8e99a69fbe029cd4e2b854e244eab143二. audio标签128dba7a3a77be0113eb0bea6ea0a5d0

1.什么是audio标签?
作用: 播放音频

2.格式:

e7f8027dc279c198280e2826a020bac381d2bc32cafa2076a27f10cdd878d0ab
b97864c2e0ef2353a16c4d64c7734e92    c8662bf9467af1c1ad9d430db961e59b81d2bc32cafa2076a27f10cdd878d0ab

3.注意点:
audio标签的使用和video标签的使用基本一样, video中能够使用的属性在audio标签中大部分都能够使用, 并且功能都一样
只不过有3个属性不能用, height/width/poster

//第一种格式e9b0b818f65936f23c8ea8bc5d9c5a3c81d2bc32cafa2076a27f10cdd878d0ab
//第二种格式bcadec437f29554c30975961f00da474    3736f74428059a6385abbd98672af40d81d2bc32cafa2076a27f10cdd878d0ab

8e99a69fbe029cd4e2b854e244eab143三. 详情和概要标签128dba7a3a77be0113eb0bea6ea0a5d0

什么是详情和概要标签?
作用:利用summary标签来描述概要信息, 利用details标签来描述详情信息
默认情况下是折叠展示, 想看见详情必须点击

格式:

a5e9d42b316b6d06c62de0deffc36939
    631fb227578dfffda61e1fa4d04b7d25概要信息039f3e95db2a684c7b74365531eb6044
    详情信息857b9e4d92e41388578e3abed1e3bdfb

示例代码

a5e9d42b316b6d06c62de0deffc36939
    631fb227578dfffda61e1fa4d04b7d25郑伊健039f3e95db2a684c7b74365531eb6044简介：郑伊健，1967年10月4日出生于中国香港，籍贯广东恩平，香港影视演员、流行男歌手。1988年参加新秀歌唱大赛加入无线电视，因拍摄“阳光柠檬茶”广告而入行，拜罗文为师。1991年...857b9e4d92e41388578e3abed1e3bdfb

概要详情.gif

8e99a69fbe029cd4e2b854e244eab143四. marquee标签128dba7a3a77be0113eb0bea6ea0a5d0

1.什么是marquee ([mɑr’ki])标签?
作用: 跑马灯

2.格式:

ed126914ed1419bab26abf7cf307b7b9内容7204e33a7a23f6efcc788532e245c31b

3.属性:
direction: 设置滚动方向 left/right/up/down
scrollamount: 设置滚动速度, 值越大就越快
loop: 设置滚动次数, 默认是-1, 也就是无限滚动
behavior: 设置滚动类型 slide滚动到边界就停止, alternate滚动到边界就弹回

4.注意点:
marquee标签不是W3C推荐的标签, 在W3C官方文档中也无法查询这个标签, 但是各大浏览器对这个标签的支持非常好

示例代码:

<!--滚动方向--><marquee>随便写点内容</marquee><marquee direction=right>随便写点内容</marquee><marquee direction=up>随便写点内容</marquee><marquee direction=down>随便写点内容</marquee><hr><!--设置滚动速度--><marquee scrollamount=1>随便写点内容</marquee><marquee scrollamount=100>随便写点内容</marquee><hr><!--设置滚动次数--><marquee loop=1>随便写点内容</marquee><hr><!--设置滚动类型--><!--滚动到边停止--><marquee behavior=slide>随便写点内容</marquee><!--往返滚动--><marquee behavior=alternate>随便写点内容</marquee><!--滚动图片--><marquee>
    ![](images/NJ.jpg)</marquee>

marquee滚动方向

<strong>五. 废弃标签</strong>

1.为什么HTML中有一部分标签会被废弃?
因为当前的HTML中的标签只有一个作用, 就是用来添加语义
而早期的HTML标签中有一部分标签是没有语义的,
有一部分标签是用来修改样式的
所以这部分标签就被淘汰了

<strong>被废弃标签</strong>
<br> <hr> <font>
<b> <u> <i> <s>以上标签都是没有语义的,都是用来修改样式的
b(bold) 加粗文本, 没有任何语义的
u(underline) 给文本天津下划线, 没有任何语义的
i(italic) 将文本倾斜, 没有任何语义的
s(strikethourgh) 给文本添加删除线, 没有任何语义的

注意点:
以后在企业开发中, 不到万不得已一定不要使用这些被废弃掉的标签 如果一定要使用, 一般情况下都是用来作为CSS的钩子来使用

<strong>推出的新标签</strong>
strong == b
ins == u
em == i
del == s
strong语义: 定义重要性强调的文字
ins语义(inseted): 定义插入的文字
em语义(emphasized  音标:['ɛmfə,saɪz]): 定义强调的文字
del语义(deleted): 定义被删除的文字

相信看了本文案例你已经掌握了方法，更多精彩请关注云资源网其它相关文章！

推荐阅读：

iOS webView怎样加载HTMLString

关于正则表达式的几个小练习

以上就是h5的新增标签和废弃标签的详细内容，更多请关注云资源网其它相关文章！