那些不推荐使用的html标签(不属于html标签)

网友投稿 292 2022-06-12


那些不推荐使用的html标签

acronym

首字母缩写,例如WWW

类似的有abbr标签,表示单词缩写,例如inc.。语法如下:

WWW

inc.

推荐用abbr,不要用acronym(忽略上面提到的语义上的差异)

applet

Java小应用程序,主要提供绘图功能(在页面上通过代码绘制一些东西),例如:

目前几乎没什么用了,因为运行需要JRE,而目前主流浏览器并不默认安装JRE

推荐使用canvas绘图,或者用object+embed嵌入flash代替applet

注意:使用object+embed是为了更好的兼容性,如果场景允许,推荐使用object

basefont

basefont标签定义基准字体。该标签可以为文档中的所有文本定义默认字体颜色、字体大小和字体系列,例如:

basefont标签只有[IE9-]支持

推荐直接给body元素定义默认字体,所有子元素都会继承这些属性值

bgsound

用来添加背景音乐,例如:

推荐使用audio或者object+embed来代替,例如:

big

用来放大字体,放大一号(嵌套多层可以放大更多),不支持的浏览器显示粗体,例如:

大1号大2号

至于“号”是怎么定义的就别管了,不推荐使用,建议根据语义采用em、strong或者自定义样式类代替

blink

可以实现闪烁效果,例如:

Why would somebody use this?

支持性很差,不推荐使用,同样不推荐使用(各大浏览器支持blink值,但没有任何效果):

This should be avoided as well.

建议采用animation代替

center

使内容居中,例如:

文本及子元素会居中

效果类似于CSS:

text-align: center;

不建议使用,确实没有任何理由去用

dir

