8 個你應該立即停止使用的無效 HTML 元素

TML 規范的開發是一個漸進的過程，有時會出現問題。隨著時間的推移，許多元素和屬性被添加到 HTML 中，直到后來 Web 社區集體意識到有更好的方法時才被刪除。由于已棄用和過時的元素和屬性已經存在于網絡上，因此許多現代瀏覽器繼續支持它們的使用。盡管它們可能仍然有效，但您應該始終遵循最新版本的要求 HTML。不能保證瀏覽器對過時和棄用元素的支持會持續下去。有效但執行不A力。

有幾種 HTML 元素和屬性是有效的并且應該被使用，但是這些特性的實現隨著時間的推移而發生了變化，而 Web 開發社區的一些人還沒有注意到。HTMLtables就是一個很好的例子。table在某一時刻，使用 HTML元素創建網頁布局是很常見的。幾乎沒有人再這樣做了，CSS 比tables以往任何時候都更強大。但是，即使是經驗豐富的 Web 開發人員，也存在許多其他不太嚴重的誤用和語法錯誤。以下是一些經常被誤用得完全有效且有用的 HTML 功能以及正確實現的示例。

DOCTYPE

雖然在技術上不是 HTML 元素，但DOCTYPE聲明應該是每個 HTML 文檔中出現的第一件事。這個聲明是瀏覽器文檔中代碼的語言。過去，這個聲明包括幾個部分，可能會有點復雜。然而，在 HTML5 中，這很簡單：

使用該聲明開始每個人 HTML 文檔，Web 瀏覽器將準確地知道您要說什么。

識別字符集

Web 瀏覽器必須知道用于編寫文檔的字符集才能正確呈現它。在絕大多數情況下，要聲明的正確字符集是UTF-8。如果您需要聲明其他任何內容，很可能您已經知道并知道如何去做。如果您不確定，請堅持使用 UTF-8 是一個安全的選擇。在 HTML5 中聲明字符集比在以前的 HTML 版本中要簡單得多。這是現代 HTML5 中聲明的正確語法：

只需將該行放到head您的 HTML 文檔中即可。

鏈接到版權信息

過去，通常使用meta標簽來提供版權信息。但是，這不是處理此任務的正確方法，并且網絡爬蟲無法識別標簽的這種標簽外使用meta。識別版權的正確方法是使用HTML 文檔link中的元素，如下所示：head

您還可以在錨點和區域元素上使用rel="license"屬性值對。

停止注釋掉腳本

在過去，通常使用如下語法將腳本添加到 HTML 文檔中：

這是有充分理由的。在某一時刻，許多瀏覽器無法識別script標簽，并試圖將標簽之間的內容呈現為 HTML，從而導致它們以純文本形式顯示腳本。為了避免這個問題，開發人員會注釋掉文本，這樣它就不會被不受支持的瀏覽器呈現為 HTML。那些日子已經離我們很遠了。所有現代瀏覽器都支持該script標簽。只需完全刪除 HTML 注釋括號，或者更好的是，將 JavaScript 編寫在單獨的文件中，然后使用script標記將其導入到當前的 HTML 文檔中，如下所示：

立即停止使用的 HTML 元素

還有不少元素曾經是 HTML 規范的一部分，但后來被棄用或廢棄。以下是您可能仍在使用的八個 HTML 元素，您應該立即停止使用它們以及您可以使用的替代標簽：

