關於 HTML 環境

第 12 屆 iThome 鐵人賽

DAY 13

自我挑戰組

學習 HTML / CSS 遇到的問題系列第 13 篇

12th鐵人賽

hsin yu

2020-09-28 17:33:12

1902 瀏覽

分享至

在程式編輯器開始撰寫 HTML 時，會需要先產生 HTML 環境，才能開始撰寫 HTML 的網頁內容
通常都會使用 emmet 語法快速產生 HTML 環境，輸入英文半形的 “ ! “ 加上 tab 或 enter 鍵，就可產生以下預設的 HTML 環境內容

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=">
  <title></title>
</head>
<body>
  
</body>
</html>

第一行的就是宣告 HTML 5 的版本，告訴瀏覽器該以哪種 HTML 版本來讀取網頁，目前的網頁都是 HTML 5 的版本，因此都是使用此行來宣告，雖然少了網頁依舊會正常顯示，但可能會觸發怪異模式，簡略的說就是若有宣告會依照 HTML 5 標準模式來渲染網頁，若少了此動作可能會讓瀏覽器以不同方式來渲染網頁，不過自己沒有測試過因此不太了解哪裡會有差異
接下來的 <html lang="en”>，lang 屬性指的是此元素內的內容所使用的主要語言，因此 <html> </html> 中的內容都會使用英文（en)，若主要使用繁體中文可使用 zh-Hant
關於 lang 屬性可參考此篇

在 head 中主要放網頁的額外資訊，常看到以 word 文件中的檔案摘要資訊做比喻，容納這些不會出現在畫面上的資訊，其中
<meta charset="UTF-8"> 是 HTML 的字符編碼，以此將所有數字編碼成看得懂的字符
<meta name="viewport" content="width=device-width, initial-scale=">
是響應式相關的設定
以往使用 emmet 語法產生 HTML 環境會有此行
<meta http-equiv=“X-UA-Compatible” content=“IE=edge”>
來設定 IE 的版本，現在因 IE 即將被淘汰，因此這行設定已不適用了
這邊也附上相關討論：Should X-UA-Compatible still be used in default ! template? · Issue #28 · emmetio/expand-abbreviation · GitHub

建立好環境就可以開始在 <body> 中撰寫網頁內容，需注意 <body> 中的內容才會顯示在瀏覽器畫面中，因此若誤將內容放在 <body> 外是不會被顯示的

參考資料：

https://github.com/emmetio/expand-abbreviation/issues/28
https://developer.mozilla.org/zh-TW/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
https://ithelp.ithome.com.tw/articles/10194236