目录列表,例如:

  • html
  • xhtml
  • css
  • 效果和ul基本相同,浏览器默认样式下列表项的左边距有细微差异

    不推荐使用,建议根据语义采用ul、ol或者dl

    font

    用来定义字体、字号和颜色,例如:

    This is some text!

    属性值和basefont一样

    不推荐使用,建议用CSS代替,没理由用这个标签

    frame

    配合frameset分栏,例如:

    注意:用frameset替换掉body

    复杂的后台页面会用到frameset+frame布局,当然也可以采用float/flex+Ajax实现,根据具体场景来定

    frameset

    见frame

    hgroup

    给一系列标题分组,例如:

    The reality dysfunction

    Space is not the only void

    虽然提供了一点语义,但因为已经过时,所以不推荐使用

    建议采用header代替,例如:

    The reality dysfunction

    Space is not the only void

    isindex

    单行文本控件,初始显示prompt值,例如:

    目前支持性很差,不推荐使用,建议用input元素代替

    W3C建议千万不要用:

    No, really, don’t use it. This element is deprecated. It is not implemented anymore.

    引自W3C wiki

    具体用法可以参考http://reference.sitepoint.com/html/isindex(很难找,放在这里)

    listing

    不用管它是什么,微软都不建议使用了:

    This element is obsolete and should no longer be used. Use HTMLPreElement, code or CSS instead. Renders text in a fixed-width font.

    引自MSDN listing element | listing object

    marquee

    滚动字幕,效果很强大,例如:

    此处输入滚动内容

    这里是输入文字的地方,还可以放图片代码、Flash动画代码和gif动态小图代码。

    更多效果可以参考移动标签(marquee)属性详解

    多用来实现公告,虽然已经过时了,但效果确实很强大,而且支持性良好

    multicol

    用来实现多列布局,不建议使用,任何主流浏览器都不曾支持过

    The HTML element was an experimental element designed to allow multi-column layouts. It never got any significant traction and is not implemented in any major browsers.

    引自MDN multicol

    nextid

    作用未知,支持性未知,不建议使用

    nobr

    禁止换行,例如:

    Our telephone number is 0800 123 123 123.

    不推荐使用,建议用CSS代替:

    white-space: nowrap;

    noembed

    在浏览器不支持embed时,显示内容,类似于noscript,例如:

    </p><p><img src="/images/inflate.jpg" alt="Inflate the tyre by holding the</p><p>pump at 90 degree angle to the valve"></p><p><p>You can inflate the tyre by holding the pump at 90 degree angle</p><p>to the valve, as shown in the image above.</p></p><p>

    不推荐使用,如果需要考虑兼容性的话,建议采用object+embed+noembed(embed/noembed作为object的fallback)

    noframes

    在浏览器不支持frameset+frame时,显示内容,类似于noscript,例如:

    Sorry, your browser does not handle frames!

    noframe标签中可以包含任何能够出现在body中的标签

    如果需要考虑兼容性的话,可以作为frame的fallback,建议采用float/flex+Ajax实现,根据具体场景来定

    plaintext

    忽略内容中的html标签,作用类似于pre,例如:

    The markup for this is:

    </p><p> <h1>Main heading goes here</h1></p><p> <p>First paragraph goes here</p></p><p> <h2>Sub-heading goes here</h2></p><p></plaintext>.</p><p></body></p><p></html></p><p>不推荐使用,建议根据语义用pre或者code代替</p><p>spacer</p><p>插入空白(white spaces),例如:</p><p><span>Just a text node</span></p><p><spacer type="horizontal" size="10"></spacer></p><p><span>Just another text node</span></p><p><spacer type="block" width="10" height="10"></spacer></p><p>主流浏览器都不支持,不推荐使用</p><p>strike</p><p>删除线,效果类似于del和s,例如:</p><p><p>Version 2.0 is <strike>not yet available!</strike> now available!</p></p><p>不推荐使用,建议用del代替</p><p>tt</p><p>键盘输入(teletype),例如:</p><p><p><tt>Teletype text</tt></p></p><p>不推荐使用,建议根据语义用kbd(键盘按键)、var(变量)、code(代码)、samp(样例输出)或者CSS代替</p><p>xmp</p><p>80列的样例输出,样式效果类似于pre,语义类似于samp,例如:</p><p><xmp></p><p>Stock ID Description Price Quantity in Stock</p><p>-------- ----------- ----- -----------------</p><p>116 Inflatable Armchair 21.50 13</p><p>119 Walkie Talkie 40.20 44</p><p></xmp></p><p>目前浏览器支持该标签,但不限制80列</p><p>不推荐使用,建议采用samp代替</p><a href='https://www.eolink.com?utm=jiasou' target='_blank'><img style='width:100%;height:100%' src='https://www.eolink.com/news/zb_users/upload/2022/08/20220805174511165969271139602.jpg'></a><br> <p> <strong>版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。</strong> </p></div> <div class="article_footer clear"> <div class="fr tag">标签:<a href="https://www.eolink.com/news/tags-1223.html">代码</a> <a href="https://www.eolink.com/news/tags-165.html">Java</a> </div> <div class="bdsharebuttonbox fl share"> <div class="share-widget fl"> <div class="social-share" data-sites="wechat,weibo, qq, qzone"></div> </div> </div> </div> <!-- 广告位ad4 --> <div class="post-navigation clear"> <div class="post-previous fl"> <span>上一篇:</span><a href="https://www.eolink.com/news/post/2403.html">深入浅出JavaScript之闭包(Closure)</a> </div> <div class="post-next fr"> <span>下一篇:</span><a href="https://www.eolink.com/news/post/2405.html">JavaScript-总结常用代码书写规范(前端代码书写规范)</a> </div> </div> </div> <div class="related_article"> <div class="box_title clear"> <span><i class="icon fa fa-paper-plane"></i>相关文章</span> </div> <div class="related_list clear"> <article class="fl"> <div class="related_img"><a href="https://www.eolink.com/news/post/89102.html"><img src="https://www.eolink.com/news/zb_users/theme/zblog5_news/image/random_img/8.jpg"></a></div> <div class="related_detail"> <h3><a href="https://www.eolink.com/news/post/89102.html" title="Flask接口签名sign原理与实例代码浅析">Flask接口签名sign原理与实例代码浅析</a></h3> <div class="meta"> <span><i class="fa fa-eye"></i>292</span> <span><i class="fa fa-clock-o"></i>2022-06-12</span> </div> </div> </article> <article class="fl"> <div class="related_img"><a href="https://www.eolink.com/news/post/89097.html"><img src="https://www.eolink.com/news/zb_users/theme/zblog5_news/image/random_img/2.jpg"></a></div> <div class="related_detail"> <h3><a href="https://www.eolink.com/news/post/89097.html" title="zookeeper python接口实例详解">zookeeper python接口实例详解</a></h3> <div class="meta"> <span><i class="fa fa-eye"></i>292</span> <span><i class="fa fa-clock-o"></i>2022-06-12</span> </div> </div> </article> <article class="fl"> <div class="related_img"><a href="https://www.eolink.com/news/post/89096.html"><img src="https://www.eolink.com/news/zb_users/theme/zblog5_news/image/random_img/5.jpg"></a></div> <div class="related_detail"> <h3><a href="https://www.eolink.com/news/post/89096.html" title="Iterator与LIstIterator接口在java中的区别有哪些">Iterator与LIstIterator接口在java中的区别有哪些</a></h3> <div class="meta"> <span><i class="fa fa-eye"></i>292</span> <span><i class="fa fa-clock-o"></i>2022-06-12</span> </div> </div> </article> </div> </div> <div id="comment" class="post-comment clearfix sb br mt"> <p id="comments-title" class="c-title mb bn"><span><i class="fa fa-pencil"></i>&nbsp;发表评论</span></p> <div class="compost"> <form id="frmSumbit" target="_self" method="post" action="https://www.eolink.com/news/zb_system/cmd.php?act=cmt&amp;postid=2404&amp;key=67f1df53b6e6025dc742f78b53ab7305"> <input type="hidden" name="inpId" id="inpId" value="2404"/> <input type="hidden" name="inpRevID" id="inpRevID" value="0"/> <div class="com-name"> <a rel="nofollow" id="cancel-reply" href="#comments" style="display:none;">取消回复</a> </div> <div class="com-info"> <ul> <li> <span class="hide" for="author"></span> <input class="ipt" type="text" name="inpName" id="inpName" value="" tabindex="2" placeholder="昵称(必填)"> </li> <li> <span class="hide" for="author"></span> <input class="ipt" type="text" name="inpEmail" id="inpEmail" value="" tabindex="3" placeholder="邮箱"> </li> <li> <span class="hide" for="author"></span> <input class="ipt" type="text" name="inpHomePage" id="inpHomePage" value="" tabindex="4" placeholder="网址"> </li> </ul> </div> <div class="com-box"> <textarea placeholder="来都来了,说点什么吧..." class="textarea" name="txaArticle" id="txaArticle" cols="5" rows="5" tabindex="1"></textarea> </div> <div class="com-info"><button class="com-submit br brightness" name="sumbit" type="submit" tabindex="5" onclick="return zbp.comment.post()">发布评论</button></div> </form> </div> <div class="comment-list mt"> <p class="no-comment"><i class="iconfont icon-sofa"></i> 暂时没有评论,来抢沙发吧~</p> <span id="AjaxCommentBegin"></span> <div class="pagination pagination-multi"> <ul> </ul> </div> <span id="AjaxCommentEnd"></span> </div> </div> </div> </div> <div class="sidebar"> <div id="newmodule" class="part clear 推荐文章"> <div class="top"> <h3 class="title">推荐文章</h3> </div> <div class="side newmodule"><ul><ul class="hot_posts"> <li><h4><a href="https://www.eolink.com/news/post/16753.html" title="接口调用是什么意思?几种常用接口调用方式">接口调用是什么意思?几种常用接口调用方式</a></h4></li><li><h4><a href="https://www.eolink.com/news/post/64809.html" title="接口设计(接口设计原则)">接口设计原则</a></h4></li><li><h4><a href="https://www.eolink.com/news/post/9069.html" title="API接口管理,8 款在线 API 接口文档管理工具;好用!">8款在线 API 接口文档管理工具</a></h4></li><li><h4><a href="https://www.eolink.com/news/post/64179.html" title="api管理系统">api管理系统是什么?</a></h4></li><li><h4><a href="https://www.eolink.com/news/post/17828.html" title="什么是接口调试?接口调试的步骤有哪些?">什么是接口调试?接口调试的步骤有哪些?</a></h4></li><li><h4><a href="https://www.eolink.com/news/post/63728.html" title="api 接口管理系统(接口统一管理平台)">api 接口管理系统有哪些?</a></h4></li><li><h4><a href="https://www.eolink.com/news/post/77372.html" title="接口测试常用测试方法,多线程免费手机短信压力测试,支持云端获取接口">接口测试有几种测试方法</a></h4></li><li><h4><a href="https://www.eolink.com/news/post/43657.html" title="api文档生成(api接口文档系统)">API文档生成工具有哪些?</a></h4></li><li><h4><a href="https://www.eolink.com/news/post/66400.html" title="微服务和api网关区别(微服务网关技术选型)">微服务和api网关区别</a></h4></li><li><h4><a href="https://www.eolink.com/news/post/64163.html" title="交换机配置步骤">交换机配置步骤</a></h4></li></ul></ul></div> </div> <div id="divPrevious" class="part clear previous"> <div class="top"> <h3 class="title">最近发表</h3> </div> <div class="side divPrevious"><ul><li><a title="多平台统一管理软件接口,如何实现多平台统一管理软件接口" href="https://www.eolink.com/news/post/89103.html">多平台统一管理软件接口,如何实现多平台统一管理软件接口</a></li> <li><a title="Flask接口签名sign原理与实例代码浅析" href="https://www.eolink.com/news/post/89102.html">Flask接口签名sign原理与实例代码浅析</a></li> <li><a title="java中的接口是类吗" href="https://www.eolink.com/news/post/89100.html">java中的接口是类吗</a></li> <li><a title="vue项目接口域名动态的获取方法" href="https://www.eolink.com/news/post/89099.html">vue项目接口域名动态的获取方法</a></li> <li><a title="zookeeper python接口实例详解" href="https://www.eolink.com/news/post/89097.html">zookeeper python接口实例详解</a></li> <li><a title="Iterator与LIstIterator接口在java中的区别有哪些" href="https://www.eolink.com/news/post/89096.html">Iterator与LIstIterator接口在java中的区别有哪些</a></li> <li><a title="c#自定义Attribute获取接口实现示例代码" href="https://www.eolink.com/news/post/89095.html">c#自定义Attribute获取接口实现示例代码</a></li> <li><a title="hdml指的是什么接口" href="https://www.eolink.com/news/post/89093.html">hdml指的是什么接口</a></li> <li><a title="分析EBS常用接口表" href="https://www.eolink.com/news/post/89092.html">分析EBS常用接口表</a></li> <li><a title="java 单机接口限流处理方案" href="https://www.eolink.com/news/post/89091.html">java 单机接口限流处理方案</a></li> </ul></div> </div> <div id="hot_posts" class="part clear hot_posts"> <div class="top"> <h3 class="title">热评文章</h3> </div> <ul class="hot_posts"><li><h4><a href="https://www.eolink.com/news/post/15822.html" title="在线接口文档管理工具推荐,支持在线测试,HTTP接口文档">在线接口文档管理工具推荐,支持在线测试,HTTP接口</a></h4></li><li><h4><a href="https://www.eolink.com/news/post/15841.html" title="开源的在线接口文档wiki工具Mindoc的介绍与使用,五款WEB前端工程师高效的在线接口文档管理工具">开源的在线接口文档wiki工具Mindoc的介绍与使</a></h4></li><li><h4><a href="https://www.eolink.com/news/post/17591.html" title="如何优雅的进行接口设计?接口设计的六大原则是什么?">如何优雅的进行接口设计?接口设计的六大原则是什么?</a></h4></li><li><h4><a href="https://www.eolink.com/news/post/16804.html" title="什么是API测试,api检测公司">什么是API测试,api检测公司</a></h4></li><li><h4><a href="https://www.eolink.com/news/post/25723.html" title="软件接口设计怎么做?前后端分离软件接口设计思路">软件接口设计怎么做?前后端分离软件接口设计思路</a></h4></li><li><h4><a href="https://www.eolink.com/news/post/25652.html" title="接口管理平台推荐,几大接口管理平台总有一款适合你!">接口管理平台推荐,几大接口管理平台总有一款适合你!</a></h4></li></ul> </div> </div> </div> </section> </div> <footer class="p-footer"> <div class="contant_box"> <div class="discover_tmt"> <h5 class="">发现新网资讯</h5> <div class="text_box"> <a href="#" title="关于新网资讯">关于新网资讯</a> <a href="#" title="移动客户端">移动客户端</a> <a href="#" title="新网资讯">新网资讯</a> <a href="#" title="投稿须知">投稿须知</a> </div> </div> <div class="collaboration_box"> <h5 class="">Eolink</h5> <div class="text_box"> <a href="https://www.foneplatform.com/jscms/" title="全面预算管理">全面预算管理</a> <a href="http://www.58eyou.com/" title="58星座运势">58星座运势</a> </div> </div> <div class="we_img_box clear"> <div class="img_box"> <img src="https://www.eolink.com/news/zb_users/theme/zblog5_news/image/ewm.png" alt="" class="hover_tmt"> </div> </div> </div> <p class="info">© 2023 XWNews <a href="#" target="_blank" rel="nofollow">京ICP备1111040123号-1</a> <span> <a href="https://www.zblogcn.com/">版权归zblog所有</a></span> </p> </footer> <div id="backtop" class="backtop"> <div class="bt-box top"> <i class="fa fa-angle-up fa-2x"></i> </div> </div> <script type='text/javascript' src="https://www.eolink.com/news/zb_users/theme/zblog5_news/script/custom.js"></script> <script type='text/javascript' src="https://www.eolink.com/news/zb_users/theme/zblog5_news/script/nav.js"></script> <link rel="stylesheet" href="https://www.eolink.com/news/zb_users/theme/zblog5_news/share/css/share.min.css"> <script src="https://www.eolink.com/news/zb_users/theme/zblog5_news/share/js/jquery.share.min.js"></script> <!-- Initialize Swiper --> <script> var swiper = new Swiper('.swiper-container', { pagination: '.swiper-pagination', paginationClickable: true, loop: true, autoplay:2000, nextButton: '.swiper-button-next', prevButton: '.swiper-button-prev', spaceBetween: 30, effect: 'fade', }); </script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?556b23f3809179e610086ba68e9a0c89"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script> (()=>{const e="https://analyze.jiasou.cc/api/v1/page_view/report/",n="9e1fab3b60d44b87a9a33c16962df4b1";let t=null;const o=new Proxy({},{get:(e,n)=>localStorage.getItem(window.btoa(n)),set:(e,n,t)=>!!t&&(localStorage.setItem(window.btoa(n),t),!0)});new Promise((t=>{if(o.fingerprint)t();else{const a=function(){var e={};if(e.userAgent=navigator.userAgent||"",e.plugins=[],navigator.plugins&&navigator.plugins.length>0)for(var n=0;n<navigator.plugins.length;n++){var t={name:navigator.plugins[n].name||"",filename:navigator.plugins[n].filename||"",description:navigator.plugins[n].description||""};e.plugins.push(t)}e.languages=navigator.languages||[navigator.language||""],e.timezone=(new Date).getTimezoneOffset(),e.screenResolution={width:window.screen.width||0,height:window.screen.height||0,pixelDepth:window.screen.pixelDepth||0,colorDepth:window.screen.colorDepth||0};var o=document.createElement("canvas").getContext("2d"),a=[],i=["monospace","sans-serif","serif"];for(n=0;n<i.length;n++){var r=i[n];o.font="12px "+r,o.measureText("abcdefghijklmnopqrstuvwxyz0123456789").width>0&&a.push(r)}return e.fonts=a,e.cookieEnabled=navigator.cookieEnabled||!1,e.localStorage=void 0!==window.localStorage,e.sessionStorage=void 0!==window.sessionStorage,e.doNotTrack="1"===navigator.doNotTrack||"1"===window.doNotTrack||"1"===navigator.msDoNotTrack||"yes"===navigator.doNotTrack,e}();fetch(`${e}u/`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({key:n,f:window.btoa(JSON.stringify(a))})}).then((e=>{console.debug("browser fingerprint sent"),200===e.status&&e.json().then((e=>{console.debug("browser fingerprint received",e),o.fingerprint=e.fp,t()}))}))}})).then((()=>{e&&o.fingerprint&&fetch(e+`?${new URLSearchParams({token:n}).toString()}`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({c:window.btoa(JSON.stringify({u:o.fingerprint,l:window.location.href,r:document.referrer}))})}).then((e=>{200==e.status&&e.json().then((e=>{e.track_id&&(t=e.track_id)}))}))})),window.addEventListener("beforeunload",(async n=>{t&&fetch(e+`?${new URLSearchParams({track_id:t}).toString()}`,{method:"GET",headers:{"Content-Type":"text/plain"},keepalive:!0}),n.returnValue=""}))})(); </script><script language="javascript" src="https://www.eolink.com/news/zb_users/plugin/ZF_ad/js/index.js?id=921"></script> <script language="javascript" src="https://www.eolink.com/news/zb_users/plugin/ZF_ad/js/ZF_ad__cookie.js"></script> </body> </html><!--93.71 ms , 18 queries , 1805kb memory , 0 error-->