HTML+CSS编写静态网站-43 如何修复bug

视频教程观看地址：http://study.163.com/course/courseMain.htm?courseId=1003879015

我们已经学会了如何使用开发者工具。现在，我们来看一些常见的HTML和CSS错误，以便在发生这种情况时候，您会知道要如何查找并修复它们。

HTML和CSS中的一些最常见的问题可能只是由打字错误或健忘造成的。例如，当输入HTML时，您可能会忘记关闭元素，或者忘记关闭标记。您也可能用的全称而不是缩写。比如说，您可能会在这里输入image：

<a href="img/numbers-01.jpg"> <image src="img/numbers-01.jpg" alt="">

当我们打开并刷新网页时，您会看到一切正常。那是因为浏览器会对一些语法兼容。但是，如果我们完全是乱写的：

<bangge src="img/numbers-01.jpg" alt="">

保存，刷新，你会看到这个图片现在就已经消失了。

所以，如果图片没有正确显示在网页时，请务必检查您的语法。

这里我们改回去，保存和刷新，现在没有问题。

确保关闭属性的引号也很重要。假如说，这里由于某种原因这里没有关闭引号，实际上，编辑器的颜色也发生了变化，这对你来说也是一种提示：

<img src="img/numbers-01.jpg alt="">

如果我们要保存和刷新，你可以再次看到，图像消失。我们改回来，所以大家最好养成一个好的编码习惯，就是每次都是输入一对引号，这样能有效的避免这个错误的发生。

另一个容易出错的地方是DOCTYPE。一般来说，您这样写就可以了。这就是所谓的HTML5文档类型，而且要比过去的文档类型要简单得多。如果您遇到一个冗长而复杂的文档类型的网站，那也不必担心。这实际上是一个较旧的DOCTYPE，比如说HTML4，这是旧版本的HTML，我们不需要再使用它。

另一个常见的错误是不正确地嵌套元素。所以，例如，如果我们将这些元素移到我们的anchor元素之外：

<a href="img/numbers-01.jpg"> </a>                                           <img src="img/numbers-01.jpg" alt="">                                           <p>C++</p>

你可以看到样式应用的不正确，这里的链接不再像其他图像的链接那样了。所以我们按下键盘的Ctrl + Z回退代码。

现在，我们来看看我们的main.css。首先，您可能出现和像HTML一样的语法错误。比如说，你可能会误选选择器，或者忘记关闭大括号。

一个很常见的错误是在声明结束时忘记使用分号。所以，例如，如果我们在这里删除了一个分号：

#wrapper{ max-width:940px

那么您会看到我们的网站发生变化，而这不是我们希望改变的。

因此，如果您遇到问题，请确保检查这些分号。

另一个非常常见的错误就是把id和class搞混了。所以如果我们在这里，使用了一个class选择器，而不是一个ID选择器：

.wrapper{ max-width:940px;

然后保存，刷新页面。

你可以再次看到，页面已经改变了，这不是我们想要的样式。出现这个问题的原因是因为所有这些样式都不再被应用了，因为这已经没有id选择器了，只有一个class选择器。反过来，你也可能在HTML中范同样的错误。所以一定要匹配。这里Ctrl+Z我们把css中的问题改回来。记住，ID和class是两个完全不同的选择器，它们将应用不同地CSS。

类似的问题是选择器的特异性。有时你可能把选择器用的太具体，或者说不够具体。比如说，让我们来介绍一个bug。来到PAGE VEDIO多行注释，我们其实是想在这里定位我们的段落，但是这里如果我们只定位到列表项：

#gallery li a p{ margin:0; padding:5%; font-size:0.75em; color:#bdc3c7; }

然后保存，回到浏览器刷新，你会看到我们画册会出现一些非常奇怪的问题。这是因为我们的选择器并没有真正选择到正确的地方。

您可以通过将背景颜色更改为明亮的颜色来快速测试选择器所选择的内容。

#gallery li{        background-color:orange; margin:0;

所以，在这里我们可以看到它没有选择到我们想要的内容，所以让我们改回来：

#gallery li a p{ background-color:orange;

这时再刷新，你会发现背景颜色就对了。

这里我们也把背景颜色去掉。

#gallery li a p{ background-color:orange;

还可能出现的高级的问题就是CSS定位。实际上，当我们使用float，margin，padding，border，width和Height等属性时很容易出现错误。

所以，如果您无法正确地在页面上定位元素时，那么这些属性都是你需要检查的地方。

当您遇到错误时，可能会非常紧张，但当你建立的网站越多，您获得的经验也就越多。经过经年累月的练习，你就可以主动的避免许多bug，因为代码会成为你的直觉。刻意练习才能够提高你的水平。

更多精彩内容尽在视频中！

本文固定链接：http://www.oxox.work/web/html-css/fix-bug/ | 虚幻大学

查看原文：http://www.oxox.work/web/html-css/fix-bug/