在上一節我們使用 VScode 編輯器使用快捷鍵驚嘆號後生成了 HTML 代碼的框架 ( 骨架 ) 你會發現多了一些東西，可能你會想之前我用筆記本寫就不需要這些東西，瀏覽器也可以選染我的網頁那是不是我也可以把它去掉呢?本篇文章就要來好好聊聊多出來的東西是做啥的和它的重要性。
- DOCTYPE 是什麼呢?
- lang 語言是什麼?
- charset 字符集是什麼?
DOCTYPE 是什麼?
其實 <!DOCTYPE> 是一個文檔類型的聲明英文原文叫做 ( document type declaration ) 有人又會縮寫成 ( DTD )，翻成中文有文件類型的宣告，會在開始寫 HTML 的開頭先寫上這行實際上它並不算是一個標籤 ( tag )。
如果還是不太懂可以想成，一開始你要告知你的瀏覽器說，我寫的這個文件是用哪個版本的 HTML 去寫的，因為有 HTML1、HTML2 到現在最新是HTML5，又或者是使用的是 XML 去寫的，總是要先告訴一下瀏覽器他們就好方便進行渲染。
小總結
<!DOCTYPE> 就是一開始聲明該文件是什麼東西，記住是寫在 HTML 標籤外，<!DOCTYPE> 裡頭通常會在寫你要用的 html 版本，如果不標註是哪個版本直接寫 HTML 的話會直接調用最新版本的 HTML，現在是出到 HTML5 版本。
注意:
- <!DOCTYPE> 文件宣告聲明寫在第一行，也就是 <html> 標籤之前。
- <!DOCTYPE> 不是屬於 HTML 標籤，它是文件聲明宣告
lang 語言是什麼?
在來我們往下看會發現奇怪 <html> 標籤裡頭怎麼多一個 lang 呢? 它是什麼意思雖然不知道 lang 是什麼意思不過你往後看應該是可以猜出來是什麼了，一看到 en 是不是 English? 沒錯就是顯示語言，也就是 lang 是用來定義當前文檔顯示的語言。
現在我們整理好思路了，en 就代表定義語言為英文，那 zh-TW 就是定義語言為繁體中文，簡單來說只要輸入 en 就是我們要讓整個頁面用英文網頁呈現，zh-TW 就是要讓網頁使用繁體中文呈現顯示。
那問題來了可以好好思考，我把 lang 定義成 en 使用英文來呈現網頁那我網頁裡有中文會不會不能顯示中文，只會呈現英文呢? 答案是可以的，不管你定義en也可以顯示中文，你定義 zh-TW 也可以在網頁顯示英文。
點我瞭解 小青如何每月多賺5位數台幣
小總結
在 html 標籤後面的 lang 就是英文 Language 的縮寫，lang 後是開始定義該網頁是何種語言為主，你要法語、英文、葡萄牙語、中文通通都可以並不會影響網頁顯示內容，但如果你是幫客戶做的話，要先和他們討論他們主要要使用何種語言來寫文章，假設8成中文2成英文那該網頁就是定義成中文網頁。
注意
- lang 後面是定義語言類型
- 就算定義了語言都還是可以呈現別種語言
- 定義語言主要是給瀏覽器看得，有的瀏覽器自帶翻譯提示功能
charset 字符集是什麼?
接下來我們來看看多了什麼，head 標籤裡頭多了一行 charset 它是什麼?它其實是兩個單字組合起來的 char 是字符 set 是集合，兩個合起來就有字符集的意思 charset 字符集的主要功能是給電腦、手機各種能夠解析識別和存儲各種文字所有設備理解該編碼。
你想想我們寫的網頁是不是會有很多文字先不管它是英文還中文，最終這些文字都要存到電腦、手機設備任何可以打開該網頁的設備，那這時候就需要大家有一定的儲存規定，所以 charset 字符集後面就是定義哪種類型的編碼。
編碼超多種，就跟語言一樣在以前編碼類型只有英文和俄文後來越來越多國家也需要解析該國的文字，那編碼可能就不適合他們國家，印度就有印度的法國就有法國的，有一天就有人發現不行現在要開啟網路時代 ( WWW誕生 ) 了，如果每個國家都一個代碼那網頁都無法解析就有人開始把很多國家語言或是特殊符號整理成字元編碼就不在那麼麻煩。
常見編碼
小總結
在那麼多代碼中也不用糾結要選什麼 charset 編碼，我們就直接使用 UTF-8 就好了那是因為 UTF-8 包含全世界的編碼，所有網頁內容是什麼文字都可以解析，UTF-8 又稱為萬國碼。
HTML 亂碼
如果你沒有寫 charset 字符集那一行你會發現你的網頁有時會顯示亂碼，為了不要增加不必要的麻煩，一定都會加上 charset 字符集以防出現亂碼。
總結
最後其實還有 charset 字符集下面一代碼我沒有講，他們主要的功能移動開發時候會用到，現在可以先忽略不用管它。
在這篇文章我們弄懂了 HTML 更多的細節 <!DOCTYPE> 的重要性、lang 語言是什麼還有為什麼要加 charset 字符集我相信現在你更加明白了，接下來我們就可以更加放心的進入 HTML 標籤的世界了!
點我瞭解 小青如何每月多賺5位數台幣其他相關文章推薦:
- 聯盟行銷賺錢 – 每月加薪真的可能嗎?
- 50種網路賺錢分析大攻略! 新手的你適合那些呢?
- 6大項0成本賺錢方法 ( 大收集 ) 利用VPN賺取最大報酬
- 4大類遊戲賺錢方法 ( 大收集 ) 真的能從遊戲賺錢呢?
- 【APP賺錢】BIGTIME賺錢從0開始學習 ( 全攻略 )
- 【HTML指南】Day01 – HTML是什麼? 入門有哪些細節?
- 【HTML指南】Day02 – Web標準是什麼?會影響全世界?
- 【HTML指南】Day03 – HTML語法規範，必看助你少走彎路
- 【HTML指南】Day04 – HTML基本結構，有哪些標籤呢?
- 【HTML指南】Day05 – VScode是什麼? 前端人員必裝?
- 【HTML指南】Day07 – HTML常用的標籤，不理解語意就慘了
- 【HTML指南】Day08 – HTML標題標籤用法，你用對了嗎?
能看到這裡通常只有 1％ 的人，很感謝您可以閱讀到這裡（鞠躬）
本篇文章歡迎社群分享，可按分享按鈕，讓更多的人知道此篇文章
如果是引用本篇文章任何段落請附上本篇文章連結即可唷！
嚴禁搬運整篇文章到你個人部落格、寫成新聞稿
這麼做你會被任何搜尋引擎懲罰 Ban 掉
如需合作請右上角服務項目 -> 聯繫我們
by 小青