HTML - 不推荐使用的标签

你好，有抱负的网页开发者们！今天，我们将深入HTML的一个有趣方面：不推荐使用的标签和属性。作为你友好的邻居计算机老师，我很兴奋能引导你们进行这次旅行。所以，拿一杯咖啡（或者你最喜欢的饮料），让我们一起探索那些已经不再受欢迎的HTML元素的世界。

HTML - Deprecated Tags

什么是“不推荐使用”的标签？

在我们深入研究细节之前，先来了解一下“不推荐使用”在HTML上下文中的含义。把它想象成网络的一种方式，说：“感谢你的服务，但现在是时候退休了。”不推荐使用的标签是曾经广泛使用但现在被不鼓励或在新版本的HTML中不再支持的HTML元素。

你会问，为什么会这样呢？嗯，随着网络的演变，我们发现更好的、更高效的方式来构建和设计我们的内容。这就像从翻盖手机升级到智能手机——当然，旧的那一个仍然可以使用，但新的一个可以做得多得多！

HTML 不推荐使用的标签

让我们来看看一些最常见的不推荐使用的标签。我会给你展示它们是如何使用的例子，以及我们现在用什么来替代它们。

`<center>` 标签

曾经，如果你想要居中文本，你会使用 <center> 标签。它看起来像这样：

<center>这个文本是居中的</center>

但现在，我们使用CSS来实现同样的效果：

<p style="text-align: center;">这个文本是居中的</p>

或者更好的，在一个单独的CSS文件中：

.center-text {
text-align: center;
}

<p class="center-text">这个文本是居中的</p>

`<font>` 标签

记得我们曾经直接在HTML中更改字体样式吗？<font> 标签是我们的首选：

<font face="Arial" color="blue" size="3">这是蓝色的Arial字体文本</font>

现在，我们使用CSS来满足我们所有的样式需求：

<p style="font-family: Arial; color: blue; font-size: 16px;">这是蓝色的Arial字体文本</p>

`<big>` 和 `<small>` 标签

这些用于更改文本大小：

<big>这个文本更大</big>
<small>这个文本更小</small>

在现代HTML和CSS中：

<span style="font-size: 1.2em;">这个文本更大</span>
<span style="font-size: 0.8em;">这个文本更小</span>

HTML 不推荐使用的属性

不仅仅是标签会被不推荐使用；属性也会！让我们看看一些例子。

`align` 属性

我们曾经这样对齐图像：

<img src="cat.jpg" align="right" alt="一只可爱的猫">

现在，我们使用CSS：

<img src="cat.jpg" style="float: right;" alt="一只可爱的猫">

`bgcolor` 属性

记得这样设置背景颜色吗？

<body bgcolor="lightblue">
欢迎来到我的网站！
</body>

这些天，一切都是关于CSS的：

<body style="background-color: lightblue;">
欢迎来到我的网站！
</body>

为什么我们应该避免使用不推荐使用的标签和属性？

浏览器支持：新版本的浏览器可能不支持这些旧的标签和属性。
关注点分离：最好将结构（HTML）与样式（CSS）分开。
可访问性：许多不推荐使用的元素对屏幕阅读器不友好。
可维护性：使用当前标准使您的代码更容易更新和维护。

回顾：HTML 不推荐使用的网页

让我们进行一次怀旧的旅行，创建一个使用不推荐使用的标签和属性的网页。然后，我们将看看如何使其现代化。

旧方法

<html>
<head>
<title>我的酷炫90年代网站</title>
</head>
<body bgcolor="cyan">
<center>
<font face="Comic Sans MS" size="6" color="purple">
欢迎来到我的酷炫网站！
</font>
</center>
<hr width="50%" color="red">
<p><b>以下是我喜欢的东西：</b></p>
<ul>
<li><font color="green">玩电子游戏</font></li>
<li><font color="blue">吃披萨</font></li>
<li><font color="red">看电影</font></li>
</ul>
<p align="right"><i>感谢您的访问！</i></p>
</body>
</html>

现代方法

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的酷炫现代网站</title>
<style>
body {
background-color: cyan;
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
font-family: 'Comic Sans MS', cursive;
font-size: 2em;
color: purple;
}
hr {
width: 50%;
background-color: red;
height: 2px;
border: none;
}
.green { color: green; }
.blue { color: blue; }
.red { color: red; }
.right-align { text-align: right; }
</style>
</head>
<body>
<h1>欢迎来到我的酷炫网站！</h1>
<hr>
<p><strong>以下是我喜欢的东西：</strong></p>
<ul>
<li class="green">玩电子游戏</li>
<li class="blue">吃披萨</li>
<li class="red">看电影</li>
</ul>
<p class="right-align"><em>感谢您的访问！</em></p>
</body>
</html>

结论

就这样，伙计们！我们已经穿越了时间，从HTML的狂野西部时代到我们知道 today 的光滑、现代的网络。记住，虽然回顾这些旧的标签和属性很有趣，但紧跟当前标准是至关重要的。

在我们结束之前，这里有一个方便的表格，总结了我们已经讨论的不推荐使用的标签和属性：

不推荐使用的标签/属性	现代替代品
`<center>`	`text-align: center;` (CSS)
`<font>`	CSS属性 (`font-family`, `color`, `font-size`)
`<big>`, `<small>`	`font-size` (CSS)
`align` 属性	CSS定位 (`text-align`, `float`)
`bgcolor` 属性	`background-color` (CSS)

记住，学习HTML就像学习一门新语言。它需要时间、练习和耐心。不要害怕实验和犯错误——这是我们所有人学习的途径！继续编码，继续创造，最重要的是，享受其中的乐趣！

Credits: Image by storyset

上一教程:

HTML - 字符编码