用HTML和CSS创建一个web页面非常简单。但是很容易犯错误，而且有很多事情你可能不会去想。大多数时候，这些小错误不会造成太大的影响。

但从长远来看，它们会让你的生活更加困难。这九个错误很容易犯，但是如果你早一点而不是晚一点改正它们，你的页面就会看起来更好，更容易维护，并且按照你想要的方式运行。

1内联样式

HTML和CSS的一大优点是，你可以在任何时候格式化任何一行文本——任何一个单词，真的——只要你想。但这并不意味着你应该利用这种能力。

下面是一个内联样式的示例，您可以使用它使段落比周围的段落大，并以不同的颜色突出显示：

这给了段落一个CSS样式，以段落结束。看起来很有效率，对吧？

它有一个很大的问题：如果你想在你的网站上改变很多东西，你需要找到每一个内联样式的实例并进行改变。如果你有100个不同的段落是120%的文本大小和蓝色，你将不得不找到所有的100个，并改变他们的任何你认为是一个更好的格式。

相反，使用CSS样式表。以下是您在上面一段中使用的样式：

现在，不用使用内联样式，只需使用以下行：

你的段落将是蓝色的。当你对CSS中的“important”类进行更改时，它们都会更改。

2用于布局的表格

人们过去经常使用表格来格式化页面布局。通过使用表，可以将页面上的元素按列和行进行组织，并应用不同的对齐方式和样式。即使是单单元表也可以用来正确对齐内容。但是这种使用桌子的方式通常是不受欢迎的。

与内联样式非常类似，使用CSS而不是HTML表格进行布局更易于维护。同样，如果您想在几十页或几百页上进行更改，那么编辑样式表要比遍历每一页并调整表容易得多。

除了易于维护之外，阅读CSS布局往往比阅读HTML表要容易得多。尤其是如果最终在彼此之间嵌套了许多级别的表。在HTML文档和样式表之间来回切换以查看到底发生了什么可能不太容易，但是页面的内容将更清晰，更易于编辑。

在这里或那里使用表将页面拆分为列并不是一种致命的罪恶。有时候，这比在CSS上乱搞要简单快捷。但是如果你正在**巨大的多层表，你应该考虑用CSS重新格式化。

三。不推荐的html

与任何语言一样，HTML也会定期更改。官方认可的标签会改变，有些会被弃用。即使这些标签仍然有效，也最好避免使用它们。

例如，如果你习惯用粗体和斜体的标签，你就落后于时代了。和（表示“强调”）现在是标准标签。、和其他也不推荐使用。

大多数不推荐使用的标签都被CSS替换了，所以您需要使用样式（最好不是内联样式）来获得相同的效果。如果您不确定如何替换一个不推荐使用的标记，或者某个特定的标记仍在使用中，请查看官方的HTML文档，或者运行一个快速搜索。

4内联javascript

有些网页使用JavaScript添加附加功能。它可以使网页具有交互性，在输入文本时验证文本，添加动画，提供对用户操作的响应，等等。简而言之，它可以通过提供附加的行为使页面更有用。

与CSS非常相似，您可以将内联JavaScript添加到HTML中。同样像CSS，这通常是不鼓励的。除了可能更难维护外，还有几个其他原因值得我们这样告诫。

内联JavaScript可以使用比从不同文件链接的脚本更多的带宽。一个称为“缩小”的过程在将HTML和CSS发送给用户之前对其进行压缩，通过宽带或移动连接需要较少的带宽。然而，内联JavaScript不能被缩小。它也不会被缓存，而一个单独的JavaScript文件可以被缓存。

所有这些都使得内联JavaScript更加占用带宽。

调试起来也比较困难，因为您可以对JavaScript文件使用JavaScript验证程序。。。但它在内联脚本上不起作用。而且，同样，它使得HTML更干净、更易于维护。

5多个h1标签

标题标签很棒。他们使网页更容易浏览，他们可以给你一个搜索引擎优化推进，他们可以用来强调某些要点。

