不建議使用的HTML標籤小結

巴扎黑
發布: 2017-03-18 15:12:46
原創
1172 人瀏覽過

那些不建議使用的html標籤

# acronym

首字母縮寫,例如

類似的有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

引自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代替

以上是不建議使用的HTML標籤小結的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!