HTML5新增和删除的标签有哪些

这篇文章主要介绍“HTML5新增和删除的标签有哪些”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“HTML5新增和删除的标签有哪些”文章能帮助大家解决问题。

创新互联是一家集网站建设,同德企业网站建设,同德品牌网站建设,网站定制,同德网站建设报价,网络营销,网络优化,同德网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。

HTML5增强了浏览器的原生功能，符合HTML5规范的浏览器功能将更加强大，减少了Web应用对插件的依赖，让用户体验更好，让开发更加方便，另外W3C从推出HTML4.0到5.0之间共经历了17年，HTML的变化很小，这并不符合一个好产品的演进规则。

以下的 HTML 4.01 元素在HTML5中已经被删除：

</p><p><strike></p><p><article>标签定义外部的内容。比如来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文本。</p><p>HTML5:<article></article></p><p>HTML4:<div></div></p><p><aside>标签定义 article 以外的内容。aside 的内容应该与 article 的内容相关。</p><p>HTML5:<aside>Aside 的内容是独立的内容，但应与文档内容相关。</aside></p><p>HTML4:<div>Aside 的内容是独立的内容，但应与文档内容相关。</div></p><p><audio> 标签定义声音，比如音乐或其他音频流。</p><p>HTML5:<audio src="">您的浏览器不支持 audio 标签。</audio></p><p>HTML4:<object type="application/ogg" data="someaudio.wav"><param name="src" value="someaudio.wav"></object></p><p><canvas> 标签定义图形，比如图表和其他图像。这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为，但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。</p><p>HTML5:<canvas id="myCanvas" width="200" height="200"></canvas></p><p>HTML4:<object data="inc/hdr.svg" type="image/svg+xml" width="200" height="200"></object></p><p><command> 标签定义命令按钮，比如单选按钮、复选框或按钮。</p><p>HTML5: <command onclick=cut（）" label="cut"></p><p>HTML4: none</p><p><datalist> 标签定义可选数据的列表。与 input 元素配合使用，就可以制作出输入值的下拉列表。</p><p>HTML5: <datalist></datalist></p><p>HTML4: see combobox.</p><p><details> 标签定义元素的细节，用户可进行查看，或通过点击进行隐藏。与 <legend> 一起使用，来制作 detail 的标题。该标题对用户是可见的，当在其上点击时可打开或关闭 detail。</p><p>HTML5: <details></details></p><p>HTML4: <dl style="display:hidden"></dl></p><p><embed> 标签定义嵌入的内容，比如插件。</p><p>HTML5: <embed src="" /></p><p>HTML4: <object data="flash.swf" type="application/x-shockwave-flash"></object></p><p><figcaption> 标签定义 figure 元素的标题。”figcaption” 元素应该被置于 “figure” 元素的第一个或最后一个子元素的位置。</p><p>HTML5: <figure><figcaption>PRC</figcaption></figure></p><p>HTML4: none</p><p><figure> 标签用于对元素进行组合。使用 <figcaption> 元素为元素组添加标题。</p><p>HTML5: <figure><figcaption>PRC</figcaption><p>The People&#39;s Republic of China was born in 1949&hellip;</p></figure></p><p>HTML4: <dl><h2>PRC</h2><p>The People&#39;s Republic of China was born in 1949&hellip;</p></dl></p><p><footer> 标签定义 section 或 document 的页脚。典型地，它会包含创作者的姓名、文档的创作日期以及/或者联系信息。</p><p>HTML5: <footer></footer></p><p>HTML4: <div></div></p><p><header> 标签定义 section 或 document 的页眉。</p><p>HTML5: <header></header></p><p>HTML4: <div></div></p><p><hgroup> 标签用于对网页或区段（section）的标题进行组合。</p><p>HTML5: <hgroup></hgroup></p><p>HTML4: <div></div></p><p><keygen> 标签定义生成密钥。</p><p>HTML5: <keygen></p><p>HTML4: none</p><p><mark>主要用来在视觉上向用户呈现那些需要突出的文字。<mark>标签的一个比较典型的应用就是在搜索结果中向用户高亮显示搜索关键词。</p><p>HTML5: <mark></mark></p><p>HTML4: <span></span></p><p><meter> 标签定义度量衡。仅用于已知最大和最小值的度量。必须定义度量的范围，既可以在元素的文本中，也可以在 min/max 属性中定义。</p><p>HTML5: <meter></meter></p><p>HTML4: none</p><p><nav> 标签定义导航链接的部分。</p><p>HTML5: <nav></nav></p><p>HTML4:<ul></ul></p><p><output> 标签定义不同类型的输出，比如脚本的输出。</p><p>HTML5: <output></output></p><p>HTML4: <span></span></p><p><progress> 标签运行中的进程。可以使用 <progress> 标签来显示 JavaScript 中耗费时间的函数的进程。</p><p>HTML5: <progress></progress></p><p>HTML4: none</p><p><rp> 标签在 ruby 注释中使用，以定义不支持 ruby 元素的浏览器所显示的内容。</p><p>HTML5: <ruby>漢 <rt><rp>（</rp>ㄏㄢˋ<rp>）</rp></rt></ruby></p><p>HTML4: none</p><p><rt> 标签定义字符（中文注音或字符）的解释或发音。</p><p>HTML5: <ruby>漢 <rt> ㄏㄢˋ </rt></ruby></p><p>HTML4: none</p><p><ruby> 标签定义 ruby 注释（中文注音或字符）。</p><p>HTML5: <ruby>漢 <rt><rp>（</rp>ㄏㄢˋ<rp>）</rp></rt></ruby></p><p>HTML4: none</p><p><section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。</p><p>HTML5: <section></section></p><p>HTML4: <div></div></p><p><source> 标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源。</p><p>HTML5: <source></p><p>HTML4: <param></p><p><summary> 标签包含 details 元素的标题，”details” 元素用于描述有关文档或文档片段的详细信息。”summary” 元素应该是 “details” 元素的第一个子元素。</p><p>HTML5: <details><summary>HTML 5</summary>This document teaches you everything you have to learn about HTML 5.</details></p><p>HTML4: none</p><p><time> 标签定义日期或时间，或者两者。</p><p>HTML5: <time></time></p><p>HTML4: <span></span></p><p><video> 标签定义视频，比如电影片段或其他视频流。</p><p>HTML5: <video src="" controls="controls">您的浏览器不支持 video 标签。</video></p><p>HTML4:<object type="video/ogg" data="movie.ogv"><param name="src" value="movie.ogv"></object></p><p>表示特定范围内的数值，可用于工资、数量、百分比等 max表示最大值，min表示最小值，value代表当前值。</p><p>可以试试用js控制让它从0变化到100。</p><p>time。表示时间值，属性datetime强调时间</p><p>大会时间：<time>2015-10-6</time></p><p>运行效果：</p><p>因为该标签是一个语义标签，在浏览器上查看时没有特别的效果，基本与没有设置标签的效果相同。</p><p>用来表示进度条</p><p>max：最大值，完成时的值</p><p>value：当前值</p><p>firefox运行结果：</p><p>chrome运行结果：</p><p>该标签定义可选数据的列表。与 input 元素配合使用，就可以制作出输入值的下拉列表。</p><p>当与input组合时既可以完成选择有可以输入。</p><p>在没有使用HTML5时如果要在页面中播放音频与视频，则可以使用的方法有：</p><p>a）、embed</p><p><embed src=""></embed></p><p>如一些三方插件，flowplayer602</p><p>html5多媒体组件指的是video（视频）组件和audio（音频）组件。HTML5多媒体组件可以在不借助诸如Flash Player等第三方插件的情况下，直接在你的网页上嵌入多媒体组件。浏览器提供原生支持视频的新能力使得网页开发人员更易于在不依赖于外置插件有效性的情况下，在他们的网站上添加视频组件。由于苹果公司现阶段在iPhone和iPad上使用的Flash技术的局限性，HTML5多媒体组件的能力就显得尤为重要了。</p><p>用于在播放视频，电影</p><p>标签基本格式如下：</p><p>运行效果：</p><p>source是视频源，可以有多种，当一种失败时将选择下一种，主要有如下3种：</p><p>Ogg=带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件</p><p>MPEG4=带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件</p><p>WebM=带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件</p><p>格式支持情况：</p><p>标签属性：</p><p>source子标签属性：</p><p>video API方法</p><p>video API属性</p><p>video API事件</p><p>注意：</p><p>多数的HTML5标签的innerHTML内容是浏览器不支持该标签时显示的内容。</p><p>事件绑定与监听的区别：</p><p>运行结果：</p><p>使用on事件名的形式绑定事件后绑定会覆盖前面绑定的事件，也就是最后一个绑定的事件会生效；</p><p>使用addEventListener绑定事件则不会覆盖，可同时在一个元素上绑定多个相同的事件。</p><p>video API的属性与事件示例：</p><p>运行结果：</p><p>练习：</p><p>练习代码：</p><p>audio可以实现播放声音，音乐功能。</p><p><audio src= controls ></p><p>您的浏览器不支持audio元素</p><p></autio></p><p>audio标签的属性，很多属性都是与video相同的：</p><p>autoplay：true|false，如果是 true，则音频在就绪后马上播放。</p><p>controls：true|false 如果是true，则向用户显示控件，比如播放按钮。</p><p>end：numeric value 定义播放器在音频流中的何处停止播放。默认地，声音会播放到结尾。</p><p>loopend：numeric value 定义在音频流中循环播放停止的位置，默认是 end 属性的值。</p><p>loopstart： numeric value 定义在音频流中循环播放的开始位置。默认是 start 属性的值。</p><p>关于“HTML5新增和删除的标签有哪些”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注创新互联行业资讯频道，小编每天都会为大家更新不同的知识点。</p> <br> 网站标题：HTML5新增和删除的标签有哪些 <br> 网页网址：<a href="http://cxhlcq.com/article/jgggci.html">http://cxhlcq.com/article/jgggci.html</a> </div> </div> </div> <div class="other container"> <h3>其他资讯</h3> <ul> <li> <a href="/article/ddshood.html">服务器安全操作指南 服务器的安全</a> </li><li> <a href="/article/ddshoij.html">阿里云服务器如何安装php环境配置文件 阿里云 php服务器</a> </li><li> <a href="/article/ddshoio.html">店铺用路由器 店铺用路由器怎么设置</a> </li><li> <a href="/article/ddshoeg.html">帝国cms不被收录 帝国cms栏目没有了</a> </li><li> <a href="/article/ddshocs.html">SAP系统界面文字变小的简单介绍</a> </li> </ul> </div> <div class="footer"> <div class="foota container"> <div class="foot_nav fl col-lg-8 col-md-8 col-sm-12 col-xs-12"> <ul> <li class="col-lg-3 col-md-3 col-sm-3 col-xs-6"> <h3>网站制作</h3> <a href="http://www.cxjianzhan.com/" target="_blank">网站制作</a><a href="http://www.wjzwz.com/" target="_blank">温江网站制作</a><a href="https://www.cdcxhl.com/zhizuo/chengdu.html" target="_blank">四川成都网站制作</a><a href="https://www.cdxwcx.com/wangzhan/mbqiye.html" target="_blank">成都企业网站制作</a><a href="https://www.cdcxhl.com/mobile.html" target="_blank">手机网站制作设计</a><a href="https://www.cdxwcx.com/" target="_blank">成都网站制作</a> </li> <li class="col-lg-3 col-md-3 col-sm-3 col-xs-6"> <h3>企业服务</h3> <a href="https://www.cdcxhl.com/ruanwen/" target="_blank">软文营销</a><a href="https://www.cdcxhl.com/service/ssl.html" target="_blank">ssl证书</a><a href="https://www.cdcxhl.com/link/" target="_blank">友情链接购买</a><a href="https://www.cdcxhl.com/service/service.html" target="_blank">工商服务</a><a href="https://www.cdcxhl.com/link/" target="_blank">买友情链接</a><a href="https://www.cdcxhl.com/service/icpxuke.html" target="_blank">互联网信息经营许可证</a> </li> <li class="col-lg-3 col-md-3 col-sm-3 col-xs-6"> <h3>网站建设</h3> <a href="http://www.cdkjz.cn/fangan/store/" target="_blank">电商网站建设方案</a><a href="https://www.cdxwcx.com/" target="_blank">成都网站建设公司</a><a href="http://chengdu.cdcxhl.cn/qiye/" target="_blank">成都企业网站建设公司</a><a href="https://www.cdxwcx.com/city/meishan/" target="_blank">眉山网站建设</a><a href="http://m.cdcxhl.com/dingzhi.html" target="_blank">定制网站建设多少钱</a><a href="http://chengdu.cdcxhl.cn/jianshe/" target="_blank">品牌网站建设</a> </li> <li class="col-lg-3 col-md-3 col-sm-3 col-xs-6"> <h3>服务器托管</h3> <a href="https://www.cdcxhl.com/cqtuoguan.html" target="_blank">重庆服务器托管</a><a href="http://www.cdxwcx.cn/tuoguan/mianyang.html" target="_blank">绵阳机房托管</a><a href="https://www.xwcx.net/" target="_blank">成都机柜租用</a><a href="https://www.cdcxhl.com/idc/mianyang.html" target="_blank">绵阳服务器托管</a><a href="https://www.cdcxhl.com/idc/cqstsx.html" target="_blank">重庆水土双线托管</a><a href="https://www.cdcxhl.com/jigui/" target="_blank">服务器机柜租赁</a> </li> </ul> </div> <div class="footar fl col-lg-4 col-md-4 col-sm-12 col-xs-12"> <p>全国免费咨询:</p> <b>400-028-6601</b> <p>业务咨询：028-86922220 / 13518219792</p> <p>节假值班：18980820575 / 13518219792</p> <p>联系地址：成都市太升南路288号锦天国际A幢1002号</p> </div> </div> <div class="footb"> <div class="copy container"> <div class="fl">Copyright © 成都创新互联科技有限公司重庆分公司 <a href="https://beian.miit.gov.cn/" target="_blank">渝ICP备2021005571号</a></div> <!--<div class="fr"><a href="https://www.cdxwcx.com/" target="_blank">成都网站建设</a>：<a href="https://www.cdcxhl.com/" target="_blank">创新互联</a></div>--> </div> </div> <div class="link"> <div class="container"> 友情链接:： <a href="https://www.cdcxhl.com/" target="_blank">成都网站建设</a> <a href="https://www.cdcxhl.com/city/chongqing.html" target="_blank">重庆网站建设</a> <a href="">四川网站建设</a> <a href="">重庆建设网站</a> <a href="https://www.cdxwcx.com/jifang/xiyun.html" target="_blank">移动服务器托管</a> <a href="http://www.cdfuwuqi.com/" target="_blank">成都服务器托管</a> <a href="https://www.cdcxhl.cn/" target="_blank">云服务器</a> <a href="http://www.cdhuace.com/" target="_blank">广告设计制作</a> <a href="https://www.cdcxhl.com/sheji/chongqing.html" target="_blank">重庆网页设计</a> <a href="https://www.cdcxhl.com/zuo/chongqing.html" target="_blank">重庆做网站</a> <a href="https://www.cdcxhl.com/zhizuo/chongqing.html" target="_blank">重庆网站制作</a> <a href="">重庆网站建设</a> <a href="">重庆网站公司</a> <a href="">渝中网站制作</a> <a href="">重庆网站设计</a> </div> </div> </div> <div class="foot"> <ul class="public-celan"> <li> <a href="https://p.qiao.baidu.com/cps3/chatIndex?siteToken=6ce441ff9e2d6bedbdfc2a4138de449e&speedLogId=162260383240185e3_1622603832401_02407&eid=6256368&reqParam=%7B%22from%22%3A1%2C%22sessionid%22%3A%22-100%22%2C%22siteId%22%3A%2211284691%22%2C%22tid%22%3A%22-1%22%2C%22userId%22%3A%226256368%22%2C%22ttype%22%3A1%2C%22pageId%22%3A0%7D" target="_blank" class="a1 db tc"> <img src="/Public/Home/img/icon-23.png" alt="" class="db auto"> <span class="span-txt">在线咨询</span> </a> </li> <li> <a href="tel:18980820575" class="a1 db tc"> <img src="/Public/Home/img/icon-24.png" alt="" class="db auto"> <span class="span-txt">电话咨询</span> </a> </li> <li> <a target="_blank" href="tencent://message/?uin=1683211881&Site=&Menu=yes" class="a1 db tc"> <img src="/Public/Home/img/icon-25.png" alt="" class="db auto"> <span class="span-txt">QQ咨询</span> </a> </li> <li> <a target="_blank" href="tencent://message/?uin=532337155&Site=&Menu=yes" class="a1 db tc public-yuyue-up"> <img src="/Public/Home/img/icon-26.png" alt="" class="db auto"> <span class="span-txt">预约顾问</span> </a> </li> </ul> </div> <div class="customer"> <dl class="icon1"> <dt> <a href="tencent://message/?uin=1683211881&Site=&Menu=yes"> <i class="iconT"><img src="/Public/Home/img/QQ.png" alt=""></i> <p>在线咨询</p> </a> </dt> </dl> <dl class="icon2"> <dt><i><img src="/Public/Home/img/weixin.png" alt=""></i><p>微信咨询</p></dt> <dd><img src="/Public/Home/img/ewm.png"></dd> </dl> <dl class="icon3"> <dt><i><img src="/Public/Home/img/dianhua.png" alt=""></i><p>电话咨询</p></dt> <dd> <p>028-86922220（工作日）</p> <p>18980820575（7×24）</p> </dd> </dl> <dl class="icon4"> <dt class="sShow"> <a href="tencent://message/?uin=244261566&Site=&Menu=yes"> <i><img src="/Public/Home/img/dengji.png" alt=""></i><p>提交需求</p> </a> </dt> </dl> <dl class="icon5"> <dt class="gotop"> <a href="#top"> <i><img src="/Public/Home/img/top.png" alt=""></i><p>返回顶部</p> </a> </dt> </dl> </div> </body> </html> <script> $(".con img").each(function(){ var src = $(this).attr("src"); //获取图片地址 var str=new RegExp("http"); var result=str.test(src); if(result==false){ var url = "https://www.cdcxhl.com"+src; //绝对路径 $(this).attr("src",url); } }); window.onload=function(){ document.oncontextmenu=function(){ return false; } } </script>