視訊教程觀看地址：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/