這些廢棄的 HTML 標籤不要用

2021-01-11 開源中國

HTML 已經發展了多年,現在 W3C 已經發布了 HTML 5.1 的提案推薦標準,一些陳舊廢棄的標籤已經在後繼的標準中逐漸消失。這裡為大家列出那些已經被廢棄 HTML 標籤,看看你是不是還在使用它們。

<acronym>

首字母縮寫,例如 WWW

類似的有<abbr>標籤,表示單詞縮寫,例如 <abbr>inc.</abbr>。語法如下:

<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>標籤只有 IE 支持。

推薦直接給<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>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.

具體用法可以參考 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.

<marquee>

滾動字幕,效果很強大,例如:

<marquee 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>

多用來實現公告,雖然已經過時了,但效果確實很強大,而且支持性良好。

<multicol>

用來實現多列布局,不建議使用,任何主流瀏覽器都不曾支持過。

MDN 稱其從未被任何主流瀏覽器支持過:

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.

<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 的回退)。

<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>

如果需要考慮兼容性的話,可以作為<frame>的回退,建議採用 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>

插入空白(,例如:

    <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>代替。

稿源:黯羽輕揚博客

相關焦點

  • HTML的基本結構、段落標籤、空格標籤、標題標籤、圖片標籤詳解
    本次主要給大家介紹下HTML的基本結構、段落標籤、空格標籤、標題標籤、圖片標籤的用法,用一種相對通俗一點的語言,容易懂的文字讓大家快速掌握html。儘量不用或少用專業術語。以下所寫的內容希望能幫助到大家,供大家在學習HTML中進行參考:
  • 什麼是html中的a標籤?
    什麼是html中的a標籤?大家知道什麼是a標籤嗎,a標籤在html裡面稱為——超連結,起作用就是跳轉頁面,比如從a頁面跳轉到b頁面就需要使用到a標籤,那麼a標籤到底是怎麼使用的,以及a標籤的正確格式是什麼樣的,小編我在下文將為大家一一解讀,那麼大家請看下文:1.超連結——a標籤其作用就是跳轉頁面,傳遞頁面權重,控制頁面結構如圖所示2.a標籤的正確書寫格式是要在html內容標籤裡面書寫才是用的也就是大家常說的
  • 18 HTML的圖片標籤
    DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>圖片標籤</title></head&
  • 認識html,初步了解基本標籤
    1、認識html 俗話說認識一個事物就先要了解它,html就是Hyper Text Markup Language,翻譯為中文就是超文本標記語言,他的文件以.html為擴展名。
  • HTML學習筆記(一、文本修飾標籤)
    </b> bold<br/> strong標籤:<strong>這是一個加粗的效果</strong><br/> i標籤:<i>斜體</i> italic<br/> em標籤:<em>斜體</em><br/> u標籤
  • 8 HTML標題和段落標籤
    現在我用vscode打開之前的first.html這個網頁,在body裡面,把之前寫的東西都刪了,重新輸入內容,比如我寫一個h1標題:<h1>上海簡介</h1>然後ctrl+shift+p打開live server
  • html button標籤是什麼意思
    html button標籤是什麼意思?這篇文章為大家講解了HTML button標籤是什麼意思。一:html button標籤定義和用法:button標籤是什麼意思:<button> 標籤定義一個按鈕。
  • 每天進步一點點,html常用標籤介紹
    有時需要使用html標籤實現各種各樣的需求,所以html標籤會有很多,常用的html標籤也會有很多,今天我們繼續來學習html常用標籤。1、圖片標籤;圖片標籤為<img>,它有一個很重要的屬性就是src,scr指的是圖片的路徑,在瀏覽網頁的時候上面也會出現很多圖片,請看下面實現代碼;下面代碼中有一點需要解釋,就是src如何寫,可以看到下圖中src寫的是..
  • html中標籤的詳細介紹
    本篇將介紹的是html中<col>標籤的用法,有興趣的朋友可以學習一下!在網頁中,表格是經常用到的,接下來介紹的這個標籤就和表格有關係,即<col>標籤。該標籤在表格中起到很重要的作用,我們一起來看看吧!「col」是「column」英文單詞的縮寫,有「列」的意思,那「col」在html中作為標籤又有什麼功能呢?我們一起來看看吧!
  • HTML概念和發展史,以及基本語法常用標籤的使用
    DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>無標題文檔</title>
  • html中select標籤(下拉列表)的詳細介紹
    本篇將介紹html中select標籤(下拉列表)的詳細用法,有興趣的朋友可以了解一下!在網頁中,下拉列表很常見,那你知道在html原始碼中是怎麼實現的嗎?今天小編要分享的就是html中實現下拉列表的標籤,即select標籤。
  • html5 文本相關標籤(基礎三)
    html5 文本相關標籤一、標題 h1、h1、hgroup(標題組)1、什麼情況下使用標題?裡的標題級別是以層級來區分,越靠近body標籤級別越高5、Xhtml1.0 中的標題了解01.html 5:每個區塊裡的主標題均使用h1每個區塊裡的副標題均使用h2網頁中通常擁有多個h1
  • html中a標籤去掉下劃線 - CSDN
    Html布局中,在使用a標籤時瀏覽器默認會顯示連結的下劃線和連結四個狀態(link,isited,hover,active)的默認顏色,但是連結不需要下劃線和顏色變化,只需在style裡面設置a標籤Text-decoration:none;設置color:black;
  • html中option標籤(下拉列表選項)的詳細介紹
    本篇將介紹html中option標籤(下拉列表選項)的詳細用法,有興趣的朋友可以了解一下!在網頁中,下拉列表是一種很常見的顯示效果,你知道在html原始碼中是怎樣實現的嗎?今天小編要介紹的就是跟下拉列表有關的一個標籤,即option標籤。「option」作為英文單詞有「選項」的意思,那它作為html中的標籤又有什麼意思呢?
  • html中表格標題標籤詳細介紹
    本篇將為大家介紹的是<caption>標籤,有興趣的朋友可以學習一下!html中,表格使用的也是挺多的,今天介紹的這個標籤就和表格有關係,它是表格中的一個標籤,即<caption>標籤。「caption」作為英文單詞有「標題」的意思,那我們一起來看看它在html中作為標籤又是充當的是什麼角色。
  • 三分鐘時間:給你講解html中的各種標籤
    話不多說,繼續html的學習:昨天學習了最基礎的文本標籤及屬性,除此之外還有很多其它標籤,今天逐一學習。 一、連結標籤(a標籤)a標籤有一個必不可少的屬性:href。href也就是超連結的意思。二、圖片標籤和列表標籤1圖片標籤image,圖像的意思,簡寫為img,圖片標籤也就是用img來表示。
  • Web前端學習第七課 學會使用html段落標籤和換行標籤
    只要把你的文字放在這個標籤之間,就會在網頁上顯示一個段落。你可以多次使用這個標籤將一篇文章分為多個段落。2.段落內換行標籤當你在段落標籤內不使用換行標籤時,你的屏幕有多寬,在瀏覽器中一行文字就顯示多寬。這樣的頁面非常不美觀。所以,你需要將段落分為幾行來顯示。
  • HTML語義化標籤
    什麼是語義化標籤?所謂語義化,就是用接近自然語言的方式去書寫代碼,讓人類更容易理解,讓機器更容易區分。語言的作用,在於人和人的溝通,程式語言也是如此。在這個網頁當中,存在著大量的div標籤嵌套,為了能夠區分出每個標籤是做什麼的,每個標籤都有自己的class名稱,這個class並不是用來書寫樣式,而是去說明標籤的作用,所以class名稱就是我們傳統的語義化解決方案。到了HTML5時代,除了div這樣的容器之外,推出了更多種類的容器標籤供我們使用,要完成這樣的網頁布局,除了標籤,肯定還需要CSS的配合。
  • 29 HTML中表格的其他特性
    所以<thead>、<tbody>、<tfoot>標籤裡面,又是代表行的<tr>標籤。每一行當中是各自的單元格。所以<tr>標籤裡面是代表單元格的<td>或者<th>標籤。
  • HTML網頁製作常用標籤及說明——前端開發入門
    上篇文章我們介紹了怎麼創建一個最基本的網頁,這篇我們介紹一下經常被使用的標籤及用途。顯示在瀏覽器中的內容都要添加在基本模板中的body標籤的中間,這點一定要記住!!下面的body標籤中各個標籤,做了解釋說明,大概了解各個標籤長什麼樣子,能記住就更好了。