h5的新增标签和废弃标签有哪些

小编给大家分享一下h5的新增标签和废弃标签有哪些，希望大家阅读完这篇文章后大所收获，下面让我们一起去探讨吧！

为鸠江等地区用户提供了全套网页设计制作服务，及鸠江网站建设行业解决方案。主营业务为成都网站设计、成都网站制作、鸠江网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！

一.video标签

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

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

//设置 自动播放 + 控制条<video src="images/sb1.webm" autoplay="autoplay" controls="controls"></video>//控制条 + 占位图<video src="images/sb1.webm"  controls="controls" poster="images/NJ.jpg"></video>//广告视频 : 自动播放 + 无限循环 + 静音 + 宽度<video src="images/sb1.webm"  autoplay="autoplay"  loop="loop" muted="muted" width="800px"></video>

b.第二种格式

2.1.格式:

<video>
    <source src="" type=""></source>
    <source src="" type=""></source>
</video>

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

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

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

2.3.注意点:

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

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

//示例代码:
<video autoplay="autoplay" controls="controls">
    <source src="images/sb1.webm" type="video/webm"></source>
    <source src="images/sb1.mp4" type="video/mp4"></source>
    <source src="images/sb1.ogg" type="video/ogg"></source>
</video>

二. audio标签

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

2.格式:

<audio src=""></audio>
<audio>    <source src="" type=""></audio>

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

//第一种格式<audio src="images/yinyue.mp3" autoplay="autoplay" controls="controls"></audio>
//第二种格式<audio autoplay="autoplay" controls="controls">    <source src="images/yinyue.mp3" type="audio/mp3"></audio>

三. 详情和概要标签

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

格式:

<details>
    <summary>概要信息</summary>
    详情信息</details>

示例代码

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

概要详情.gif

h5的新增标签和废弃标签有哪些

四. marquee标签

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

2.格式:

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滚动方向

h5的新增标签和废弃标签有哪些

五. 废弃标签

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): 定义被删除的文字

看完了这篇文章，相信你对h5的新增标签和废弃标签有哪些有了一定的了解，想了解更多相关知识，欢迎关注创新互联行业资讯频道，感谢各位的阅读！

网页题目：h5的新增标签和废弃标签有哪些
链接URL：https://www.cdcxhl.com/article36/ijhdpg.html

成都网站建设公司_创新互联，为您提供响应式网站、商城网站、Google、手机网站建设、自适应网站、建站公司

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容