applet：如果您仍在使用此標簽，那么您遇到的問題比使用不推薦使用的標簽更大，因為Java 正在作為一種 Web 編程語言退出。短期內切換到objectorembed元素，但長期停止在 web 上使用 Java。
bgsound: 這個元素曾經被 IE 用來為網站添加背景音樂。背景音樂從一開始就是個壞主意。只是不要這樣做。如果您想將音頻內容添加到您的網站，請使用audio標簽，但不要將其設置為自動播放。
frame：該frame元素及其所有相關元素已從 HTML 規范中刪除。不要使用它們。如果iframe您嘗試嵌入外部網頁，請使用CSS，如果您嘗試設計網站布局，請使用。
hgroup：在過去，您可以通過將標題和副標題包裝在適當的標題級別并將兩個標題包裝在hgroup標簽中來對標題和副標題進行分組。但是，此元素已被棄用。相反，使用單個標題元素來包含標題和副標題，將副標題包裝在span標簽中，并使用 CSS 來控制副標題的樣式。
dir：目錄元素曾經是什么 HTML 規范的一部分，用于表示文件或頁面的列表。改用錨元素的無序列表。
acronym：此元素已被棄用，請改用縮寫標簽abbr。
isindex：此元素在網頁上創建了一個文本字段。但是，從 HTML 4.01 開始，可以使用呈現此標記的form元素input和屬性來完成同樣的事情，type="text"這些標記是不必要的和過時的。
plaintext, xmp, 和listing: 這些標簽是以純文本而不是 HTML 顯示文本的不同方式。如果您想在 HTML 文檔中嵌入純文本，您有兩個選項，pre以及'code'。要以等寬字體顯示文本并保留空格 use pre，要顯示代碼，請使用該code元素并<通過>鍵入<和>替換每個符號來轉義所有符號。

由 CSS 更好地處理的任務

有許多元素和屬性曾經是 HTML 的一部分，但執行的任務更適合 CSS。這些元素已經被棄用，取而代之的是讓 CSS 控制網頁呈現。

由 CSS 屬性替換的元素

曾經使用 HTML 元素（如font、basefont、center、strike和u. 這些元素都已被棄用，取而代之的是 CSS 提供的字體和排版控件。要了解更多信息，請查看我們的字體和網頁排版教程。一個從未真正流行起來的獨特標簽是multicol。此標簽可用于將文本分成多列，類似于報紙的外觀。現在可以使用 CSScolumns屬性在現代瀏覽器中創建類似但更強大的效果。

由 CSS 屬性替換的屬性

廣泛的 HTML 元素屬性曾經可用于控制 HTML 元素的呈現。幾乎所有這些標簽都已被棄用，現在 CSS 提供了相同的功能。如果您不熟悉 CSS 以及如何實現這些屬性，我們的 CSS 教程將幫助您立即開始使用層疊樣式表。下面是一些更常用的屬性和現在可以用來實現相同結果的 CSS 屬性。

align：此屬性已被強大的 CSS 屬性組合所取代，包括text-align、float和vertical-align.
background和bgcolor：不要使用這些已棄用的 HTML 屬性應用背景圖像和顏色，而是使用background-image和background-colorCSS 屬性。
height和width：這些屬性的使用在某些元素上仍然有效。但是，在所有情況下，都可以通過使用同名的 CSS 屬性來實現相同的效果。
clear：如果要強制一個元素清除一側或兩側的所有其他元素，請使用clearCSS 屬性而不是clearHTML 屬性。
border：雖然此屬性在許多元素上仍然可以正常工作，但使用borderCSS 屬性應用邊框是更好的做法。

其他資源

在本文中，我們介紹了一些最常見的元素和屬性，這些元素和屬性使用不當或已被棄用或過時。然而，我們真的只是觸及了冰山一角。如果您想了解已從 HTML 規范中刪除的所有 HTML 元素和屬性，請參閱以下資源：

HTML DOM 事件

HTML DOM 事件允許Javascript在HTML文檔元素中注冊不同事件處理程序。

事件通常與函數結合使用，函數不會在事件發生前被執行！ (如用戶點擊按鈕)。

提示： 在 W3C 2 級 DOM 事件中規范了事件模型。

HTML DOM 事件

DOM： 指明使用的 DOM 屬性級別。

鼠標事件

屬性	描述	DOM
onclick	當用戶點擊某個對象時調用的事件句柄。	2
oncontextmenu	在用戶點擊鼠標右鍵打開上下文菜單時觸發
ondblclick	當用戶雙擊某個對象時調用的事件句柄。	2
onmousedown	鼠標按鈕被按下。	2
onmouseenter	當鼠標指針移動到元素上時觸發。	2
onmouseleave	當鼠標指針移出元素時觸發	2
onmousemove	鼠標被移動。	2
onmouseover	鼠標移到某元素之上。	2
onmouseout	鼠標從某元素移開。	2
onmouseup	鼠標按鍵被松開。	2

