為什么 HTML5 要廢棄一些標(biāo)簽？
在深入了解具體標(biāo)簽之前，我們先思考一個(gè)問(wèn)題：為什么要有“廢棄”這個(gè)操作？主要原因有以下幾點(diǎn)：
- 關(guān)注點(diǎn)分離：早期的 HTML 標(biāo)簽很多都帶有樣式屬性，比如
<font> 用來(lái)定義字體和顏色。HTML5 強(qiáng)調(diào)結(jié)構(gòu)與表現(xiàn)分離，樣式應(yīng)該交給 CSS 來(lái)處理。 - 提升語(yǔ)義化：HTML5 引入了更多語(yǔ)義化標(biāo)簽（如
<article>, <nav>, <aside> 等），使得網(wǎng)頁(yè)結(jié)構(gòu)更清晰，也更利于 SEO 和無(wú)障礙訪問(wèn)。一些舊的、語(yǔ)義模糊或不正確的標(biāo)簽自然就被淘汰了。 - 提升性能和安全性：某些舊標(biāo)簽（如
<applet>）可能存在安全隱患或性能問(wèn)題。 - 避免冗余和混淆：一些功能重復(fù)或已不再推薦使用的標(biāo)簽被廢棄，以簡(jiǎn)化 HTML 規(guī)范。
了解了這些原因，我們?cè)賮?lái)看具體的廢棄標(biāo)簽就更容易理解了。
純表現(xiàn)型標(biāo)簽：讓 CSS 來(lái)接管樣式
這類(lèi)標(biāo)簽主要用于控制頁(yè)面的外觀，但在 HTML5 中，它們的職責(zé)已經(jīng)完全交給了 CSS。
1. <font> 和 <basefont>
這兩個(gè)標(biāo)簽曾經(jīng)是控制文字大小、顏色和字體的主力。
舊代碼示例 (不推薦)：
<font color="red" size="5" face="Arial">這是紅色的Arial字體，5號(hào)大小。</font>
現(xiàn)代替代方案 (使用 CSS)：
<p class="custom-text">這是紅色的Arial字體，5號(hào)大小。</p>
.custom-text {
color: red;
font-size: 20px;
font-family: Arial, sans-serif;
}
通過(guò)為 <p> 標(biāo)簽（或其他任何文本容器標(biāo)簽）添加一個(gè)類(lèi)名 custom-text，然后在 CSS 中定義這個(gè)類(lèi)的樣式，我們可以實(shí)現(xiàn)同樣甚至更豐富的效果，并且代碼更清晰，易于維護(hù)。
2. <center>
顧名思義，這個(gè)標(biāo)簽用于將其中的內(nèi)容居中顯示。
舊代碼示例 (不推薦)：
<center>
<p>這段文字會(huì)居中顯示。</p>
<img src="your-image.jpg" alt="居中圖片">
</center>
現(xiàn)代替代方案 (使用 CSS)：
對(duì)于塊級(jí)元素居中：
<div class="center-container">
<p>這段文字會(huì)居中顯示。</p>
<img src="your-image.jpg" alt="居中圖片" style="display: block; margin: 0 auto;">
</div>
.center-container p {
text-align: center;
}
.center-container-flex {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
對(duì)于文本內(nèi)容，可以使用 text-align: center;。對(duì)于塊級(jí)元素（如 <div>, <p>, <img> 設(shè)為 display:block 后），可以使用 margin: 0 auto; 來(lái)實(shí)現(xiàn)水平居中。更現(xiàn)代的布局方式如 Flexbox 和 Grid 也能非常方便地實(shí)現(xiàn)各種居中效果。
3. <b>, <i>, <u>, <strike>, <big>, <tt>
這些標(biāo)簽也主要用于改變文本的視覺(jué)樣式：
<b>: 加粗 (Bold)<i>: 斜體 (Italic)<u>: 下劃線(xiàn) (Underline)<strike> (或 <s>): 刪除線(xiàn) (Strikethrough)<big>: 放大字號(hào)<tt>: 打字機(jī)字體 (Teletype)
現(xiàn)代替代方案：
強(qiáng)調(diào)語(yǔ)義時(shí)： <strong> 替代 <b> (表示重要性) <em> 替代 <i> (表示強(qiáng)調(diào))
純樣式時(shí) (使用 CSS)： font-weight: bold; 替代 <b> font-style: italic; 替代 <i> text-decoration: underline; 替代 <u> text-decoration: line-through; 替代 <strike> 或 <s> (注意：<s> 仍是有效的 HTML5 標(biāo)簽，表示不再準(zhǔn)確或相關(guān)的內(nèi)容) font-size: larger; 或具體值替代 <big> font-family: monospace; 替代 <tt>
代碼示例：
<p>
<strong>這段文字很重要。</strong>
<em>這段文字需要強(qiáng)調(diào)。</em>
<span style="font-weight: bold;">這段文字只是視覺(jué)上加粗。</span>
<span style="font-style: italic;">這段文字只是視覺(jué)上傾斜。</span>
<span style="text-decoration: underline;">這段文字有下劃線(xiàn)。</span>
<span style="text-decoration: line-through;">這段文字有刪除線(xiàn)。</span>
<s>這段內(nèi)容已不再準(zhǔn)確。</s>
<span style="font-size: larger;">這段文字稍大一些。</span>
<span style="font-family: monospace;">這段文字是等寬字體。</span>
</p>
HTML5 鼓勵(lì)我們使用具有語(yǔ)義的標(biāo)簽。如果僅僅是為了視覺(jué)效果，首選 CSS。如果文本本身具有特定的含義（如重要、強(qiáng)調(diào)），則使用 <strong> 和 <em>。<s> 標(biāo)簽在 HTML5 中被重新定義，用于表示那些不再正確或不再相關(guān)的內(nèi)容，它是有語(yǔ)義的。
框架型標(biāo)簽：擁抱現(xiàn)代布局
<frame>, <frameset>, <noframes>
這三個(gè)標(biāo)簽用于創(chuàng)建框架集（framesets），將瀏覽器窗口分割成多個(gè)獨(dú)立的 HTML 頁(yè)面。
舊代碼示例 (不推薦)：
<frameset cols="25%,75%">
<frame src="menu.html">
<frame src="content.html">
<noframes>
<body>您的瀏覽器不支持框架。</body>
</noframes>
</frameset>
現(xiàn)代替代方案：
<iframe>：如果確實(shí)需要在頁(yè)面中嵌入另一個(gè)獨(dú)立的 HTML 頁(yè)面，<iframe> 仍然是可用的。但要注意其可能帶來(lái)的 SEO 和可用性問(wèn)題。- CSS 布局 (Flexbox, Grid)：對(duì)于頁(yè)面布局，現(xiàn)代 CSS 提供了強(qiáng)大的 Flexbox 和 Grid 模塊，可以輕松實(shí)現(xiàn)復(fù)雜的頁(yè)面結(jié)構(gòu)，而無(wú)需使用框架。
- 服務(wù)器端包含 (SSI) 或 JavaScript 動(dòng)態(tài)加載：對(duì)于公共部分（如導(dǎo)航欄、頁(yè)腳），可以使用服務(wù)器端技術(shù)或 JavaScript (如 AJAX) 來(lái)加載和組合內(nèi)容。
代碼示例 (使用 <iframe>):
<div>
<iframe src="menu.html" style="width: 25%; height: 500px; border: none;"></iframe>
<iframe src="content.html" style="width: 74%; height: 500px; border: none;"></iframe>
</div>
Frameset 存在很多問(wèn)題，比如破壞 URL、不利于 SEO、打印困難、可用性差等?，F(xiàn)代 Web 開(kāi)發(fā)更傾向于單頁(yè)面體驗(yàn)或通過(guò) CSS 和 JavaScript 構(gòu)建靈活的布局。
其他被廢棄或改變用途的標(biāo)簽
1. <acronym>
用于表示首字母縮略詞。
舊代碼示例 (不推薦)：
<acronym title="World Wide Web">WWW</acronym>
現(xiàn)代替代方案 (<abbr>):
<abbr title="World Wide Web">WWW</abbr> is the best.
<abbr title="HyperText Markup Language">HTML</abbr>
講解： HTML5 中，<abbr> 標(biāo)簽統(tǒng)一用于表示縮寫(xiě)詞，無(wú)論是首字母縮寫(xiě)還是其他類(lèi)型的縮寫(xiě)。
2. <applet>
用于嵌入 Java 小程序。
舊代碼示例 (不推薦)：
<applet code="MyApplet.class" width="300" height="200"></applet>
現(xiàn)代替代方案 (<object> 或 <embed>，但 Java Applet 本身已很少使用)：
<object type="application/x-java-applet" width="300" height="200">
<param name="code" value="MyApplet.class">
Java applet failed to load.
</object>
Java Applet 技術(shù)由于安全性和插件依賴(lài)問(wèn)題，已經(jīng)基本被淘汰?，F(xiàn)代 Web 應(yīng)用更多依賴(lài) JavaScript、WebAssembly 或其他嵌入技術(shù)。如果確實(shí)需要嵌入特定類(lèi)型的插件內(nèi)容，<object> 或 <embed> 是更通用的選擇。
3. <dir> 和 <menu> (用于列表)
<dir> 用于目錄列表，<menu> 用于菜單列表。它們的功能與 <ul> 非常相似。
舊代碼示例 (不推薦)：
<dir>
<li>文件1</li>
<li>文件2</li>
</dir>
<menu>
<li>選項(xiàng)A</li>
<li>選項(xiàng)B</li>
</menu>
現(xiàn)代替代方案 (<ul>):
<ul>
<li>文件1</li>
<li>文件2</li>
</ul>
<ul>
<li>選項(xiàng)A</li>
<li>選項(xiàng)B</li>
</ul>
<ul> (無(wú)序列表) 完全可以替代它們的功能，并且語(yǔ)義更清晰。注意：HTML5 中 <menu> 標(biāo)簽被重新定義為一個(gè)上下文菜單或者工具欄的容器，但其瀏覽器支持度和實(shí)際用法與舊版完全不同，通常與 JavaScript 配合使用。對(duì)于簡(jiǎn)單的列表，直接使用 <ul> 或 <ol>。
4. <isindex>
用于在文檔中創(chuàng)建一個(gè)單行文本輸入框，用于查詢(xún)文檔。
舊代碼示例 (不推薦)：
<head>
<isindex prompt="請(qǐng)輸入搜索關(guān)鍵詞：">
</head>
現(xiàn)代替代方案 (HTML 表單):
<form action="/search" method="get">
<label for="search-input">搜索：</label>
<input type="search" id="search-input" name="q">
<button type="submit">提交</button>
</form>
<isindex> 的功能非常有限，并且早已被功能更強(qiáng)大的 HTML 表單元素所取代。
擁抱語(yǔ)義化：新標(biāo)簽帶來(lái)的好處
廢棄舊標(biāo)簽的同時(shí)，HTML5 引入了許多新的語(yǔ)義化標(biāo)簽，如：
<article>: 定義獨(dú)立的內(nèi)容塊，如博客文章、新聞報(bào)道。<section>: 定義文檔中的一個(gè)區(qū)域或節(jié)。<nav>: 定義導(dǎo)航鏈接。<aside>: 定義側(cè)邊欄內(nèi)容或與主要內(nèi)容相關(guān)性較低的內(nèi)容。<header>: 定義文檔或節(jié)的頁(yè)眉。<footer>: 定義文檔或節(jié)的頁(yè)腳。<main>: 定義文檔的主要內(nèi)容。
使用這些語(yǔ)義化標(biāo)簽，可以讓我們的網(wǎng)頁(yè)結(jié)構(gòu)更清晰，不僅方便自己和團(tuán)隊(duì)維護(hù)，也更有利于搜索引擎理解頁(yè)面內(nèi)容，提升 SEO 效果，同時(shí)還能改善網(wǎng)頁(yè)的可訪問(wèn)性。
轉(zhuǎn)自https://juejin.cn/post/7511945299860111397
該文章在 2025/6/5 10:49:38 編輯過(guò)
400 186 1886
