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> 当前URL：<a href="http://ahjierui.cn/article/jgggci.html">http://ahjierui.cn/article/jgggci.html</a> </div> </div> <div class="other"> <h3>其他资讯</h3> <ul> <li> <a href="/article/desogsj.html">怎么控制域名 怎么控制域名访问时间</a> </li><li> <a href="/article/desogdp.html">h3c路由器登录地址 h3c路由器登录地址打不开</a> </li><li> <a href="/article/desogce.html">linux导出库命令 linux系统导出文件</a> </li><li> <a href="/article/desogdo.html">阿里云服务器配置软件 阿里云服务器配置https</a> </li><li> <a href="/article/desogoj.html">sap后勤信息系统lis的简单介绍</a> </li> </ul> </div> </div> <!-- end #bd --> <div class="c"></div> <!-- begin #fd --> <div id="fd" class="index-fd pr"> <div class="map-bg3"></div> <div class="wp"> <div class="fd-top"> <dl> <dt>关于我们</dt> <dd> <ul class="ul-fd"> <li><a href="http://www.ahjierui.cn/about#whous">我们是谁</a></li> <li><a href="http://www.ahjierui.cn/about#ourcus">我们服务的客户</a></li> <li><a href="http://www.ahjierui.cn/about#ourteam">我们的团队</a></li> </ul> </dd> </dl> <dl> <dt>我们的服务</dt> <dd> <ul class="ul-fd"> <li><a href="http://www.ahjierui.cn/service#webbuit">网站建设</a></li> <li><a href="http://www.ahjierui.cn/service#weiweb">H5响应式 交互网站</a></li> <li><a href="http://www.ahjierui.cn/service#webmobel">移动端 &amp; 微网站定制</a></li> <li><a href="http://www.ahjierui.cn/service#servweb">服务流程</a></li> <li><a href="http://www.ahjierui.cn/service#solution">行业解决方案</a></li> </ul> </dd> </dl> <dl> <dt>网站建设案例</dt> <dd> <ul class="ul-fd"> <li><a href="http://www.ahjierui.cn/case/">公司集团</a></li> <li><a href="http://www.ahjierui.cn/case/">数码电子科技</a></li> <li><a href="http://www.ahjierui.cn/case/">建筑与设计</a></li> <li><a href="http://www.ahjierui.cn/case/">安防门禁</a></li> <li><a href="http://www.ahjierui.cn/case/">管理咨询美容</a></li> <li><a href="http://www.ahjierui.cn/case/">外贸行业</a></li> </ul> </dd> </dl> <dl> <dt>新闻动态</dt> <dd> <ul class="ul-fd"> <li><a href="/news/2.html">简阳网站建设</a></li><li><a href="/news/3.html">简阳网站制作</a></li><li><a href="/news/4.html">简阳网站设计</a></li> </ul> </dd> </dl> <dl> <dt>联系我们</dt> <dd class="pr"> <p><a href="http://www.ahjierui.cn/news/" class="weixin"></a><a href="http://www.ahjierui.cn/news/" class="sina"></a><span class="weixin-pic"><img src="/Public/Home/pic/ewm.jpg"></span></p> <p><b class="tel">135-1821-9792</b></p> <h5>公司服务热线</h5> </dd> </dl> </div> <div class="link"> 友情链接： <a href="http://www.cdganxi.com/" title="产品宣传册设计" target="_blank">产品宣传册设计</a>&nbsp;&nbsp;&nbsp;<a href="http://seo.cdkjz.cn/wangzhan/" title="营销型网站建设" target="_blank">营销型网站建设</a>&nbsp;&nbsp;&nbsp;<a href="http://www.sczitong.cn/" title="sczitong.cn" target="_blank">sczitong.cn</a>&nbsp;&nbsp;&nbsp;<a href="http://www.djyfdjwx.com/" title="四川威斯达宇" target="_blank">四川威斯达宇</a>&nbsp;&nbsp;&nbsp;<a href="http://seo.cdkjz.cn/mobile/" title="手机网站建设" target="_blank">手机网站建设</a>&nbsp;&nbsp;&nbsp;<a href="http://www.tyxishu.com/" title="香港四川國際商會" target="_blank">香港四川國際商會</a>&nbsp;&nbsp;&nbsp;<a href="http://www.ahjierui.cn/" title="简阳网站制作" target="_blank">简阳网站制作</a>&nbsp;&nbsp;&nbsp;<a href="http://www.xhgfhy.com/ " title="成都防护栏" target="_blank">成都防护栏</a>&nbsp;&nbsp;&nbsp;<a href="http://www.wjzwz.com/" title="温江网站设计" target="_blank">温江网站设计</a>&nbsp;&nbsp;&nbsp;<a href="http://www.gyanhua.com/" title="gyanhua.com" target="_blank">gyanhua.com</a>&nbsp;&nbsp;&nbsp; </div> </div> <div class="fd-copy"> <div class="wp"> <p><span style="color:#CCCCCC;">Copyright &copy; 2009-2022 www.ahjierui.cn 青羊区美图云海设计工作室(个体工商户) 版权所有</span>　<a href="http://beian.miit.gov.cn/" target="_blank" rel="nofollow" style="color:#CCCCCC;">蜀ICP备19037934号</a></p> </div> </div> </div> <div class="side"> <ul> <li><a href="http://wpa.qq.com/msgrd?v=3&amp;uin=631063699&amp;site=qq&amp;menu=yes" target="_blank"> <div class="sidebox"><img src="/Public/Home/pic/side_icon02.png">在线咨询</div> </a></li> <li><a href="http://wpa.qq.com/msgrd?v=3&amp;uin=631063699&amp;site=qq&amp;menu=yes" target="_blank"> <div class="sidebox"><img src="/Public/Home/pic/side_icon01.png">在线咨询</div> </a></li> <li><a href="tel:135-1821-9792"> <div class="sidebox"><img src="/Public/Home/pic/side_icon03.png"><span style="font-size:14px">135-1821-9792</span></div> </a></li> </ul> </div> <div class="side2"> <ul> <li><a href="http://www.ahjierui.cn/news/"><img src="/Public/Home/pic/r_icon1.png" alt="简阳网站建设"></a> <div class="weixin"><em></em><img src="/Public/Home/pic/ewm.jpg" alt="简阳网站建设"></div> </li> <li><a href="javascript:goTop();" class="sidetop"><img src="/Public/Home/pic/r_icon2.png"></a></li> </ul> </div> <div class="fot"> <ul> <li> <a href="https://p.qiao.baidu.com/cps/mobileChat?siteId=11284691&userId=6256368&type=1&reqParam=%20{%22from%22:0,%22sessionid%22:%22%22,%22siteId%22:%2211284691%22,%22tid%22:%22-1%22,%22userId%22:%226256368%22,%22ttype%22:1,%22siteConfig%22:%20{%22eid%22:%226256368%22,%22queuing%22:%22%22,%22siteToken%22:%226ce441ff9e2d6bedbdfc2a4138de449e%22,%22userId%22:%226256368%22,%22isGray%22:%22false%22,%22wsUrl%22:%22wss://p.qiao.baidu.com/cps3/websocket%22,%22likeVersion%22:%22generic%22,%22siteId%22:%2211284691%22,%22online%22:%22true%22,%22webRoot%22:%22//p.qiao.baidu.com/cps3/%22,%22bid%22:%22160142915792139572%22,%22isSmallFlow%22:0,%22isPreonline%22:0,%22invited%22:0%20},%22config%22:%20{%22themeColor%22:%224d74fa%22%20}%20}&appId=&referer=&iswechat=0&expectWaiter=-1&openid=null&otherParam=null&telephone=null&speedLogId=null&eid=null&siteToken=6ce441ff9e2d6bedbdfc2a4138de449e" target="_blank"> <img src="/Public/Home/pic/fot1.png" alt=""> <p>在线咨询</p> </a> </li> <li> <a href="tel:18980820575" target="_blank"> <img src="/Public/Home/pic/fot2.png" alt=""> <p>拨打电话</p> </a> </li> </ul> </div> <script type="text/javascript" src="/Public/Home/pic/jquery.js"></script> <script type="text/javascript" src="/Public/Home/pic/lib.js"></script> </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>