鍵盤事件

屬性	描述	DOM
onkeydown	某個鍵盤按鍵被按下。	2
onkeypress	某個鍵盤按鍵被按下并松開。	2
onkeyup	某個鍵盤按鍵被松開。	2

框架/對象（Frame/Object）事件

屬性	描述	DOM
onabort	圖像的加載被中斷。 ( <object>)	2
onbeforeunload	該事件在即將離開頁面（刷新或關閉）時觸發	2
onerror	在加載文檔或圖像時發生錯誤。 ( <object>, <body>和 <frameset>)
onhashchange	該事件在當前 URL 的錨部分發生修改時觸發。
onload	一張頁面或一幅圖像完成加載。	2
onpageshow	該事件在用戶訪問頁面時觸發
onpagehide	該事件在用戶離開當前網頁跳轉到另外一個頁面時觸發
onresize	窗口或框架被重新調整大小。	2
onscroll	當文檔被滾動時發生的事件。	2
onunload	用戶退出頁面。 ( <body> 和 <frameset>)	2

表單事件

屬性	描述	DOM
onblur	元素失去焦點時觸發	2
onchange	該事件在表單元素的內容改變時觸發( <input>, <keygen>, <select>, 和 <textarea>)	2
onfocus	元素獲取焦點時觸發	2
onfocusin	元素即將獲取焦點時觸發	2
onfocusout	元素即將失去焦點時觸發	2
oninput	元素獲取用戶輸入時觸發	3
onreset	表單重置時觸發	2
onsearch	用戶向搜索域輸入文本時觸發 ( <input="search">)
onselect	用戶選取文本時觸發 ( <input> 和 <textarea>)	2
onsubmit	表單提交時觸發	2

剪貼板事件

屬性	描述	DOM
oncopy	該事件在用戶拷貝元素內容時觸發
oncut	該事件在用戶剪切元素內容時觸發
onpaste	該事件在用戶粘貼元素內容時觸發

打印事件

屬性	描述	DOM
onafterprint	該事件在頁面已經開始打印，或者打印窗口已經關閉時觸發
onbeforeprint	該事件在頁面即將開始打印時觸發

拖動事件

事件	描述	DOM
ondrag	該事件在元素正在拖動時觸發
ondragend	該事件在用戶完成元素的拖動時觸發
ondragenter	該事件在拖動的元素進入放置目標時觸發
ondragleave	該事件在拖動元素離開放置目標時觸發
ondragover	該事件在拖動元素在放置目標上時觸發
ondragstart	該事件在用戶開始拖動元素時觸發
ondrop	該事件在拖動元素放置在目標區域時觸發

多媒體（Media）事件

事件	描述	DOM
onabort	事件在視頻/音頻（audio/video）終止加載時觸發。
oncanplay	事件在用戶可以開始播放視頻/音頻（audio/video）時觸發。
oncanplaythrough	事件在視頻/音頻（audio/video）可以正常播放且無需停頓和緩沖時觸發。
ondurationchange	事件在視頻/音頻（audio/video）的時長發生變化時觸發。
onemptied	當期播放列表為空時觸發
onended	事件在視頻/音頻（audio/video）播放結束時觸發。
onerror	事件在視頻/音頻（audio/video）數據加載期間發生錯誤時觸發。
onloadeddata	事件在瀏覽器加載視頻/音頻（audio/video）當前幀時觸發觸發。
onloadedmetadata	事件在指定視頻/音頻（audio/video）的元數據加載后觸發。
onloadstart	事件在瀏覽器開始尋找指定視頻/音頻（audio/video）觸發。
onpause	事件在視頻/音頻（audio/video）暫停時觸發。
onplay	事件在視頻/音頻（audio/video）開始播放時觸發。
onplaying	事件在視頻/音頻（audio/video）暫停或者在緩沖后準備重新開始播放時觸發。
onprogress	事件在瀏覽器下載指定的視頻/音頻（audio/video）時觸發。
onratechange	事件在視頻/音頻（audio/video）的播放速度發送改變時觸發。
onseeked	事件在用戶重新定位視頻/音頻（audio/video）的播放位置后觸發。
onseeking	事件在用戶開始重新定位視頻/音頻（audio/video）時觸發。
onstalled	事件在瀏覽器獲取媒體數據，但媒體數據不可用時觸發。
onsuspend	事件在瀏覽器讀取媒體數據中止時觸發。
ontimeupdate	事件在當前的播放位置發送改變時觸發。
onvolumechange	事件在音量發生改變時觸發。
onwaiting	事件在視頻由于要播放下一幀而需要緩沖時觸發。

