為什么某些HTML元素被棄用?
互聯(lián)網(wǎng)已經(jīng)存在了很長時間,并且隨著時間的流逝,我們已經(jīng)改變了對網(wǎng)頁設(shè)計的思考方式。隨著新的更好的替代方法的產(chǎn)生,許多舊的技術(shù)和做事方法已被淘汰,我們說它們已被棄用。
不推薦使用(Deprecated)。這是一個我們經(jīng)常使用和看到的詞。但你有沒有停下來想一想,它在實踐中意味著什么?有哪些被廢棄的網(wǎng)頁元素的例子,為什么我們不再使用它們呢?
什么是棄用?
通常情況下,為了向后兼容,舊的功能仍然可以使用(所以遺留項目不會被破壞)。從本質(zhì)上說,這意味著你在技術(shù)上仍然可以用傳統(tǒng)的方式做事。它可能仍然可以工作,但也許使用新的方式會更好。
另一種常見的情況是,當技術(shù)元素被廢止時,作為其未來被刪除的前奏(我們有時稱之為 "日落西山 "功能)。這為每個人提供了從舊的工作方式過渡到新系統(tǒng)的時間。
為什么HTML元素會被棄用?
多年來,我們對HTML的思考方式也在不斷發(fā)展。最初,它是一種用于在線顯示和樣式化內(nèi)容的通用標記語言。
隨著時間的流逝,隨著外部樣式表變得越來越重要,人們開始以不同的方式考慮Web開發(fā)變得更加有意義——將關(guān)注點分離,其中HTML定義頁面的內(nèi)容,而CSS處理頁面的表現(xiàn)。
樣式和內(nèi)容的這種分離帶來了許多好處:
- 避免重復:如果你可以讓一個CSS類一次處理所有的紅色文本,則在頁面上為每個紅色文本實例重復執(zhí)行代碼既麻煩又效率低下。
- 易于管理:有了中央樣式表控制的所有表現(xiàn)形式,你可以不費吹灰之力就能對整個網(wǎng)站進行修改。
- 可讀性:在查看一個網(wǎng)站的源碼時,將內(nèi)容和樣式整齊地抽象成單獨的文件,內(nèi)容和樣式的代碼就容易理解了很多。
- 緩存:絕大多數(shù)網(wǎng)站的所有頁面都具有一致的樣式,那么為什么要讓瀏覽器一次又一次下載這些樣式定義?將樣式文件代碼放在專用的樣式表中,可以進行緩存和重用以節(jié)省帶寬。
- 開發(fā)人員專業(yè)化:大型網(wǎng)站項目可能需要多個設(shè)計師和開發(fā)人員來工作,每個項目都有各自的專業(yè)領(lǐng)域。讓每個CSS專家都可以在自己的文件中處理項目,這對每個人都容易得多。
- 用戶選項:將樣式與內(nèi)容分開可以使開發(fā)人員輕松地向最終用戶提供顯示選項(日益流行的“夜間模式”就是一個很好的例子)或其他可訪問性的顯示模式。
- 響應速度和設(shè)備獨立性:將內(nèi)容代碼和視覺呈現(xiàn)代碼分開,可以輕松構(gòu)建以不同屏幕分辨率以不同方式顯示的網(wǎng)站。
然而,在HTML的早期,有相當數(shù)量的標記設(shè)計用于控制頁面的外觀和內(nèi)容。你可能會看到如下代碼:
- <center>
- <font face="verdana" color="#2400D3">Hello world!</font>
- </center>
…由于上述關(guān)注點分離,現(xiàn)在所有這些都已棄用。
現(xiàn)在不建議使用哪些HTML元素?
初學前端必看,為什么某些HTML元素被棄用?
從HTML5版本開始,不鼓勵使用以下元素:
- <acronym> (使用 <abbr> 代替)
- <applet> (使用 <object>)
- <basefont> (使用CSS字體屬性, 比如 font-size, font-family 等等)
- <big> (使用CSS font-size)
- <center> (使用CSS text-align)
- <dir>(使用 <ul>)
- <font> (使用CSS字體屬性)
- <frame>(使用 <iframe>)
- <frameset>(不再需要)
- <isindex>(不再需要)
- <noframes> (不再需要)
- <s>(使用 text-decoration: line-through)
- <strike>(使用 text-decoration: line-through )
- <tt>(使用 <code>)
延續(xù)了內(nèi)容和表現(xiàn)形式分離的主題,CSS是一種更有效的方法,可以在不雜亂的主HTML文檔代碼的情況下,創(chuàng)建視覺布局。
那么,什么時候應該使用 ?當然,實際的表格數(shù)據(jù)!如果你需要顯示棒球比分,統(tǒng)計數(shù)據(jù)或其他方面的列表,
是你的朋友。
你可能會說:“等一下。 為什么仍然認為粗體和斜體HTML標簽還可以呢?那些樣式的視覺樣式不是應該用CSS處理的嗎?”
這是一個很好的問題,當我們考慮棄用 <center> 和 <s> 之類的其他標簽時,似乎很難回答。這里發(fā)生了什么?
簡短而簡單的答案是,如果不是因為 <b> 和 <i> 如此廣泛和有用,它們很可能會被淘汰。相比之下,CSS替代品似乎有些笨拙:
- <style>
- .emphasis { font-weight:bold }
- </style>
- This is a <span class="emphasis">bold</span> word!
- This is a <span style="font-weight:bold">bold</span> word!
- This is a <b>bold</b> word!
這很重要,因為它可以幫助屏幕閱讀器和搜索爬蟲程序更好地理解這些標簽中包含的內(nèi)容的用途。出于某些原因,我們可能用一個斜體來表示一個單詞,例如增加重點,調(diào)用創(chuàng)意作品的標題,引用科學名稱等等。我們可能會出于幾個原因?qū)⒁粋€詞斜體化,比如說增加強調(diào),引用一個創(chuàng)意作品的標題,引用一個學名等等。讀者如何知道是否要把口語化的重點放在這個詞上?
<b> 和 <i> 有同伴,包括 <strong>,<em> 和 <cite>,這些標記一起使文本的含義上下文更加清晰:
- <b> 用于引起人們對文本的注意,而沒有給予任何其他重視。當我們希望引起人們注意而不改變屏幕閱讀器讀取文本的字形時,或者不增加搜索引擎內(nèi)容的附加重量或含義時,使用此字詞。
- <strong> 與 <b> 很像,但它標志著某些事情的重要性。這與在增加對某個單詞的偏重時更改語音的變化相同。
- <i> 斜體化文本,而沒有給予任何其他含義或重點。非常適合寫出通常是斜體的內(nèi)容,例如動物的學名。
- <em> 與 <i> 相似,因為它使文本變?yōu)樾斌w,但是它提供了額外的強調(diào)(因此標記名稱),而在上下文中沒有增加更多的重要性。
- <cite> 是我們用來指代創(chuàng)意作品的標題,例如《沉默的羔羊》這樣的電影。通過這種方式,文本可以設(shè)置樣式,但不會影響朗讀句子的方式。
一般來說,規(guī)則是,<b> 和 <i> 只能在萬不得已的情況下使用,如果你無法找到更適合你的需求。這種語義含義使 <b> 和 <i> 繼續(xù)在我們現(xiàn)代的HTML元素數(shù)組中占有一席之地,并在其他類似的樣式標簽被淘汰后得以幸存。
在相關(guān)說明中,<u>(下劃線標記)曾被棄用,但由于具有某些語義用途(例如,注釋拼寫錯誤),因此已在HTML5中恢復。
還有許多其他HTML元素可以為內(nèi)容賦予樣式,但主要用于為內(nèi)容提供語義。
不死的HTML屬性
今天,一些被淘汰的元素在網(wǎng)絡(luò)上仍在廣泛使用。畢竟,它們?nèi)匀挥行?mdash;—只是被淘汰了。
有的時候,你一直在用的東西還沒有被傳開,其實已經(jīng)不是以前的方法了。
這樣一個不死的HTML遺跡就是在其他有效標簽中的 align 屬性,尤其是圖片。你可能會看到帶有 border 屬性的標記,盡管該屬性早就被棄用了。當然,CSS是這種樣式表示的首選和現(xiàn)代方法。
對于任何一個web開發(fā)者來說,跟上時代的發(fā)展是關(guān)鍵。確保你的代碼遵循當前的建議,同時避免遺留元素,是一個基本的最佳實踐。它不僅可以確保你的網(wǎng)站長期持續(xù)工作,而且還能很好地配合未來的網(wǎng)絡(luò)。