那些不推荐使用的html标签(以下哪些不是html标签?)

网友投稿 1056 2022-07-27

那些不推荐使用的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

目录列表,例如:

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

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

font

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

This is some text!

属性值和basefont一样

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

frame

配合frameset分栏,例如:

注意:用frameset替换掉body

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

frameset

见frame

hgroup

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

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

建议采用header代替,例如:

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,例如:

Inflate the tyre by holding the</p><p>pump at 90 degree angle to the valve

You can inflate the tyre by holding the pump at 90 degree angle

to the valve, as shown in the image above.

不推荐使用,如果需要考虑兼容性的话,建议采用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:

</plaintext></p><p> </p><p> </p><p>First paragraph goes here</p><p> </p><p>.</p><p></p><p></p><p> <strong>版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。</strong> </p></div> <div class="article_footer clear"> <div class="fr tag">标签:<a href="https://www.finclip.com/news/tags-398.html">例如</a> <a href="https://www.finclip.com/news/tags-399.html">推荐</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.finclip.com/news/f/311.html">七种css方式让一个容器水平垂直居中(div盒子水平垂直居中)</a> </div> <div class="post-next fr"> <span>下一篇:</span><a href="https://www.finclip.com/news/f/315.html">史上最强大的40多个纯CSS绘制的图形(css图形化编程工具)</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.finclip.com/news/f/2719.html"><img src="https://www.finclip.com/news/zb_users/cache/ly_autoimg/m/MjcxOQ.jpg"></a></div> <div class="related_detail"> <h3><a href="https://www.finclip.com/news/f/2719.html" title="如何高效地学习和工作:计算机行业人员出门便携装备推荐">如何高效地学习和工作:计算机行业人员出门便携装备推荐</a></h3> <div class="meta"> <span><i class="fa fa-eye"></i>1056</span> <span><i class="fa fa-clock-o"></i>2022-07-27</span> </div> </div> </article> <article class="fl"> <div class="related_img"><a href="https://www.finclip.com/news/f/2583.html"><img src="https://www.finclip.com/news/zb_users/cache/ly_autoimg/m/MjU4Mw.jpg"></a></div> <div class="related_detail"> <h3><a href="https://www.finclip.com/news/f/2583.html" title="论文笔记:A Survey on Tag Recommendation Methods 上">论文笔记:A Survey on Tag Recommendation Methods 上</a></h3> <div class="meta"> <span><i class="fa fa-eye"></i>1056</span> <span><i class="fa fa-clock-o"></i>2022-07-27</span> </div> </div> </article> <article class="fl"> <div class="related_img"><a href="https://www.finclip.com/news/f/1822.html"><img src="https://www.finclip.com/news/zb_users/cache/ly_autoimg/m/MTgyMg.jpg"></a></div> <div class="related_detail"> <h3><a href="https://www.finclip.com/news/f/1822.html" title="Python编程用什么笔记本?(学Python用什么笔记本)">Python编程用什么笔记本?(学Python用什么笔记本)</a></h3> <div class="meta"> <span><i class="fa fa-eye"></i>1056</span> <span><i class="fa fa-clock-o"></i>2022-07-27</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.finclip.com/news/zb_system/cmd.php?act=cmt&amp;postid=313&amp;key=b262a2735f8ba6dfc2f876713cd35524"> <input type="hidden" name="inpId" id="inpId" value="313"/> <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="divPrevious" class="part clear previous"> <div class="top"> <h3 class="title">最近发表</h3> </div> <div class="side divPrevious"><ul><li><a title="小程序开发设计在提升企业数字化转型效率中的关键作用" href="https://www.finclip.com/news/f/88007.html">小程序开发设计在提升企业数字化转型效率中的关键作用</a></li> <li><a title="企业如何利用flutter小程序提升管理与运营效率" href="https://www.finclip.com/news/f/88006.html">企业如何利用flutter小程序提升管理与运营效率</a></li> <li><a title="洞察企业在使用vue小程序时,如何结合FinClip的监管与管理能力提高合规性和效率?" href="https://www.finclip.com/news/f/88005.html">洞察企业在使用vue小程序时,如何结合FinClip的监管与管理能力提高合规性和效率?</a></li> <li><a title="随着数字化转型的不断深入,小程序技术标准如何在金融、安全和物联网等领域实现高效合规运营?" href="https://www.finclip.com/news/f/88004.html">随着数字化转型的不断深入,小程序技术标准如何在金融、安全和物联网等领域实现高效合规运营?</a></li> <li><a title="如何通过微信小程序 API 优化企业管理与服务,提升数字化转型效率?" href="https://www.finclip.com/news/f/88003.html">如何通过微信小程序 API 优化企业管理与服务,提升数字化转型效率?</a></li> <li><a title="小程序行为分析助力App灵活管理和数字化转型" href="https://www.finclip.com/news/f/88002.html">小程序行为分析助力App灵活管理和数字化转型</a></li> <li><a title="洞察如何利用FinClip的小程序容器技术实现高效能Windows应用管理,助力企业数字化转型" href="https://www.finclip.com/news/f/88001.html">洞察如何利用FinClip的小程序容器技术实现高效能Windows应用管理,助力企业数字化转型</a></li> <li><a title="如何在数字化转型中利用移动应用开发提升企业敏捷性与市场适应性?" href="https://www.finclip.com/news/f/87999.html">如何在数字化转型中利用移动应用开发提升企业敏捷性与市场适应性?</a></li> <li><a title="小程序容器助力企业在金融与物联网领域实现高效合规运营,带来的新机遇与挑战如何管理?" href="https://www.finclip.com/news/f/87997.html">小程序容器助力企业在金融与物联网领域实现高效合规运营,带来的新机遇与挑战如何管理?</a></li> <li><a title="小程序引擎如何促进企业在金融行业的数字化转型及合规运营" href="https://www.finclip.com/news/f/87996.html">小程序引擎如何促进企业在金融行业的数字化转型及合规运营</a></li> </ul></div> </div> <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.finclip.com/news/category-2.html" title="小程序SDK">小程序SDK</a></h4></li><li><h4><a href="https://www.finclip.com/news/category-3.html" title="Finclip技术文档">Finclip技术文档</a></h4></li><li><h4><a href="https://www.finclip.com/news/category-4.html" title="小程序开发">小程序开发</a></h4></li><li><h4><a href="https://www.finclip.com/news/category-5.html" title="小程序容器">小程序容器</a></h4></li><li><h4><a href="https://www.finclip.com/news/category-6.html" title="小程序框架">小程序框架</a></h4></li><li><h4><a href="https://www.finclip.com/news/category-7.html" title="Finclip小程序平台">Finclip小程序平台</a></h4></li><li><h4><a href="https://www.finclip.com/news/category-8.html" title="Finclip用户投稿">Finclip用户投稿</a></h4></li><li><h4><a href="https://www.finclip.com/news/category-9.html" title="车联网">车联网</a></h4></li></ul></ul></div> </div> <div id="tuijianwenzhang" class="part clear 推荐文章"> <div class="top"> <h3 class="title">推荐文章</h3> </div> <div class="side tuijianwenzhang"><ul><ul class="hot_posts"> <li><h4><a href="https://www.finclip.com/news/f/9435.html" title="小程序SDK是什么意思?小程序sdk和插件有什么区别?">小程序SDK是什么意思?小程序sdk和插件有什么区别?</a></h4></li><li><h4><a href="https://www.finclip.com/news/f/58967.html" title="小程序支付功能怎么实现?一篇详细教程来了!">小程序支付功能怎么实现?</a></h4></li><li><h4><a href="https://www.finclip.com/news/f/58064.html" title="企业app开发(企业app开发定制外包)">企业app开发流程是什么?</a></h4></li><li><h4><a href="https://www.finclip.com/news/f/52142.html" title="app运营模式框架(app运营体系搭建)">app运营模式有哪些?</a></h4></li><li><h4><a href="https://www.finclip.com/news/f/21082.html" title="小程序成为多社交平台引流利器,小程序多端引流怎么做">小程序多端引流怎么做?</a></h4></li><li><h4><a href="https://www.finclip.com/news/f/48029.html" title="小程序生态分析(小程序经济环境分析)">小程序生态分析的机会和威胁</a></h4></li><li><h4><a href="https://www.finclip.com/news/f/54499.html" title="flutter 小程序(flutter 小程序方案)">Flutter入门这一篇效率文章就够了</a></h4></li><li><h4><a href="https://www.finclip.com/news/f/39393.html" title="原生与跨平台解决方案分析,跨平台软件开发技术方案">原生与跨平台解决方案分析,跨平台软件开发技术方案</a></h4></li><li><h4><a href="https://www.finclip.com/news/f/58899.html" title="热更新技术:让软件更新变得更加轻松快速">热更新技术:让软件更新变得更加轻松快速</a></h4></ul></ul></div> </div> <div id="jiejuefangan" class="part clear 解决方案"> <div class="top"> <h3 class="title">解决方案</h3> </div> <div class="side jiejuefangan"><ul><ul class="hot_posts"> <li><h4><a href="https://www.finclip.com/solutions/bank" title="银行解决方案">银行解决方案</a></h4></li><li><h4><a href="https://www.finclip.com/solutions/broker" title="证券解决方案">证券解决方案</a></h4></li><li><h4><a href="https://www.finclip.com/solutions/internet" title="互联网解决方案">互联网解决方案</a></h4></li><li><h4><a href="https://www.finclip.com/solutions/oa" title="政企OA解决方案">政企OA解决方案</a></h4></li><li><h4><a href="https://www.finclip.com/solutions/technology" title="科技解决方案">科技解决方案</a></h4></li><li><h4><a href="https://www.finclip.com/solutions/car" title="智能车载解决方案">loT解决方案</a></h4></li><li><h4><a href="https://www.finclip.com/solutions/zerotrust" title="信任解决方案">信任解决方案</a></h4></li></ul></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.finclip.com/news/f/21046.html" title="AppCan:基于混合模式的移动应用开发,移动混合模式应用开发方案">AppCan:基于混合模式的移动应用开发,移动混合模</a></h4></li><li><h4><a href="https://www.finclip.com/news/f/7989.html" title="Hybrid App混合模式开发的了解">Hybrid App混合模式开发的了解</a></h4></li><li><h4><a href="https://www.finclip.com/news/f/5713.html" title="小程序容器技术助力券商数字营销突围,小程序容器化的意义">小程序容器技术助力券商数字营销突围,小程序容器化的意</a></h4></li><li><h4><a href="https://www.finclip.com/news/f/14756.html" title="用mpvue开发微信小程序基础知识(vue.js开发微信小程序)">用mpvue开发微信小程序基础知识(vue.js开发</a></h4></li><li><h4><a href="https://www.finclip.com/news/f/33154.html" title="小程序多端框架全面测评对比,强烈推荐!">小程序多端框架全面测评对比,强烈推荐!</a></h4></li><li><h4><a href="https://www.finclip.com/news/f/69022.html" title="券商app架构 - 解析券商应用程序的构建与设计">券商app架构 - 解析券商应用程序的构建与设计</a></h4></li></ul> </div> <div id="sidebar_ad" class="part clear sidebar_ad"> <div class="part sidebar_ad"><div class="active"><a href='http://www.finclip.com/?channel=jtseo' target='_blank'><img style='width:100%;height:100%' src='https://www.finclip.com/news/zb_users/upload/2022/11/%E4%B8%80%E7%AB%AF%E5%BC%80%E5%8F%91%EF%BC%8C%E8%B7%A8%E7%AB%AF%E8%BF%90%E8%A1%8C-370_680.png'></a><br></div></div> </div> </div> </div> </section> </div> <footer class="p-footer"> <div class="contant_box"> <div class="discover_tmt"> <div class="text_box"> <h5 class="" style="margin-bottom: 5px; margin-right: 5px;"><a href="https://www.finclip.com/" title="Finclip小程序容器技术" style="text-align: left;">小程序容器技术</a></h5> <a href="https://www.finclip.com/product/wxsupport/" title="微信生态支持" target="_blank" style="text-decoration: none; color: black; margin-right: 5px;" onmouseover="this.style.textDecoration='underline'; this.style.color='blue'" onmouseout="this.style.textDecoration='none'; this.style.color='black'" onclick="this.style.textDecoration='underline'; this.style.color='blue'">微信生态支持</a> <a href="https://www.finclip.com/product/management" title="小程序生命周期管理" target="_blank" style="text-decoration: none; color: black; margin-right: 5px;" onmouseover="this.style.textDecoration='underline'; this.style.color='blue'" onmouseout="this.style.textDecoration='none'; this.style.color='black'" onclick="this.style.textDecoration='underline'; this.style.color='blue'">小程序生命周期管理</a> <a href="https://www.finclip.com/product/developertools" title="开发生态工具完善" target="_blank" style="text-decoration: none; color: black; margin-right: 5px;" onmouseover="this.style.textDecoration='underline'; this.style.color='blue'" onmouseout="this.style.textDecoration='none'; this.style.color='black'" onclick="this.style.textDecoration='underline'; this.style.color='blue'">开发生态工具完善</a> <a href="https://www.finclip.com/product/sdk" title="小程序SDK" target="_blank" style="text-decoration: none; color: black; margin-right: 5px;" onmouseover="this.style.textDecoration='underline'; this.style.color='blue'" onmouseout="this.style.textDecoration='none'; this.style.color='black'" onclick="this.style.textDecoration='underline'; this.style.color='blue'">小程序SDK</a> <a href="https://www.finclip.com/technology-alliance-partner" title="技术生态" target="_blank" style="text-decoration: none; color: black; margin-right: 5px;" onmouseover="this.style.textDecoration='underline'; this.style.color='blue'" onmouseout="this.style.textDecoration='none'; this.style.color='black'" onclick="this.style.textDecoration='underline'; this.style.color='blue'">技术生态</a> </div> </div> <div class="collaboration_box"> <h5>交流与合作</h5> <div class="text_box"> <a href="#" title="地址">地址:深圳市福田区凯丰路 10号 国际金融科技城 19层</a> <a href="#" title="电话">电话:0755-86967467</a> <a href="#" title="邮箱">邮箱:contact@finogeeks.com</a> </div> </div> <div class="we_img_box clear"> <div class="img_box"> <img src="https://www.finclip.com/news/zb_users/theme/zblog5_news/image/ewm.png" alt="" class="hover_tmt"> </div> </div> </div> <p class="info"> <a href="https://beian.miit.gov.cn" target="_blank" rel="nofollow">粤ICP备2023123045号-2 </a> <span> <a href="#"></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> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?b724df561c68ae808f6c323456db4430"; 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="a92e22b2e862418c89a0fb0e07e0b287";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.finclip.com/news/zb_users/plugin/ZF_ad/js/index.js?id=536"></script> <script language="javascript" src="https://www.finclip.com/news/zb_users/plugin/ZF_ad/js/ZF_ad__cookie.js"></script> </body> </html> <!--2,220.63 ms , 37 queries , 21410kb memory , 0 error-->