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 属性替换的属性

其他资源

您的项目需求