但是标题标签有六个层次是有原因的。你的页面上应该只有一个H1标签。这通常是页面的标题（尤其是在博客和类似网站上）。你可能会认为，在H1标签里放一堆关键字会让Google更容易找到它们，并在结果中给你的网站排名更高。

但它真正做的是让你的页面更混乱，更难阅读。这将否定任何搜索引擎优化的好处，你可能会看到无论如何。

使用H2、H3和其他标题标记可以更好地勾勒出页面的轮廓。标题的层次应该让你的读者知道以下部分有多重要。如果你误导了他们，他们会知道的，他们不会高兴的。

6跳过图像高度

如果无法显示图像，则可以为每个图像指定一个“alt”属性，该属性显示特定的文本行。这似乎不是什么大不了的事，尤其是在现代浏览器（台式机和移动设备）可以显示任何东西的情况下。

但不添加alt属性是一个很大的错误，尤其是在**浏览频繁的时代。移动连接并不总是很好，如果浏览器不能加载图像，你的读者就不知道他们应该在那里看到什么。alt属性可以解决这个问题。

如果有人正在使用屏幕阅读器或其他辅助功能，那么alt属性可能就是他们从图像中得到的全部信息。

当然，还有潜在的搜索引擎优化好处。搜索引擎可以索引简短的、描述性的alt属性。但这里最大的好处是帮助读者。

7不关闭标记

有一些HTML标签，你可以不关闭，如和。浏览器知道，当你开始另一个段落或列表项时，上一个段落或列表项就结束了。但这并不意味着你应该跳过结束标签。

首先也是最重要的是，尽管浏览器技术有了进步，但如果你没有关闭标签，浏览器肯定有可能不正确地显示你的内容。应用样式可能会产生一些不可预知的结果，正如stackexchange用户robertc所演示的那样。

归根结底，浏览器期待的是结束标记。他们不是绝对需要他们。。。但是当他们试图显示你的页面时，使用正确的HTML肯定会给他们带来好处。

幸运的是，关闭标记不需要花费太多时间，特别是如果您使用的是一个好的HTML编辑器。

8不包括doctype

在HTML文档的开头，您通常会看到DOCTYPE声明，如下所示：

这是一件不常被谈论的事情，但它是你页面中的一个重要元素。DOCTYPE声明告诉浏览器您正在使用哪种类型的HTML。这允许它正确地呈现HTML。

如果跳过DOCTYPE声明，页面将以“怪癖模式”呈现。这是现代浏览器对过时网页的防御。它会改变页面的显示方式。快速浏览一下Firefox的quirks模式，就会发现区分大小写的变化，字体属性不会继承到表中，字体大小的计算方式不同，没有alt属性的图像有时显示不正确。

这些事情大部分都是相对次要的。但是，如果希望页面正确显示，则应确保浏览器已启用其完全标准模式。

要做到这一点，你需要一个DOCTYPE。（如果你不知道该用什么，就用吧。）

9忽略架构标记

模式标记帮助搜索引擎更好地了解页面上的内容。更具体地说，这个标记告诉搜索引擎你在每个部分中写的内容。

例如，在一篇文章中，可以使用模式标记告诉搜索引擎关于文章的标题、作者、日期、发布者和其他有用信息。

有电影、书籍、组织、人、餐馆、产品、场所、动作、不同类型的数据、音乐、雕塑、预订、服务、自动取款机、啤酒厂的模式，以及几乎所有你能想到的东西。太神奇了。

您完全可以不用使用模式标记就可以脱身。如果没有它，您的页面将正确显示。你的读者甚至不知道它在那里。但加入这个加价会有很多收获。搜索引擎将能够提供关于你的页面更详细、有用的信息，包括丰富的片段。

使用Google的模式标记工具，这个过程实际上相当简单。

习惯html最佳实践

使这些最佳实践成为习惯可能需要一段时间。有时你会觉得你花了很多额外的时间去做一些对你不太有帮助的事情。但是确保你的HTML和CSS布局良好，易于使用和维护，从长远来看会为你节省很多时间。

在创建网页时，你发现还有哪些好习惯是有用的？你不同意上述任何一种做法吗？在下面的评论中分享你的想法！