iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 3
0
Modern Web

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

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

搖擺柴柴

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

當初沒想到這麼快就會把腦海中的梗用完,果真有梗當思無梗之苦呀../images/emoticon/emoticon16.gif
 
今天就來聊聊 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
    即網頁標題
      
     
    另外建議所有開發者在寫網頁的時候,隨時使用瀏覽器的「開發人員工具」,可以得到更多在編輯器上沒辦法查詢的資訊唷
    之後應該也會有一篇文章來詳細介紹一下? 有機會的話..(被打

https://ithelp.ithome.com.tw/upload/images/20171222/201076400sedzok8Ud.png

按下你的 F12 解放它吧(O

>>隊友任意門<<

我是小菜鳥阿陰,我們下次見!


上一篇
Day02 「抖出菜蟲?」── 菜鳥的前端奇幻之旅
下一篇
Day04 「Over my dead body」 ─ <body>裡面常見那些器官(欸
系列文
菜鳥前端奮鬥史(欸?30

尚未有邦友留言

立即登入留言