首頁 web前端 html教學 html中不建議使用的標籤

html中不建議使用的標籤

Apr 09, 2017 am 09:59 AM

那些不建議使用的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中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

HTML 中的表格邊框 HTML 中的表格邊框 Sep 04, 2024 pm 04:49 PM

HTML 表格邊框指南。在這裡,我們以 HTML 中的表格邊框為例,討論定義表格邊框的多種方法。

HTML 中的巢狀表 HTML 中的巢狀表 Sep 04, 2024 pm 04:49 PM

這是 HTML 中巢狀表的指南。這裡我們討論如何在表中建立表格以及對應的範例。

HTML 左邊距 HTML 左邊距 Sep 04, 2024 pm 04:48 PM

HTML 左邊距指南。在這裡,我們討論 HTML margin-left 的簡要概述及其範例及其程式碼實作。

HTML 表格佈局 HTML 表格佈局 Sep 04, 2024 pm 04:54 PM

HTML 表格佈局指南。在這裡,我們詳細討論 HTML 表格佈局的值以及範例和輸出。

HTML 輸入佔位符 HTML 輸入佔位符 Sep 04, 2024 pm 04:54 PM

HTML 輸入佔位符指南。在這裡,我們討論 HTML 輸入佔位符的範例以及程式碼和輸出。

HTML 有序列表 HTML 有序列表 Sep 04, 2024 pm 04:43 PM

HTML 有序列表指南。在這裡我們也分別討論了 HTML 有序列表和類型的介紹以及它們的範例

在 HTML 中移動文字 在 HTML 中移動文字 Sep 04, 2024 pm 04:45 PM

HTML 中的文字移動指南。在這裡我們討論一下marquee標籤如何使用語法和實作範例。

HTML onclick 按鈕 HTML onclick 按鈕 Sep 04, 2024 pm 04:49 PM

HTML onclick 按鈕指南。這裡我們分別討論它們的介紹、工作原理、範例以及各個事件中的onclick事件。

See all articles