動畫事件

事件	描述	DOM
animationend	該事件在 CSS 動畫結束播放時觸發
animationiteration	該事件在 CSS 動畫重復播放時觸發
animationstart	該事件在 CSS 動畫開始播放時觸發

過渡事件

事件	描述	DOM
transitionend	該事件在 CSS 完成過渡后觸發。

其他事件

事件	描述	DOM
onmessage	該事件通過或者從對象(WebSocket, Web Worker, Event Source 或者子 frame 或父窗口)接收到消息時觸發
onmousewheel	已廢棄。使用 onwheel 事件替代
ononline	該事件在瀏覽器開始在線工作時觸發。
onoffline	該事件在瀏覽器開始離線工作時觸發。
onpopstate	該事件在窗口的瀏覽歷史（history 對象）發生改變時觸發。
onshow	該事件當 <menu> 元素在上下文菜單顯示時觸發
onstorage	該事件在 Web Storage(HTML 5 Web 存儲)更新時觸發
ontoggle	該事件在用戶打開或關閉 <details> 元素時觸發
onwheel	該事件在鼠標滾輪在元素上下滾動時觸發

事件對象

常量

靜態變量	描述	DOM
CAPTURING-PHASE	當前事件階段為捕獲階段(3)	1
AT-TARGET	當前事件是目標階段,在評估目標事件(1)	2
BUBBLING-PHASE	當前的事件為冒泡階段 (2)	3

屬性

屬性	描述	DOM
bubbles	返回布爾值，指示事件是否是起泡事件類型。	2
cancelable	返回布爾值，指示事件是否可擁可取消的默認動作。	2
currentTarget	返回其事件監聽器觸發該事件的元素。	2
eventPhase	返回事件傳播的當前階段。	2
target	返回觸發此事件的元素（事件的目標節點）。	2
timeStamp	返回事件生成的日期和時間。	2
type	返回當前 Event 對象表示的事件的名稱。	2

方法

方法	描述	DOM
initEvent()	初始化新創建的 Event 對象的屬性。	2
preventDefault()	通知瀏覽器不要執行與事件關聯的默認動作。	2
stopPropagation()	不再派發事件。	2

目標事件對象

方法

方法	描述	DOM
addEventListener()	允許在目標事件中注冊監聽事件(IE8 = attachEvent())	2
dispatchEvent()	允許發送事件到監聽器上 (IE8 = fireEvent())	2
removeEventListener()	運行一次注冊在事件目標上的監聽事件(IE8 = detachEvent())	2

事件監聽對象

方法

方法	描述	DOM
handleEvent()	把任意對象注冊為事件處理程序	2

文檔事件對象

方法

方法	描述	DOM
createEvent()		2

鼠標/鍵盤事件對象

屬性

屬性	描述	DOM
altKey	返回當事件被觸發時，"ALT" 是否被按下。	2
button	返回當事件被觸發時，哪個鼠標按鈕被點擊。	2
clientX	返回當事件被觸發時，鼠標指針的水平坐標。	2
clientY	返回當事件被觸發時，鼠標指針的垂直坐標。	2
ctrlKey	返回當事件被觸發時，"CTRL" 鍵是否被按下。	2
Location	返回按鍵在設備上的位置	3
charCode	返回onkeypress事件觸發鍵值的字母代碼。	2
key	在按下按鍵時返回按鍵的標識符。	3
keyCode	返回onkeypress事件觸發的鍵的值的字符代碼，或者 onkeydown 或 onkeyup 事件的鍵的代碼。	2
which	返回onkeypress事件觸發的鍵的值的字符代碼，或者 onkeydown 或 onkeyup 事件的鍵的代碼。	2
metaKey	返回當事件被觸發時，"meta" 鍵是否被按下。	2
relatedTarget	返回與事件的目標節點相關的節點。	2
screenX	返回當某個事件被觸發時，鼠標指針的水平坐標。	2
screenY	返回當某個事件被觸發時，鼠標指針的垂直坐標。	2
shiftKey	返回當事件被觸發時，"SHIFT" 鍵是否被按下。	2

