Web - 第八章 | HTML 調試(Debugging)

我必須說在看這篇文章之前，我不知道HTML是可以使用一些網站來做檢查語法的建議或是錯誤修正。我頂多都是直接看代碼或是開啟瀏覽器的開發者工具直接修改並看結果。

所以我對這篇的內容非常好奇，在實際操作上比較多。只能說有趣～哈。

HTML 和調試

瀏覽器並不會將HTML編譯成其它形式，而是直接解析並顯示結果（稱之為解釋，而非編譯）。可以說HTML的元素語法比Rust、JavaScript或Python這樣“真正的編程語言”更容易理解。瀏覽器解析HTML的過程比編程語言的編譯運行的過程要寬容得多，但這是一把雙刃劍。

寬容的代碼

寬容是什麼意思呢？通常寫錯代碼會帶來以下兩種主要類型的錯誤：

語法錯誤：由於拼寫錯誤導致程序無法運行，就像上面的Rust示例。通常熟悉語法並理解錯誤訊息後很容易修復。
邏輯錯誤：不存在語法錯誤，但代碼無法按預期運行。通常邏輯錯誤比語法錯誤更難修復，因為無法得到指向錯誤源頭的訊息。

HTML 本身不容易出現語法錯誤，因為瀏覽器是以寬容模式運行的，這意味著即使出現語法錯誤瀏覽器依然會繼續運行。瀏覽器通常都有內建規則來解析書寫錯誤的標記，所以即使與預期不符，頁面仍可顯示出來。當然，是存在隱患的。

注： HTML之所以以寬容的方式進行解析，是因為Web建立的初心就是：人人可發佈內容，不去糾結代碼語法。如果Web以嚴格的風格起步，也許就不會像今天這樣流行了。

學習寬容的代碼

複製下面的htnl範例。
開啟一個新的text檔案(文字文件)。
將剛複製的HTML範例貼到新開的text檔案裡。
將檔案存為 index.html。

<!DOCTYPE html>
<html lang="zh-TW">
   <head>
      <meta charset="utf-8">
      <title>HTML 調試示例</title>
   </head>
   <body>
      <h1>HTML 調試示例</h1>
      <p>什麼使得 HTML 出錯？
      <ul>
         <li>未閉合的元素：如果元素<strong>沒有正確的結束標記，那麼將影響下方整個區域，這不是你期望的。
         <li>錯誤嵌套元素：正確進行嵌套是一項重要的編碼習慣。 <strong>重點（strong）<em>重點強調（strongly emphasised）？ </strong>這又是什麼鬼？ </em>
         <li>未閉合的屬性：另一種 HTML 常見錯誤。來看一個示例：<a href="https://www.mozilla.org/>Mozilla 主頁連結</a>
      </ul>
   </body>
</html>

問題清單：

段落（Paragraph）和列表項（list item）元素沒有結束標籤。但是由於元素的結束和另一個的開始很容易推斷出來，因此上圖中並沒有太嚴重的渲染錯誤。
第一個元素沒有結束標籤。這就嚴重了，因為該元素結束的位置難以確定。事實上所有剩餘文本都加粗了。
一下嵌套有問題：重點（strong）重點強調（strongly emphasised）？ 這又是什麼鬼？ 。瀏覽器很難做出正確解釋，理由同上。
href屬性缺少了一個雙引號。從而導致了一個最嚴重的問題：整個連結完全沒有渲染出來。

這邊使用瀏覽器提供的開發者工具。可以參閱什麼是瀏覽器開發者工具？

通過DOM 查看器可以清楚地看到，瀏覽器已經嘗試修補代碼錯誤：

段落和列表元素加上了關閉標籤。
第一個 沒有明確的關閉標籤，因此瀏覽器為之後所有獨立塊都補全了 。

這邊我們嘗試修正一下錯誤的部分。

<!DOCTYPE html>
<html lang="zh-TW">
   <head>
      <meta charset="utf-8">
      <title>HTML 調試示例</title>
   </head>
   <body>
      <h1>HTML 調試示例</h1>
      <p>什麼使得 HTML 出錯？
      <ul>
         <li>未閉合的元素：如果元素<strong>沒有正確的結束標記，那麼將影響下方整個區域，這不是你期望的。</strong></li>
         <li>錯誤嵌套元素：正確進行嵌套是一項重要的編碼習慣。 <strong>重點（strong）</strong> <em>重點強調（strongly emphasised）？ 這又是什麼鬼？ </em></li>
         <li>未閉合的屬性：另一種 HTML 常見錯誤。來看一個示例：<a href="https://www.mozilla.org/">Mozilla 主頁鏈接</a></li>
      </ul>
   </body>
</html>

HTML驗證

HTML頁面通過Markup Validation Service。由W3C（制定HTML、CSS和其他網路技術標準的組織）創立並維護的標記驗證服務。把一個HTML文件加載至本網頁並運行，網頁會返回一個錯誤報告。

學習驗證HTML文件

在瀏覽器中打開Markup Validation Service。
選擇 Validate by Direct Input 標籤。
將整個代碼（而不僅僅是body部分）複製粘貼到正中的文本框內。
點擊Check 按鈕。

<!DOCTYPE html>
<html lang="zh-TW">
   <head>
      <meta charset="utf-8">
      <title>HTML 調試示例</title>
   </head>
   <body>
      <h1>HTML 調試示例</h1>
      <p>什麼使得 HTML 出錯？
      <ul>
         <li>未閉合的元素：如果元素<strong>沒有正確的結束標記，那麼將影響下方整個區域，這不是你期望的。
         <li>錯誤嵌套元素：正確進行嵌套是一項重要的編碼習慣。 <strong>重點（strong）<em>重點強調（strongly emphasised）？ </strong>這又是什麼鬼？ </em>
         <li>未閉合的屬性：另一種 HTML 常見錯誤。來看一個示例：<a href="https://www.mozilla.org/>Mozilla 主頁連結</a>
      </ul>
   </body>
</html>