那些不推薦使用的html標籤

ayqy發表於2016-10-12
HTML

那些不推薦使用的html標籤

acronym

首字母縮寫，例如WWW

類似的有abbr標籤，表示單詞縮寫，例如inc.。語法如下：

<acronym title="World Wide Web">WWW</acronym>
<abbr title="incorporated">inc.</abbr>

推薦用abbr，不要用acronym（忽略上面提到的語義上的差異）

applet

Java小應用程式，主要提供繪圖功能（在頁面上通過程式碼繪製一些東西），例如：

<applet code="ShowImage.class" width=600 height=400 archive="Imagetest.jar"></applet>

目前幾乎沒什麼用了，因為執行需要JRE，而目前主流瀏覽器並不預設安裝JRE

推薦使用canvas繪圖，或者用object+embed嵌入flash代替applet

注意：使用object+embed是為了更好的相容性，如果場景允許，推薦使用object

basefont

basefont標籤定義基準字型。該標籤可以為文件中的所有文字定義預設字型顏色、字型大小和字型系列，例如：

<basefont color="red" size="5" face="Arial" />

basefont標籤只有[IE9-]支援

推薦直接給body元素定義預設字型，所有子元素都會繼承這些屬性值

bgsound

用來新增背景音樂，例如：

<bgsound src="your.mid" autostart="true" loop="infinite">

推薦使用audio或者object+embed來代替，例如：

<embed src="your.mid" autostart="true" loop="true" hidden="true">

big

用來放大字型，放大一號（巢狀多層可以放大更多），不支援的瀏覽器顯示粗體，例如：

<big>大1號</big><big><big>大2號</big></big>

至於“號”是怎麼定義的就別管了，不推薦使用，建議根據語義採用em、strong或者自定義樣式類代替

blink

可以實現閃爍效果，例如：

<blink>Why would somebody use this?</blink>

支援性很差，不推薦使用，同樣不推薦使用（各大瀏覽器支援blink值，但沒有任何效果）：

<p style="text-decoration: blink">This should be avoided as well.</p>

建議採用animation代替

center

使內容居中，例如：

<center>文字及子元素會居中</center>

效果類似於CSS：

text-align: center;

不建議使用，確實沒有任何理由去用

dir

目錄列表，例如：

<dir>
    <li>html</li>
    <li>xhtml</li>
    <li>css</li>
</dir>

效果和ul基本相同，瀏覽器預設樣式下列表項的左邊距有細微差異

不推薦使用，建議根據語義採用ul、ol或者dl

font

用來定義字型、字號和顏色，例如：

<font face="verdana" color="green" size="3">This is some text!</font>

屬性值和basefont一樣

不推薦使用，建議用CSS代替，沒理由用這個標籤

frame

配合frameset分欄，例如：

<!DOCTYPE html>
<html>

<frameset cols="25%,*,25%">
  <frame src="frame_a.htm">
  <frame src="frame_b.htm">
  <frame src="frame_c.htm">
</frameset>

</html>

注意：用frameset替換掉body

複雜的後臺頁面會用到frameset+frame佈局，當然也可以採用float/flex+Ajax實現，根據具體場景來定

frameset

見frame

hgroup

給一系列標題分組，例如：

<hgroup>
   <h1>The reality dysfunction</h1>
   <h2>Space is not the only void</h2>
</hgroup>

雖然提供了一點語義，但因為已經過時，所以不推薦使用

建議採用header代替，例如：

<header>
   <h1>The reality dysfunction</h1>
   <p class="subheading">Space is not the only void</p>
</header>

isindex

單行文字控制元件，初始顯示prompt值，例如：

<isindex prompt="string" />

目前支援性很差，不推薦使用，建議用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

滾動字幕，效果很強大，例如：

<marquee style="height: 104px; width: 22.35%; margin: 10px 20px; background-color: rgb(204, 255, 255);" bgcolor="#ccffff" vspace="10" direction="up" height="104" width="22.35%" loop="3" scrollamount="1" scrolldelay="10" hspace="20">
<p align="center"><font color="#000000">此處輸入滾動內容</font></p></marquee>

<marquee>這裡是輸入文字的地方，還可以放圖片程式碼、Flash動畫程式碼和gif動態小圖程式碼。</marquee>

更多效果可以參考移動標籤（marquee）屬性詳解

多用來實現公告，雖然已經過時了，但效果確實很強大，而且支援性良好。更多精彩內容關注微信公眾號：全棧開發者中心（admin10000_com）

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

禁止換行，例如：

<p>Our telephone number is <nobr>0800 123 123 123</nobr>.</p>

不推薦使用，建議用CSS代替：

white-space: nowrap;

noembed

在瀏覽器不支援embed時，顯示內容，類似於noscript，例如：

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

不推薦使用，如果需要考慮相容性的話，建議採用object+embed+noembed（embed/noembed作為object的fallback）

noframes

在瀏覽器不支援frameset+frame時，顯示內容，類似於noscript，例如：

<html>

<frameset cols="25%,50%,25%">
  <frame src="frame_a.htm">
  <frame src="frame_b.htm">
  <frame src="frame_c.htm">
  <noframes>Sorry, your browser does not handle frames!</noframes>
</frameset>

</html>

noframe標籤中可以包含任何能夠出現在body中的標籤

如果需要考慮相容性的話，可以作為frame的fallback，建議採用float/flex+Ajax實現，根據具體場景來定

plaintext

忽略內容中的html標籤，作用類似於pre，例如：

<p>The markup for this is:</p>
<plaintext>
    <h1>Main heading goes here</h1>
    <p>First paragraph goes here</p>
    <h2>Sub-heading goes here</h2>
</plaintext>.

</body>
</html>

不推薦使用，建議根據語義用pre或者code代替

spacer

插入空白（white spaces），例如：

<span>Just a text node</span>
<spacer type="horizontal" size="10"></spacer>
<span>Just another text node</span>
<spacer type="block" width="10" height="10"></spacer>

主流瀏覽器都不支援，不推薦使用

strike

刪除線，效果類似於del和s，例如：

<p>Version 2.0 is <strike>not yet available!</strike> now available!</p>

不推薦使用，建議用del代替

tt

鍵盤輸入（teletype），例如：

<p><tt>Teletype text</tt></p>

不推薦使用，建議根據語義用kbd（鍵盤按鍵）、var（變數）、code（程式碼）、samp（樣例輸出）或者CSS代替

xmp

80列的樣例輸出，樣式效果類似於pre，語義類似於samp，例如：

<xmp>
Stock ID    Description             Price         Quantity in Stock
--------    -----------             -----         -----------------
116         Inflatable Armchair     21.50                13
119         Walkie Talkie           40.20                44
</xmp>

目前瀏覽器支援該標籤，但不限制80列

不推薦使用，建議採用samp代替

相關文章