Day03 「HTML？好吃嗎？」 ─ 沒有骨架人怎麼站呢？

2018 iT 邦幫忙鐵人賽

DAY 3

Modern Web

菜鳥前端奮鬥史(欸?系列第 3 篇

2018鐵人賽 html html5

阿陰

團隊Lorem100+tab

2017-12-22 21:59:35

2181 瀏覽

分享至

搖擺柴柴

有人來訊問到為什麼要放一隻柴柴當大頭照，其實牠的真身原本是這樣的 (饒富動感?

當初沒想到這麼快就會把腦海中的梗用完，果真有梗當思無梗之苦呀..
　
今天就來聊聊 HTML 的基本架構吧，若不慎有錯還請各路大神~~用力鞭打~~(欸?

HTML 的基本架構

超文件標示語言（HyperText Markup Language，AFK：HTML）

標準的 HTML 格式不外乎就是

<html>
  <head>
      HTML 文件的標題
  </head>
  <body>
      HTML 文件的內容
  </body>
</html>

但若講到目前常見的格式，應該會是下列這種情形，也就是當前 HTML5 的格式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>網頁標題</title>
</head>
<body>
  網頁內容
</body>
</html>

若本身使用的編輯器有EMMIT的效果(如 VSCode 本身內建， Sublime Text 印象中要額外裝?)，輸入 ! + tab 就會自動產生 HTML5 標準架構囉

　
　
以下來逐行解釋 HTML5 的各個無字天書代表什麼吧！

<!DOCTYPE html>

<!DOCTYPE> 聲明不是 HTML 標籤；它是指示web 瀏覽器關於頁面使用哪個HTML 版本進行編寫的指令。
　

<html lang="en">

lang 是為了標示網頁使用的語系，方便讓系統更正確的解析、編碼，但具體來說會不會影響 SEO 什麼的，其實我也不太確定.. (被打
常見的編碼有：en、zh-cn(簡體語系)、zh-tw(繁體語系)...等
　

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <title>網頁標題</title>
</head>

charset="UTF-8"
字首碼，簡言之就是能避免網站產生奇怪的亂碼（例如中文、印尼文之類的非英語文字被錯誤解譯）
　
name="viewport"
能使網頁自動調整配合「使用者目前瀏覽的裝置螢幕大小」
因現在使用行動裝置瀏覽網頁的普及化，基本上這行一定要加入
　
title
即網頁標題
　　
　
另外建議所有開發者在寫網頁的時候，隨時使用瀏覽器的「開發人員工具」，可以得到更多在編輯器上沒辦法查詢的資訊唷
之後應該也會有一篇文章來詳細介紹一下？ ~~有機會的話..(被打~~