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