Skip to content

解析 HTML 文件

HTML 文件架構不難懂,只要分清楚作用為何? 就不會有誤用的情況發生了。

文件類型(doctype)

此宣告會在整份文件最上端,它是用來告訴瀏覽器:我是哪一個版本的 HTML !! 不同的文件宣告,會造成版面上的某些差異性!現階段, Away 將會以 HTML5 為主。

html
<!DOCTYPE html>

DANGER

沒宣告 DOCTYPE 會造成瀏覽器無法預期的行為。

根元素

用來告訴伺服器,這個網站是用 HTML 寫的。此元素會包裹住整個網頁的內容,也被稱為根元素。

html
<!DOCTYPE html>
<html>
  ...
</html>

lang

lang 屬性指定頁面內容的自然語言。它是 html 標籤的一個屬性,用於設定頁面上所有文字的語言。倘若頁面上的部分文字使用不同語言,你可以給環繞文字的元素的語言屬性賦一個不同的值。

html
<html lang="zh-Hant-TW">
  ...
</html>
  • en: 英文。
  • zh-Hant-TW: 臺灣使用的繁體中文。
  • zh-Hant: 繁體中文。
  • zh-Hans: 簡體中文。

小提醒

規則組成為 語言-字體-地區

  • 語言: 全小寫。
  • 字體: 首字大寫。
  • 地區: 全大寫。

檔頭

主要是放置一些給機器運作、搜尋引擎搜尋的爬蟲所看,不是給一般使用者檢視的區塊。

html
<!DOCTYPE html>
<html lang="zh-Hant-TW">
  <head>
    ...
  </head>
</html>

內容區

此區為網頁內容,是網站要給使用者檢視資料的區塊。

html
<!DOCTYPE html>
<html>
  <head>
    ...
  </head>
  <body>
    ...
  </body>
</html>