方法

方法	描述	W3C
initMouseEvent()	初始化鼠標事件對象的值	2
initKeyboardEvent()	初始化鍵盤事件對象的值	3

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

近，我們在教學生使用JavaScript，今天就帶大家開發一款簡單的音樂播放器。首先，最終效果如圖所示：

首先，我們來編寫html界面index.html，代碼如下:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

</div>

</body>

</html>

接下來，編寫style.css，代碼如下：

body{

margin: 0px;

background-color: #ccc;

}

#boxDiv{

width: 375px;

height: 568px;

margin: 10px auto;

position: relative;

}

#contentDiv{

width: 375px;

height: 460px;

overflow: hidden;

}

#lrcDiv{

margin-top: 260px;

}

#lrcDiv span{

display: block;

line-height: 40px;

text-align: center;

color: white;

font-size: 20px;

}

#bgTopSpan{

position: absolute;

display: block;

width: 375px;

height: 30px;

top: 0px;

}

#bgBottomSpan{

top: 430px;

position: absolute;

display: block;

width: 375px;

height: 30px;

}

#controlDiv{

width: 375px;

height: 180px;

position: relative;

background-color: white;

}

#progressDiv{

background-color: red;

height: 1.5px;

width: 0px;

}

#pointerImg{

width: 18px;

height: 18px;

position: absolute;

top: -8.5px;

left: -3px;

}

#playTimeSpan{

display: block;

position: absolute;

font-size: 14px;

width: 35px;

top: 5px;

left: 5px;

}

#totalTimeSpan{

display: block;

position: absolute;

font-size: 14px;

width: 35px;

top: 5px;

left: 335px;

}

#titleSpan{

display: block;

position: absolute;

height: 30px;

width: 295px;

font-size: 20px;

text-align: center;

left: 40px;

top: 5px;

}

#buttonDiv{

margin-top: 40px;

position: relative;

}

#prevImg{

width: 40px;

height: 40px;

position: absolute;

top: 20px;

left: 60px;

}

#playOrPauseImg{

width: 70px;

height: 70px;

position: absolute;

top: 5px;

left: 152px;

}

#nextImg{

width: 40px;

height: 40px;

position: absolute;

top: 20px;

left: 275px;

}

最后，編寫common.js，代碼如下：

