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://cdkjz.cn/article/jgggci.html">http://cdkjz.cn/article/jgggci.html</a> </div> <div class="g-return-wrapper clearfix"> <a href="http://www.cdkjz.cn/" class="home">返回首页</a> <a href="http://www.cdkjz.cn/news/" class="column">了解更多建站资讯</a> </div> </div> </div> <div class="full-related-news"> <h3 class="related-title">相关资讯</h3> <div class="related-news weblg"> <ul class="clearfix"> <li> <a href="/article/dosssh.html"> <h2 class="title">Pytorch中如何实现自己加载单通道图片用作数据集训练-创新互联</h2> </a> </li><li> <a href="/article/dossic.html"> <h2 class="title">数字零售，一个全新的存在-创新互联</h2> </a> </li><li> <a href="/article/dossjc.html"> <h2 class="title">springboot与redis整合中@Cacheable怎么使用-创新互联</h2> </a> </li><li> <a href="/article/dosssj.html"> <h2 class="title">输出/输入(I/O)常识点汇总-创新互联</h2> </a> </li><li> <a href="/article/dossge.html"> <h2 class="title">forEach()、Array.map()如何使用-创新互联</h2> </a> </li><li> <a href="/article/dossch.html"> <h2 class="title">JavaScript模拟文件拖选框样式v1.0的实例-创新互联</h2> </a> </li><li> <a href="/article/dossoc.html"> <h2 class="title">java中的gc是什么意思-创新互联</h2> </a> </li><li> <a href="/article/dossgs.html"> <h2 class="title">SAPCustomerDataCloud的用户搜索实现是这样的-创新互联</h2> </a> </li> </ul> </div> </div> <div class="full-icontact-cover m-ft-contact"> <div class="weblg"> <div class="clearfix content"> <div class="motto"> 多年建站经验 </div> <div class="info"> <h3>多一份参考，总有益处</h3> <h2> 联系快上网，免费获得专属《策划方案》及报价</h2> <div class="msg"> <p>咨询相关问题或预约面谈，可以通过以下方式与我们联系</p> <h4> 大客户专线 &nbsp;&nbsp;成都：<a href="tel:+13518219792" rel="nofollow">13518219792</a> &nbsp;&nbsp;座机：<a href="tel:02886922220" rel="nofollow">028-86922220</a> </h4> </div> </div> </div> <div class="btns clearfix"> <a href="https://wpa.qq.com/msgrd?v=3&uin=631063699&site=qq&menu=yes" target="_blank" rel="nofollow" class="oline">在线咨询</a> <a href="javascript:;" class="edit" rel="nofollow">提交需求</a> </div> </div> </div> <div class="footer-content"> <div class="weblg clearfix"> <div class="friend-links"> <h6 class="clearfix"> <span class="tilte">友情链接</span> <a class="exchagne" href="http://wpa.qq.com/msgrd?v=3&uin=631063699&site=qq&menu=yes">交换友情链接</a> </h6> <div class="link-list clearfix"> <div class="link-slider"> <a href="http://www.cdwuji.com/" title="正泰动物制药" target="_blank">正泰动物制药</a><a href="https://www.cdcxhl.com/idc/leshan.html" title="乐山服务器托管" target="_blank">乐山服务器托管</a><a href="http://m.xwcx.net/wangzhan/" title="成都定制高级网站建设" target="_blank">成都定制高级网站建设</a><a href="http://www.cpwzsj.com/" title="平城网站运维" target="_blank">平城网站运维</a><a href="https://www.cdcxhl.cn/ " title="腾讯云香港空间" target="_blank">腾讯云香港空间</a><a href="http://www.cdxwcx.cn/tuoguan/deyang.html" title="德阳电信服务器托管" target="_blank">德阳电信服务器托管</a><a href="http://www.cdxwcx.cn/tuoguan/mianyang.html" title="绵阳电信服务器托管" target="_blank">绵阳电信服务器托管</a><a href="http://www.csyarui.cn/" title="成都雪糕加盟" target="_blank">成都雪糕加盟</a><a href="http://www.hbruida.cn/" title="宜宾网站建设" target="_blank">宜宾网站建设</a><a href="https://www.cdcxhl.com/ruanwen/yingxiao" title="软文营销" target="_blank">软文营销</a> </div> </div> </div> </div> <div class="full-foot-bottom"> <div class="weblg clearfix"> <p>成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询<a href="tel:028-86922220">028-86922220</a></p> <p> 成都快上网科技有限公司-四川网站建设设计公司 | <a href="http://www.miitbeian.gov.cn/" target="_blank" rel="nofollow">蜀ICP备19037934号</a> Copyright 2020,ALL Rights Reserved cdkjz.cn | <a href="http://www.cdkjz.cn/" target="_blank">成都网站建设</a> | © Copyright 2020版权所有.</p> <p>专家团队为您提供<a href="http://www.cdkjz.cn/" target="_blank">成都网站建设</a>,<a href="http://www.cdkjz.cn/" target="_blank">成都网站设计</a>,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | <a href="###">网站建设地图</a></p> </div> </div> </div> <script type="text/javascript" src="../js/idangerous.swiper.min.js"></script> <script type="text/javascript" src="../js/wow.min.js"></script> <script type="text/javascript" src="../js/jquery.mousewheel.min.js"></script> <script type="text/javascript" src="../js/jquery.placeholder.min.js"></script> <script type="text/javascript" src="../js/layout.js"></script> </body> </html> <script> $(".singlepage 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>