$(function(){

// 歌曲列表

var playList = ["紅日", "狼的誘惑", "漂洋過海來看你"];

// 當前播放的歌曲序號

var currentIndex = 0;

// 播放器的原生對象

var audio = $("#song")[0];

// 播放時間數組

var timeArr = [];

// 歌詞數組

var lrcArr = [];

// 調用播放前設置

setup();

// 播放歌曲

playMusic();

// 播放歌曲

function playMusic(){

// 播放歌曲

audio.play();

// 設置為暫停的圖片

$("#playOrPauseImg").attr("src", "img/audio/pause@2x.png");

}

// 歌曲播放前設置

function setup(){

// 設置播放哪一首歌曲

// img/audio/紅日.mp3

audio.src = "img/audio/" + playList[currentIndex] + ".mp3";

// 設置歌曲的名字

$("#titleSpan").text(playList[currentIndex]);

// 設置歌詞

setLrc();

}

// 設置歌詞

function setLrc(){

// 清空上一首的歌詞

$("#lrcDiv span").remove();

// 清空數組

timeArr = [];

lrcArr = [];

// 加載歌詞文件

$.get("img/audio/" + playList[currentIndex] + ".lrc", {}, function(data){

if(data){

// 按行切割字符串

var arr = data.split("\n");

// 分割歌詞

for (var i = 0; i < arr.length; i++) {

// 分割時間和歌詞

var tempArr = arr[i].split("]");

if (tempArr.length > 1){

// 添加時間和歌詞到數組

timeArr.push(tempArr[0]);

lrcArr.push(tempArr[1]);

}

// 顯示歌詞

for (var i = 0; i < lrcArr.length; i++) {

$("#lrcDiv").append("<span>"+lrcArr[i]+"</span>");

}

});

}

// 播放暫停事件

$("#playOrPauseImg").click(function(){

// 如果播放器是暫停狀態

if(audio.paused){

// 繼續播放

playMusic();

}else{

// 暫停

audio.pause();

// 變成播放的圖片

$("#playOrPauseImg").attr("src", "img/audio/play@2x.png");

}

});

// 上一首

$("#prevImg").click(function(){

// 如果是第一首，那么跳到最后一首

if(currentIndex == 0){

currentIndex = playList.length - 1;

}else{

currentIndex--;

}

// 播放前設置

setup();

// 播放

playMusic();

});

// 下一首

$("#nextImg").click(function(){

// 如果是最后一首，就跳到第一首

if(currentIndex == playList.length - 1){

currentIndex = 0;

}else{

currentIndex++;

}

// 播放前設置

setup();

// 播放

playMusic();

});

// 監聽播放器播放時間改變事件

audio.addEventListener("timeupdate", function(){

// 當前播放時間

var currentTime = audio.currentTime;

// 總時間

var totalTime = audio.duration;

// 當是數字的時候

if(!isNaN(totalTime)){

// 得到播放時間與總時長的比值

var rate = currentTime / totalTime;

// 設置時間顯示

// 播放時間

$("#playTimeSpan").text(getFormatterDate(currentTime));

// 總時長

$("#totalTimeSpan").text(getFormatterDate(totalTime));

// 設置進度條

$("#progressDiv").css("width", rate * 375 + "px");

// 設置進度圓點

$("#pointerImg").css("left", (375 - 15) * rate - 3 + "px");

// 設置歌詞的顏色和內容的滾動

for (var i = 0; i < timeArr.length - 1; i++) {

if(!isNaN(getTime(timeArr[i]))){

// 當前播放時間大于等于i行的時間，并且小于下一行的時間

if (currentTime >= getTime(timeArr[i]) && currentTime < getTime(timeArr[i+1])){

// 當前行歌詞變紅色

$("#lrcDiv span:eq("+i+")").css("color", "#FF0000");

// 其他行歌詞變白色

$("#lrcDiv span:not(:eq("+i+"))").css("color", "#FFFFFF");

// 當前行歌詞滾動

$("#lrcDiv").stop(false, true).animate({"margin-top": 260 - 40 * i + "px"}, 1000);

}

});

function getTime(timeStr){

// 去掉左邊的[

var arr = timeStr.split("[");

if(arr.length > 1){

// 得到右邊的時間

var str = arr[1];

// 分割分、秒

var tempArr = str.split(":");

// 分

var m = parseInt(tempArr[0]);

// 秒

var s = parseFloat(tempArr[1]);

return m * 60 + s;

}

return 0;

}

// 格式化時間（00：00）

function getFormatterDate(time){

// 分

var m = parseInt(time / 60);

// 秒

var s = parseInt(time % 60);

// 補零

m = m > 9 ? m : "0" + m;

s = s > 9 ? s : "0" + s;

return m + ":" + s;

}

});

圖片和歌曲、歌詞請自行下載，最后，可以運行試試了。是不是很有趣呢？想要學習更多的Java技術開發知識，關注“重慶千鋒”獲取更多的視頻教程，千鋒重慶IT培訓機構還提供兩周免費試聽課程，歡迎各位小伙伴申請試聽。

在線咨詢

上一篇：原來從輸入網址到瀏覽器顯示的過程這么簡單，一看就懂！
下一篇：Vue3 中動態監聽HTML元素大小變化的實踐與探索

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

8 個你應該立即停止使用的無效 HTML 元素

DOCTYPE

識別字符集

鏈接到版權信息

停止注釋掉腳本

立即停止使用的 HTML 元素

由 CSS 更好地處理的任務

由 CSS 屬性替換的元素

由 CSS 屬性替換的屬性

其他資源

您的項目需求